flash, flex & air: a brief survey

Rich Internet Applications:

Firefox 3

v3

Sun Java FXMicrosoft SiverlightAdobe Flex & AIR

Flash & Flex

XUL Java/Swing or SWTXUL (+XULRunner)XForms OpenLazlo

Reduced maintenanceLocation independence

Combined benefitsof thin and rich clients

Intuitive UIImmediate response

ThinClient

RichClient

Brower-based Player-based Client-based

HTML AJAX Flash, Flex, Siverlight

AIR,JavaFX

Windows,Mac

Travis Isaacs | travisisaacs.com 3

“Adobe® Flex™ 2 is a complete, powerful application development solution for creating and delivering cross-platform rich Internet applications (RIAs) within the enterprise and across the web. It enables the creation of expressive and interactive web applications that can reach virtually anyone on any platform. ”

FLEX


More succinctly:

“Flex is a way to develop Flash applications by programming”

http://www.artima.com/weblogs/viewpost.jsp?thread=193593




How is Flex different from Flash?

Flash Flex

ActionScript Yes Yes

MXML No Yes

HTML/CSS Yes Yes

Javascript Limited Yes

Drawing Tools Yes No

Library Yes No

Layout Engine Yes Yes

Animation Timeline Yes No

Layers Yes No



Flash Flex


MXML No Yes

HTML/CSS Yes Yes



Library Yes No



Layers Yes No

EMCA standardized, like

Javascript, yet object-

oriented like java



Flash Flex


MXML No Yes

HTML/CSS Yes Yes



Library Yes No



Layers Yes No

EMCA standardized, like

Javascript, yet object-

oriented like java

Declaritive XML -

LIke XUL



Flash Flex


MXML No Yes

HTML/CSS Yes Yes



Library Yes No



Layers Yes No


Stage

ActionScript

TimelineLayers

CanvasMovie clips

http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/




Stage

ActionScript

TimelineLayers

CanvasMovie clips


Flash documents (.FLA) are binary files created in the Adobe Flash authoring environment.

Interface elements are “drawn” and manipulated over a timeline using tweens, keyframes, and

layers (or programmatically).

A .FLA file is compiled into a .SWF file and embedded into an HTML page.


Drawing tools


Timeline


Stage


Library & components


Actionscript editor


Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css


MXML




Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css


MXML

Flex documents (.MXML) are text files authored in Adobe FlexBuilder (based on Eclipse). Alternatively, Eclipse RCP can

be used with a free FlexBuilder plug-in.

In Flex, interface elements and components are created using declaritive XML-like tags.


<?xml version="1.0" encoding="utf-8"?><mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" backgroundGradientColors="[0xFFFFFF,0xAAAAAA]" horizontalAlign="left" verticalGap="15" horizontalGap="15"> <mx:Label text="Flickr Tags or search terms" fontWeight="bold"/> <mx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; [Bindable] private var photoFeed:ArrayCollection; private function requestPhotos():void{ photoService.cancel(); var params:Object = new Object(); params.format = 'rss_200_enc'; params.tags = searchTerms.text; photoService.send(params); } private function photoHandler(event:ResultEvent):void{ photoFeed = event.result.rss.channel.item as ArrayCollection; } ]]> </mx:Script> <mx:HTTPService id="photoService" url="http://api.flickr.com/services/feeds/photos_public.gne" result="photoHandler(event)"/> <mx:HBox width="391"> <mx:TextInput id="searchTerms" /> <mx:Button label="Button" click="requestPhotos()"/> </mx:HBox><mx:TileList width="100%" height="100%" dataProvider="{photoFeed}"> <mx:itemRenderer> <mx:Component> <mx:VBox width="125" height="125" paddingBottom="5" paddingLeft="5" paddingTop="5" paddingRight="5">

<mx:Image width="75" height="75" source="{data.thumbnail.url}"/>

<mx:Text text="{data.credit}"/> </mx:VBox> </mx:Component> </mx:itemRenderer></mx:TileList> </mx:WindowedApplication>

http://api.flickr.com/services/feeds/photos_public.gne

http://api.flickr.com/services/feeds/photos_public.gne


FLEXBUILDER


ECLIPSE PLUGIN


Can Flex can be a companion to your existing technology stack?Q


Probably.


ExternalData Source

Web Server

Java Developer

Agent

FlexBuilder IDE

CLASS FILE

Eclipse IDE

SWF

EXAMPLE


http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.html

Client Side Server Side

Presentation Layer

Flex (Flash Player)

Presentation Layer

Flex AMFGateway

DelegateLayer

Integration/Service Layer

Spring, HiveMind, EJB, or other integration/

service layer

Struts, Tapestry, Velocity, ETC

