[[PageOutline]]
= How To Customize Legend widget =

== Introduction ==

This !HowTo describes 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 as the !SelectionPanel widget.

== First method: customize by defining a function ==

This 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. 

'''Example''' 

 1. Create the javascript function implementation
{{{
function VerySimpleLegend() {
    var div = this.oLegend.domObj;

    for (var i=0; i< this.layerRoot.groups.length; i++) {
        var currentGroup = this.layerRoot.groups[i].groups;
       
        for (var j=0; j< currentGroup.length; j++) {
            var group = document.createElement('h2'); 
            group.innerHTML = currentGroup[j].groupName;
            div.appendChild(group);
       
            for (var k=0; k<currentGroup[j].layers.length; k++) {
                var span = document.createElement('span');
                span.style.paddingLeft = "10px";
                span.innerHTML = currentGroup[j].layers[k].layerName;
                div.appendChild(span);
            }
        }
    }
}
}}}

This example will only produce a list of all groups with its layers. 

 2. Configuration needs in the ApplicationDefinition.xml
{{{
<Widget xsi:type="WidgetType">
  <Name>maplayersTab</Name>
  <Type>Legend</Type>
  <StatusItem/>
  <Extension xsi:type="CustomContentType">
    <LegendRenderer>VerySimpleLegend</LegendRenderer>
  </Extension>
</Widget>
}}}


== Second method: customize by creating a renderer class ==

This 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''.

Basicly, 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 specific actions. (Fusion.Event.MAP_LOADED, Fusion.Event.MAP_RELOADED, Fusion.Event.MAP_LOADING). 

'''Example 1: simple renderer'''

{{{
Fusion.Widget.Legend.VerySimpleLegend = OpenLayers.Class(Fusion.Widget.Legend.LegendRenderer,  
{
    initialize : function(legend, widgetTag) {   
        Fusion.Widget.Legend.LegendRenderer.prototype.initialize.apply(this, [legend]);    
    },
    
    mapLoaded: function() {
        this.renderLegend();
    },
    
    mapReloaded: function() {
        this.renderLegend();
    },
    
    renderLegend: function() {
        var div = this.oLegend.domObj;
        div.innerHTML = "";
        for (var i=0; i< this.layerRoot.groups.length; i++) {
            var currentGroup = this.layerRoot.groups[i].groups;
            for (var j=0; j< currentGroup.length; j++) {
                var group = document.createElement('h2'); 
                group.innerHTML = currentGroup[j].groupName;
                div.appendChild(group);
                for (var k=0; k<currentGroup[j].layers.length; k++) {
                    var span = document.createElement('span');
                    span.style.paddingLeft = "10px";
                    span.innerHTML = currentGroup[j].layers[k].layerName;
                    div.appendChild(span);
                    // do something more complex.... produce table, bind events etc... 
                }
            }
        }
    }
});
}}}

Note that i haven't implemented the ''mapLoading'' function. This renderer just doesn't need to handle this event.

 2. Configuration needs in the ApplicationDefinition.xml

{{{
<Widget xsi:type="WidgetType">
  <Name>maplayersTab</Name>
  <Type>Legend</Type>
  <StatusItem/>
    <Extension xsi:type="CustomContentType">
      <LegendRenderer>Fusion.Widget.Legend.VerySimpleLegend</LegendRenderer>
    </Extension>
</Widget>
}}}