Flex体系架构剖析

Flex 构

zma@adobe.com
Platform Technology Evangelist
Blog: www.7yue.com
2006 Adobe Systems Incorporated. All Rights Reserved.
1

/
1960s & 1970s 1980s & 1990s


Web/App
Middleware
/
1960s & 1970s 1980s & 1990s 1990s & 2000s


Web Services &
RIA App Connectors

Web

Web/App SOA
/
1960s & 1970s 1980s & 1990s 1990s & 2000s 2000s & Future


Flash Platform & Flex


Adobe Flash

Adobe Adobe Flash
Flash® Player Media Server
family
Adobe Flex
Adobe Flash Adobe Flash
Builder
CS4 Professional Catalyst Adobe Flex®
Data Services
Adobe AIR™


RIA Adobe

Design &
Applications Third-party Adobe
Development
Tools Client
Application
Frameworks Flex Framework Third-party
Tier
Creative
Suite
Flash Flash
Browsers Devices Reader
Reader
Player Lite LE

AIR Flash PDF HTML
Flex
Builder

HTTP/S, Sockets, AMF, RTMP,
SOAP, WS*, REST, …
LiveCycle
Designer

Remote Domains Local Domain
Adobe Other Application Servers
Eclipse Flash Flash
Web Web
Media Cast Service
Services Services ColdFusion
LiveCycle
Server Tier
HTTP Other
Flickr.com
eBay API Service Services
Notepad Yahoo! API
Google API

ECM Message Other Printing &
EIS Databases Directories
Resource Tier Repository Queues Systems Scanning


Flex UI + SOA = SOC

Front End Client Tier

SOC
, Applets,
• 
SOA
• 
• 
•  /
• 
Services Oriented Client
• 
• 
ASP, JSP, Servlets, UI
• 
• 
• 
• 

Back End
• 

SOA / ESA
• 
• 
• 
• 
• 


构划
Flex


Adobe Flex

Adobe®
Flex™ 3 SDK

Open source Flex SDK

MXML and ActionScript 3.0

Command-line


Adobe Flex

Adobe®
Adobe®
Flex™ Builder™ 3
Flex™ 3 SDK
Open Source Flex SDK Standard Edition

MXML and ActionScript 3.0

Adobe® LiveCycle®
Data Services ES Professional Edition
Blaze DS

RPC
Web

RIA PDF

Proxy


Flex 3 Open Source

 Flex 3开
  SDK MPL framework, compiler, debugger
  bug JIRA
  opensource.adobe.com/ ex
 
  Free Adobe Flex SDK
  Open Flex SDK
  Flex UI Component
  AIR SDK
  Open Flex SDK
  Compiler+Frameworks
  Flex SDK add-ons for Open Flex SDK
  UI Component
  AIR SDK


Flex - MXML

<mx:Application>
<mx:WebService id=“ws” wsdl=“catalog.wsdl”/>
<mx:Button label=“Get Data” click=“ws.getProducts()”/>
<mx:DataGrid dataProvider=“{ws.getProducts.result}”/>
<mx:LineChart dataProvider=“{ws.getProducts.result}”/>
</mx:Application>


MXML –

<mx:Application>
<mx:WebService id=“ws” wsdl=“catalog.wsdl”/>
<mx:Button label=“Get Data” click=“ws.getProducts()”/>
<mx:DataGrid dataProvider=“{ws.getProducts.result}”/>
<mx:LineChart dataProvider=“{ws.getProducts.result}”/>
</mx:Application>


Flex - AVM2 Flash Player


Flash Player 2

  Retained
  AS3 Retained Mode
  Adobe
  GPU Cell
  video,audio
  Surfaces
  BitmapData,Filters,cacheAsBitmap
  Bitmap
 
 
 


Flash Player 2

  Immediate
 
 
 

 
 

 
  Pixel Bender Immediate
  GPU Immediate
  Immediate
  Bitmap lls Retained
  AS3 Retained
  Binary Retained


Flash Player


  AS3 Execution Model
 
 
 
  UI
 
  Video HD Vide
  AS3
 
  Flash Player 10 AS3 Runtime Execution
  Socket
 
  Pixel Bender Shaders AVM
  Green Thread Thread Library
  http://www.libspark.org/htdocs/as3/thread- les/document/
 
  FP11 12


Flex –


Flex – MXML


Flex

 
  Application +
Label构 HelloWorld
  Binary Size

  FlashCS4 Binary Size:
  116KB

  AS3+Compiler:
  8KB


Flex frameworks

   
   
    Binary Code Size (
 
  Flash
 
 
 
   
  UI Forms UI interaction  
   
   
 
 


Flex

Flex SDK
Flash Player
MXML ActionScript

Flex
SOAP HTTP/S AMF/S RTMP/S
Debuggers

Flex Builder IDE
Web

XML/HTTP
LC Data Services
REST
J2EE Application Server
SOAP Web Services


Flex


Flex - SAP example


种 Flex

4) design tweaks

ign
es
itial d
2) in
Developer
ttes
igne
+v
ps
m
1) co
Design Production
(Flash
Catalyst)

