Flash, Flex & AIR: A brief survey
-
Upload
travis-isaacs -
Category
Technology
-
view
112 -
download
0
description
Transcript of 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
Travis Isaacs | travisisaacs.com 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 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
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
EMCA standardized, like
Javascript, yet object-
oriented like java
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
EMCA standardized, like
Javascript, yet object-
oriented like java
Declaritive XML -
LIke XUL
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 6
Stage
ActionScript
TimelineLayers
CanvasMovie clips
http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/
Travis Isaacs | travisisaacs.com 7
Stage
ActionScript
TimelineLayers
CanvasMovie clips
http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/
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.
Travis Isaacs | travisisaacs.com 8
Travis Isaacs | travisisaacs.com 9
Drawing tools
Travis Isaacs | travisisaacs.com 10
Timeline
Travis Isaacs | travisisaacs.com 11
Stage
Travis Isaacs | travisisaacs.com 12
Library & components
Travis Isaacs | travisisaacs.com 13
Actionscript editor
Travis Isaacs | travisisaacs.com 14
Perspectives
ActionScript
DataservicesTags
SourceView
Html &Css
http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/
MXML
Travis Isaacs | travisisaacs.com 15
Perspectives
ActionScript
DataservicesTags
SourceView
Html &Css
http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/
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.
Travis Isaacs | travisisaacs.com 16
<?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>
Travis Isaacs | travisisaacs.com 17
FLEXBUILDER
Travis Isaacs | travisisaacs.com 18
ECLIPSE PLUGIN
Travis Isaacs | travisisaacs.com 19
Can Flex can be a companion to your existing technology stack?Q
Travis Isaacs | travisisaacs.com 20
Probably.
Travis Isaacs | travisisaacs.com 21
ExternalData Source
Web Server
Java Developer
Agent
FlexBuilder IDE
CLASS FILE
Eclipse IDE
SWF
EXAMPLE
Travis Isaacs | travisisaacs.com 22
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
Travis Isaacs | travisisaacs.com 23
Server-side Java can be used to create web services for consumption by a Flex application
Travis Isaacs | travisisaacs.com 24
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/
Travis Isaacs | travisisaacs.com 27
Do we you any special technology to run and deploy Flex apps?Q
Travis Isaacs | travisisaacs.com 28
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
Travis Isaacs | travisisaacs.com 32
Do users need anything special to run Flex applications?Q
Travis Isaacs | travisisaacs.com 33
Yes.
Travis Isaacs | travisisaacs.com 34
96% of PC’s have what they need to run a Flex application.
Travis Isaacs | travisisaacs.com 35
EASY INSTALL
Travis Isaacs | travisisaacs.com 36
Travis Isaacs | travisisaacs.com 37
Travis Isaacs | travisisaacs.com 38
Travis Isaacs | travisisaacs.com 39
Travis Isaacs | travisisaacs.com 40
Perspectives
ActionScript
DataservicesTags
SourceView
Html &Css
http://kanuwadhwa.wordpress.com/2007/10/03/flash-and-flex-can-hold-hands/
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)
Travis Isaacs | travisisaacs.com 46
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 47
“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
Travis Isaacs | travisisaacs.com 48
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
Travis Isaacs | travisisaacs.com 49
Music from my localiTunes library}} Music streaming from
Internet source
Finetune Deskop
+
Pownce
Adobe Kuler
Travis Isaacs | travisisaacs.com 53
ebay Desktop
Travis Isaacs | travisisaacs.com 54
OS window controls} Custom window chrome
with alpha transparency}
Travis Isaacs | travisisaacs.com 55
Multiple window support
Travis Isaacs | travisisaacs.com 56
Live updating
SalesForce SalesBuilder
Travis Isaacs | travisisaacs.com 62
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