Adding Visualization to Dynamic Web 2.0 Applications


Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Adding Visualization to Dynamic Web 2.0 Applications

  1. 1. Adding Visualization to DynamicWeb 2.0 ApplicationsJulian Payne
  2. 2. Agenda● Web 2.0 Technologies ● Challenges with W eb 2.0 Technologies ● Building and deploying RIA Applications● Overview of ILOG Visualization Displays● Putting it all together with an example● Conclusions 2
  3. 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 3
  4. 4. 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
  5. 5. 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
  6. 6. 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.
  7. 7. 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).
  8. 8. 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
  9. 9. Web 2.0: Adobe Flex Framework● Advanced Features: ● Application globalization through bundles & formatters ● Accessibility to screen readers through MSAA API (W AI-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
  10. 10. Building RIA Applications Application UI Graphical Service 1 Service 2 Service 3 ... Component Data binding and interactions JSON/XML/... Client side UI framework Request handler Browser Server
  11. 11. 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 W AR 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
  12. 12. Deploying as a Mashup Widget● Individual RIA components can be deployed to the IBM Mashup Center: ● Requires wrapping the component as an iW idget ● Create an iW idget 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 W AR ● If this is a Flex component then it requires enabling the Ajax bridge as the communication with the widget is via JavaScript
  13. 13. Deploying a Flex Widget as an iWidget● Create a data property in the Flex W idget 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);
  14. 14. Deploying a Flex Widget as an iWidget iWidget (JavaScript) view: <object classid=...> <param name="movie" value="FlexWidget.swf" /> </object> edit: setData() Flex Widget (AS3) JavaScript get data:Object getData() set data:Object setData(data) style properties AjaxBridge style properties (External Interface)
  15. 15. 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. 16. Agenda● Web 2.0 Technologies ● Challenges with W eb 2.0 Technologies ● Building and deploying RIA Applications● Overview of ILOG Visualization Displays● Putting it all together with an example● Conclusions 16
  17. 17. Overview of ILOG Visualization Displays● Customizable graphical components for developers: Charts Gantt Diagrams Networks Maps Dashboards● 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
  18. 18. 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
  19. 19. Example Displays: Pivot Chart ● Data analysis displays: ● Column, line, pie and area charts ● Interactive clustering ● Data filtering
  20. 20. 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
  21. 21. 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
  22. 22. Example Displays: Organization Chart ● Navigate employee data ● Single reporting relationship ● Default renderers ● Custom rendering ● Level of detail based on zoom level ● Overview
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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)
  27. 27. Demo
  28. 28. Agenda● Web 2.0 Technologies ● Challenges with W eb 2.0 Technologies ● Building and deploying RIA Applications● Overview of ILOG Visualization Displays● Putting it all together with an example● Conclusions 28
  29. 29. 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
  30. 30. Example architecture Application UI Diagram Component Graph Model Map Flex Client side UI Layout ... Services Services framework Services JSON Browser (Flash Player) Application UI REST API (JAX-RS) Diagram Component JSON Dojo Client side UI WebSphere Application Server framework Community Edition Browser
  31. 31. 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://
  32. 32. 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.
  33. 33. Decoding the JSON when data is loaded, fill Flexcomponent 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(● 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
  34. 34. 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>
  35. 35. 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="{}"/> <s:Label x="50" y="25" text="{}"/> </s:Group>
  36. 36. 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>
  37. 37. 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}}]
  38. 38. Demo
  39. 39. 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. 40. We Value Your Feedback !• Please complete the session survey for this session by:• Accessing the SmartSite on your smart phone or computer at: – 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 40
  41. 41. Copyright and Trademarks© IBM Corporation 2009. All rights reserved. IBM, theIBM logo, and the globe design aretrademarks of International Business MachinesCorporation, registered in many jurisdictionsworldwide. A current list of IBM trademarks isavailable on the Web at "Copyright and trademarkinformation" at company, product, or service names may betrademarks or service marks of others. 41
  42. 42. Further information• More information about the ILOG Visualization products:• ILOG Visualization zones (demos, forums and blogs):