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

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.


Adobe AIR Application Stack

Cross-OS Application

IntegratedRendering

Integrated DOMs& Scripting

Flash

FlexActionScriptXMLAudioVideo

HTML

PDF

HTML

HTMLJavaScriptXMLCSS

Flash

PDF

Adobe AIR APIs

Mac, Windows, Linux & Device OS

File SystemAccess

File SystemAccess

NetworkDetectionNetwork

Detection NotificationsNotificationsApplicationUpdate

ApplicationUpdate

Drag andDrop

Drag andDrop

LocalDatabase

LocalDatabase ......


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


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


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


Tooling - Building AIR Applications

Leverage existing tools for designers and developers

Flex, Aptana, Dreamweaver, Flash, and more


Now building on Adobe AIR


BlazeDSOpen source

Flex Remoting and Messaging


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


Remoting Performance Example

DEMO - http://www.jamesward.org/census/


Real-Time Data Push Example

http://www.allanpadgett.com/tourtracker2/index.html


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


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


Thermo In

Developm

ent


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


“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.


“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.


“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


“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.


“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


“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.


Extra slides:


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


Where Flex is used

Product Configuration

Rich Media Applications

Data Visualization

Authoring Applications Product Selection

Line of Business Applications


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


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


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

.pdf

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

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

Business

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