Adding Events In Fusion Widgets

I though I would give a little walk through on how to add events in Fusion Widgets for those of you who want to "extend" events in some of the widgets.

For this example lets use the legend widget.

First add the new event obj, before the "OpenLayers.Class(Fusion.Widget"

Fusion.Event.LEGEND_LAYER_VIS_ON = Fusion.Event.lastEventId++;
Fusion.Event.LEGEND_LAYER_VIS_OFF = Fusion.Event.lastEventId++;

// CODE BLOCK [legend.js] ---------------------------------
Fusion.Event.LEGEND_LAYER_VIS_ON = Fusion.Event.lastEventId++;
Fusion.Event.LEGEND_LAYER_VIS_OFF = Fusion.Event.lastEventId++;

Fusion.Widget.Legend = OpenLayers.Class(Fusion.Widget,  {

//END CODE BLOCK ---------------

Next register this event to the init section of the class around line 70:

this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_ON);
this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_OFF);

// CODE BLOCK [legend.js] ---------------------------------
//console.log('Legend.initialize');
Fusion.Widget.prototype.initialize.apply(this, [widgetTag, true]);
       
var json = widgetTag.extension;

this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_ON);
this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_OFF);

//END CODE BLOCK ---------------

Now trigger the event in the legend class, for this we want to trigger it when the layer checkbox is clicked: around line 499:

this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_ON, obj);
this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_OFF, obj);

// CODE BLOCK [legend.js] ---------------------------------
    stateChanged: function(obj) {
        if (obj.legend && obj.legend.checkBox) {
            if (obj.legend.checkBox.checked) {
                this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_ON, obj);
                obj.show();
            } else {
                this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_OFF, obj);
                obj.hide();
            }
        }
    }
//END CODE BLOCK ---------------

Now in your supporting js for the Fusion application you should have a function called when fusion is initialized. inside this function you will need to registerForEvent on the legend widget to handle this trigger. :

// CODE BLOCK ---------------------------------
var legend = Fusion.getWidgetsByType('Legend');
      if (legend.length > 0) { // 0 is the first legend widget.
            legend[0].registerForEvent(Fusion.Event.LEGEND_LAYER_VIS_ON, layerON);
            legend[0].registerForEvent(Fusion.Event.LEGEND_LAYER_VIS_OFF, layerOFF);
      }
// END CODE BLOCK ---------------------------------

and finally add your layerON and layerOff functions:

// CODE BLOCK ---------------------------------
function layerON(obj,resp){
    console.dir(resp);
}

function layerOFF(obj,resp){
    console.dir(resp);
}
// END CODE BLOCK ---------------------------------

That's it you should see the object passed back from the widget to the application.