Versions Compared

Key

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

This tutorial has not yet been updated to reflect post-1.4 Framework changes.

Div
classtutorial-linear-nav

Span
classtutorial-nav-left
Previous: Pick a component type
Span
classtutorial-nav-centre
Up to overview
Span
classtutorial-nav-right
Next: Model Components

Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleOn This Page
borderStylesolid
Table of Contents
maxLevel5
minLevel2
maxLevel5
Div
classfloatRight
Panel
borderColor#ccc
bgColor#fff
titleSee Also
borderStylesolid

Component Grades
fluid.defaults
Options Merging
IoC - Inversion of Control
Component Lifecycle and autoInit

...

Code Block
javascript
javascript

fluid.defaults("tutorials.simpleComponent", {
    gradeNames: ["fluid.littleComponent"],
    option1: "default value 1",
    ...
});

...

Code Block
javascript
javascript

fluid.defaults("tutorials.currencyConverter", {
    gradeNames: ["fluid.littleComponent"],
    exchangeRate: 1.035
});

...

Code Block
javascript
javascript

fluid.defaults("fluid.inlineEdit", {
    ...
    useTooltip: true,
    tooltipText: "Select or press Enter to edit",
    tooltipDelay: 1000, // in milliseconds
    ...
});

...

Code Block
javascript
javascript

fluid.defaults("fluid.progress", {
    ...
    showAnimation: {
        params: {
            opacity: "show"
        }, 
        duration: "slow"
    }, // equivalent of $().fadeIn("slow")
        
    hideAnimation: {
        params: {
            opacity: "hide"
        }, 
        duration: "slow"
    }, // equivalent of $().fadeOut("slow")
    ...
});

...

Code Block
javascript
javascript

// The global namespace
var tutorial = tutorial || {};

(function ($, fluid) {

    // a creator function for a little component
    // creator functions are typically named by the component name itself
    tutorials.sampleComponent = function (options) {
        // call the framework component initialization function
        var that = fluid.initLittleComponent("tutorials.sampleComponent", options);

        // attach any public methods to the 'that' object
        that.publicFunction = function () {
            // ...
        };

        return that;
    };

})(jQuery, fluid_1_3);

...

Code Block
javascript
javascript

// creator function for the currency converter component
tutorials.currencyConverter = function (options) {
    var that = fluid.initLittleComponent("tutorials.currencyConverter", options);

    // note that component methods have access to the values stored in 'options'
    // - the ones provided in the defaults and possibly overriden by implementors
    that.convert = function (amount) {
        return amount * that.options.exchangeRate;
    }
    return that;
};

...

Code Block
javascript
javascript

fluid.defaults("tutorials.simpleComponent", {
    gradeNames: ["fluid.littleComponent", "autoInit"],
    option1: "default value 1",
    ...
});

...

Code Block
javascript
javascript

fluid.defaults("tutorials.simpleComponent", {
    gradeNames: ["fluid.littleComponent", "autoInit"],
    option1: "default value 1",
    ...
    finalInitFunction: "tutorials.simpleComponent.finalInit"
});

// the 'final init' function, which adds public methods to the component
tutorials.simpleComponent.finalInit = function (that) {
    that.publicFunction = function () {
        ...
    };
};

...

Code Block
javascript
javascript

fluid.defaults("tutorials.currencyConverterAuto", {
    gradeNames: ["fluid.littleComponent", "autoInit"],
    exchangeRate: 1.035,
    finalInitFunction: "tutorials.currencyConverterAuto.finalInit"
});

// The final init function
tutorials.currencyConverterAuto.finalInit = function (that) {
    that.convert = function (amount) {
        return amount * that.options.exchangeRate;
    }
};

...