Visual Designer
3) development


- Flash Catalyst


UI


Demo


构
Flex – BlazeDS
LiveCycle Data Services ES
BlazeDS
BlazeDS Adobe LGPL v3 Service
Data Management Adapters
HTTP Data Synchronization
LiveCycle
Flash/Flex Remtoing Oﬀ-line Applications

SQL
Data Paging

RPC Services
•  Hibernate
Web Service

•  Flex UI HTTP Service ColdFusion
Remote Object Service
•  JMS
Messaging
•  HTTP
Java
Publish & Subscribe
•  / Collaboration
Custom…
•  Real Time Data Push
Action Message Format (AMF3) 2
Proxy Service
Web-tier Compiler
Portal Deployment
RIA-PDF Generation


BlazeDS


Flex with Java via XML (RESTful / SOAP)

App Server

Web Service
XML
(RESTful / SOAP)


Flex with Java via Flash Remoting

J2EE Server
BlazeDS

POJO

Spring Bean
Endpoint

AMF

EJB

Other


Flex with Java via BlazeDS Messaging

J2EE Server
BlazeDS

Messaging
Adapter X
System X

JMS
Message
Endpoint JMS Adapter
Provider
Service

Messaging
Adapter Y
System Y

RTMP
AMF
Publisher
HTTP
Subscriber


RIA

Census Project:
http://www.jamesward.com/census/
http:// exapps.cvs.sourceforge.net/ exapps/census/


BlazeDS – AMF3

5000 Flex AMF3 No.1 1.6s

Ajax HTML>Ajax XML>Laszlo XML>Flex XML AS>Flex XML E4X>Ajax JSON>Dojo>Ajax SOAP>Flex
SOAP AS>Flex SOAP E4X>Flex AMF3(0.2s)

Laszlo XML>Flex SOAP AS>Flex SOAP E4X>Ajax SOAP>Flex XML AS>Flex XML E4X>Ajax HTML>Ajax
JSON>Flex AMF3(0.9s)>Ajax XML>Dojo

Flex SOAP AS>Ajax SOAP>Ajax XML>Laszlo XML>Flex XML AS>Ajax JSON>Flex SOAP E4X>Flex XML
E4X>Dojo>Flex AMF3(0.1s)>Ajax HTML

Dojo>Ajax HTML>Ajax SOAP>Ajax XML>Ajax JSON>Laszlo XML>Flex SOAP E4X>Flex SOAP AS>Flex
XML E4X>Flex AMF3(0.4s)>Flex XML AS

Flex

  Flex
  Cairngorm (Adobe Open Source) - MVC framework
  PureMVC (Open Source) - MVC framework
  Mate (Open Source) - tag-based, event-driven
  Swiz (Open Source) - Metadata-based Dependency Injection
  Spring ActionScript (Open Source) – IOC Framework
 
  http://www.infoq.com/news/2008/01/ ex-mvc
 
  适 framework
framework
  Flex Flex


Flex - Cairngorm

  http://opensource.adobe.com/wiki/  
display/cairngorm/  
    Java
   
Flex Flex
  micro-architecture  
design
patterns
  Java  
   
UI
  Flex
  Cairngorm Flex
 
  ModleLocator
  Service Locator Delegates
  ServiceLocator
  Views
 
  FrontController


Flex - PureMVC

  http://puremvc.org/  
 
 
 
 
 
  Flex
 
  MVC
  Model,View,Controller  
   
Façade Flex MXML
public
 
  PureMVC Flex
  CASTING
    Debugging
Cairngorm
  packages
 
  Façade


Flex - Mate

  http://mate.asfusion.com/  
 
 
 
 
  agents
  MXML
  Flex
 
 
  “ ”
 
  Mate Flex
  众
 
  Models,Views
  MXML event map
  Events Event
  event map mxml
 
  event map   MXML
    适 AS

 

  LiveCycle DataServices


Flex - Swiz

  http://code.google.com/p/  
swizframework/  
   
  IoC DI   metadata IoC DI
    Flex
 
 
  Java
  Mate
  Swiz Flex
  Swiz
 
 
 
metatag Autowire


Flex – Spring ActionScript

  http://www.pranaframework.org/  
 
  Cairngorm
  PureMVC
  as3 IoC
 
  Flex
services-con g.xml messaging-
  Cairngorm PureMVC con g.xml
   
MVC
   
Java Spring
   
BlazeDS remoting
messaging
 
  Spring AS Flex
 
  XML
  Logging
  Spring AS logging
 
  method-invocation
MethodInvokingFactory
 


Where to go next?

  www.adobe.com/devnet
  www. ex.org
  www.adobe.com/opensource
  www.insideRIA.com
  www.actionscript3.cn
  www.riameeting.cn
  www.infoq.com/cn

4
9

Flex体系架构剖析

Recommended

Recommended

More Related Content

What's hot

What's hot (17)

Similar to Flex体系架构剖析

Similar to Flex体系架构剖析 (20)

More from ematrix

More from ematrix (6)

Recently uploaded

Recently uploaded (20)

Flex体系架构剖析