Flash, Flex & AIR: A brief survey

67 %
33 %
Information about Flash, Flex & AIR: A brief survey

Published on February 1, 2008

Author: tbisaacs



A brief technical survey of Rich Internet Application (RIA) platforms, focusing on Flash, Flex, and Air.

Rich Internet Applications: v3 Adobe Flex & AIR Microsoft Siverlight Sun Java FX Firefox 3 Flash & Flex

Brower-based Player-based Client-based Thin Flash, Flex, AIR, Windows, Rich HTML AJAX Client Siverlight JavaFX Mac Client XUL XUL (+XULRunner) Java/Swing or SWT XForms OpenLazlo Reduced maintenance Combined benefits Intuitive UI Location independence of thin and rich clients Immediate response

FLEX “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. ” Travis Isaacs | 3

More succinctly: “Flex is a way to develop Flash applications by programming” Travis Isaacs | 4

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 Travis Isaacs | 5

How is Flex different from Flash? EMCA standardized, like Javascript, yet object- oriented like java 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 Travis Isaacs | 5

How is Flex different from Flash? EMCA standardized, like Javascript, yet object- oriented like java Flash Flex ActionScript Yes Yes MXML No Yes Declaritive XML HTML/CSS Yes - Yes LIke XUL Javascript Limited Yes Drawing Tools Yes No Library Yes No Layout Engine Yes Yes Animation Timeline Yes No Layers Yes No Travis Isaacs | 5

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 Travis Isaacs | 5

ActionScript Timeline Layers Canvas Movie clips Stage Travis Isaacs | 6

ActionScript Timeline Layers Flash documents (.FLA) are binary files created in the Adobe Flash authoring environment. Canvas Interface elements are “drawn”Movie and manipulated over a timeline using tweens,clips keyframes, and Stage layers (or programmatically). A .FLA file is compiled into a .SWF file and embedded into an HTML page. Travis Isaacs | 7

Travis Isaacs | 8

Drawing tools Travis Isaacs | 9

Timeline Travis Isaacs | 10

Stage Travis Isaacs | 11

Library & components Travis Isaacs | 12

Actionscript editor Travis Isaacs | 13

ActionScript Data Tags services Source MXML View Html & Css Perspectives Travis Isaacs | 14

ActionScript Data Tags services Source MXML View Flex documents (.MXML) are text files authored in Adobe FlexBuilder (based on Eclipse). Alternatively, & Html Eclipse RCP can be used with a free FlexBuilder plug-in. Css Perspectives In Flex, interface elements and components are created using declaritive XML-like tags. Travis Isaacs | 15

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 = as ArrayCollection; } ]]> </mx:Script> <mx:HTTPService id=quot;photoServicequot; url=quot;; result=quot;photoHandler(event)quot;/> <mx:HBox width=quot;391quot;> <mx:TextInput id=quot;searchTermsquot; /> <mx:Button label=quot;Buttonquot; click=quot;requestPhotos()quot;/> </mx:HBox> <mx:TileList width=quot;100%quot; height=quot;100%quot; dataProvider=quot;{photoFeed}quot;> <mx:itemRenderer> <mx:Component> <mx:VBox width=quot;125quot; height=quot;125quot; paddingBottom=quot;5quot; paddingLeft=quot;5quot; paddingTop=quot;5quot; paddingRight=quot;5quot;> <mx:Image width=quot;75quot; height=quot;75quot; source=quot;{data.thumbnail.url}quot;/> <mx:Text text=quot;{}quot;/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:WindowedApplication> Travis Isaacs | 16

FLEXBUILDER Travis Isaacs | 17

ECLIPSE PLUGIN Travis Isaacs | 18

Can Flex can be a companion to Q your existing technology stack? Travis Isaacs | 19

Probably. Travis Isaacs | 20

EXAMPLE External CLASS FILE Data Source SWF Agent Web Server FlexBuilder IDE IDE Eclipse Java Developer Travis Isaacs | 21

