Changes between Initial Version and Version 1 of Cookbook/Fusion/Events

Timestamp:

Jun 19, 2008, 7:22:10 AM (16 years ago)

Author:

pdeschamps

Comment:

--

Cookbook/Fusion/Events

@@ +1 @@
+= 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"
+
+{{{
+// 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 bind this event to the init section of the class around line 70:
+
+{{{
+// 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:
+
+{{{
+// 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.