Flex MXML for Building Rich Web Apps

Flex 构

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

/
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 Flash Adobe Flash Adobe Flex
CS4 Professional Catalyst Builder Adobe Flex®
Data Services
Adobe AIR™


RIA Adobe

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

AIR Flash PDF HTML
Flex
Builder

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

Remote Domains Local Domain

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

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


Flex UI + SOA = SOC

Front End Client Tier

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

Back End
• 
• 
•  SOA / ESA
• 
• 
• 


Flex 构划


Adobe Flex

Adobe®
Flex™ 3 SDK

Open source Flex SDK

MXML and ActionScript 3.0

Command-line


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
MXML ActionScript Flash Player

Flex

Debuggers SOAP HTTP/S AMF/S RTMP/S

Flex Builder IDE
Web

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


Flex


Flex - SAP example


种 Flex

4) design tweaks

esign
itial d
2) in
Developer
ttes
+v igne
m ps
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 Data Management
Service
Adapters
HTTP Data Synchronization
LiveCycle
Flash/Flex Remtoing Oﬀ-line Applications

Data Paging SQL

RPC Services
•  Web Service
Hibernate

•  Flex UI HTTP Service ColdFusion
Remote Object Service
•  JMS
Messaging
•  HTTP
Publish & Subscribe Java
•  / Collaboration
Custom…
•  Action Message Format (AMF3) 2 Real Time Data Push

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

Endpoint Spring Bean

AMF

EJB

Other


Flex with Java via BlazeDS Messaging

J2EE Server
BlazeDS

Messaging
Adapter X
System X

Message JMS
Endpoint JMS Adapter
Service Provider

Messaging
Adapter Y
System Y

RTMP
AMF
HTTP Publisher
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
  ServiceLocator
 
  FrontController


Flex - PureMVC

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

  Cairngorm
  packages
 
  Façade


Flex - Mate

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

  event map  
 
  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
  as3 IoC   PureMVC
  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
8

Flex MXML for Building Rich Web Apps

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Flex MXML for Building Rich Web Apps

Semelhante a Flex MXML for Building Rich Web Apps (20)

Mais de George Ang

Mais de George Ang (20)

Último

Último (20)

Flex MXML for Building Rich Web Apps