Page Comparison

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

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

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

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

// 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);

// 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;
};

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

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 () {
        ...
    };
};

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;
    }
};