Developing RIAs... 10 reasons to use Adobe Flex

Developing RIAs… 10 reasons to use Adobe Flex Enrique Duvos Sr Product Specialist Adobe Systems EMEA

Experience evolution: Building the new frontier

HTML Deficiencies

Page metaphor

Only 6 UI controls

Browser inconsistencies

Press n’ pray printing

Request-only data

No offline operation

Bitmaps from the server

A/V plug-in hell

Client/Server Benefits

Screen metaphor

Extensible UI libraries

Online/offline + synch

WYSIWYG printing

Data visualization

Live data connectivity

Bitmap/vector graphics

Integrated A/V

Example application CLIENT/SERVER MAINFRAME WEB APPLICATIONS REACH Local Global RICH Text UI Integrated media GUI 1992 1998 2004 RICH INTERNET APPLICATIONS

Breakdown by application types Rich Desktop Applications Rich Browser Applications RICH Text UI Client & Server Functionality RICH INTERNET APPLICATIONS

XForms

AJAX

DHTML

JavaScript

Flex

Java

Vista (2008)

Visual Basic

PowerBuilder

C#

Delphi

Access

Nothing rich here except the hardware vendors  MAINFRAME REACH Local Global

#1 – Flex is for developers No “skip intro” here – Flex provides the framework , components and services to deliver Rich Internet Applications.

Flex is… Flex Framework Flex Class Libraries, Components, Containers, Layout Managers, Behaviors, and Effects Flex Utilities Compilation, Debugging, Automated Testing Flex Utilities Compilation and Debugging Programming Language ActionScript 3, MXML Flex SDK Flex Data Services 2 Real Time Messaging Data Management Service Remote Procedure Calls (RPC Service) Design View Flex Builder 2 Code Hinting Debugging Component Skinning

How Flex works… Browser Flash Player Web Server Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile .swf .swf

#2 – Flex applications overcome browser limitations Create a new generation of expressive , high performance and collaborative online applications.

Transforming the User Experience

Expressiveness

Performance

Real time

Rich media

Offline support

Accessible

Target Flex applications

Flex for… Guided self-service

Flex for… Rich media experiences

Flex for… Data visualization

Flex for… Business applications

#3 – Flex leverages your existing skills HTML, XML, JavaScript, Ajax, J2EE and .NET developers will be productive with Flex in no time.

How Flex works… MXML and ActionScript Flex Class Library

#4 – Flex applications have the broadest reach No more platform or browser incompatibility issues with Flex. Build, test and deploy with confidence.

Flash Player has widest reach in the World… 600 million PCs and devices 98% PCs

Flash Player 9 Flash Player 9

New Virtual Machine

Terrific performance improvements

Reduced memory consumption

ActionScript 3

ECMAScript Edition 3 compliant

Dynamic and typed programming language

ECMAScript for XML (E4X)

External API to integrate w/ AJAX and native applications

Seamless deployment

One-click upgrade

Full backward compatibility

ActionScript 1/2 ActionScript 3

Extending reach to desktop and mobile applications 2007-2008 Cross- Platform Rich Internet Applications Lightweight Desktop Apps Cross- Phone/Device 2006 Apollo MXML Flash Lite Flash SDK Mobile MXML Windows .NET XAML Windows Only Web Pages Native Applications XAML WPF/E XAML WPF/E JIT Deployment OS Integration Offline Operation JIT Deployment Rich Client Robust App Model JIT Deployment Dumb Client Page-Based Model Heavyweight Install Native OS Integration Offline Operation Web Browser HTML/JavaScript Ajax/Flash/Flex

#5 – Flex will enrich your Ajax applications Add audio , video , vector graphics and charting to Ajax (just like Google, Yahoo and YouTube did).

Web 2.0 with Ajax, Flex and Flash

Why Developers Leverage Flash

Cross-platform vector drawing API

Integrated two-way audio/video

Advanced communication protocols

Performance

Flash Player External API

You Tube Google Finance Measure Map

Blending Flex and Ajax Today/Tomorrow

Flex/Ajax Bridge (FABridge)

Ajax Client for Flex Data Services

Joining Open Ajax initiative

Releasing Spry Ajax framework

Apollo universal client

Example application

Extending Ajax… where Flex adds value http(s) transport browser client user interface JavaScript call HTML+CSS data Ajax engine HTTP request XML data web and/or XML server datastores, backend processing, legacy systems server-side systems Programming Model / Productivity Performance VM - bytecode - JIT Expressiveness Vector Graphics - Drawing API – Rich Media Real Time Binary Sockets - Pub/Sub Messaging Offline Local Storage

#6 – Flex plays well with others With XML/SOAP support and J2EE integration , Flex unifies disparate data services on the client.

How Flex works… XML/HTTP REST SOAP Web Services Browser J2EE Application Server Flex Data Services 2 Flash Player Web Server Existing Applications and Infrastructure Flex Builder IDE Flex SDK MXML ActionScript Flex Class Library Compile Data Data .swf .swf .swf

#7 – Flex makes you (and your applications) look good Transitions , effects , skinning and visual component states deliver immersive user experiences.

Flex class library

UI Components

Datagrid, Tree, List, TileList, HorizontalList, ...

Tab, Accordion, Menu, ContextMenu, ...

RichText Editor, Sliders, ...

ToggleButton, PopupButton, ...

Media Components

Video, Audio, Streaming

Layout Management

Panel, VBox, HBox, VDividedBox, HDivideBox, Form, Tile, Grid, …

Constraint-based layouts

View States

Charting Components

LineChart, ColumnChart, BarChart, PieChart, HLOC, Candle, Plot, Bubble, ...

Expressiveness

Styling and Skinning

Effects, Transitions

Data

HTTPService, WebService, RemoteObject

Producer, Consumer

DataService

E4X data binding

Paging

Validators

Formatters

#8 – Flex will make you go faster Flex transforms the developer experience - with productive coding tools , integrated debugging and automated testing support.

Flex Builder… developer productivity

Eclipse-based Flex IDE

Robust code editing and navigation

Interactive debugging environment

Drag and drop visual design

Avail. as standalone product or plug-in

Enhanced Programming Model

Native APIs for creating and parsing XML

New internationalization APIs

Simplified component APIs

Integration with automated testing

#9 – Flex makes it easier to work with data Data synchronisation , offline storage , publish/subscribe messaging and real-time data push for “data-rich” applications.

Flex Data Services… extending RIA capability Example application Flex Data Services XML data connectivity RPC Services Faster binary data transfer Traditional web data Connection to middleware / data source Conflict Resolution Data Management Off-line applications Load large data by sets (maps) Web-tier SWF creation Co-Browsing Messaging Chat / IM Real Time Data Streaming

#10 – You can build flex applications for free! Compile and deploy Flex applications at no cost with the Flex 2 SDK… download it from Adobe.com .

Putting it all together… FREE FREE FREE *formerly Flash Player 8.5. Click here for more info . Flex SDK 2 Flex/Ajax Bridge Flash Player 9* Flex Builder 2 Design View Code Hinting Debugging Component Skinning Flex Data Services 2 Messaging Service Data Management Service RPC Services

Download Flex… www.adobe.com/go/flex Learn more… www.flex.org