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
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
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
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
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
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
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
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
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
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
24. EXAMPLE
External
CLASS FILE Data Source
SWF
Agent
Web Server
FlexBuilder IDE
IDE Eclipse
Java Developer
Travis Isaacs | travisisaacs.com 21
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
26. application
es for consumption by a Flex
Server-side Java can be used to create web servic
Travis Isaacs | travisisaacs.com 23
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
28.
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/
30. Do we you any special technology
Q to run and deploy Flex apps?
Travis Isaacs | travisisaacs.com 27
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/
33. WebORB for Java
“WebORB for Java is server-side technology enabling connectivity between Flash Remoting and
AJAX clients and Java applications.”
$900/CPU
34.
35. Do users need anything special to
Q run Flex applications?
Travis Isaacs | travisisaacs.com 32
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
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)
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
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
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
52. Finetune Deskop
} Music streaming from
Internet source
+
} Music from my local
iTunes library
Travis Isaacs | travisisaacs.com 49
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