Adding Visualization to Dynamic Web 2.0 Applications

Download Adding Visualization to Dynamic Web 2.0 Applications

Post on 11-May-2015




2 download

Embed Size (px)


<ul><li>1.Adding Visualization to DynamicWeb 2.0 ApplicationsJulian Payne</li></ul><p>2. Agenda Web 2.0 TechnologiesChallenges with W eb 2.0 TechnologiesBuilding and deploying RIA ApplicationsOverview of ILOG Visualization DisplaysPutting it all together with an example Conclusions2 3. Web 2.0 Technologies Many competing technologies including Ajax, Adobe Flex andMicrosoft Silverlight Some of the common points across these technologies:Applications can send requests to the server when data isrequiredRequests execute asynchronously and update the display whencompletedFunctionality can be run locally on the client to reduce thenumber of client/server round tripsSome of the differences:Some technologies require browser plugins, for example AdobeFlash Player or Microsoft SilverlightNot all web browsers are equalOpen Standards vs Proprietary StandardsRendering vs Code Execution Speed3 4. Challenges with Web 2.0 Technologies LanguagesLanguages: JavaScript for Ajax, MXML &amp; ActionScript for AdobeFlex, XAML &amp; .NET (C#,VB) for Microsoft SilverlightPrototype Oriented, loosely typed, vs Object Oriented, stronglytyped languagesNot compiled, vs compiled to bytecode LibrariesAjax many Ajax libraries available but compatibility acrossversions and across libraries still an issue being addressed byinitiatives like Open Ajax Alliance and OpenSocialAdobe Flex framework is open source and quite a lot of thirdparty libraries availableMicrosoft Silverlight can re-use .NET assemblies so manylibraries available 5. Challenges with Web 2.0 Technologies Development environmentTend to be most tightly integrated when coming from a singlevendor like Adobe or MicrosoftTool chain support from Designer Developer important Execution environmentsTechnologies that run using a plugin generally have similar codeexecution performance across different browsers, plugin supportfor mobiles tends to be lackingNative JavaScript performance in browsers varies greatly, insome cases there may be a factor of x100 or more betweenbrowsersGraphic capabilities vary across browsers 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 servicesdojo: the foundations. Set of basic services (e.g. languageextensions, DOM query using CSS3, events, packages,inheritance hierarchy model) , animations, drag &amp; drop,globalization, data source connectivity, etc.dijit: the widgets library. Extensible and stylable Rich JavaScriptUI 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, JScode compression tool. 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. Web 2.0: Adobe Flex Framework Languages: ActionScript 3.0 (OO, Strongly-typed) &amp; MXML (XML vocabulary for building Flex applications) A open-source customizable &amp; extensible UI Framework:Standard components from buttons, checkbox, list &amp; trees to 2DchartsAbility to create your own components An animation framework Data connection, management, binding, formatting &amp; validation Many useful APIs:LoggingMessaging (RPC)Drag &amp; Drop 9. Web 2.0: Adobe Flex Framework Advanced Features:Application globalization through bundles &amp; formattersAccessibility to screen readers through MSAA API (W AI-ARIAsupport announced in future versions)Cross domain &amp; cross version applications possibleBidi 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. Building RIA ApplicationsApplication UIGraphical Service 1 Service 2 Service 3 ... ComponentData binding andinteractions JSON/XML/... Client side UI frameworkRequest handler Browser Server 11. Deploying as an RIA Application Deploying to a J2EE server:REST services built with JAX-RS can be deployed to a ServletContainer as a normal W AR or EAR deploymentApplication delivered to the client through an HTTP request Deploying to mobile devices:Platform support can be an issue especially if the run-timerequires a browser plugin browsers may also be limited in theirnative functionalityDevice characteristics can present special challenges: screensize, touch screen etcNo easy access to services of the mobile device (like GPScoordinates etc)No simple support for native applications 12. Deploying as a Mashup Widget Individual RIA components can be deployed to the IBM MashupCenter:Requires wrapping the component as an iW idgetCreate 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 ARIf this is a Flex component then it requires enabling the Ajaxbridge as the communication with the widget is via JavaScript 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:Create an iWidget WAR: widget.xml:... widget.js:var data = { fields : viewConfig["columns"]["columnList"], measures : viewConfig["columns"]["columnMeasure"], rows : data.result};this.flexWidget.setData(data); 14. Deploying a Flex Widget as an iWidget iWidget (JavaScript)view: edit: setData()Flex Widget (AS3) JavaScriptget data:Object getData()set data:Object setData(data)style properties AjaxBridge style properties (External Interface) 15. Publishing the widget as a Mashup Upload the iWidget to the IBM Mashup HubInstantiate the iWidget in IBM Mashup CenterWire the iWidget to the data feed Publish the Mashup page... 16. Agenda Web 2.0 TechnologiesChallenges with W eb 2.0 TechnologiesBuilding and deploying RIA ApplicationsOverview of ILOG Visualization DisplaysPutting it all together with an example Conclusions16 17. Overview of ILOG Visualization DisplaysCustomizable graphical components for developers:ChartsGantt DiagramsNetworksMapsDashboardsFeatures include:Fully documented API for customizationDeployment across Java, C++, .NET, Ajax, Adobe Flex,Microsoft SilverlightReal-time performance for supervision and monitoringActionable displays through interactions, drill-down and user-defined actionsSophisticated graph layout algorithms for displaying graphsTool chain for creating and deploying symbology 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. Example Displays: Pivot Chart Data analysis displays: Column, line, pie and area charts Interactive clustering Data filtering 20. Example Displays: Heat map Display variation and densityValue heat map or density heat mapPositioned by x/y or longitude/ latitudeUser defined thresholds and coloring 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. Example Displays: Organization Chart Navigate employee data Single reporting relationship Default renderers Custom rendering Level of detail based on zoom level Overview 23. Example Displays: CalendarInteractive calendarsStandard views include day, work- week, week and monthCustom durations supportedOne-off and recurring event supportMultiple schedulesOverlap managementDirect editing capabilities 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. Example Displays: Diagrams Intuitive diagrams for displaying networks, flows and hierarchies:Multiple graph layout algorithms for legible diagramsComplex rendering of nodes and linksSupport of sub-graphsFull in-place editingDiagrams can be laid out on top of maps 26. Typical Industries supported by ILOG Visualization Network management (EMS, NMS) Defense (C4I) Industrial supervision (Energy/Utilities, SCADA, Traffic) Planning &amp; Scheduling (ERP, SCM, Transportation) Enterprise business (BPM, BAM, BI) 27. Demo 28. Agenda Web 2.0 TechnologiesChallenges with W eb 2.0 TechnologiesBuilding and deploying RIA ApplicationsOverview of ILOG Visualization DisplaysPutting it all together with an example Conclusions28 29. Putting it all together with an example Creating a graph display for representing a social networkRepresenting a group of personEach person has a set of neighborsThe relations are represented by links between nodes to form agraph displayBuilding the server side in Java and client side in Flex 30. Example architectureApplication UIDiagram Component GraphModelMapFlex Client side UILayout ... ServicesServicesframework ServicesJSON Browser (Flash Player)Application UI REST API(JAX-RS)Diagram ComponentJSONDojo Client side UIWebSphere Application ServerframeworkCommunity Edition Browser 31. Building and deploying a REST API on the server Using JAX-RS (JSR-311), Java API for easy RESTful servicesdevelopment 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 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. Invoking REST API from the client side ActionScript Calling REST service from Flex requires:URLRequest to describe the http request to the REST serviceURLLoader 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. 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( each request stores the person and the relation inside flexcollectionsvar personsCollection:ArrayCollection .. var relationsCollection:ArrayCollection .. For each neighbor loaded, perform a new request to know ifthere is a potential relation with other persons already loaded 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): 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 overallappearance of elements (here nodes and links)Involve a graphic designer when available to design the skinsused in the application. Skins are expressed in MXML and may contain text, images, 2dgraphics, transition effects, filters and states. 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 </p> <div> 37. Create a Dojo Template as a skin Use Dojo Diagram template and binding engines to definenodes 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. Demo 39. Conclusions Web 2.0 Technologies can be used today to create compellinguser experiences on the web Open Standards based technologies are progressing fast butthe market is still fragmented The choice of which technology to use will be driven bycorporate decisions and ease of use for developers RIA applications require rich UI components, integrated backend 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 computerat: Surveys / My Session Evaluations Visiting any onsite event kiosk Surveys / My Session Evaluations Each completed survey increases your chance to win anApple iPod Touch with daily drawing sponsored byAlliance Tech 40 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...</div>