flash, flex & air: a brief survey

Rich Internet Applications:

Firefox 3

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

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

ActionScript

TimelineLayers

CanvasMovie clips

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

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

Library & components

Actionscript editor

Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css

Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css

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>

FLEXBUILDER

ECLIPSE PLUGIN

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

Probably.

ExternalData Source

Web Server

Java Developer

FlexBuilder IDE

CLASS FILE

Eclipse IDE

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.

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

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

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/

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

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

EASY INSTALL

Perspectives

ActionScript

DataservicesTags

SourceView

Html &Css

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

tools travis isaacs

flexbuilder travis isaacs

eclipse plugin travis

stagetravis isaacs

flexadobe flex

css perspectivesin flex

flash applications

binary socket http

Technology

flash catalyst at flex camp orange county

rias mit flash und flex - hpi.de · actionscript rias mit...

flex flash and on demand

multi-touch development with flash and flex

migrating your flash / flex applications to playbook,...

table of contents · flex® 10ke, flex 10ks, acex, apex 20k...

flex based workflow tools for the flash ide

opensocial flash/flex client library project:

flash and flex can hold hands techniques for integrating...

cs335: a brief introduction to lex and flex

flash camp portugal - let's talk about flex baby

adobe flash builder + flex 4 + blazeds 4 _ erko bridee

accessibility in flex (and the flash platform)

codefest 2010. Высоцкий С. —...

flex 4 para desenvolvedores flash

flex 4.6 et flash builder 4.6

512k flash memory technical brief

cakefest 2010 flex/flash builder with cakephp

rmc intro to as3-signals for flash and flex

using flash & flex together