Adobe jax2010 1_dashboard
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Adobe jax2010 1_dashboard

on

  • 1,966 views

Slides presented at JAX 2010, in Germany. Technical session on Flex and Java, focused on Interactive dashboard development. More information on my blog: http://www.riagora.com

Slides presented at JAX 2010, in Germany. Technical session on Flex and Java, focused on Interactive dashboard development. More information on my blog: http://www.riagora.com

Statistics

Views

Total Views
1,966
Views on SlideShare
1,961
Embed Views
5

Actions

Likes
1
Downloads
8
Comments
0

1 Embed 5

http://www.slideshare.net 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • When you break it down, an intuitive user experience has a variety of characteristics: Effective. Supports goal accomplishment with minimum effort. Efficient. Allows rapid task completion Engaging. Offers enjoyable day-to-day operation. Easy to learn. Supports rapid initial skill acquisition &expanded skill development with experience. Error free. Prevents errors and supports error recovery. And to support these five E’s, it has to be personalized, enable the user to collaborate with others in the context of the task at hand, all while completely abstracting and automating all backend processes.
  • In a recent survey done by Forrester, LOB people were asked about their top priorities. Looking at their top priorities, you can quickly see how our RIA solutions help them achieve their goals. Intuitive RIA driven self service applications reduce the cost of servicing customers by streamlining and simplifying the user interaction reducing the number of calls to the call center Intuitive applications for employees increase people’s capabilities allowing them to quickly respond to customers and increase the number of customers they can service. RIA self service also increases customers satisfaction and retention by empowering users to help themselves anytime and anywhere. And RIAs introduce new customer interaction paradigms opening new markets and innovating services not possible in the past (offline, complex processing, real time, collaboration … )
  • Sector Monitor: Spreadsheet -> RIA Anatomy of Experience: Directive affordance, focus and emphasis (‘soul of the application’), movement has meaning, removing chrome, direct manipulation of content, progressive reveal of content this shows a spreadsheet, where client thought the solution was to “build a spreadsheet in Flex”. I’ll talk about “a problem cannot be solved with the same thinking that created it”, and how by spending time with traders and understanding the key data that they act upon (“when everything is equal, nothing is important”), it’s possible to create a more effective trader-centric solution that supports faster, less error-prone decision making. * Help people to understand the “anatomy of a great user-experience” by talking about the concepts and principles of a good user-experience * Help people to understand how ROI is unlocked through user-centric design
  • Without changing anything on the backend, using exactly the same services, Adobe redefined the user experience. Adobe transformed DATA into Information. The traders who used to take 5 to 6 minutes (average time) to make a decision, take today 15 to 20 seconds. Increased productivity Increase end user productivity through simple, personalized, highly responsive and consistent user experience Improved decision making Make faster decisions through aggregating relevant, timely information from multiple sources
  • NATO before
  • NATO before
  • NATO: Web Forms -> RIA Anatomy of Experience: Direct Manipulation, Real-time access to data for critical decision making, Model real-world interactions (maps), collaboration within application. This has a GREAT before and after story, really bad “view on a database” for mission planning Can also talk about how user-centric process reduces time to market...talk about previous attemts to get to market, were lost in requirements gathering and analysis, but user-centric design approach allowed us to engage in August and be in the air (literally) by December, with the most important functionality, and with incremental releaes thereafter. When we talk about ‘consumerization of the enterprise’, it’s not just about the fidelity of experience, but the idea that you can “release early, and then release often”....incremental feature release.
  • So the Flash Platform has evolved to meet the demands for multi-screen applications. In this diagram you can see the tools, application frameworks, runtimes and cloud technologies that we have developed.
  • Let’s start with messaging and let’s look at a simple use case. In this example, there is a series of Flex clients on the left. One of them (client B) will send (or publish) a message to a specific destination in the Message Service. The Message Service, which lives in your application server, is responsible for routing messages to the clients who subscribed to that destination. In this case, the message service will route the message to clients A and C.
  • In the previous examples, messages were initiated by the client. There are many situations where you want the messages to be initiated by a server process. These are traditional data push use cases.
  • opensource fruit of community
  • IT APPROVED Secure Scalable Pluggable Manageable
  • Lets have a look at how Flex works and fits into existing infrastructure. First is the application server, Flex uses the existing application server. If you don’t have one, Macromedia can provide one for you. On top of the application server, sits the Flex Presentation Server. Flex is broken down into two areas. A client-side Application Framework and the server-side Run-time services. The Application Framework consists of an XML declarative programming language for laying out and defining rich user experiences, which is code named MXML ActionScript which is the Flex programming language for procedural programming The class library, which consists of components like containers & controls and managers for commonly used services. These provide the building blocks for creating great user experiences Flex Run-time Services provide services for Flex Web Services proxy for interaction between the client and enterprise data sources Java object connectivity which allows you to invoke methods on local or remote objects Player detection which detects and locally deploys Flash client as necessary and performance optimizations like content caching and deferred instantiation. And Flex applications can be built using leading IDEs or text editors. We’re also working on a new technology, code named Brady, which is based on Dreamweaver MX 2004 and enables visual layout and code editing of Flex applications. Note to speaker: If you click on the “IDEs and text editor” box, that will take you a large screen shot of Flexstore code in Brady. If you click that image, it will take you back to this slide. If you click on the Brady box, it will take you to a large screenshot of Brady. And then if you click on that image it will take you back again.
  • Beyond coding productivity, Adobe Flash Builder 4 adds two important new features for testing applications: a network monitor and Flex Unit support. The network monitor allows you to see the network traffic between the Flash client and your backend server from within Flash Builder itself. This enables you to more easily debug data access portions of the Flex application, and to diagnose any performance issues that might exist between the client and server. Unit testing is another important part of the application development process, and Builder makes it easy with integrated Flex Unit support. This will allow test setup, test file creation, test running and test result analysis in Builder.
  • opensource fruit of community
  • opensource fruit of community
  • opensource fruit of community
  • opensource fruit of community
  • opensource fruit of community
  • The biggest feature of the Design in Mind theme is our new skinning and component architecture, named Spark. Building on top of the existing MX architecture, Spark provides a much more expressive mechanism for developers and designers to work together on the appearance of their Flex applications.
  • opensource fruit of community
  • So the Flash Platform has evolved to meet the demands for multi-screen applications. In this diagram you can see the tools, application frameworks, runtimes and cloud technologies that we have developed.