EXAMPLE Client Side Server Side Integration/ Integration/ Presentation Layer Presentation Layer Service Layer Service Layer HTTP Service Struts, Tapestry, Browser (HTML) Locator DAOs Velocity, ETC Spring, HiveMind, EJB, or Hibernate, Entity other integration/ Beans, etc. Flex AMF Delegate service layer Flex (Flash Player) Gateway Layer REMOTE OBJECT Travis Isaacs | 22

application es for consumption by a Flex Server-side Java can be used to create web servic Travis Isaacs | 23

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 Travis Isaacs | 24

“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 Q to run and deploy Flex apps? Travis Isaacs | 27

Sorta. Travis Isaacs | 28

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:

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 Q run Flex applications? Travis Isaacs | 32

Yes. Travis Isaacs | 33

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

EASY INSTALL Travis Isaacs | 35

Travis Isaacs | 36

Travis Isaacs | 37

Travis Isaacs | 38

Travis Isaacs | 39

ActionScript Data Tags services <mx:SWFLoader> Source MXML View Html & Because they are both compiled into a common format Css (.swf), Flash movies can be used in Flex applications. Perspectives Travis Isaacs | 40

stylingn’ existing UI elements) (ability to ‘ski al c ntrol graphicarency, oadows, rounded corners) precise sp sh ng, alpha tran (font anti-aliasi w’ widgets UI Aesthetic . creation ofru‘ne mb) Considerations.. breadc (slider, tabbed atterns novel interaction p seatmap)D (radial menu, 3- creation of ‘new’ w idgets data visartsalizat) u ion , mapping (bar graphs, ch cs 3-D effeges,trotating objects) (perspective pa basic styling (ability to ‘skin’ existing UI elements)


Source to ActionScript components Flex SDK and components Java 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) Travis Isaacs | 46

AIR “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.” Travis Isaacs | 47

Application.air ? Flash Content Web Content Flex Content Java Applet AIR RUNTIME WebKit Flash PDF SQLite Browser Player Support Database OS integration via: Windows 2000 File System I/O System Drag & Drop Native Menu API Windows XP Online/Offline Full Network Stack Right-click support Mac OSX Linux BETA Windowing Clipboard Sync Travis Isaacs | 48

Finetune Deskop } Music streaming from Internet source + } Music from my local iTunes library Travis Isaacs | 49


Adobe Kuler

ebay Desktop Travis Isaacs | 53

OS window Custom window chrome } controls with alpha transparency } Travis Isaacs | 54

Multiple window support Travis Isaacs | 55

Live updating Travis Isaacs | 56

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 Travis Isaacs | 62

Add a comment

Related pages

Flex | LinkedIn

View 233359 Flex posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn. LinkedIn Home What is LinkedIn? Join Today
Read more

Flex Builder | Flex Doc Team

Flex Doc Team Updates, new content ... including Flash Player, AIR, Flex, ... Please click the link below to take a brief survey on the following topic:
Read more

Mobile and devices samples | Adobe Developer Connection

Mobile and devices samples. ... sample app illustrates simple camera integration in a Flex mobile app: create a survey, ... Flash Builder 4.5, and AIR 2.6.
Read more

Adobe Deutschland: Kreativität, Marketing und ...

Adobe Flash Player. Adobe AIR. Adobe Shockwave Player. Alle Produkte. ... , Adobe AIR ...
Read more

November | 2009 | Flex Doc Team

Flex Doc Team Updates, ... The documentation group is conducting a brief survey to learn more regarding how customers get ... Flash CS3; Flex 2.01; Flex 3 ...
Read more

Flex Builder Pre-Release Program Application Survey

Web survey powered by Create your own online survey now with SurveyMonkey's expert certified FREE templates. Flex ... brief survey and ...
Read more

Tutorial: Flex for Android in 90 Minutes | Christophe ...

I have had a brief look at adobe air ... Flash Tutorial: Flex for Android Quickstart ... Flex, AIR, Java, Android Skip to content BioAIR SamplesAIR Web ...
Read more

flex - Download a file with Adobe AIR - Stack Overflow

... { import flash.filesystem.File; ... ... Adobe AIR: how to play and ...
Read more