Changes between Version 2 and Version 3 of HowToCustomizeSelectionPanel
- Timestamp:
- 09/16/08 07:23:00 (16 years ago)
Legend:
- Unmodified
- Added
- Removed
- Modified
-
HowToCustomizeSelectionPanel
v2 v3 4 4 == Introduction == 5 5 6 This !HowTo describe how customize the !SelectionPanel widget for display the results 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. For customize the !SelectionPanel, you'll need to know the Selection API for get layers, features and values. (You can check [http://trac.osgeo.org/fusion/wiki/MapGuideTutorial#WorkingwithSelections here] to get more information on the current Selection API).6 This !HowTo describes how customize the !SelectionPanel widget for display the results 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. For customize the !SelectionPanel, you'll need to know the Selection API for get layers, features and values. (You can check [http://trac.osgeo.org/fusion/wiki/MapGuideTutorial#WorkingwithSelections here] to get more information on the current Selection API). 7 7 8 8 == First method: customize by defining a function == … … 69 69 70 70 2. Configuration needs in the ApplicationDefinition.xml 71 You'll need to modify the !SelectionPanel widget tag for enable the customization. By adding the ''!SelectionRenderer'' tag in the Extension section, you're telling to the !SelectionPanel to use your function instead of the default one. The widget ta b should now looklike:71 You'll need to modify the !SelectionPanel widget tag for enable the customization. By adding the ''!SelectionRenderer'' tag in the Extension section, you're telling to the !SelectionPanel to use your function instead of the default one. The widget tag should now looks like: 72 72 {{{ 73 73 <Widget xsi:type="WidgetType"> … … 85 85 This method let you define a special behavior for the !SelectionPanel. 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''. This method is also the best if you want to support '''pagination''' (displaying results by batches) in your results panel. 86 86 87 Basicly, creating a renderer class is not very complicated. You'll have to create a class that inherit from the '''Fusion.Widget.!SelectionPanel.!SelectionRenderer''' and implement these three functions: ''initialize'', ''updateSelection'' and ''clearSelection''. The first function is forinitialize the base class and initialize all specific properties of your renderer (creating div, button, image, adding CSS, etc.). The second will be binded to the Fusion.Event.MAP_SELECTION_ON event, and the third to Fusion.Event.MAP_SELECTION_OFF.87 Basicly, creating a renderer class is not very complicated. You'll have to create a class that inherit from the '''Fusion.Widget.!SelectionPanel.!SelectionRenderer''' and implement at least these three functions: ''initialize'', ''updateSelection'' and ''clearSelection''. The first function is to initialize the base class and initialize all specific properties of your renderer (creating div, button, image, adding CSS, etc.). The second will be binded to the Fusion.Event.MAP_SELECTION_ON event, and the third to Fusion.Event.MAP_SELECTION_OFF. 88 88 89 89 '''Example 1: simple renderer''' … … 168 168 }}} 169 169 170 This is a very simple renderer created with the function we'd use in the first method .I just bind the renderSelection function to handle results and display them. It's exactly the same thing that usethe first method. In this simple case, you should use the first method instead than create a class.170 This is a very simple renderer created with the function we'd use in the first method example.I just bind the renderSelection function to handle results and display them. It's exactly the same thing that using the first method. In this simple case, you should use the first method instead than create a class. 171 171 172 172 '''Example 2: complex renderer''' … … 316 316 }}} 317 317 318 As you can see, this example is more complex. I use the initialize method for initialize my html element, add some css style and bind some eventto the appropriate function of this class. I also add a previous/next button for navigate page to page because this renderer support the ''pagination''. So, i've set the !ResultsPerPage to 10 in the ApplicationDefinition.xml and all my pages will not exceed this limit.318 As you can see, this example is more complex. I use the initialize method for initialize my html element, add some css styles and bind some events to the appropriate function of this class. I also add a previous/next button for navigate page to page because this renderer support the ''pagination''. So, i've set the !ResultsPerPage to 10 in the ApplicationDefinition.xml and all my pages will not exceed this limit. 319 319 320 320 == Pagination == … … 337 337 '''resetPageIndexes()''': 338 338 339 This reset the page indexes for the pagination system and shouldbe called by your renderer on each selection updated.339 This reset the page indexes for the pagination system and have to be called by your renderer on each selection updated.
