Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Component Grades

A component "grade" is a form of type definition, or : a name for a particular block of material that is supplied to fluid.defaults which is merged with the creator-specific block of defaults for a particular component. Component grades offer no runtime effect of a component, but does enable reliable and readable construction of a component after instantiation. The "autoInit" grade tells the IoC framework to automatically resolve the component from the inferred graded material without the need to write the component's actual creator function.

Available Grades

The current framework supports the following grades:

How to use component grades

...

collection of default configuration options. Developers can identify a grade for their component: this will add the default configuration options to those defined by the developer, as well as automate some things like the creation of event firers. If the special flag "autoInit" is used in conjunction with a component grade, the actual creation of the component itself is automated: The develop does not need to write a creator function.

Grades essentially build upon each other, and can be composed as needed. The following table describes the available grades and how they are related to each other.

Grade Name

Description

littleComponent

A "little" component is the most basic component: it supports options merging.

modelComponent

A "model" component is a little component that additionally provides supports for any model defined in the components options.

eventedComponent

An "evented" component is a little component that additionally instantiates event firers based on events declared in the options.

viewComponent

A "view" component is an evented model component that supports a view.

rendererComponent

A "renderer" component is a vew component that bears a renderer.

IoCRendererComponent

An "IoC renderer" component is ....

Note
titleTo Do

Need to specify what defaults each grade defines

Specifying A Grade

A component's grade should be specified using the gradeNames option in the components defaults block, as shown in the examples below. The gradeNames option is a string or array of strings.

Code Block
javascript
javascript
fluid.defaults("fluid.uploader.html5Strategy.demoRemote", {
    gradeNames: "fluid.eventedComponent",
    ...
});
Code Block
javascript
javascript

fluid.defaults("cspace.messageBarImpl", {
    gradeNames: ["fluid.rendererComponent"],
    ...
});

In the example below, the autoInit flag is not actually a grade, but is added to the gradeNames array to control how the component is create. See #Initializing Graded Components below for more information about the autoInit flag.

Code Block
javascript
javascript

fluid.defaults("cspace.util.relationResolver", {
    gradeNames: ["fluid.littleComponentmodelComponent", "autoInit"],
    ...
 components: {
        local:});

Initializing Graded Components

Manually

Developers may choose to write their own component creator function for their graded component. If they do, the first thing their creator function should do is call the appropriate initialization function, assigning the returned object and continuing to configure it as desired (for example, to add methods to it).

Grade

Initalization function to use

littleComponent

fluid.initLittleComponent()

modelComponent

fluid.initLittleComponent()

eventedComponent

fluid.initLittleComponent()

viewComponent

fluid.initView()

rendererComponent

fluid.initRendererComponent

IoCRendererComponent

fluid.initRendererComponent

The following example shows the use of fluid.initView to initialize a view component:

Code Block
javascript
javascript

fluid.defaults("cspace.tabs", {
    gradeNames: ["fluid.viewComponent"],
    ...
});
cspace.tabs = function (container, options) {
    var that =  }
fluid.initView("cspace.tabs", container, options);
    that.refreshView = function remote:() {
       ...
    };
    ...
};

Automatically

The Framework offers support for automatic initialization of graded component through autoInit. If the autoInit flag is added to the gradeNames array, the Framework will create the graded function automatically – the developer does not need to write a creator function.

To use the autoInit flag, add it to the array of gradeNames, as shown below:

Code Block
javascript
javascript
fluid.defaults("fluid.uploader.fileQueueView", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    ...
});
Note
titleTo Do

Add information about default initialization functions, etc.