Flash, Flex & AIR: A brief survey

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

Published on February 1, 2008

Author: tbisaacs

Source: slideshare.net


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 | travisisaacs.com 3

More succinctly: “Flex is a way to develop Flash applications by programming” http://www.artima.com/weblogs/viewpost.jsp?thread=193593 Travis Isaacs | travisisaacs.com 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 | travisisaacs.com 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 | travisisaacs.com 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 | travisisaacs.com 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 | travisisaacs.com 5

ActionScript Timeline Layers Canvas Movie clips Stage Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 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 | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 7

Travis Isaacs | travisisaacs.com 8

Drawing tools Travis Isaacs | travisisaacs.com 9

Timeline Travis Isaacs | travisisaacs.com 10

Stage Travis Isaacs | travisisaacs.com 11

Library & components Travis Isaacs | travisisaacs.com 12

Actionscript editor Travis Isaacs | travisisaacs.com 13

ActionScript Data Tags services Source MXML View Html & Css Perspectives Travis Isaacs | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 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 | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 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 = event.result.rss.channel.item as ArrayCollection; } ]]> </mx:Script> <mx:HTTPService id=quot;photoServicequot; url=quot;http://api.flickr.com/services/feeds/photos_public.gnequot; 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;{data.credit}quot;/> </mx:VBox> </mx:Component> </mx:itemRenderer> </mx:TileList> </mx:WindowedApplication> Travis Isaacs | travisisaacs.com 16

FLEXBUILDER Travis Isaacs | travisisaacs.com 17

ECLIPSE PLUGIN Travis Isaacs | travisisaacs.com 18

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

Probably. Travis Isaacs | travisisaacs.com 20

EXAMPLE External CLASS FILE Data Source SWF Agent Web Server FlexBuilder IDE IDE Eclipse Java Developer Travis Isaacs | travisisaacs.com 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 http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.html Travis Isaacs | travisisaacs.com 22

application es for consumption by a Flex Server-side Java can be used to create web servic Travis Isaacs | travisisaacs.com 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 http://www.onflex.org/ted/2006/12/top-10-myths-about-adobe-flex-20.php Travis Isaacs | travisisaacs.com 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.” http://www.jamesward.org/census/ http://www.jamesward.org/census/

Do we you any special technology Q to run and deploy Flex apps? Travis Isaacs | travisisaacs.com 27

Sorta. Travis Isaacs | travisisaacs.com 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: 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 Q run Flex applications? Travis Isaacs | travisisaacs.com 32

Yes. Travis Isaacs | travisisaacs.com 33

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

EASY INSTALL Travis Isaacs | travisisaacs.com 35

Travis Isaacs | travisisaacs.com 36

Travis Isaacs | travisisaacs.com 37

Travis Isaacs | travisisaacs.com 38

Travis Isaacs | travisisaacs.com 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 | travisisaacs.com http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/ 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 | travisisaacs.com 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 | travisisaacs.com 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 | travisisaacs.com 48

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


Adobe Kuler

ebay Desktop Travis Isaacs | travisisaacs.com 53

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

Multiple window support Travis Isaacs | travisisaacs.com 55

Live updating Travis Isaacs | travisisaacs.com 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 | travisisaacs.com 62

Add a comment

Related presentations

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 SurveyMonkey.com. 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; ... http://www.adobe.com/devnet/air/flex/articles/exploring_file_capabilities.html. ... Adobe AIR: how to play and ...
Read more