Browser (HTML)

Integration/Service Layer

Hibernate, Entity Beans, etc.

HTTP

REMOTEOBJECT

ServiceLocator DAOs

EXAMPLE




Server-side Java can be used to create web services for consumption by a Flex application


Flex will work with nearly any HTTP or socket based server:

• ASCII text (POST,GET,REST Headers Supported)

• XML (POST,GET,REST Headers Supported)

• Server side languages: .NET, RUBY, PYTHON, JAVA, PHP, PERL, XML, etc

• SOAP direct to the server

• Binary AMF (Optimized data serialization format for remoting, paging)

• Real-time exchange using 2 way push over XML Socket and Binary Socket

http://www.onflex.org/ted/2006/12/top-10-myths-about-adobe-flex-20.php



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

“Flex supports a compact binary object serialization protocol, called AMF3, which is extremely fast. There are numerous Open Source implementations using various backend technologies for AMF3, as well as a commercial / supported Adobe product, called Flex Data Services.”

“If you control both sides of the wire in your application, then there is rarely a good reason to serialize and deserialize text. Objects are blazing fast as you can tell by this benchmark. AMF3 is also typically much more efficient across the wire (even without compression) and consumes much less client side memory. JIT compilation and binary object serialization are the primary reasons why Flex AMF3 is so fast, even in the test with the full 20,000 rows. And, it’s not just faster for loading - it also speeds client side sorting and filtering.”





Do we you any special technology to run and deploy Flex apps?Q


Sorta.

Flex Data Services 2“A powerful solution for creating data-intensive rich applications”

• Deployed as standard J2EE application• Real-time data push and pub/sub messaging• Allows for occasionally connected applications

$15,000/CPU

Read More:http://www.adobe.com/products/flex/dataservices/

http://www.adobe.com/devnet/flex/articles/architecting_rias.html




WebORB for Java“WebORB for Java is server-side technology enabling connectivity between Flash Remoting and AJAX clients and Java applications.”

$900/CPU


Do users need anything special to run Flex applications?Q


Yes.


96% of PC’s have what they need to run a Flex application.


EASY INSTALL


Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css


MXML

Because they are both compiled into a common format (.swf), Flash movies can be used in Flex applications.

<mx:SWFLoader>

creation of ‘new’ widgets

basic styling(ability to ‘skin’ existing UI elements)

styling(ability to ‘skin’ existing UI elements)

precise graphical control

(font anti-aliasing, alpha transparency, shadows, rounded corners)

creation of ‘new’ widgets

(slider, tabbed breadcrumb)

novel interaction patterns

(radial menu, 3-D seatmap)

data visualization(bar graphs, charts, mapping)

3-D effects(perspective pages, rotating objects)

UI Aesthetic

Considerations...

OPEN SOURCE

Source to ActionScript componentsFlex SDK and componentsJava source code for compilers, debugger, and core

Mozilla Public License (MPL)


So What?‣ Extremely rich UI potential via Flash and scripting‣ Client-side business logic (medium client)‣ High penetration of runtime (96% on Windows PC’s)‣ Complimentary to most technology stacks‣ Leverage talents of existing developers and designers‣ Free/cheap IDE tools‣ Open Source

What else?‣ Flex inherits existing challenges of using Flash in the

enterprise (gathering analytics, accessibility limitations)


“Adobe® AIR™ lets developers use their existing web development skills in HTML, AJAX, Flash and Flex to build and deploy rich Internet applications to the desktop.”

AIR


AIR RUNTIME SQLiteDatabase

FlashPlayer

WebKitBrowser

Application.airFlex ContentWeb ContentFlash Content Java Applet

?

PDFSupport

Windows 2000Windows XP

Mac OSXLinux BETA

File System I/OOnline/OfflineWindowing

System Drag & DropFull Network StackClipboard Sync

OS integration via:Native Menu APIRight-click support


Music from my localiTunes library}} Music streaming from

Internet source

Finetune Deskop

+

Pownce

Adobe Kuler


ebay Desktop


OS window controls} Custom window chrome

with alpha transparency}


Multiple window support


Live updating

SalesForce SalesBuilder


So What?‣ Easy application delivery to the desktop with a lightweight

runtime.‣ Hybrid of thin & fat client model‣ Online/offline capabilities via network API and local storage‣ Integrates into the OS like a “real” application‣ Rich windowing capabilities

What else?‣ Unproven in the enterprise‣ Still in BETA

flash, flex & air: a brief survey

Technology

tools travis isaacs

flexbuilder travis isaacs

eclipse plugin travis

stagetravis isaacs

flexadobe flex

css perspectivesin flex

flash applications

binary socket http