adding visualization to dynamic web 2.0 applications
TRANSCRIPT
Adding Visualization to Dynamic Web 2.0 Applications
Julian Payne
2
Agenda
● Web 2.0 Technologies● Challenges with Web 2.0 Technologies● Building and deploying RIA Applications
● Overview of ILOG Visualization Displays
● Putting it all together with an example
● Conclusions
3
Web 2.0 Technologies
● Many competing technologies including Ajax, Adobe Flex and Microsoft Silverlight
● Some of the common points across these technologies:● Applications can send requests to the server when data is
required● Requests execute asynchronously and update the display when
completed● Functionality can be run locally on the client to reduce the
number of client/server round trips
● Some of the differences:● Some technologies require browser plugins, for example Adobe
Flash Player or Microsoft Silverlight● Not all web browsers are equal● Open Standards vs Proprietary Standards● Rendering vs Code Execution Speed
Challenges with Web 2.0 Technologies
● Languages● Languages: JavaScript for Ajax, MXML & ActionScript for Adobe
Flex, XAML & .NET (C#,VB) for Microsoft Silverlight● Prototype Oriented, loosely typed, vs Object Oriented, strongly
typed languages● Not compiled, vs compiled to bytecode
● Libraries● Ajax – many Ajax libraries available but compatibility across
versions and across libraries still an issue – being addressed by initiatives like Open Ajax Alliance and OpenSocial
● Adobe Flex – framework is open source and quite a lot of third party libraries available
● Microsoft Silverlight – can re-use .NET assemblies so many libraries available
Challenges with Web 2.0 Technologies
● Development environment● Tend to be most tightly integrated when coming from a single
vendor like Adobe or Microsoft
● Tool chain support from Designer → Developer important
● Execution environments● Technologies that run using a plugin generally have similar code
execution performance across different browsers, plugin support for mobiles tends to be lacking
● Native JavaScript performance in browsers varies greatly, in some cases there may be a factor of x100 or more between browsers
● Graphic capabilities vary across browsers
Web 2.0: The Dojo (Ajax) Toolkit
● Language: JavaScript
● An Open Source cross-browser JavaScript toolkit (library + tools)
● The library: a layered set of services● dojo: the foundations. Set of basic services (e.g. language
extensions, DOM query using CSS3, events, packages, inheritance hierarchy model) , animations, drag & drop, globalization, data source connectivity, etc.
● dijit: the widgets library. Extensible and stylable Rich JavaScript UI components (grid, tree, buttons, layout panels, etc.). Conform to Accessibility (ARIA) and Globalization requirements.
● dojox: a collection of dojo extensions (charts, data-aware grid, rich text editor, 2D graphics (gfx), advanced data connectivity)
● The tools:● Provide build tools, testing framework, documentation tool, JS
code compression tool.
Web 2.0: The Dojo (Ajax) Toolkit
● dojox.gfx: 2D vector graphics in the browser● Goal: provide a cross-browser vector graphics API to enable
Rich Advanced Graphic UI Components (Diagramming, Charts, Gauges, etc.)
● Hides the browsers specificities behind a high-level OO API : rich set of shapes (Rect, Ellipse, Path, Text), advanced styling (linear and radial gradient fill)
● Uses underneath the browsers graphics rendering engine capabilities: SVG (all but IE), VML (IE), Silverlight (req. Silverlight plugin), HTML5 Canvas (all but IE).
Web 2.0: Adobe Flex Framework
● Languages: ActionScript 3.0 (OO, Strongly-typed) & MXML (XML
vocabulary for building Flex applications)
● A open-source customizable & extensible UI Framework:● Standard components from buttons, checkbox, list & trees to 2D
charts● Ability to create your own components
● An animation framework
● Data connection, management, binding, formatting & validation
● Many useful APIs: ● Logging ● Messaging (RPC)● Drag & Drop
Web 2.0: Adobe Flex Framework
● Advanced Features:● Application globalization through bundles & formatters● Accessibility to screen readers through MSAA API (WAI-ARIA
support announced in future versions)● Cross domain & cross version applications possible● Bidi Text (Flex 4), layout mirroring announced (Flex 4.1)
● UI Component model build around the Model (component) / View
(skin) pattern:● Can totally replace the rendering of component by replacing its
skin● Skins can be built in graphics designer tools then reworked in
Flash Catalyst to be imported in Flex using FXG language (SVG-like XML scalable graphics format)
● Skins can be styled using CSS
Application UI
Building RIA Applications
Client side UI framework
Browser
Graphical
Component
Data binding and
interactions
Server
Request handler
Service 1 Service 2 Service 3 ...
JSON/XML/...
Deploying as an RIA Application
● Deploying to a J2EE server:● REST services built with JAX-RS can be deployed to a Servlet
Container as a normal WAR or EAR deployment● Application delivered to the client through an HTTP request
● Deploying to mobile devices:● Platform support can be an issue especially if the run-time
requires a browser plugin – browsers may also be limited in their native functionality
● Device characteristics can present special challenges: screen size, touch screen etc
● No easy access to services of the mobile device (like GPS coordinates etc)
● No simple support for native applications
Deploying as a Mashup Widget
● Individual RIA components can be deployed to the IBM Mashup Center:
● Requires wrapping the component as an iWidget● Create an iWidget war file that contains:
● widget.xml:● HTML snippet to include the component● References to resources etc
● widget.js:● JavaScript code that will handle the data connection etc
● catalog.xml:● Describes the component(s) available in the WAR
● If this is a Flex component then it requires enabling the Ajax bridge as the communication with the widget is via JavaScript
Deploying a Flex Widget as an iWidget
● Create a data property in the Flex Widget to set the data on the
application using JSON format:<fx:Script>
public function set data(json:Object):void {
// build a data input for PivotChart from the JSON // that was set by a call to setData
var cube:IOLAPCube = buildFromJSON(json);
// set the result of the pivotChart pivot.cube = cube;
}
</fx:Script>
● Create an iWidget WAR:● widget.xml: <object classid='...'>
<param name='movie' value='FlexWidget.swf'/>
...
</object>
● widget.js:var data = {
fields : viewConfig["columns"]["columnList"],
measures : viewConfig["columns"]["columnMeasure"],
rows : data.result
};
this.flexWidget.setData(data);
Deploying a Flex Widget as an iWidget
iWidget (JavaScript)
get data:Objectset data:Object
style properties
Flex Widget (AS3)
AjaxBridge (External Interface)
getData()setData(data)
style properties
JavaScript
get data:Objectset data:Object
style properties
Flex Widget (AS3)
get data:Objectset data:Object
style properties
Flex Widget (AS3)
AjaxBridge (External Interface)
getData()setData(data)
style properties
JavaScript
getData()setData(data)
style properties
JavaScript
view: <object classid=...> <param name="movie" value="FlexWidget.swf" />
</object>edit: setData()
Publishing the widget as a Mashup
● Upload the iWidget to the IBM Mashup Hub
● Instantiate the iWidget in IBM Mashup Center
● Wire the iWidget to the data feed
● Publish the Mashup page...
16
Agenda
● Web 2.0 Technologies● Challenges with Web 2.0 Technologies● Building and deploying RIA Applications
● Overview of ILOG Visualization Displays
● Putting it all together with an example
● Conclusions
Overview of ILOG Visualization Displays
● Customizable graphical components for developers:
● Features include:● Fully documented API for customization● Deployment across Java, C++, .NET, Ajax, Adobe Flex,
Microsoft Silverlight● Real-time performance for supervision and monitoring● Actionable displays through interactions, drill-down and user-
defined actions● Sophisticated graph layout algorithms for displaying graphs● Tool chain for creating and deploying symbology
Charts MapsNetworksGantt DashboardsDiagrams
Example Displays: 3D Charts
● 3D Chart Engine● Line, Area, Column, Bar and Pie
Charts● Orthographic and oblique
projections● Cuboid and cylinder rendering● 3D camera placement and
lighting
Example Displays: Pivot Chart
● Data analysis displays:● Column, line, pie and area
charts● Interactive clustering● Data filtering
Example Displays: Heat map
● Display variation and density● Value heat map or density
heat map● Positioned by x/y or longitude/
latitude● User defined thresholds and
coloring
Example Displays: Maps and Gauges
● Map based KPI displays● User-defined colors● User-defined objects displayed on
regions● A selection of maps provided as-is● Tool-chain to create custom maps
● Ready-made gauges, dials and indicators● Includes circular, semi-circular, linear,
knob, indicators etc● Simple framework to create custom
gauges
Example Displays: Organization Chart
● Navigate employee data● Single reporting relationship● Default renderers● Custom rendering● Level of detail based on
zoom level● Overview
Example Displays: Calendar
● Interactive calendars● Standard views include day, work-
week, week and month● Custom durations supported● One-off and recurring event
support● Multiple schedules● Overlap management● Direct editing capabilities
Example Displays: Planning and Scheduling
● Resource and activity charts● Associated tree-table● Customizable timeline● Timeline and work grid rendering
dependent on zoom level● Interactions and in-line editing● Activity dependencies as well as
in-line editing of dependencies● Custom rendering of activities● Custom rendering of work grid
Example Displays: Diagrams
● Intuitive diagrams for displaying networks, flows and hierarchies:
● Multiple graph layout algorithms for legible diagrams
● Complex rendering of nodes and links
● Support of sub-graphs● Full in-place editing● Diagrams can be laid out on top
of maps
Typical Industries supported by ILOG Visualization
● Network management (EMS, NMS)
● Defense (C4I)
● Industrial supervision (Energy/Utilities, SCADA, Traffic)
● Planning & Scheduling (ERP, SCM, Transportation)
● Enterprise business (BPM, BAM, BI)
Demo
28
Agenda
● Web 2.0 Technologies● Challenges with Web 2.0 Technologies● Building and deploying RIA Applications
● Overview of ILOG Visualization Displays
● Putting it all together with an example
● Conclusions
Putting it all together with an example
● Creating a graph display for representing a social network
● Representing a group of person● Each person has a set of neighbors● The relations are represented by links between nodes to form a
graph display
● Building the server side in Java and client side in Flex
Example architecture
WebSphere Application Server
Community Edition
REST API(JAX-RS)
Application UI
Flex Client side UI
framework
Browser
(Flash Player)
Diagram
ComponentModel
Services
Graph
Layout
Services
Map
Services...
JSON
Dojo Client side UI
framework
Browser
Application UI
Diagram
Component JSON
Building and deploying a REST API on the server
● Using JAX-RS (JSR-311), Java API for easy RESTful services development
● JAX-RS uses annotations for declaring the API● Example: Declaring the API to get the neighbors of a person: @Path(value="/person/{personName}/neighbors")
@Produces(value={"application/json"})
public List<PersonInfo> getPersonNeighbors(@PathParam(value="personName")
String personName) {
...
}
● Produces JSON, XML or other choice as output data
● For JSON, Flex decoder is required on client● For example open source project as3corelib (http://
code.google.com/p/as3corelib/)
Invoking REST API from the client side ActionScript
● Calling REST service from Flex requires: ● URLRequest to describe the http request to the REST service ● URLLoader to fetch the result asynchronously:
var request:URLRequest = new URLRequest();
request.url = server + "person/"+name+"/neighbors";
request.method = URLRequestMethod.GET;
var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE,function onResult(event:Event)
: void {
decodeResult(event);
});
loader.addEventListener(IOErrorEvent.IO_ERROR,onError);
loader.load(request);
● Event listener invoked when the data is loaded.
Decoding the JSON when data is loaded, fill Flex
component data
● JSON object returned as a string :[{"uid":"1", "name":"Amelia Bonche", "age":"36"}, {"uid":"2", "name":"Martin
Baader", "age":"38"}...
● Decoding JSON var jsonObject:Object = JSON.decode(event.target.data)
● After each request stores the person and the relation inside flex collections
var personsCollection:ArrayCollection ..
var relationsCollection:ArrayCollection ..
● For each neighbor loaded, perform a new request to know if there is a potential relation with other persons already loaded
Displaying the result using a Flex component
● Use Flex Diagram component to display the result● Indicate data provider for nodes and links computed from the
REST calls● Use automatic graph layout algorithm for automatically
arranging the nodes and links (Force directed algorithm):
<ibm:Diagram id="diagram" left="0" top="0"
width="100%" height="100%"
nodeDataProvider="{personsCollection}"
linkDataProvider="{relationsCollection}">
<ibm:nodeLayout>
<ibm:ForceDirectedLayout/>
</ibm:nodeLayout>
</ibm:Diagram>
Creating a custom skin
● Use Flex 4 Styling and Skinning system to provide nice graphics.● Skinning a component is the process of changing the overall
appearance of elements (here nodes and links)● Involve a graphic designer when available to design the skins
used in the application.
● Skins are expressed in MXML and may contain text, images, 2d graphics, transition effects, filters and states.
<s:Group>
<s:BorderContainer width="48" height="48" x="1" y="1">
<mx:Image source="{getImageLocation()}" width="46" height="46"/>
</s:BorderContainer>
<s:Label x="50" y="4" text="{hostComponent.data.name}"/>
<s:Label x="50" y="25" text="{hostComponent.data.jobresponsib}"/>
</s:Group>
What changes with Dojo?
• Use a Dojo component to display the result:
– Indicate the data stores for nodes and links : nodesStore and relatonsStore properties
– Indicate where to find the start and end nodes information of a link: startLinkBinding and endLinkBinding properties
<div dojoType= "my_component" id="diagram" style="width:100%;height:100%"
nodesStore="personsStore"
linkDataProvider="relationsStore"
startLinkBinding="start" endLinkBinding="end"
graphLayout="layout"
</div>
Create a Dojo Template as a skin
• Use Dojo Diagram template and binding engines to define nodes and links appearance:
[{'shape': { 'r': 10, 'height': 80, 'width': 200, 'y': 10, 'x': 10, 'type': 'rect' },
'stroke': { 'type': 'stroke', 'color': 'gray', 'width': 2},
'fill': { 'type': 'linear', 'x1': 10, 'y1': 0, 'x2': 10, 'y2': 110,
'colors': [{ 'offset': 0, 'color': '#FFEFF4F8' },{ 'offset': 1, 'color': '#FFEFF4F8' } ]}
},
{'shape': { 'src': '{{data.Picture}}', 'height': 65, 'width': 60, 'y': 20, 'x': 10, 'type':
'image' }},
{ 'shape': { 'align': 'start', 'text': '{{data.Name}}', 'y': 30, 'x': 70, 'type': 'text' },
'fill': { 'r': 0, 'g': 0, 'b': 0, 'a': 1 },
'font': { 'type': 'font', 'weight': 'bold', 'size': '10pt', 'family': 'sans-serif'}},
{ 'shape': { 'align': 'start', 'text': '{{data.Position}}', 'y': 50, 'x': 70, 'type': 'text' },
'fill': { 'r': 0, 'g': 0, 'b': 0, 'a': 1 },
'font': { 'type': 'font', 'weight': 'normal', 'size': '9pt', 'family': 'sans-serif'}},
{ 'shape': { 'align': 'start', 'text': '{{data.EMail}}', 'y': 75, 'x': 70, 'type': 'text' },
'fill': { 'r': 0, 'g': 0, 'b': 0, 'a': 1 },
'font': { 'type': 'font', 'weight': 300, 'size': '9pt', 'family': 'sans-serif'}}]
Demo
Conclusions
● Web 2.0 Technologies can be used today to create compelling user experiences on the web
● Open Standards based technologies are progressing fast but the market is still fragmented
● The choice of which technology to use will be driven by corporate decisions and ease of use for developers
● RIA applications require rich UI components, integrated back end services and developer tools
40
We Value Your Feedback !
• Please complete the session survey for this session by:
• Accessing the SmartSite on your smart phone or computer at: http://imp2010.confnav.com – Surveys / My Session Evaluations
• Visiting any onsite event kiosk– Surveys / My Session Evaluations
• Each completed survey increases your chance to win an Apple iPod Touch with daily drawing sponsored by Alliance Tech
41
Copyright and Trademarks
© IBM Corporation 2009. All rights reserved. IBM, the
IBM logo, ibm.com and the globe design are
trademarks of International Business Machines
Corporation, registered in many jurisdictions
worldwide. A current list of IBM trademarks is
available on the Web at "Copyright and trademark
information" at www.ibm.com/legal/copytrade.shtml.
Other company, product, or service names may be
trademarks or service marks of others.
Further information
• More information about the ILOG Visualization products:http://www.ibm.com/software/websphere/products/visualization/
• ILOG Visualization zones (demos, forums and blogs):http://www.ibm.com/developerworks/websphere/zones/visualization/