Adobe jax2010 1_dashboard Presentation Transcript

  • 1. Build your first interactive dashboard with Java and Flex
    • Michaël Chaize | Flash Platform Evangelist
  • 2. Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog: www.RIAgora.com @ mchaize
  • 3. Menu du jour RIA and decision making The Adobe Flash platform Flash and interactive dashboards What is Flex 4 ? The classic charting components The advanced data visualization How to learn Flex ? Q&A
  • 4. What Are Intuitive User Experiences?
    • Effective, Efficient, Engaging, Easy to learn, Error free
    • Personalized, responsive experiences across devices and channels
    • Communication & collaboration in context
    • Harmonization of backend processes and services
    ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
  • 5. Why Do Intuitive User Experiences Matter? ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. Forrester August 7, 2009 The State Of Enterprise IT Budgets: 2009 by Heidi Lo and Andrew Bartels
  • 6. Rich User Experiences: Opportunities for internal users ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. “ A problem can’t be solved with the same thinking that created it”
  • 7. Rich User Experiences: Opportunities for internal users ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5 mins 20 secs Increase productivity & improve decision making
  • 8. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
  • 9. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
  • 10. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. From a system-centric view (database) , to a user-centric application.
  • 11. Productivity by Design Productive users Productive developers ® Copyright 2009 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Productivity by design
  • 12. Flash Platform - A complete system for web innovation
  • 13. - 98% on Pc/Mac/Linux - Graphic API - Effects and Transitions - JIT compiler of AVM2 - Real-Time Messaging - P2P - 3D API - Soon on multiple screens
  • 14. Live Collaborative dashboard ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 44 LiveCycle Data Services or BlazeDS Publisher Subscriber
    • RTMP
    • AMF
    • HTTP
    • Client A
    • Client B
    • Client C
    Message Service Endpoint
  • 15. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 45 LiveCycle Data Services or BlazeDS Publisher Subscriber
    • RTMP
    • AMF
    • HTTP
    Real-time data transmitted to dashboards Message Services Adapter Y Adapter X Messaging System Y Messaging System X Endpoint JMS Provider JMS Adapter
  • 16. Flash and real-time dashboards
  • 17. ADOBE FLEX 4
  • 18. Productive developers Backend solutions Handle large datasets Real-time applications Live Collaboration Open source framework Large WW community IT approved IDE based on Eclipse Rich UI components ® Copyright 2009 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Agile Development Unit testing, Quality control, Stressing framework, Model-driven development
  • 19. What is Flex and how it works ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Flex Builder IDE Flex Class Library MXML ActionScript Compile Flex SDK SOAP HTTP/S AMF/S RTMP/S Web Server Existing Applications & Infrastructure J2EE Application Server LC Data Services XML/HTTP REST SOAP Web Services Browser Flash Player
  • 20. IDE based on Eclipse
  • 21. DATA SERVICES WIZARD DATA CONNECTIVITY
  • 22. DATA SERVICES PANEL DATA CONNECTIVITY
  • 23. TEST OPERATION PANEL DATA CONNECTIVITY
  • 24. CODE GENERATION DATA CONNECTIVITY
  • 25. AUTOMATIC DATA PAGING DATA CONNECTIVITY
  • 26. NETWORK MONITOR DATA CONNECTIVITY
  • 27. CHART GENERATION UI DEVELOPMENT
  • 28. Show me the code My first interactive dashboard
  • 29. ADOBE FLEX Charting Components Area Bar Bubble CandleStick Column HLOC Line Pie Plot
  • 30. ADOBE FLEX Advanced Data Visualization components IBM ILOG ELIXIR - 3D charts - Scheduling - Project Management - Calendar - Timelines - Gauges and dials - Maps - Heat maps - Pivot charts - Organization charts - Treemap charts - Radar charts
  • 31. ADOBE FLEX Advanced Data Visualization components KAP IT lab - Diagrammer - Visualizer - Treemap - Elastic search - Ring chart - Radar chart
  • 32. ADOBE FLEX Advanced Data Visualization components Axiis Open source framework
  • 33. Develop your own components with Flex 4
  • 34. OLD COMPONENT MODEL FLEX FRAMEWORK 4 Graphics Layout Animation Parts States Behavior Logic Data Component / Skin
  • 35. SPARK COMPONENT MODEL FLEX FRAMEWORK 4 ActionScript MXML Graphics Layout Animation Parts States Component Skin CSS properties Behavior Logic Data
  • 36. Circular Slider
  • 37. How to learn Flex ? Flex.org The Flex SDK is free and open source Free trial of Flash Builder (IDE) Tour de Flex Free application, samples, live updates http://developer.adobe.com : Flex in a week Free online video training, samples Flex Test drive Build a flex application in an hour Adobe TV Video tutorials
  • 38. Flash Platform - A complete system for web innovation
  • 39. Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog: www.RIAgora.com @ mchaize