Practical Introduction to Fusion

Description

The Practical Introduction to Fusion was a lab given by Julien-Samuel Lacroix and Yewondwossen Assefa at the FOSS4G 2008 in Cape Town, South Africa. It includes a quick introduction to Fusion and an application that evolve as the lab go on. Attendies of all technical level are aimed by this presentation as it contains really simple example and more complex ones.

Once the application is installed, the first few slides will present Fusion and its core components. The real exercises begin at the slide labeled Map widget. From there there's one slide per exercise.

The lab index.html page contains links to the 8 steps of the lab. One could modify the first page (page1.html) along the way and end up with the equivalent of the last page in the end. The other option would be to simply look at the code to get the general idea.

Instructions

While doing the lab, you can always go to the corresponding HTML or XML page to see the end result or to copy/paste some code. The first slide correspond to page1.html and ApplicationDefinition1.xml, the second slide to page2.html and ApplicationDefinition2.xml and so on...

The lab begins at the slide titled Map widget.

1. Open the page1.html and the ApplicationDefinition.xml file
2. Change the Id of the Map div and the name of the MapWidget accordingly
   Test your application
Change slide to Navigator
3. Add the Navigator widget in the ApplicationDefinition.xml
4. Add the Navigator Div in your HTML page
   Test your application
Change slide to Map Navigation
5. Add the Pan, ZoomInFixed, ZoomOutFixed and ZoomInRectangle widget in your ApplicationDefinition.xml (See ApplicationDefinition3.xml for a reference)
6. Add the corresponding Div in you HTML page (See page3.html)
   
7. Add the jxskin-border.css CSS in your page
   Test your application
Change slide to Container
8. Copy the toolbar widget from ApplicationDefinition4.xml
9. Replace the button Divs by a single Toolbar Div
   Test your application
Change slide to Legend
10. Add a Legend widget in the XML file and a Div in your HTML
    Test your application
Change slide to Query
11. Add a Selection and SelectionPanel in your ApplicationDefinition.xml (Copy from ApplicationDefinition6.xml)
12. Add the Selection widget in your Toolbar widget definition (in ApplicationDefinition.xml)
13. Add the SelectionPanel Div in your HTML
    Test your application
Change slide to Custom selection results
14. Here, it may be better to simply take the page7.html file. The version of fusion used is not the same and there's a lot of code to copy.
15. Add the Extension tag in your SelectionPanel widget definition
16. Modify the displaySelection() JavaScript function (in page7.html) to display more information. Currently it only display the Park name, change it to display the Area as well
    Test your application
Change slide to Custom legend
17. Use page8.html to make sure you import the new JavaScript functions
18. Add the Extension tag in your Legend widget definition
19. Modify the VerySimpleLegend() JavaScript function to make it nicer
    Test your application
Change slide, that was the last exercise

Installation

If don't have a Fusion installed:
Install MS4W ​MS4W. Extract foss4g08_fusionlab_ms4w.zip at the root of your MS4W installation.

If you already have a Fusion installed:
To install this lab, you need to have a working Fusion installation with MapServer and the GMap demo. The ​MS4W or ​OSGeo4W packages can do the this job well really well.

Once it's done, extract the attached foss4g08_fusionlab_file_only.zip file in a web visible directory.

Note that all the HTML page point to /fusion/ and /fusion-1.1.0-rc1/ for the root of Fusion. You may need to change that to fit your Fusion installation.

Content

• foss4g08_fusionlab_file_only.zip
  • Contains only the HTML, XML and images to make the lab work
• foss4g08_fusionlab_ms4w.zip contains:
  • Fusion 1.0
  • Fusion 1.1 RC1
  • This Fusion lab
  • The GMap demo
• FusionIntro.odp
  • Open Office slides
• FusionIntro.pdf
  • Printable version of the slide
• Jx.pdf
  • Really good Jx description by Paul Spencer