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. <br><br>For this example lets use the legend widget. <br><br>
First add the new event obj, before the "OpenLayers.Class(Fusion.Widget"<br><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">// CODE BLOCK [legend.js] ---------------------------------</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(255, 0, 0);">Fusion.Event.LEGEND_LAYER_VIS_ON = Fusion.Event.lastEventId++;</span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);">Fusion.Event.LEGEND_LAYER_VIS_OFF = Fusion.Event.lastEventId++;</span><br style="color: rgb(51, 102, 255);">
<br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">Fusion.Widget.Legend = OpenLayers.Class(Fusion.Widget, {</span><br style="color: rgb(51, 102, 255);"><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">//END CODE BLOCK ---------------</span><br>
<br>Next bind this event to the init section of the class around line 70:<br><br><span style="color: rgb(51, 102, 255);">// CODE BLOCK [legend.js] ---------------------------------</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);">//console.log('Legend.initialize');</span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">Fusion.Widget.prototype.initialize.apply(this, [widgetTag, true]);</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> </span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">var json = widgetTag.extension;</span><br style="color: rgb(51, 102, 255);"><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(255, 0, 0);">this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_ON);</span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);">this.registerEventID(Fusion.Event.LEGEND_LAYER_VIS_OFF);</span><br style="color: rgb(51, 102, 255);">
<br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);">//END CODE BLOCK ---------------<br><br><font color="#000000">Now trigger the event in the legend class, for this we want to trigger it when the layer checkbox is clicked: around line 499:<br>
<br></font></span><span style="color: rgb(51, 102, 255);">// CODE BLOCK [legend.js] ---------------------------------</span><br><span style="color: rgb(51, 102, 255);"><font color="#000000"> <span style="color: rgb(51, 102, 255);">stateChanged: function(obj) {</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> if (obj.legend && obj.legend.checkBox) {</span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);"> if (obj.legend.checkBox.checked) {</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> <span style="color: rgb(255, 0, 0);">this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_ON, obj);</span></span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);"> obj.show();</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> } else {</span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);"> <span style="color: rgb(255, 0, 0);">this.triggerEvent(Fusion.Event.LEGEND_LAYER_VIS_OFF, obj);</span></span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> obj.hide();</span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);"> }</span><br style="color: rgb(51, 102, 255);"><span style="color: rgb(51, 102, 255);"> }</span><br style="color: rgb(51, 102, 255);">
<span style="color: rgb(51, 102, 255);"> }</span><br></font></span><span style="color: rgb(51, 102, 255);">//END CODE BLOCK ---------------</span><br><span style="color: rgb(51, 102, 255);"><font color="#000000"><br></font></span><font color="#000000">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. :<br>
<br></font><span style="color: rgb(51, 102, 255);">// CODE BLOCK ---------------------------------</span><br><font color="#000000"><span style="color: rgb(255, 0, 0);">var legend = Fusion.getWidgetsByType('Legend');</span><br style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);"> if (legend.length > 0) { // 0 is the first legend widget. </span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);"> legend[0].registerForEvent(Fusion.Event.LEGEND_LAYER_VIS_ON, layerON);</span><br style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);"> legend[0].registerForEvent(Fusion.Event.LEGEND_LAYER_VIS_OFF, layerOFF);</span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);"> }</span><br></font><span style="color: rgb(51, 102, 255);">// END CODE BLOCK ---------------------------------</span><br>
<font color="#000000"><br></font>and finally add your layerON and layerOff functions:<br><br><span style="color: rgb(51, 102, 255);">// CODE BLOCK ---------------------------------<br><span style="color: rgb(255, 0, 0);">function layerON(obj,resp){</span><br style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);"> console.dir(resp);</span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);">}</span><br style="color: rgb(255, 0, 0);"><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);">function layerOFF(obj,resp){</span><br style="color: rgb(255, 0, 0);">
<span style="color: rgb(255, 0, 0);"> console.dir(resp);</span><br style="color: rgb(255, 0, 0);"><span style="color: rgb(255, 0, 0);">}</span><br></span><span style="color: rgb(51, 102, 255);">// END CODE BLOCK ---------------------------------</span><br>
<br>That's it you should see the object passed back from the widget to the application. <br><br>Hope this helps. <br><br>Cheers<br><br>Paul D. <br>