1 / 24

Fusion Overview

Fusion Overview. Paul Spencer CTO pspencer@dmsolutions.ca Jason Fournier Product Manager jfournier@dmsolutions.ca www.dmsolutions.ca/technology/fusion.html. What is Fusion?. Fusion is an application SDK for Web Mapping Open Source core engine and base widgets

hisano
Download Presentation

Fusion Overview

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Fusion Overview Paul Spencer CTO pspencer@dmsolutions.ca Jason Fournier Product Manager jfournier@dmsolutions.ca www.dmsolutions.ca/technology/fusion.html

  2. What is Fusion? • Fusion is an application SDK for Web Mapping • Open Source core engine and base widgets • Zero Programming (well, nearly) • Extensible development platform • Clean separation of interface from functionality • Highly customizable presentation • Standards-based • HTML, CSS, JavaScript, JSON, XML etc • OGC compatible

  3. Fusion Capabilities • Dynamic application generation from ApplicationDefinition resource and an HTML template • Supports MapGuide Tiles and Untiled overlayers • Internationalization support • Authentication integration • Functional parity with the AJAX viewer

  4. Components of Fusion • Core • Platform-independent (entirely javascript) • Provides main API for building applications • OpenLayers (www.openlayers.org) • Widgets • Discrete, independent functionality (zoom, pan, …) • Plug-’n-play (zero programming) • UI Library • Jx provides common application building blocks • Tabs, Menus, Buttons etc … • Prototype, Scriptaculous • Platform-specific plugins • MapGuide, MapServer, OGC, and potentially others

  5. Fusion Developers are: • Web designers • Work in DreamWeaver, other HTML editor • Use HTML, CSS, minimal javascript • Concerned primarily with aesthetics, layout, look and feel, usability • Web developers • Work in favourite IDE (Zend,text editor) • Use Javascript, PHP, ASP .NET, JSP • Concerned with functionality

  6. Why Fusion? • The AJAX viewer is: • not flexible • frames based • difficult to customize functionality • difficult to modify layout

  7. Fusion History • Started as an internal tool kit supporting DMSG Consulting • Initially targeted at MGOS only • Changed to generic core with platform-specific plugins for MGOS and MapServer

  8. Fusion History • Demo’d to ADSK, interest shown in having a more flexible framework • Negotiated integration with core development team

  9. MGOS Integration • Undergoing modification for integration with MGOS • ApplicationDefinition • JSON output in MGOS • New/modified widgets • Will be installed with existing viewer for several versions • Eventually deprecate existing viewer • Prebuilt templates/samples

  10. Fusion RoadMap • Sep 21, 2007 • Integrate code base into MGOS SVN • Oct 15, 2007 • Complete replication of existing AJAX viewer functionality (plus new stuff) • Q4, 2007 • OGC widget pack • LWE widget pack • Redlining widget pack

  11. Getting Fusion • For now, available from: • mapguide.osgeo.org/download/releases • Demo at: • demo01.dmsolutions.ca/mapguide/fusion/demo • Will be integrated into MGOS 2.0

  12. Creating a Fusion Application • Fusion needs two things to make an application: • An XML Application Definition • Typically ApplicationDefinition.xml • An HTML web page • called a Template in the docs

  13. Application Definition • New resource type for MGOS • Structured XML similar to WebLayout • Major blocks: • MapSet - lists maps available to the application • WidgetSet - relates widgets to a map • Widgets • Are the control block for a widget • Name tag is where the widget goes • Type tag identifies the widget to use

  14. Templates • A template is just an HTML file • Should have a valid doctype • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Uses ‘id’ of tags to identify where widgets go • Any tag will do • div, span, a, li are commonly used • Includes fusion.js • Calls Fusion.initialize()

  15. Example of a Template • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • <html> • <head> • <title>Simple Fusion Application</title> • <script type="text/javascript" src="../../../lib/fusion.js"></script> • <script type="text/javascript"> • window.onload = function() { Fusion.initialize(); } • </script> • </head> • <body> • <div id="ZoomIn"></div> • <div id="Map"></div> • </body> • </html>

  16. How does it Work? • Load config.xml • Load ApplicationDefinition.xml • Loop through WidgetSet/Widget and • Find elements by ID using Widget Name • Request widget javascript file • Load widget javascript files • Load widget dependencies • Create widgets • Create a Session

  17. Fusion Widgets • Navigation & Map State • Zoom, Pan, Legend, Layer Manager, Extent History, Overview Map • Selection • Rectangle, circle, polygon • Media • Print, download, DWF • Info • Cursor Position, MapTips, Scale, etc • Tasks • Buffer, Search, InvokeURL, About, Help, …

  18. Jx • JavaScript-based UI library • Open Source (MIT) www.jxlib.org • Cross-browser compatible • Provides basic building blocks for creating applications

  19. Using Jx in Fusion • Fusion uses: • Toolbar • Button • Menu • Tree • Layout • Application can use any Jx component to build the look and feel

  20. Customizing Jx • Jx components use • Simple, semantic HTML structures • UL, LI, A, DIV, SPAN, IMG • Tables are only for tabular data! • CSS 2 for presentation • CSS is ‘hack’ free • May use browser-specific stylesheets (IE) • Change entire look and feel through a single CSS style sheet (500-600 lines)

  21. Jx Builds On • Prototype • www.prototypejs.org • Javascript framework for class-driven development in an AJAX environment • Scriptaculous • script.aculo.us • Javascript visual effects library built on Prototype • Animation, drag-n-drop, ajax controls …

  22. OpenLayers • www.openlayers.org • OpenLayers is a javascript framework for creating tiled and untiled maps • Unique layering system allows combining many different map sources in a single map view • Advanced ‘Mashup’ capability • Active development community

  23. Questions? • Time for a quick demo?

More Related