adobe flex air user group tour 2008 nickull f i n a l
DESCRIPTION
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.TRANSCRIPT
2006 Adobe Systems Incorporated. All Rights Reserved. 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
2006 Adobe Systems Incorporated. All Rights Reserved.
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 protected]. There are 28 projects to build in this cookbook.
You are welcomed (and encouraged) to reuse these slides to present these slides to others.
Adobe revolutionizes how the world engages with
ideas and information
newimage
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”); }
Widest Reach in the World
Adobe Technologies reach 700+ million PCs and 200+ million devices
Flash has 99% reach on connected PCs8 million installs/day
There are 250,000,000 PDF files on the web
Adobe RIA Technology
Consistent deployment on all browsers / desktop
RIA’s: Engaging, highly interactive, contextual.
Development tools (profiler, code complete, debug…)
Designer developer productivityAdobe Flex
Adobe Technology Platform for RIA
Designer/Developer Tools
Creative Suite 3
Flex Builder
RIA Clients
Servers/Services
ColdFusionLiveCycle Flash Media Server
AcrobatConnect
FlashCast Scene7
Flash Player Adobe AIR
RIA Frameworks and Programming Languages
ActionScript 3Adobe Flex 3
HTTP/S, Sockets, AMF, RTMP,SOAP, WS*, REST, …
MXML and ActionScript
XML/HTTPREST
SOAP Web Services
XML/HTTPREST
SOAP Web Services
How Flex Works
BrowserBrowser
JEE Application ServerJEE Application Server
LC Data Services
Flash Player
Web ServerWeb Server
Existing Applications and InfrastructureExisting Applications and Infrastructure
Flex Builder IDEFlex Builder IDE
Flex SDKFlex SDK
MXMLMXML ActionScriptActionScript
Flex Class LibraryFlex Class Library
.swf
Compile
.swf
HTTP/S AMF/S RTMP/SSOAP
Adobe Flex
Adobe Technology Platform for RIA
CreativeSuite
FlexBuilder
Eclipse
Notepad
LiveCycle Designer
Resource Tier EISEIS DatabasesDatabases DirectoriesDirectoriesECM
RepositoryECM
RepositoryMessageQueues
MessageQueues
OtherSystemsOther
SystemsPrinting &ScanningPrinting &Scanning
ClientApplicationTier
Design &DevelopmentTools
AdobeWeb
Services
OtherWeb
Services
Flickr.comeBay API
Yahoo! APIGoogle API
HTMLFlash PDF
Browsers FlashPlayer
Reader Devices FlashLite
ReaderLE
Applications AdobeAdobeThird-partyThird-party
ServiceTier
Remote Domains Local Domain
Application Servers
LiveCycleLiveCycle ColdFusionColdFusion
HTTPServiceHTTP
ServiceOther
ServicesOther
Services
FlashMediaServer
FlashCast
HTTP/S, Sockets, AMF, RTMP,SOAP, WS*, REST, …
Frameworks Third-partyThird-partyFlex Framework
AIR
2) initial design
3) development
4) design tweaks
Visual Designer
1) comps + vignettesDeveloper
(Thermo)
Designer Developer Workflow
Design Production
New inADOBE FLEX 3
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
Designers and Developers – Creative Suite 3 / CSS Integration
Import Skin Assets into Flex BuilderCreate 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
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
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
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
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
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
Profiling Applications!
Profiler Functionality
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
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
FlashPlayer 9
Flash PlayerCache
Site ACustomCode Site B
Flex 3 RSL
CustomCode
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
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
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
Adobe AIR allows web developers to use existing technologies to build and deploy rich Internet
applications to the desktop.
2007 Adobe Systems Incorporated. All Rights Reserved.
Adobe AIR Application Stack
Cross-OS Application
IntegratedRendering
Integrated DOMs& Scripting
Flash
FlexActionScriptXMLAudioVideo
HTML
HTML
HTMLJavaScriptXMLCSS
Flash
Adobe AIR APIs
Mac, Windows, Linux & Device OS
File SystemAccess
File SystemAccess
NetworkDetectionNetwork
Detection NotificationsNotificationsApplicationUpdate
ApplicationUpdate
Drag andDrop
Drag andDrop
LocalDatabase
LocalDatabase ......
2007 Adobe Systems Incorporated. All Rights Reserved.
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
2007 Adobe Systems Incorporated. All Rights Reserved.
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
Simple XML Editor
2007 Adobe Systems Incorporated. All Rights Reserved.
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
2007 Adobe Systems Incorporated. All Rights Reserved.
Tooling - Building AIR Applications
Leverage existing tools for designers and developers
Flex, Aptana, Dreamweaver, Flash, and more
2007 Adobe Systems Incorporated. All Rights Reserved.
Now building on Adobe AIR
2007 Adobe Systems Incorporated. All Rights Reserved.
BlazeDSOpen source
Flex Remoting and Messaging
2007 Adobe Systems Incorporated. All Rights Reserved.
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
BlazeDS
Data Management
RPC Services
Messaging
ServiceAdapters
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…
LiveCycle Data Services ES
2007 Adobe Systems Incorporated. All Rights Reserved.
Remoting Performance Example
DEMO - http://www.jamesward.org/census/
2007 Adobe Systems Incorporated. All Rights Reserved.
Real-Time Data Push Example
http://www.allanpadgett.com/tourtracker2/index.html
2007 Adobe Systems Incorporated. All Rights Reserved.
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
2007 Adobe Systems Incorporated. All Rights Reserved.
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
2007 Adobe Systems Incorporated. All Rights Reserved.
Thermo In
Developm
ent
2007 Adobe Systems Incorporated. All Rights Reserved.
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
2007 Adobe Systems Incorporated. All Rights Reserved. 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.
2007 Adobe Systems Incorporated. All Rights Reserved.
“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.
2007 Adobe Systems Incorporated. All Rights Reserved.
“Thermo” - Convert Artwork to Functional Components
44
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
2007 Adobe Systems Incorporated. All Rights Reserved.
“Thermo” - State and Transition Management
45
Create “pages” and states that describe the ways an application will change.
Choreograph simple motions between symbol or application states.
2007 Adobe Systems Incorporated. All Rights Reserved.
“Thermo” - Working with Design Time Data
46
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
2007 Adobe Systems Incorporated. All Rights Reserved. 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.
2006 Adobe Systems Incorporated. All Rights Reserved.
2006 Adobe Systems Incorporated. All Rights Reserved.
Extra slides:
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved. 51
Where Flex is used
Product Configuration
Rich Media Applications
Data Visualization
Authoring Applications Product Selection
Line of Business Applications
2006 Adobe Systems Incorporated. All Rights Reserved.
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
2006 Adobe Systems Incorporated. All Rights Reserved.
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 pricin
g
2006 Adobe Systems Incorporated. All Rights Reserved.
Flex 3 – Major Themes
Designers and Developers
Hybrid Desktop-Internet Applications
Framework EvolutionWorking with Data
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
Flex 3 Pricing and Packaging
Notes
Adobe® Flex™ 3 SDK Open SourceFree
Adobe® Flex™ Builder™ 3Standard edition
Adobe® Flex™ Builder™ 3Professional 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
PriceFull/Upgrade
Adobe Flex Customers
Enterprise Web 2.0ISVs
Rich Applications for Consumers
Rich Applications for Businesses
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
.air
MXML and ActionScript
XML/HTTPREST
SOAP Web Services
XML/HTTPREST
SOAP Web Services
How AIR Works
DesktopDesktop
JEE Application ServerJEE Application Server
LC Data Services
Web ServerWeb Server
Existing Applications and InfrastructureExisting Applications and Infrastructure
Flex Builder IDEFlex Builder IDE
Flex SDKFlex SDK
MXMLMXML ActionScriptActionScript
Flex Class LibraryFlex Class Library
.air
Compile & Package
.swf
HTTP/S AMF/S
RTMP/SSOAP
AIR Client Runtime
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
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
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
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
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
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
Adobe AIR Desktop Integration
Install and Uninstall
Task Manager or Process List
Application Shortcuts
Drag and Drop
Clipboard
Cross Application communication
Notifications
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
Adobe Reader Integration
Hi-fidelity document rendering
Integrated presentation of documents
Data Synchronization
Uses the installed Adobe Reader 8.1+ to minimize runtime size
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
Adobe AIR Developer Workflow
Operating System
Installed ApplicationFlex Builder
Dreamweaver
InDesign
Command Line
Flash
LiveCycleDesigner
Photoshop
More...
Deployment Package.air file
HTML PNG, JPEG...
SWF PDF
Create Package
Deploy
Support available through LiveCycle Data Services Community Edition Subscriptions
Plan Basic Premium
Product Entitlements
Certified Builds
Patches/updates
Warranty coverage
Certified Builds
Patches/updates
Warranty coverage
SupportServices
5 Bronze support incidents per subscription
One unlimited Gold Production Support plan
One Developer Support Plan
Contacts/ hours
1 named contact
Web case with 4 business hour response
8x5 M-F
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
Price*(1 CPU per subscription)
$1,500 per subscription
2 subscriptions minimum ($3k)
$4,000 per subscription
6 subscriptions minimum ($24k)
* The number of CPUs scale with multiple subscriptions, Premium support benefits do not.
ILOG ElixirAdvanced Data Visualization for Adobe Flex
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
ILOG Elixir Components