A component grade extends on the notion of component defaults (fluid.defaults). Where a fluid.defaults is used to store and retrieve a component's default settings, the grade is a form of type definition that represents a collection of component defaults and is intended for reuse in other component's defaults definition. In other words, a particular component's fluid.defaults can be called a grade when the component name is used as a base grade within another component's defaults.

Developers can create their own fluid.defaults / grades as well as use them to build upon each other, and compose them as needed.

Infusion Framework already contains several predefined component grades that are intended to be used (but do not have to be) as the initial building blocks for the external components and grades. The following table describes these grades and how they relate to each other.

Grade Name



A "little" component is the most basic component: it supports options merging with defaults (Little Components).


A "model" component is already a little component that additionally provides supports for a component's model, defined in the components options, and operations on it (Model Components).


An "evented" component is already a little component that additionally instantiates event firers based on default framework events (onCreate, onDestroy, onDetach) and events declared in the options (Evented Components).


A "view" component is already an evented and a model component that is DOM aware and supports a view (View Components).


A "renderer" component is already a vew component that bears a renderer. There are additional features provided by this component grade 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.

fluid.defaults("fluid.uploader.demoRemote", {
    gradeNames: "fluid.eventedComponent",
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 created. See #Initializing Graded Components below for more information about the autoInit flag.

fluid.defaults("cspace.util.relationResolver", {
    gradeNames: ["fluid.modelComponent", "autoInit"],

NOTE: The autoInit flag is the preferred method of component creation, and will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

Initializing Graded Components


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:

fluid.defaults("fluid.uploader.fileQueueView", {
    gradeNames: ["fluid.viewComponent", "autoInit"],

NOTE: The autoInit flag is the preferred method of component creation, and will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

There are three typical lifecycle 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".


Developers may, in exceptional circumstances, 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).


Initalization function to use











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

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