Overview

A component grade extends the notion of component defaults (fluid.defaults). In fact, every fluid.defaults directive introduces a grade into the system of Fluid Infusion components, which can be built on to derive further grades/components. This derivation occurs by mentioning the name of the original grade within the gradeNames section of the derived component.

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

The Infusion Framework already contains several predefined component grades that normally form the initial building blocks for external components and grades. The following table describes these grades and how they relate to each other.

autoInit

fluid.littleComponent

fluid.modelComponent

fluid.eventedComponent

fluid.viewComponent

fluid.rendererComponent

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 an array of strings.

NOTE: In the examples 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. The autoInit flag will soon become the default. Always use the "autoInit" flag, unless you have a very good reason not to.

fluid.defaults("fluid.uploader.demoRemote", {
    gradeNames: ["fluid.eventedComponent", "autoInit"],
    ...
});

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

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

Initializing Graded Components

The Framework offers support for automatic initialization of graded component through autoInit. When the autoInit flag is added to the gradeNames array, the Framework will create the creator 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: Always use the "autoInit" flag, unless you have a very good reason not to.

Combining Grades

Since the fluid.defaults directive introduces a grade into the system, various components can be composed to create new ones. Options, fields and methods introduced by the ancestor grades will be merged and preserved. The merging happens, firstly in hierarchical order (grades comprising the ancestor grade are resolved before the actual component grades resolution) and secondly in the left-to-right order (defaults from the grade on the right tacking precedence over the defaults from the grade on the left, more details can be found here - FLUID-5085 - Getting issue details... STATUS ). For example:

fluid.defaults("fluid.componentOne", {
    gradeNames: ["fluid.modelComponent", "autoInit"],
    model: {
		field1: true
	},
	option1: "TEST"
});



fluid.defaults("fluid.componentTwo", {
    gradeNames: ["fluid.modelComponent", "autoInit"],
    model: {
		field1: false,
		field2: true
	},
	option2: "TEST2"
});

fluid.defaults("fluid.combinedComponent", {
    gradeNames: ["fluid.componentOne", "fluid.componentTwo"]
    // The actual component defaults will look like this:
    // model: {
    //     field1: false,
    //     field2: true
    // },
    // option1: "TEST",
    // option2: "TEST2"
});  

NOTE: All the material from the component defaults will be merged by the framework, that includes things like events, listeners, members, components, invokers and model.

Dynamic Grades

Dynamic grades is another facility for specifying component grade names. When using the dynamic grades, developer can specify additional grade names based on dynamic material (potentially not known at the time of definition) such as a function (method or invoker) or a property in component options. For example:

fluid.defaults("fluid.componentWithDynamicGrade", {
    gradeNames: ["fluid.littleComponent", "autoInit", "{that}.getDynamicGradeName"],
    invokers: {
        getDynamicGradeName: "fluid.componentWithDynamicGrade.getDynamicGradeName"
    }
});

// When resolved our fluid.componentWithDynamicGrade will have all the functionality of a fluid.modelComponent grade.
// NOTE: developers can also return an array of grade names. These grade names can be custom grade names.
fluid.componentWithDynamicGrade.getDynamicGradeName = function () {
    return "fluid.modelComponent";
};

Another way to specify dynamic grades is similar to passing other options to the component at the time of initialization. The user can specify gradeNames option for any component and list an array of one or more grades that will be added to the base component dynamically. For example:

fluid.defaults("fluid.withoutDynamicGrade", {
    gradeNames: ["fluid.littleComponent", "autoInit"]
});

// Dynamically supply a fluid.modelComponent grade to fluid.withoutDynamicGrade.
var component = fluid.withoutDynamicGrade({
    gradeNames: ["fluid.modelComponent"]
});
// At this point component will have a model and the corresponding applier fields that are defined in fluid.modelComponent grade.