Versions Compared

Key

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

...

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

Component Grades
Infusion Event System

...

Code Block
javascript
javascript

fluid.defaults("tutorials.eventedComponent", {
    gradeNames: ["fluid.eventedComponent", "autoInit"],
    ...
    events: {
        onAnAction: null,
        afterAnAction: null,
        onAnotherAction: "preventable",
        afterAnotherAction: null
    }
});

...

  • Event naming conventions: You can call your events anything you like, but Infusion has adopted the convention of prefacing events with on or after to indicate whether or not the event is being fired before some action is taken, or after the action has completed.
  • Event types: By default (the null type), events are fired to everyone listening. You can alternatively select one of two other special cases:
    • unicast (deprecated): Fired to only the first registered listener.
    • preventable: Listeners can cancel the relevant action and prevent other listeners from hearing about it. In the example above, onAnotherAction is a preventable event.

...

Code Block
javascript
javascript

// Declare the events in the defaults
fluid.defaults("tutorials.recordEditor", {
    gradeNames: ["fluid.eventedComponent", "autoInit"],
    ...
    events: {
        afterSave: null,
        onRemove: "preventable",
        afterRemove: null
    }
});

...

Code Block
javascript
javascript

// Declare the events in the defaults
fluid.defaults("tutorials.recordEditor", {
    gradeNames: ["fluid.eventedComponent", "autoInit"],
    events: {
        afterSave: null,
        onRemove: "preventable",
        afterRemove: null
    },
    finalInitFunction: "tutorials.recordEditor.finalInit"
});

// Add public methods that will fire events when they do things
tutorials.recordEditor.finalInit = function (that) {
    that.save = function () {
        // save stuff
        // ...
        // let anyone listening know the save has happened:
        that.events.afterSave.fire();
    };
    
    that.remove = function () {
        // see if anyone listening objects to the removal:
        var prevent = that.events.onRemove.fire();
        if (prevent === false) {
            // a listener prevented the move,
            // don't do it
        }
        else {
            // no one objects, go ahead and remove
            // ...
            // let listeners know that the remove has completed
            that.events.afterRemove.fire();
        }
    };
};

...

Code Block
javascript
javascript

fluid.defaults("tutorials.currencyConverter", {
    gradeNames: ["fluid.modelComponent", "fluid.eventedComponent", "autoInit"],
    model: {
        rates: {
            euro: 0.712,
            yen: 81.841,
            yuan: 6.609,
            usd: 1.02,
            rupee: 45.789
        },
        currentSelection: "euro",
        amount: 0,
        convertedAmount: 0
    },
    events: {
        conversionUpdated: null
    },
    finalInitFunction: "tutorials.currencyConverter.finalInit"
});

tutorials.currencyConverter.finalInit = function (that) {

    // Add methods to the component object
    that.updateCurrency = function (newCurrency) {
        that.applier.requestChange("currentSelection", newCurrency);
    };

    that.updateRate = function (currency, newRate) {
        that.applier.requestChange("rates." + currency, newRate);
    };

    that.convert = function (amount) {
        var convertedAmount = amount * that.model.rates[that.model.currentSelection];
        that.applier.requestChange("convertedAmount", convertedAmount);
        return amount;
    };

    that.applier.modelChanged.addListener("convertedAmount", function (model, oldModel, changeRequest) {
        that.events.conversionUpdated.fire(model.convertedAmount);
    });
};

...