Build your first interactive dashboard with Java and Flex <ul><li>Michaël Chaize  |  Flash Platform Evangelist </li></ul>
Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog:   www.RIAgora.com @ mchaize
Menu du jour RIA and decision making  The Adobe Flash platform Flash and interactive dashboards What is Flex 4 ? The class...
What Are Intuitive User Experiences? <ul><li>Effective, Efficient, Engaging, Easy to learn, Error free </li></ul><ul><li>P...
Why Do Intuitive User Experiences Matter? ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confid...
Rich User Experiences: Opportunities for internal users ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved....
Rich User Experiences: Opportunities for internal users ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved....
NATO ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential.
NATO ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential.
NATO ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential. From a system-centric view  (...
Productivity by Design Productive users Productive developers ® Copyright 2009 Adobe Systems Incorporated.  All Rights Res...
Flash Platform - A complete system for web innovation
- 98% on Pc/Mac/Linux - Graphic API - Effects and Transitions - JIT compiler of AVM2 - Real-Time Messaging - P2P - 3D API ...
Live Collaborative dashboard ® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential. 44 Li...
® Copyright 2009 Adobe Systems Incorporated.  All rights reserved.  Adobe confidential. 45 LiveCycle Data Services or Blaz...
Flash and real-time dashboards
ADOBE FLEX 4
Productive developers Backend solutions Handle large datasets Real-time applications Live Collaboration Open source framew...
What is Flex and how it works ©2010 Adobe Systems Incorporated.  All Rights Reserved. Adobe Confidential. Flex Builder IDE...
IDE based on Eclipse
DATA SERVICES WIZARD DATA CONNECTIVITY
DATA SERVICES PANEL DATA CONNECTIVITY
TEST OPERATION PANEL DATA CONNECTIVITY
CODE GENERATION DATA CONNECTIVITY
AUTOMATIC DATA PAGING DATA CONNECTIVITY
NETWORK MONITOR DATA CONNECTIVITY
CHART GENERATION UI DEVELOPMENT
Show me the code My first interactive dashboard
ADOBE FLEX  Charting Components Area Bar Bubble CandleStick Column HLOC Line Pie Plot
ADOBE FLEX  Advanced Data Visualization  components IBM ILOG ELIXIR - 3D charts - Scheduling - Project Management - Calend...
ADOBE FLEX  Advanced Data Visualization  components KAP IT lab - Diagrammer - Visualizer - Treemap - Elastic search - Ring...
ADOBE FLEX  Advanced Data Visualization  components Axiis Open source framework
Develop your own  components with Flex 4
OLD COMPONENT MODEL FLEX FRAMEWORK 4 Graphics Layout Animation Parts States Behavior Logic Data Component / Skin
SPARK COMPONENT MODEL FLEX FRAMEWORK 4 ActionScript MXML Graphics Layout Animation Parts States Component Skin CSS  proper...
Circular Slider
How to learn Flex ? Flex.org The Flex SDK is free and open source Free trial of Flash Builder (IDE) Tour de Flex Free appl...
Flash Platform - A complete system for web innovation
Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog:   www.RIAgora.com @ mchaize
Upcoming SlideShare
Loading in...5
×

Adobe jax2010 1_dashboard

1,590

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,590
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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 &amp;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 -&gt; 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 -&gt; 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 &amp; 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

    1. 1. Build your first interactive dashboard with Java and Flex <ul><li>Michaël Chaize | Flash Platform Evangelist </li></ul>
    2. 2. Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog: www.RIAgora.com @ mchaize
    3. 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. 4. What Are Intuitive User Experiences? <ul><li>Effective, Efficient, Engaging, Easy to learn, Error free </li></ul><ul><li>Personalized, responsive experiences across devices and channels </li></ul><ul><li>Communication & collaboration in context </li></ul><ul><li>Harmonization of backend processes and services </li></ul>® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
    5. 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. 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. 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. 8. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
    9. 9. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.
    10. 10. NATO ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. From a system-centric view (database) , to a user-centric application.
    11. 11. Productivity by Design Productive users Productive developers ® Copyright 2009 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Productivity by design
    12. 12. Flash Platform - A complete system for web innovation
    13. 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. 14. Live Collaborative dashboard ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 44 LiveCycle Data Services or BlazeDS Publisher Subscriber <ul><li>RTMP </li></ul><ul><li>AMF </li></ul><ul><li>HTTP </li></ul><ul><li>Client A </li></ul><ul><li>Client B </li></ul><ul><li>Client C </li></ul>Message Service Endpoint
    15. 15. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 45 LiveCycle Data Services or BlazeDS Publisher Subscriber <ul><li>RTMP </li></ul><ul><li>AMF </li></ul><ul><li>HTTP </li></ul>Real-time data transmitted to dashboards Message Services Adapter Y Adapter X Messaging System Y Messaging System X Endpoint JMS Provider JMS Adapter
    16. 16. Flash and real-time dashboards
    17. 17. ADOBE FLEX 4
    18. 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. 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. 20. IDE based on Eclipse
    21. 21. DATA SERVICES WIZARD DATA CONNECTIVITY
    22. 22. DATA SERVICES PANEL DATA CONNECTIVITY
    23. 23. TEST OPERATION PANEL DATA CONNECTIVITY
    24. 24. CODE GENERATION DATA CONNECTIVITY
    25. 25. AUTOMATIC DATA PAGING DATA CONNECTIVITY
    26. 26. NETWORK MONITOR DATA CONNECTIVITY
    27. 27. CHART GENERATION UI DEVELOPMENT
    28. 28. Show me the code My first interactive dashboard
    29. 29. ADOBE FLEX Charting Components Area Bar Bubble CandleStick Column HLOC Line Pie Plot
    30. 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. 31. ADOBE FLEX Advanced Data Visualization components KAP IT lab - Diagrammer - Visualizer - Treemap - Elastic search - Ring chart - Radar chart
    32. 32. ADOBE FLEX Advanced Data Visualization components Axiis Open source framework
    33. 33. Develop your own components with Flex 4
    34. 34. OLD COMPONENT MODEL FLEX FRAMEWORK 4 Graphics Layout Animation Parts States Behavior Logic Data Component / Skin
    35. 35. SPARK COMPONENT MODEL FLEX FRAMEWORK 4 ActionScript MXML Graphics Layout Animation Parts States Component Skin CSS properties Behavior Logic Data
    36. 36. Circular Slider
    37. 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. 38. Flash Platform - A complete system for web innovation
    39. 39. Feel free to contact me Michaël Chaize Flash Platform Evangelist My blog: www.RIAgora.com @ mchaize
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×