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/