DireXions+ 2011 – Mashup your Application

Mashup your Application

Presented by:Jane Raymond

DireXions+ 2011 – Mashup your Application

Presentation Outline

• Overview• Flash• Charting Alternatives• HTML Editor Control• Google Maps & Directions

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

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?

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

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.

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

Charting Alternatives

• Charting options: • Standard internal charting control

(Nomads only)• Flash-based• Web/Internet based • HTML5 canvas graph library

DireXions+ 2011 – Mashup your Application

Charting AlternativesStandard internal charting control (Nomads only)

N/A

N/A

DireXions+ 2011 – Mashup your Application

Charting AlternativesFlash-based

• ‘FusionCharts Free’ (free open-source)• ‘FusionCharts’ (commercially available)

N/A

N/AN/A

DireXions+ 2011 – Mashup your Application

Charting AlternativesWeb/Internet based

Google Visualization API charts

DireXions+ 2011 – Mashup your Application

Charting AlternativesHTML5 canvas graph library

rGraph charts

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

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”

• iNomadsPick a charting object for the template (default is fusionfree)• iNomads Administration - System Administration Functions

• Template Settings – Options• Miscellaneous - Charting object to use

DireXions+ 2011 – Mashup your Application

Charting Alternatives• Documentation available at:• http://wiki.pvxplus.com

General TopicsCharting Alternatives in PxPlus – Fusion, Google and Rgraph

Charts

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

HTML Editor Control• Extended Pvx Plus Control• Defined in NOMADS as an External Tool

(COM control)• Pvx Plus Controls

• Tinymce Editor Control

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

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$

DireXions+ 2011 – Mashup your Application

HTML Editor Control• Documentation available at:• http://wiki.pvxplus.com

General TopicsExtended Nomads Objects – TinyMCE HTML Editor

• Information on the TinyMCE Javascript WYSIWYG Editor available at:• http://tinymce.moxiecode.com

DireXions+ 2011 – Mashup your Application

Google Maps Interface•Google map control

• Provides ability to insert map onto panel

(Requires internet access)

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

Google Maps Interface• Features (continued)• Marker support• Infowindow support• Geocode Functions• Converts street

addresses to latitude, longitude and vice versa

DireXions+ 2011 – Mashup your Application

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.

Version 10 Feature• Directions Requests

DireXions+ 2011 – Mashup your Application

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) and directionsPanePercent

DireXions+ 2011 – Mashup your Application

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

DireXions+ 2011 – Mashup your Application

Thank you

Lunch Time12:00 – 1:30