Mashup your Application

1. Mashup your Application Presented by: Jane Raymond

2. Presentation Outline • Overview • Flash • Charting Alternatives • HTML Editor Control • Google Maps & Directions

3. Overview • Mashup • “A web page or application that uses and combines data, presentation or functionality from two or more sources to create new services.” - Wikipedia.org

4. Overview • External controls have traditionally been available to NOMADS applications through the COM interface -- but -- • How do we make external controls available to iNomads? • How do we make non COM-based external features available to NOMADS and iNomads?

5. Overview • iNomads OCX emulation • PxPlus control with similar properties/methods. • Chart emulation • Interchangeable PxPlus chart classes • Pvx Plus Extended Controls • Available through the Nomads COM interface • Select from a list of Pvx Plus Controls in addition to the list of Activex Controls

6. Shockwave Flash • iNomads OCX Emulation for Flash • Flash (ShockwaveFlash.ShockwaveFlash) controls accessible interchangeably to both the Nomads and iNomads environments: • Nomads - Processed as a COM control • iNomads - Processed through an intermediary PxPlus control with similar properties and methods.

7. Charting Alternatives • Charting alternatives to the internal chart control • Richer UI experience • Interactive, animated charts • Additional formats available • Scatter, Donut, Gauge • Little or no code changes to switch

8. Charting Alternatives Charting options: Standard internal charting control (Nomads only) Flash-based Web/Internet based HTML5 canvas graph library

9. Charting Alternatives Standard internal charting control (Nomads only) N/A N/A

10. Charting Alternatives Flash-based • ‘FusionCharts Free’ (free open-source) • ‘FusionCharts’ (commercially available) N/A N/A N/A

11. Charting Alternatives Web/Internet based Google Visualization API charts

12. Charting Alternatives HTML5 canvas graph library rGraph charts

13. Charting Alternatives • Chart emulation • Define chart using Nomads chart definition interface • Interchangeable PxPlus chart classes • Support for common control properties • BackColor$, Col, Cols, CtlName$, Enabled, Fmt$, Height, Left, Line, Lines, Sep$, SepLoad$, TextColor$, Top, Visible, Width, _PropList$, _PropSep$, _PropValue$ • Support for chart-specific properties • CurrentPoint, CurrentSet, LegendLocation$, NumPoints, NumSets, RangeMax, RangeMin, SelectIndex, Title1$, Title2$, xAxisTitle$, yAxisTitle$ • Extra features supported through properties

14. Charting Alternatives • To select a chart type: • NOMADS Set the global variable %Nomad_Chart$ to: “” (Default - Standard internal chart control) “fusioncharts”, “fusionfree”, “google” or “rgraph” • iNomads Pick a charting object for the template (default is fusionfree) • iNomads Administration - System Administration Functions • Template Settings – Options • Miscellaneous - Charting object to use

15. Charting Alternatives • Documentation available at: • http://wiki.pvxplus.com General Topics Charting Alternatives in PxPlus – Fusion, Google and Rgraph Charts

16. HTML Editor Control • TinyMCE HTML editor control • Allows editing of HTML documents on panel • Editing interface resembles how the page will be displayed in the browser • Does not require any HTML knowledge

17. HTML Editor Control • Extended Pvx Plus Control • Defined in NOMADS as an External Tool (COM control) • Pvx Plus Controls • Tinymce Editor Control

18. HTML Editor Control • HTML editor properties • toolbarAlign$ • Left, right, center • toolbarLocation$ • Top, bottom, external (external is iNomads only) • toolbarLayout$ • Choose from four predefined layouts • Simple, advanced, extended and fullpage • Customizable to create your own toolbar layout

19. HTML Editor Control • ‘Value$ property • Easy access to resultant HTML • Save/restore HTML to text files as desired • To save, read ‘Value$ and write to file • To load, read file and set ‘Value$

20. HTML Editor Control • Documentation available at: • http://wiki.pvxplus.com General Topics Extended Nomads Objects – TinyMCE HTML Editor • Information on the TinyMCEJavascript WYSIWYG Editor available at: • http://tinymce.moxiecode.com

21. Google Maps Interface Google map control Provides ability to insert map onto panel (Requires internet access)

22. Google Maps Interface • Features • UI Control • Control map type - roadmap, satellite, hybrid or terrain • Disable various map user interface features • Zoom, map type, draggability, scrollwheel, etc. • Click events • Click, rightClick, markerClick

23. Google Maps Interface • Features (continued) • Marker support • Infowindow support • Geocode Functions • Converts street addresses to latitude, longitude and vice versa

24. Google Maps Interface • Given a start point, an end point and optional waypoints, displays route on the map and directions in a directions pane • Supports different travel modes (driving, walking, bicycling), route options (avoid highways, tolls, etc.), route alternatives, waypoint optimization, etc. • Directions Requests Version 10 Feature

25. Google Maps Interface • Extended Pvx Plus Control • Defined in NOMADS as an External Tool (COM control) • Pvx Plus Controls • Google Maps Control • Minimum definition requirement: • latitude and longitude of centerpoint of map • mapTypeID – roadmap, satellite, hybrid or terrain • zoom factor for the map • For directions requests, must also set showDirectionsPane(0=disabled, 1=left, 2=right) anddirectionsPanePercent

26. Google Maps Interface • Documentation available at: • http://wiki.pvxplus.com • General Topics • Extended Nomads Objects – Google Maps Interface • Flash tutorials available at: • http://www.pvxplus.com/swf/gmaps.htm • http://www.pvxplus.com/swf/gdir.htm • Also visit the Google website for terms and conditions: • http://code.google.com/apis/maps/terms.html

27. Thank you Lunch Time 12:00 – 1:30