Versions Compared

Key

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

New in v1.4

Overview

A component "grade" is a form of type definition: a name for a particular 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.

Grades essentially build upon each other, and can be composed as needed. The following table describes the exiting grades offered by the Framework and how they relate to each other.

Component developers are free to define their own grades that may (or may not) be built upon any of these grades.

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. There are additional features provided by this component type specified on the Useful functions and events section of the Renderer Components page

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
javascriptjavascript
Wiki Markup
{div:class=floatRight}
{panel:title= On This Page| borderStyle=solid| borderColor=#ccc| bgColor=#fff}
{toc:minLevel=2|maxLevel=5}
{panel}
{div}

h2. Overview

A component "grade" is a form of type definition: a name for a particular 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.

Grades essentially build upon each other, and can be composed as needed. The following table describes the exiting grades offered by the Framework and how they relate to each other.

Component developers are free to define their own grades that may (or may not) be built upon any of these grades.

|| 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. There are additional features provided by this component type specified on the [Useful functions and events|http://wiki.fluidproject.org/display/docs/Renderer+Components#RendererComponents-Usefulfunctionsandevents] section of the [Renderer Components] page |

h2. 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:javascript}
fluid.defaults("fluid.uploader.demoRemote", {
    gradeNames: "fluid.eventedComponent",
    ...
});
{code}

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

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 created. See [#Initializing Graded Components] below for more information about the {{autoInit}} flag.

...


{code
:javascript
javascript
}
fluid.defaults("cspace.util.relationResolver", {
    gradeNames: ["fluid.modelComponent", "autoInit"],
    ...
});

Initializing Graded Components

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
javascriptjavascript
{code}

h2. Initializing Graded Components

h3. 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:javascript}
fluid.defaults("fluid.uploader.fileQueueView", {
    gradeNames: ["fluid.viewComponent", "autoInit"],
    ...
});
{code}

There are three typical [lifecycle| Component Lifecycle and autoInit] points in an autoInit component. The only "grade" to make use of any of them is "fluid.modelComponent". "fluid.modelComponent" specifies a preInitFunction to set the model and applier used by the component, and attaches them to the components "that".

h3.

...

 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



|| Grade || Initalization function to use ||
| {{littleComponent}} | {{[fluid.initLittleComponent()

...

modelComponent

|fluid.initLittleComponent]}} |
| {{modelComponent}} | {{[fluid.initLittleComponent()

...

eventedComponent

|fluid.initLittleComponent]}} |
| {{eventedComponent}} | {{[fluid.initLittleComponent()

...

viewComponent

|fluid.initLittleComponent]}} |
| {{viewComponent}} | {{[fluid.initView()

...

rendererComponent

...

fluid.initRendererComponent

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

Code Block
javascriptjavascript
|fluid.initView]}} |
| {{rendererComponent}} | {{[fluid.initRendererComponent]}} |

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

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