Changes between Initial Version and Version 1 of HowToCustomizeLegend


Ignore:
Timestamp:
Jul 7, 2008, 12:14:09 PM (16 years ago)
Author:
aboudreault
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • HowToCustomizeLegend

    v1 v1  
     1[[PageOutline]]
     2= How To Customize !Legend widget =
     3
     4== Introduction ==
     5
     6This !HowTo describe how customize the !Legend widget for display the groups/layers the way you want. In this !HowTo,  we'll see what are the two possible methods to customize this widget and make a example for each. It's basicly the same pattern than the !SelectionPanel widget.
     7
     8== First method: customize by defining a function ==
     9
     10This allow you to create a javascript function that will be executed on MAP_LOADED/MAP_RELOADED events. In this function, you can access to the groups/layers via the '''this.layerRoot''' property.
     11
     12'''Example'''
     13
     14 1. Create the javascript function implementation
     15{{{
     16function VerySimpleLegend() {
     17    var div = this.oLegend.domObj;
     18
     19    for (var i=0; i< this.layerRoot.groups.length; i++) {
     20        var currentGroup = this.layerRoot.groups[i].groups;
     21       
     22        for (var j=0; j< currentGroup.length; j++) {
     23            var group = document.createElement('h2');
     24            group.innerHTML = currentGroup[j].groupName;
     25            div.appendChild(group);
     26       
     27            for (var k=0; k<currentGroup[j].layers.length; k++) {
     28                var span = document.createElement('span');
     29                span.style.paddingLeft = "10px";
     30                span.innerHTML = currentGroup[j].layers[k].layerName;
     31                div.appendChild(span);
     32            }
     33        }
     34    }
     35}
     36}}}
     37
     38This example will only produce a list of all groups with its layers.
     39
     40 2. Configuration needs in the ApplicationDefinition.xml
     41{{{
     42<Widget xsi:type="WidgetType">
     43  <Name>maplayersTab</Name>
     44  <Type>Legend</Type>
     45  <StatusItem/>
     46  <Extension xsi:type="CustomContentType">
     47    <LegendRenderer>VerySimpleLegend</LegendRenderer>
     48  </Extension>
     49</Widget>
     50}}}
     51
     52
     53== Second method: customize by creating a renderer class ==
     54
     55This method let you define a special behavior for the !Legend. It can be a little bit more complicated than the first one but it can be very useful for those who have to make a complex behavior. It also keep a structured application using the ''Object Oriented programming''.
     56
     57Basicly, creating a renderer class is not very complicated. You'll have to create a class that inherit from the '''Fusion.Widget.!Legend.!LegendRenderer''' and implement these five functions: ''initialize'', ''renderLegend'', ''mapLoaded'', ''mapReloaded'', ''mapLoading''. The first function is for initialize the base class and initialize all specific properties of your renderer (creating div, button, image, adding CSS, etc.). The second is the main function that will draw the legend. The last three functions are only for handle the events and do specifics actions. (Fusion.Event.MAP_LOADED, Fusion.Event.MAP_RELOADED, Fusion.Event.MAP_LOADING).
     58
     59'''Example 1: simple renderer'''
     60
     61{{{
     62Fusion.Widget.Legend.VerySimpleLegend = OpenLayers.Class(Fusion.Widget.Legend.LegendRenderer, 
     63{
     64    initialize : function(legend, widgetTag) {   
     65        Fusion.Widget.Legend.LegendRenderer.prototype.initialize.apply(this, [legend]);   
     66    },
     67   
     68    mapLoaded: function() {
     69        this.renderLegend();
     70    },
     71   
     72    mapReloaded: function() {
     73        this.renderLegend();
     74    },
     75   
     76    renderLegend: function() {
     77        var div = this.oLegend.domObj;
     78        div.innerHTML = "";
     79        for (var i=0; i< this.layerRoot.groups.length; i++) {
     80            var currentGroup = this.layerRoot.groups[i].groups;
     81            for (var j=0; j< currentGroup.length; j++) {
     82                var group = document.createElement('h2');
     83                group.innerHTML = currentGroup[j].groupName;
     84                div.appendChild(group);
     85                for (var k=0; k<currentGroup[j].layers.length; k++) {
     86                    var span = document.createElement('span');
     87                    span.style.paddingLeft = "10px";
     88                    span.innerHTML = currentGroup[j].layers[k].layerName;
     89                    div.appendChild(span);
     90                    // do something more complex.... produce table, bind events etc...
     91                }
     92            }
     93        }
     94    }
     95});
     96}}}
     97
     98Note that i haven't implemented the ''mapLoading'' function. This renderer just doesn't need to handle this event.
     99
     100 2. Configuration needs in the ApplicationDefinition.xml
     101
     102{{{
     103<Widget xsi:type="WidgetType">
     104  <Name>maplayersTab</Name>
     105  <Type>Legend</Type>
     106  <StatusItem/>
     107    <Extension xsi:type="CustomContentType">
     108      <LegendRenderer>Fusion.Widget.Legend.VerySimpleLegend</LegendRenderer>
     109    </Extension>
     110</Widget>
     111}}}