© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Immanuel Noel | blog.immanuelnoel.comIntroducing RIAs and Flex

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Web

Flex

RIAs

Web 2.0

Web, AIR

Flex, Java, Silverlight

RIAs, AJAX, Web-Services

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Web 2.0

Source : O’Reilly Media

Blogs

Page Rank,Ebay,

Amazon reviews

Bit Torrent

Flickr, Del.icio.us,

Tagging

Gmail, Maps, AJAX, RIAs

Wikipedia, Wiki’s

Attitude, not Technology

Web-Services

Hackability More People, Better Software

Some Rights Reserved

Rich User Experience

Trust your Users

Emergent –unpredicted

Cooperate, Don’t Control

Web as a PlatformUser Controlled Data

Services, Not SoftwareParticipationCost Effective

Software -> Multiple DeviceHarnessing Collective Intelligence

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

The Shift to Web 2.0

Source : O’Reilly Media

DoubleClick --> Google AdSense

Ofoto --> Flickr

Akamai --> BitTorrent

Mp3.com --> Napster

Britannica Online --> Wikipedia

Personal websites --> Blogging

Evite --> Upcoming.org

Domain name speculation --> Search engine optimization

Page views --> Cost per click

Screen scraping --> Web services

Publishing --> Participation

Content management systems --> Wikis

Directories (taxonomy) --> Tagging ("folksonomy")

Stickiness --> Syndication

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Rich Internet Applications

Rich Internet applications (RIAs) offer arich, engaging experience that improvesuser satisfaction and increasesproductivity. Using the broad reach ofthe Internet, RIAs can be deployedacross browsers and desktops.

Rich Internet applications (RIAs)are web applications that havesome of the characteristics ofdesktop applications. AdobeFlash, Java, and MicrosoftSilverlight are currently the threemost common platforms.,

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Why RIA ?

RIAs offer organizations a proven, cost effective way to deliver modern applications with real business benefits

1. Offer users a richer, more engaging experience.

2. Keep pace with users' rising expectations.

3. Increase customer loyalty and generate higher profits.

4. Leverage existing personnel, processes, and infrastructure.

Rich Media

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

RIA Market Share

(courtesy:http://www.statowl.com/custom_ria_market_penetration.php)

Hence, ADOBE FLASH PLATFORM

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Building RIAs using the Flash Platform

The Adobe Flash Platform is the leading solution for building rich Internet applications, offering acomplete set of integrated technologies supported by an established ecosystem.

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Flex

Flash Builder IDE

Flex SDK

Flex Class Library

MXML ActionScript

Compile

SOAP HTTP/S AMF/S RTMP/S

Web Server

Existing Applications & Infrastructure

J2EE Application Server

LC Data ServicesXML/HTTP

REST

SOAP Web Services

Browser

Flash Player

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

What is ActionScript ?

Powerful, object-oriented scripting language undergirding the Flash Platform

Supported across multiple products:

Flex

Flash

Flash Media Server

Flash Lite

Standards compliant

ECMA-262, Edition Three

ECMA-262, Edition Four proposal

Flash

Flash Lite

FlashMediaServer

Flex

ActionScript

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

What is MXML ?

MXML is a compile time source format

No MXML appears in the SWF SWF has bytecode

MXML is XML

Declarative format: More readable

More maintainable

More “toolable”

MXMLC generates ActionScript classes from markup

This generative approach saves the developer from a lot of mundane coding

var a:Application = new Application();a.percentWidth=100;a.percentHeight=100;

var p:Panel = new Panel();a.addChild(p);p.percentWidth=100;p.percentHeight=100;p.title=“summit app”;

var h:HBox = new HBox();p.addChild(h);h.percentWidth=100;h.percentHeight=100;

var l:List = new List();h.addChild(l);l.width=300;l.percentHeight=100;

var dataSvc:HTTPService = new HTTPService();dataSvc.url = “http://localhost/userList/”;dataSvc.addEventListener(“result”,function(event:Eve

nt) {l.dataProvider = dataSvc.result});

var details:DetailPane = new DetailPane();h.addChild(details);l.addEventListener(“change”,function(event:Event)

{details.user = l.selectedItem} );

Who wants to write this !!!

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Components

Flex framework has many components

You can create custom components

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe AIR

Adobe AIR enables web developers to use JavaScript, HTML, Flash, and Flex to build web

applications that run outside the browser

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Limitations of browser-based applications

No offline access

Constrained with the browser’s chrome

Common desktop interactions not possible

Drag and Drop

Local system access is limited

For example, cannot access the local file system

Updates are delivered only when browser is open

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Go beyond the browser sandbox

Install and run as a desktop application

Local database access (SQLite)

Full file system access

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Adobe AIR Application Stack

Cross-OS ApplicationIntegratedRendering

Integrated DOMs& Scripting

Flash

FlexActionScriptXMLAudioVideo

HTML

PDF

HTML

HTMLJavaScriptXMLCSS

Flash

PDF

Adobe AIR APIs

Mac, Windows, Linux, Android and BlackBerry

File SystemAccess

NetworkDetection Notifications Application

UpdateDrag and

DropLocal

Database ...

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Creating an Adobe AIR application

Build Test Package Sign Deploy

.air file contains all application files• SWF, HTM, JS, XML, JPG, etc• Enables cross-OS deployment

Use existing designer/developer tools or free AIR SDK for testing and packaging

Build Test Package Sign Deploy

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Tooling : Flash Builder

• IDE for building Flex / AIR Applications

• WYSIWYG

• MXML & ActionScript code editors

• Debuggers

• Performance Analyzers

• Free for Students : http://www.adobe.com/devnet-archive/flex/free/

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Demo

Hello World for the Web and Desktop

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Next ?

• Flex in a Week Videos :

http://www.adobe.com/devnet/flex/videotraining.html

• Test Drive Flex in a hour :

http://www.adobe.com/devnet/flex/testdrive.html

• Tour de Flex :

http://www.adobe.com/devnet/flex/tourdeflex.html

• Devnet :

http://www.adobe.com/devnet.html

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Questions ?

© 2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.