Flash, Flex & AIR: A brief survey

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

Slide 2: 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

Slide 3: 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

Slide 4: 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

Slide 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

Slide 6: 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

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

Slide 8: 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

Slide 9: 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

Slide 10: 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

Slide 11: Travis Isaacs | travisisaacs.com 8

Slide 12: Drawing tools Travis Isaacs | travisisaacs.com 9

Slide 13: Timeline Travis Isaacs | travisisaacs.com 10

Slide 14: Stage Travis Isaacs | travisisaacs.com 11

Slide 15: Library & components Travis Isaacs | travisisaacs.com 12

Slide 16: Actionscript editor Travis Isaacs | travisisaacs.com 13

Slide 17: 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

Slide 18: 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

Slide 19: 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> Travis Isaacs | travisisaacs.com 16

Slide 20: FLEXBUILDER Travis Isaacs | travisisaacs.com 17

Slide 21: ECLIPSE PLUGIN Travis Isaacs | travisisaacs.com 18

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

Slide 23: Probably. Travis Isaacs | travisisaacs.com 20

Slide 24: EXAMPLE External CLASS FILE Data Source SWF Agent Web Server FlexBuilder IDE IDE Eclipse Java Developer Travis Isaacs | travisisaacs.com 21

Slide 25: 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

Slide 26: application es for consumption by a Flex Server-side Java can be used to create web servic Travis Isaacs | travisisaacs.com 23

Slide 27: 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

Slide 29: “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/

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

Slide 31: Sorta. Travis Isaacs | travisisaacs.com 28

Slide 32: 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/

Slide 33: WebORB for Java “WebORB for Java is server-side technology enabling connectivity between Flash Remoting and AJAX clients and Java applications.” $900/CPU

Slide 35: Do users need anything special to Q run Flex applications? Travis Isaacs | travisisaacs.com 32

Slide 36: Yes. Travis Isaacs | travisisaacs.com 33

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

Slide 38: EASY INSTALL Travis Isaacs | travisisaacs.com 35

Slide 43: 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

Slide 44: 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)

Slide 46: OPEN SOURCE

Slide 47: Source to ActionScript components Flex SDK and components Java source code for compilers, debugger, and core

Slide 48: Mozilla Public License (MPL)

Slide 49: 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

Slide 50: 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

Slide 51: 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

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

Slide 53: Pownce

Slide 55: Adobe Kuler

Slide 56: ebay Desktop Travis Isaacs | travisisaacs.com 53

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

Slide 58: Multiple window support Travis Isaacs | travisisaacs.com 55

Slide 59: Live updating Travis Isaacs | travisisaacs.com 56

Slide 60: SalesForce SalesBuilder

Slide 65: 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

Slideshare.net (beta)