Adobe Flex AIR User Group Tour 2008  Nickull  F I N A L
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Adobe Flex AIR User Group Tour 2008 Nickull F I N A L

  • 2,684 views
Uploaded on

Slides used for the Adobe Flex Builder and AIR Pre-release tour, Jan 2008. Includes link to 28 projects (source code) you can build and link to free download of Flex Builder 3 public beta.

Slides used for the Adobe Flex Builder and AIR Pre-release tour, Jan 2008. Includes link to 28 projects (source code) you can build and link to free download of Flex Builder 3 public beta.

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Thanks for sharing this valuable information on adobe photo shop.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
2,684
On Slideshare
2,682
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
68
Comments
1
Likes
2

Embeds 2

http://www.slideshare.net 1
http://ngoding.co 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Adobe RIA Technologies What’s new in AIR / Flex 3 and 28 code samples Duane Nickull Sr. Technology Evangelist Pre-release User Group Tour Jan 2008
  • 2. Notes about this deck: This is the Deck used for the Flex, Flash, AIR User Group tour in Western Canada Jan 2008. The purpose of this deck was to bring newcomers up to speed on what Flex Builder is and to facilitate a deep dive into the new features of Flex Builder 3. The code samples are available in a mini-cookbook. If you wish to receive a copy of it, please email [email_address] . There are 28 projects to build in this cookbook. You are welcomed (and encouraged) to reuse these slides to present these slides to others.
  • 3. Adobe revolutionizes how the world engages with ideas and information new image
  • 4. Agenda
    • I hate slides!
    • But…
    • To be fair to those who haven’t seen Flex and AIR… (SURVEY)
    • Let’s show a few (5-7)
    • With quick demos to show Flex and AIR working
    • Then get into a bunch of demos and code on what’s new.
    • Then… var i:int; for (i = 0; i < 500,000; i++) { trace(“Questions and Answers”); trace(“Some beers”); trace(“More code from anyone who wants to show cool Stuff”); }
  • 5. Widest Reach in the World Adobe Technologies reach 700+ million PCs and 200+ million devices Flash has 99% reach on connected PCs 8 million installs/day There are 250,000,000 PDF files on the web
  • 6. Adobe RIA Technology
    • Consistent deployment on all browsers / desktop
    • RIA’s: Engaging, highly interactive, contextual.
    • Development tools (profiler, code complete, debug…)
    • Designer  developer productivity
    Adobe Flex
  • 7. Adobe Technology Platform for RIA Designer/Developer Tools Creative Suite 3 Flex Builder RIA Clients Servers/Services ColdFusion LiveCycle Flash Media Server Acrobat Connect Flash Cast Scene7 Flash Player Adobe AIR RIA Frameworks and Programming Languages ActionScript 3 Adobe Flex 3 HTTP/S, Sockets, AMF, RTMP, SOAP, WS*, REST, …
  • 8. How Flex Works MXML and ActionScript XML/HTTP REST SOAP Web Services Browser JEE Application Server LC Data Services Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile .swf .swf HTTP/S AMF/S RTMP/S SOAP
  • 9. Adobe Flex DEMO
  • 10. Adobe Technology Platform for RIA Creative Suite Flex Builder Eclipse Notepad LiveCycle Designer Resource Tier EIS Databases Directories ECM Repository Message Queues Other Systems Printing & Scanning Client Application Tier Design & Development Tools Adobe Web Services Other Web Services Flickr.com eBay API Yahoo! API Google API HTML Flash PDF Browsers Flash Player Reader Devices Flash Lite Reader LE Applications Adobe Third-party Service Tier Remote Domains Local Domain Application Servers LiveCycle ColdFusion HTTP Service Other Services Flash Media Server Flash Cast HTTP/S, Sockets, AMF, RTMP, SOAP, WS*, REST, … Frameworks Third-party Flex Framework AIR
  • 11. 2) initial design 3) development 4) design tweaks Visual Designer 1) comps + vignettes Developer (Thermo) Designer Developer Workflow Design Production
  • 12.
    • New in
    ADOBE FLEX 3
  • 13. Flex 3 is Open Source
    • Open Source Flex SDK
    • SDK source (framework, compiler, and debugger) is available under Mozilla Public License (MPL)
    • Public bug database, roadmap, and daily builds available
    • opensource.adobe.com/flex
    • Enabling Open Source Innovation
    • Invites active participation from the Flex development community
    • Allows open source projects to extend Flex and embed it in projects
    • Enables small ISVs to bundle the Flex SDK at no cost
    • Growing the Flex Market
    • Non-open source SDK licenses available for commercial ISVs that require it
    • Raises Flex awareness by increasing usage and driving further adoption
    • Expands the market for commercial Flex products from Adobe and partners
    • Open Source BlazeDS
    • Flex remoting and messaging
    • Available under Lesser General Public License (LGPL) v3
    • Commercial license, certified builds and enterprise support are available
    • Public bug base and daily builds
    • opensource.adobe.com/blazeds
  • 14. Designers and Developers – Creative Suite 3 / CSS Integration Import Skin Assets into Flex Builder Create Flex Components in Flash CS3 MXML and CSS Import wizard generates code assigning assets to components CS3 templates make it easy to create custom component skins Flash developers can easily package work as Flex components DEMO
  • 15. Designers and Developers – Design View Enhancements
    • Visual CSS Editor
    • View all components states in one view
    • Graphically edit CSS properties
    • Design View Enhancements
    • Pan and zoom tools
    • Improved constraints editor
    • Enhanced color picker
    • Greater fidelity for fonts and item renderers
    DEMO
  • 16. Designers and Developers – Additional Enhancements
    • Enhanced Constraints Model
    • Align components with edges or with any vertical or horizontal coordinate
    • Support for baseline alignment
    • Skinning Model Improvements
    • New skin states simplify styling
    • Enhanced control over individual components
    • OpenType Font Support
    • Embed OpenType fonts in Flex applications
    DEMO
  • 17.
    • Codec support including
      • H.264 video, AAC audio, VP6, MP3, and Sorenson
    • Hardware acceleration for full-screen video
    • Transparency and effects to video
    • Support for DRM
    Rich Media and Video DEMO
  • 18. Working with Data – Flex Data Components
    • Advanced DataGrid
    • Hierarchical data displays
    • Flexible grouping and sorting APIs
    • Custom cell/row/column formatting
    • Charting Enhancements
    • Data-oriented graphics API
    • Per-item labels and fills
    • Arbitrary number of display axes
    • Region selection
    • New List and Data Effects
    • Choreograph data as it appears or disappears in a list
    DEMO
  • 19. Working with Data – Connecting to Remote Services
    • Web Services Introspection
    • Generate client proxy classes from WSDL signatures
    • Includes support for complex types returned from web services
    • Enables complete code hinting for service methods and custom types
    • Introductory Data Wizards
    • Generate both server and client code from existing database tables
    • Resulting applications demonstrate best practices
    • Supports AJAX, ASP.NET, ColdFusion, Java, and PHP
    DEMO DEMO
  • 20. Profiling Applications!
  • 21. Profiler Functionality DEMO
  • 22. Desktop Applications – Flex and Adobe AIR
    • New AIR-enabled Flex Capabilities
      • Native OS drag and drop support
      • Multi-windowed applications
      • Access to local file system
      • Local database storage
      • Complete rendering support for HTML content
    • Flex Builder Support for AIR Development
      • Full code hinting and error reporting
      • Complete debugging and profiling support
      • Application packaging and signing
  • 23. Platform Evolution – Reduced Application Size
    • Persistent framework caching significantly reduces size of Flex applications
    • Users only need to download the Adobe-signed Flex 3 platform component once
    • Flash Player cache stores it for use by any Flex-enabled site
    • Entire Flex applications can now be as small as 50KB
    Flash Player 9 Flash Player Cache Site A Custom Code Site B Flex 3 RSL Custom Code
  • 24. Platform Evolution – Advanced Developer Tooling
    • Source Code Refactoring
    • Find all references to a class, variable, or function
    • Quickly rename variables or methods across projects or workspace
    • Preview all changes before committing
    DEMO
  • 25. Platform Evolution – Enhanced Browser Integration
    • JavaScript/Ajax Wrappers
    • Easily incorporate Flex components or micro-applications into existing web pages/logic
    • Flex Builder wizard generates code to expose any Flex component property as native JavaScript
    • Deep Linking
    • Automatically updates browser URL to represent application state.
    • Enables users to bookmark particular points in an application or share URLs
    • Integrates with existing browser history features in Flex HistoryManager class
    Flex JavaScript
  • 26. Platform Evolution – Other
    • Additional Flex Builder Enhancements
    • Flex Builder 3 works with Flex 2.0.1 or Flex 3 SDK
    • Significant improvements in compiler performance
    • Design view extensibility for third-party components
    • Additional Flex Enhancements
    • Dynamically load localization resource bundles at runtime
    • Flex compiler shell (FCSH) and ANT tasks
    • Standalone web-tier compiler modules for IIS and Apache
  • 27. Adobe AIR allows web developers to use existing technologies to build and deploy rich Internet applications to the desktop .
  • 28. Adobe AIR Application Stack Cross-OS Application Integrated Rendering Integrated DOMs & Scripting Adobe AIR APIs Mac, Windows, Linux & Device OS File System Access Network Detection Notifications Application Update Drag and Drop Local Database ... Flash Flex ActionScript XML Audio Video HTML PDF HTML HTML JavaScript XML CSS Flash PDF
  • 29.
    • Window Chrome
      • Use native OS window chrome
      • Use custom chrome implemented by application
    • Transparent
      • Transparent region can choose to receive or pass through mouse clicks
      • Design windows of any shape
    • Enables complete control and branding of user interface
    • The developer can provide custom window controls
    Custom Chrome and Transparent Applications
  • 30. Local File Access
    • Create and delete files and directories
    • Copy and move files and directories
    • List the content of directories
    • Get system information on files and directories
    • Read and write text or binary files
      • Text, XML
      • Video, Audio, Documents
      • Serialize and deserialize ActionScript objects
    • Register to handle files based on file extension
    • Support for Synchronous and Asynchronous operations
    DEMO Simple XML Editor
  • 31. Adobe AIR 1.0 Limitations
    • Limited hardware acceleration (full screen video only)
    • No access to native libraries or executables
    • No USB or serial port API
    • Limited support for accessibility
    • Limited printing support
    • Limited localization in Adobe AIR 1.0
      • English only for 1.0 installers
      • Japanese, German, French for 1.1
  • 32. Tooling - Building AIR Applications
    • Leverage existing tools for designers and developers
    • Flex, Aptana, Dreamweaver, Flash, and more
  • 33. Now building on Adobe AIR
  • 34. BlazeDS Open source Flex Remoting and Messaging
  • 35. Introducing Open Source BlazeDS
    • Capabilities
      • Easily connects Flex & AIR applications to existing server logic
      • High performance data transfer for more responsive applications
      • Real-time data push over standard HTTP
      • Full pub/sub messaging that extends existing messaging infrastructure
    • Publication of the Action Message Format (AMF3) binary data protocol specification
    • Certified builds, warranty protection and enterprise support subscriptions available
    BlazeDS is the remoting and HTTP-based messaging technology which Adobe is contributing to the community under LGPL v3 LiveCycle Data Services ES BlazeDS Data Management RPC Services Messaging Service Adapters Data Synchronization Off-line Applications Data Paging Web Service HTTP Service Remote Object Service Publish & Subscribe Collaboration Real Time Data Push Proxy Service Web-tier Compiler Portal Deployment RIA-PDF Generation LiveCycle SQL Hibernate ColdFusion JMS Java Custom…
  • 36. Remoting Performance Example DEMO - http://www.jamesward.org/census/
  • 37. Real-Time Data Push Example http://www.allanpadgett.com/tourtracker2/index.html
  • 38. Community Participation
      • Foster multiple projects/products supporting Flex/Flash remoting and messaging
      • Consistent set of core features across different server implementations
      • Common developer experience and programming model across different server technologies
    Java ColdFusion PHP ASP Ruby on Rails Adobe Provided Partners and Open Source Flex Client
  • 39. Adobe LiveCycle Enterprise Suite Data Services
    • I have a hack to run it natively on Mac/Jboss at:
    • http://technoracle.blogspot.com/2007/10/how-to-install-and-run-adobe-livecycle.html
    DEMO
  • 40. Thermo In Development
  • 41. Upcoming: Thermo
    • Make it easy for designers to create expressive, interactive interfaces that can be taken directly into production
      • Feels like an Adobe Creative Suite product
      • Allows designers to design interactions visually by building on existing workflows
      • Creates working applications that easily flow into development
    • High Level Usage Scenarios
      • Use drawing tools to create wireframes or import artwork directly from Creative Suite tools
      • Transform static artwork, in place, into the interactive components of a Flex application
      • Define states & transitions visually and easily define visual effects and transitions
      • Deliver working data-driven prototypes to developers and maintain design control
  • 42. “Thermo” - Drawing and Graphic Manipulation tools
    • Use simple drawing tools to create original graphics, or use the tools to manipulate artwork imported from Adobe Creative Suite tools.
    • Thermo (standalone) Feels like an Adobe Design product - but developers will be able to plug select pieces of Thermo into a Flex Builder 4 development environment.
  • 43. “Thermo” - MXML Code View
    • Underlying MXML code model - and powerful code editing tools for designers that want to make changes.
    • Create interactive application designs and prototypes that flow easily into development - to a developer using Flex Builder - and that allow the designer to continue tweaking UI layout and behavior in Thermo.
  • 44. “Thermo” - Convert Artwork to Functional Components Start an application design from a static Photoshop, Illustrator, or Fireworks Comp. Selectively turn artwork into functional components that inherit the original artwork as a component “Skin” Thermo allows you to define how pieces and states of the artwork map to things like Scrollbar thumbs or button hover states, etc
  • 45. “Thermo” - State and Transition Management
    • Create “pages” and states that describe the ways an application will change.
    • Choreograph simple motions between symbol or application states.
  • 46. “Thermo” - Working with Design Time Data Thermo allows you to create and maintain collections of sample data that can be used by the application at design time Design time sample data can be used to understand the interactivity of an application prototype and as a realistic placeholder when choreographing events and motion
  • 47. “Thermo” - Visual Property Wiring
    • Wire up interactivity by visually linking triggers to properties or actions.
    A great way to associate some common, default values without having to write code.
  • 48.  
  • 49. Extra slides:
  • 50. Adobe Flex
      • Open source framework
      • Highly productive development
      • Applications run identically on all browsers using Flash Player and on the desktop using Adobe AIR
      • Maintainable applications and a solution that scales from small to large projects
    A structured development framework for creating predictable, long-term RIA solutions
  • 51. Where Flex is used Product Configuration Rich Media Applications Data Visualization Authoring Applications Product Selection Line of Business Applications
  • 52. Flex Enables Rapid Development of RIAs
    • Rich library of common UI controls
      • video playback components
      • datagrids, date controls, labels, buttons
      • graphical charting components
    • Extensible component model
      • CSS support built in for skinning
      • skinable components can use branded assets
    • Facilitates smooth designer and developer workflow
  • 53. Adobe Flex Builder 3 – Developer Productivity
    • Eclipse based IDE
      • Code hinting, interactive debugging
      • Visual UI design and behaviors
      • Import assets from Adobe CS3
    • Professional edition adds:
      • Memory and Performance Profilers
      • Charting components, advanced datagrid
      • Automated functional testing support
    Standard US$249 Professional US$649 Add Euro pricing
  • 54. Flex 3 – Major Themes Designers and Developers Hybrid Desktop- Internet Applications Framework Evolution Working with Data
  • 55. Creating Desktop Applications for Adobe AIR
    • Adobe Integrated Runtime (AIR) – previously codenamed “Apollo”
    • Cross-OS application engine that enables hybrid desktop-internet applications
    • Adds desktop capabilities for Flex apps
    • Benefits
      • Total control of user experience
      • Browser to desktop consistency
      • Rich media capabilities
      • Network resilience
      • Desktop access to services
  • 56. Flex 3 Pricing and Packaging Notes Adobe® Flex™ 3 SDK Open Source Free Adobe® Flex™ Builder™ 3 Standard edition Adobe® Flex™ Builder™ 3 Professional edition $249/$99 $699/$299 Standalone or plug-in Adds testing tools, charting, and advanced datagrid BlazeDS – Flex Remoting and Messaging Free Open Source – BlazeDS project Price Full/Upgrade
  • 57. Adobe Flex Customers Enterprise Web 2.0 ISVs
  • 58. Rich Applications for Consumers
  • 59. Rich Applications for Businesses
  • 60.
    • Applications that are web-aware yet need the desktop to:
      • Integrate with the desktop and other desktop applications
      • Take advantage of local resources such as the local disk
      • Run applications in the background
      • Establish persistent connection with the user
      • Support offline and occasionally-connected use cases
      • Create fully customized user interface and own the brand of the application
    Target Applications for AIR
  • 61. How AIR Works MXML and ActionScript XML/HTTP REST SOAP Web Services Desktop JEE Application Server LC Data Services Web Server Existing Applications and Infrastructure Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile & Package AIR Client Runtime .air .air .swf HTTP/S AMF/S .pdf RTMP/S SOAP
  • 62.
    • Seamless Install -- deploy applications from a web server
    • Web Launcher -- Invoke applications from the web
    • Adobe AIR uses auto-update to keep itself current
    • AIR Applications can use an API to manage updates
      • Simplify delivery of patches and updates
      • Enable iterative development and deployment
    AIR Application Installation and Management
  • 63. Universal Application Installer
    • .air installer contains all application files
    • Application files are cross platform web technologies
      • SWF, HTML, PNG, XML, etc.
    • The same .air file installs Windows, Macintosh, and Linux
    • The installation process creates OS specific executables that allow the AIR application to behave like a native application
  • 64.
    • Privileges:
      • AIR Applications have full desktop application privileges
        • read/write files, background execution, full network access
      • Administrator can limit application install and other sensitive capabilities
    • Installation:
      • All applications must be signed by the creator
      • Mandatory, trusted install process
    Enforcing Secure Application Installation http://download.macromedia.com/pub/labs/air/air_security.pdf http://download.macromedia.com/pub/labs/air/air_htmlsecurity.pdf
  • 65.
    • Integrated rendering pipeline
      • Filters
      • Visual effects
    • Function level invocation across HTML and Flash engines
      • Flash classes can be used directly from JavaScript
      • JavaScript classes can be used directly from Flash
    • AIRAliases.js
      • Abstracts out “runtime.flash.*” references
      • Can be modified, added to, etc.
    HTML and Flash Integration
  • 66. WebKit HTML Engine
    • Open Source Engine
    • Web class HTML engine with full Ajax support and web compatibility
    • Used in Safari, KHTML
    • Benefits of WebKit
      • Open Source
      • Proven
      • Small
      • Existing Mobile/Device Support
  • 67. Local Database
    • SQLite ( http://www.sqlite.org )
      • Supports ACID transactions
      • Zero-configuration allowing for embedded solution
      • SQL-92
      • Complete database is a single file on disk
      • Supports terabyte-sized databases
    • Adobe AIR provides both synchronous and asynchronous access options
  • 68. Adobe AIR Desktop Integration
    • Install and Uninstall
    • Task Manager or Process List
    • Application Shortcuts
    • Drag and Drop
    • Clipboard
    • Cross Application communication
    • Notifications
  • 69. Background Applications and Notification
    • Applications can run in background
    • Applications can register to run at startup or user logon
    • Applications can send user notifications using the system tray, docks, or new windows
  • 70. Adobe Reader Integration
    • Hi-fidelity document rendering
    • Integrated presentation of documents
    • Data Synchronization
    • Uses the installed Adobe Reader 8.1+ to minimize runtime size
  • 71.
    • Development:
      • Separation of application and non-application content
      • Enhanced HTML security model to limit injection
      • Minimum-privilege and safe-by-default APIs to decrease developer risk
      • Encrypted Local Storage to managing secrets like passwords or PINs
    Enabling Secure Application Development http://download.macromedia.com/pub/labs/air/air_security.pdf http://download.macromedia.com/pub/labs/air/air_htmlsecurity.pdf
  • 72. Adobe AIR Developer Workflow Flex Builder Dreamweaver InDesign Command Line Flash LiveCycle Designer Photoshop More... Create Package Deploy Operating System Installed Application Deployment Package .air file HTML PNG, JPEG... SWF PDF
  • 73. Support available through LiveCycle Data Services Community Edition Subscriptions * The number of CPUs scale with multiple subscriptions, Premium support benefits do not.
    • $1,500 per subscription
    • 2 subscriptions minimum ($3k)
    • 1 named contact
    • Web case with 4 business hour response
    • 8x5 M-F
    • 5 Bronze support incidents per subscription
    • Certified Builds
    • Patches/updates
    • Warranty coverage
    Basic
    • $4,000 per subscription
    • 6 subscriptions minimum ($24k)
    • Gold = 3 Named contacts
    • Phone or web case with 2 hour response
    • 24 x 7 Critical P1 (production server down)
    • Developer = 1 Named contact
    • Web case with next business day response
    • 8x5 M-F
    • One unlimited Gold Production Support plan
    • One Developer Support Plan
    • Certified Builds
    • Patches/updates
    • Warranty coverage
    Premium Price* (1 CPU per subscription) Contacts/ hours Support Services Product Entitlements Plan
  • 74. ILOG Elixir Advanced Data Visualization for Adobe Flex
  • 75. ILOG Elixir
    • Graphical data display components for Flex and AIR applications
    • ILOG is the first major component vendor to ship a Flex component library
    • Adobe is the exclusive reseller of ILOG Elixir
      • Available direct from the Adobe Online Store and all Adobe channels
    • Advanced displays include:
      • 3D Charts
      • Country maps for interactive reports or dashboards
      • Organizational charts
      • Planning / scheduling component
      • Treemap for visual analytics
      • Radar charts (also named spider charts)
    US$799
  • 76. ILOG Elixir Components