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)


  • 1.Adding Visualization to DynamicWeb 2.0 ApplicationsJulian Payne

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 & ActionScript for AdobeFlex, XAML & .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 & 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) & MXML (XML vocabulary for building Flex applications) A open-source customizable & extensible UI Framework:Standard components from buttons, checkbox, list & trees to 2DchartsAbility to create your own components An animation framework Data connection, management, binding, formatting & validation Many useful APIs:LoggingMessaging (RPC)Drag & Drop 9. Web 2.0: Adobe Flex Framework Advanced Features:Application globalization through bundles & formattersAccessibility to screen readers through MSAA API (W AI-ARIAsupport announced in future versions)Cross domain & 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 & 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 ... ServicesS


View more >