1、Flex 新一代富客戶端技術(shù)淺析.txt你站在那不要動！等我飛奔過去！雨停了天晴了女人你慢慢掃屋我為你去掃天下了你是我的聽說現(xiàn)在結(jié)婚很便宜，民政局9塊錢搞定，我請你吧你個笨蛋啊遇到這種事要站在我后面！跟我走總有一天你的名字會出現(xiàn)在我家的戶口本上。Flex 新一代富客戶端技術(shù)淺析Posted on 2009-05-18 15:42 莫問奴歸處 閱讀(3054) 評論(2) 編輯 收藏 所屬分類: 學(xué)習(xí)筆記1.概述回顧網(wǎng)絡(luò)應(yīng)用開發(fā)領(lǐng)域，早期是C/S，后來逐漸過渡到B/S，再到以Ajax為核心的Web2.0，如今新一代的富客戶端技術(shù)又重新歸來，在這場新一輪的技術(shù)革新中，各大公司和開源社區(qū)都紛紛推出了

2、自己的產(chǎn)品。目前具有代表性技術(shù)有微軟的Silverlight/WPF、Adobe的 AIR/Flex和Sun的JavaFX，以及開源社區(qū)的Laszlo。Flex及AIR 是Adobe公司推出的基于開源、免費、跨平臺的新一代富客戶端平臺。這種新型的富客戶端能夠提供和早期C/S技術(shù)一樣出色的UI，但又和B/S一樣不需要在用戶的機器上進行任何部署，也不需要手動對應(yīng)用程序進行版本更新。Adobe的富客戶端技術(shù)為AIR和Flex， 其核心以ActionScript語言為基礎(chǔ)，運用XML來描述界面。Adobe的RIA為終端用戶提供了兩種解決方案：Desktop應(yīng)用和Web應(yīng)用。對于Desktop應(yīng)用，需要

3、安裝Adobe的AIR作為其運行平臺(Runtime)，這時Rich Client程序如同本地的程序一樣運行，這種方式類似于Java應(yīng)用程序，AIR相當(dāng)于Java 運行環(huán)境(JRE)；對于Web應(yīng)用，Adobe的Flex程序運行于內(nèi)嵌在瀏覽器中的Flash Player上，借助Flash Player的良好普及率，Adobe實現(xiàn)了其統(tǒng)一的、跨平臺的承載平臺，和傳統(tǒng)的C/S相比，繼承了其界面豐富、操作性強等優(yōu)點，而又摒棄了其需要手動安裝、配置、升級等缺點。Adobe借助Flex/AIR在RIA領(lǐng)域的巨大成功、以及依托Flash Player的廣泛的普及率來推廣其新一代富客戶端技術(shù)，使微軟看到了下

4、一代互聯(lián)網(wǎng)和應(yīng)用開發(fā)框架的美好前景，適時的推出了與Adobe Flash Player相類似而又相對抗的產(chǎn)品Silverlight/WPF，在微軟的解決方案中，WPF是.NET Framework 3.0的組成部分之一，它是一套基于XML、.NET Framework、向量繪圖的展示層開發(fā)框架，微軟視其為下一代用戶接口規(guī)范，將廣泛被用于下一代的Windows平臺的界面開發(fā)，這樣微軟也將逐漸淘汰以GDI 、GDI+、MFC等為代表的Win32 API。WPF可以編寫Web程序或者桌面應(yīng)用程序，可以直接編譯為獨立運行的exe文件，WPF運行時必須安裝.NET Framework 3.0，這就要求W

5、PF目前運行的操作系統(tǒng)必須是Windows Vista或者Windows XP SP2以上。而Silverlight為WPF的子集，是基于瀏覽器的插件，在瀏覽器中運行，客戶端無需安裝.Net Framework，其運行環(huán)境不受操作系統(tǒng)和瀏覽器的種類限制。雖然相對于Adobe的解決方案微軟推出較晚，但這也是目前在RIA領(lǐng)域最為強勁的后起之秀。JavaFX是Sun公司推出的RIA技術(shù)解決方案，其前身為F3項目。和早期的 Applet、Java Web Start等技術(shù)一脈相承，JavaFX其實同樣以Java Swing為基礎(chǔ)，運行于Java 虛擬機之上。但與原來的Java語言有所不同的是JavaF

6、X是一種全新的腳本語言，為開發(fā)者提供了更加簡潔、快速的GUI API。JavaFX與前兩者最大的不同也就在于其使用的是DSL，我們雖然熟悉SQL這樣的DSL語言，但將DSL引入GUI開發(fā)還是尚屬首次，DSL 的語法更適合GUI的本質(zhì)，因此從語言的角度來說，JavaFX比.NET和ActionScript更為先進。但與前兩者相比，JavaFX無論在推出的時間還是產(chǎn)品里程上都遠落后于對手，其技術(shù)解決方案的成熟度也稍遜于其它兩種產(chǎn)品。本文內(nèi)容著重以Adobe的RIA解決方案Flex技術(shù)對RIA技術(shù)進行介紹。1.1 Flex發(fā)展歷程Flash Player最早為Macromedia公司產(chǎn)品，作為因特網(wǎng)

7、頁的矢量動畫平臺，早期的Flash Player主要是面向娛樂功能和多媒體應(yīng)用。其后推出了ActionScript語言做為補充，通過ActionScript可以對Flash Player中的動畫和控件進行更為復(fù)雜的邏輯控制。2000年8月Macromedia 推出了Flash 5.0，并推出了全新的ActionScript語言，這是ActionScript的一次飛躍，ActionScript的語法已經(jīng)開始定位并發(fā)展成為一種完整的面向?qū)ο蟮恼Z言，并且遵循ECMAScript的標準。隨后2004年Macromedia推出被收購前的最為經(jīng)典的版本Flash MX 2004，在這個版本中ActionS

8、cript升級為2.0版本，改造了ActionScript 1.0中的不完善，使其完全支持Class、Interface等面向?qū)ο蟮恼Z法表達，第一次真正意義上具有了和Java、C+一樣的編程能力，同時第一次引入了Flex的概念，即Flex 1.0。2005年12月Adobe收購Macromedia公司，由此帶了的巨大變革，Adobe將其打造為新一代的RIA，2007年3月27日發(fā)布了Flash 9.0，F(xiàn)lash 9.0支持全新腳本語言ActionScript 3.0，ActionScript 3.0是Flash/Flex歷史上第二次飛躍，從此以后，ActionScript終于被認可為一種“正

9、規(guī)的”、“完整的”、“清晰的”面向?qū)ο笳Z言。新的ActionScript包含上百個類庫，這些類庫函蓋了圖形、算法、矩陣、XML、網(wǎng)絡(luò)傳輸?shù)戎T多范圍，為開發(fā)者提供了一個豐富的開發(fā)環(huán)境基礎(chǔ)。隨著ActionScript3.0而來的是新的Flash RunTime虛擬機(VM2.0)，VM2.0的運行效率是VM1.0的幾倍。在這個版本中同時推出Flex 3.0和引入AIR的概念。可以說是對Macromedia的原有產(chǎn)品徹底的一次升華，變化如此之大，以至于ActionScript 2.0到ActionScript 3.0間、Flex 2到Flex 3、VM1.0到VM2.0間并不兼容。針對Flex/A

10、IR的開發(fā)，Adobe公司出品了基于Eclipse的Flex Builder 3.0。Flex大事記：? Flex 1.02004年1月發(fā)布? Flex 2.02006年7月發(fā)布? Flex 3.02008年2月發(fā)布1.2 Flex編程與Flash制作雖然對于Flex應(yīng)用和多媒體應(yīng)用都運行于Flash Player這一同一平臺，但對于動畫、影音等多媒體應(yīng)用仍然的是美工或媒體制作者的工作，而Flex應(yīng)用編程則完全是程序員的工作，可以說是兩套面向不同需求的應(yīng)用開發(fā)。在Flex的GUI編程中提供了和Java、.NET、VB、Delphi中相類似UI控件，諸如：輸入框、按鈕、樹、面板、表格、菜單、日期

11、、進度條、各類選擇框等，并與這些傳統(tǒng)語言相類似的界面控制機制，諸如：消息、觸發(fā)動作(Action)等。一個熟悉Java編程的開發(fā)者，很容易過渡到Flex的開發(fā)，ActionScript語言本身、甚至Flex中提供的很多類庫都和Java相類似。從另外一個角度來看，一個Flex開發(fā)者完全不懂Flash制作也沒有任何問題，F(xiàn)lex應(yīng)用僅僅是運行在Flash Player上而已。當(dāng)然做為Adobe的統(tǒng)一解決方案，F(xiàn)lex開發(fā)并不排斥對影音和動畫等媒體的操作，實際上兩者可以完美的結(jié)合。2 Flex技術(shù)分析與以往純B/S技術(shù)不同，F(xiàn)lex是結(jié)合了B /S與C/S技術(shù)優(yōu)點的新一代富客戶端技術(shù)。2.1 新一代

12、富客戶端的技術(shù)特點1. 可操作性方面：Flex富客戶端的界面和操作性將能夠和傳統(tǒng)的C/S相媲美，提供更豐富、更友善、易用性更強的界面給用戶，同時互動性更好，而開發(fā)效率卻大為提高；特別是Flex內(nèi)建對音頻和視頻(包括H.264技術(shù))的支持，給用戶提供更好的操作體驗。之所以Ajax會大行其道，就是因為Ajax的出現(xiàn)可以彌補傳統(tǒng)B/S在界面友善方面的不足，例如Web2.0中普遍提供了一個頁面中可以多個Tab的切換，給用戶帶來更多的方便，但對于更復(fù)雜的操作模式則無能為力。而新一代的富客戶端如同傳統(tǒng)C/S應(yīng)用一樣，可以提供更為復(fù)雜的界面，同時其數(shù)據(jù)持有能力也更強。2. 架構(gòu)方面：用XML來描述GUI的外

13、觀，GUI和邏輯相分離，真正意義上的MVC，使得應(yīng)用開發(fā)的結(jié)構(gòu)更為清晰。前端界面使用XML來描述，界面的控制由 ActionScript來負責(zé)，后端的應(yīng)用邏輯則封裝在后端中間件中，與Flex前端界面相分離。3. 可拓展性方面：Flex做為前端的客戶組件，非常容易與各類后端技術(shù)相結(jié)合，例如AMF、PHP、Java、.Net、ColdFusion等，這樣后端應(yīng)用服務(wù)可以規(guī)劃為類似的“中間件”組件，將業(yè)務(wù)邏輯封裝其中，中間應(yīng)用服務(wù)組件的選擇預(yù)留給用戶極大的選擇空間，方便而靈活。4. 從運行的環(huán)境方面：程序可以在瀏覽器中，也可以運行在瀏覽器外，極大拓展了應(yīng)用的使用場合。新一代富客戶端可以根據(jù)需求更加靈

14、活的部署。5. 在性能方面：傳統(tǒng)的B/S有各種方式來提高應(yīng)用服務(wù)器的效率，但Flex框架的解決方案與此不同，能夠在性能方面有更大的提升。眾所周知，傳統(tǒng)Web應(yīng)用客戶端每次刷新頁面都會對服務(wù)器產(chǎn)生請求，服務(wù)器要將新的HTML和HTML中包含的圖片傳遞給Client，當(dāng)請求數(shù)量較大時，動態(tài)生成HTML及下載圖片的過程都會嚴重地消耗著服務(wù)器的資源(CPU、IO、Memory、Network)。而新一代富客戶應(yīng)用是通過第一次運行時將應(yīng)用一次性下載到本地，所有的GUI都在本地運行，運行過程中只產(chǎn)生少量的數(shù)據(jù)更新請求，而不需要服務(wù)器端實時地產(chǎn)生刷新的頁面，也就不存在服務(wù)器對HTML等內(nèi)容的動態(tài)構(gòu)造，這樣后

15、端服務(wù)器將完全專注于數(shù)據(jù)邏輯的處理，這樣充分利用客戶端本地機器的CPU，并最大限度的減少網(wǎng)絡(luò)帶寬。6. 在開發(fā)效率方面，F(xiàn)lex的界面編程技術(shù)更類似于VB或是Delphi，開發(fā)中所見即所得，比起修改ASP、JSP、PHP和Javascript所表現(xiàn)的界面有極高的開發(fā)效能，而Flex采用ActionScript是面向?qū)ο蟮恼Z言，是一種和Java、.NET相其類似的語言，對于Java或.NET 程序員來說Flex技術(shù)很容易上手，學(xué)習(xí)和整體維護成本很低。7. 能夠與視頻、音頻等多媒體完美結(jié)合。Flex內(nèi)建視頻、音頻等多媒體原生組件，因此為程序員提供了方便、易用的API。特別是最新的更新中已經(jīng)包含了對

16、 H.264編碼協(xié)議的支持。8. 和B/S相比，F(xiàn)lex能夠更方便的實現(xiàn)全雙工的消息通信。對于某些特定的應(yīng)用，需要實時從服務(wù)器Push消息給Client，F(xiàn)lex提供了方便的解決方案，突破了傳統(tǒng)的HTTP消息基于Get/Post被動請求的模式。Flex框架分析圖21 Flex的基本結(jié)構(gòu)Flex是一套Adobe的RIA技術(shù)的集合，F(xiàn)lex應(yīng)用在多層架構(gòu)中做為表示層。Flex包括：Flex SDK、Flex Builder、Flash Player、LiveCycle Data Service、ActionScript、MXML。? Flex SDK就如同Java的JDK一樣，為開發(fā)人員提供了一個

17、免費的開發(fā)套件，同時這也是一套開源項目。開發(fā)者可以通過Flex SDK開發(fā)完整的RIA應(yīng)用。? Flex Builder是Adobe公司為開發(fā)Flex/AIR應(yīng)用而提供的IDE，是一款商業(yè)收費軟件，最新版本為3.0，其中包含了Flex SDK。Flex Builder中還包含F(xiàn)lex Charting，即Flex的圖表，提供了豐富的圖表控件，諸如：折線圖、餅圖、柱狀圖等? LiveCycle Data Service是Adobe提供的商業(yè)付費組件，內(nèi)置數(shù)據(jù)管理服務(wù)，F(xiàn)lex-Ajax橋接，Jave消息服務(wù)(JMS)適配器以及實時協(xié)作工具的企業(yè)級技術(shù)? MXML是宣告式的、基于XML的界面描述語

18、言，用來表達UI布局和相關(guān)動作。在Flex技術(shù)中，前端的界面由MXML來描述，控制邏輯由 ActionScript來負責(zé)，通過二者有機的結(jié)合來完成整個GUI的開發(fā)在如圖21 中一個典型案例中，中間層可以采用Java、PHP、.NET、ColdFusion和BlazeDS等技術(shù)，和Flex的通訊可以采用AMF或HTTP 協(xié)議，AMF（Action Message Format）協(xié)議是一種二進制格式，專門用于ActionScript和后臺服務(wù)器端的通信，比HTTP通信的速度要快很多，而且支持多種數(shù)據(jù)類型，對于Java、.NET、ColdFusion、PHP等編程語言都有相應(yīng)的Remoting服務(wù)器

19、端。通過Remoting服務(wù)端接口，ActionScript直接調(diào)用服務(wù)器端對象的方法，彌補了客戶端在和數(shù)據(jù)庫服務(wù)器通信以及文件操作等方面上的不足。例如，F(xiàn)lex提供的基于 Java的數(shù)據(jù)服務(wù)器Flex Data Service(簡稱FDS)，可以很方便地讓用戶部署自己的Java后端應(yīng)用程序。2.2.1 BlazeDS與AMFBlazeDS是由Adobe公司開發(fā)并提供的一套中間層技術(shù)解決方案，BlazeDS是基于Java遠程調(diào)用和Web消息通信的組件，BlazeDS實際上是一套Java應(yīng)用，運行在 Server端。這樣就和前端Flex的應(yīng)用相分離，將業(yè)務(wù)邏輯封裝其中，為前端Flex和后端數(shù)據(jù)庫

20、建立起中間橋梁，BlazeDS相當(dāng)于J2EE中的中間件。BlazeDS已經(jīng)開源，并運行在Tomcat容器中。AMF是Action Message Format的縮寫，是Adobe公司定義的協(xié)議，AMF是BlazeDS與前端Flex應(yīng)用通信的方式之一，BlazeDS和前端通信還可以采用 SOAP或HTTP等其它協(xié)議。與這些通信方式不同，AMF采用二進制的編碼方式，并采用Zlib對消息進行壓縮，AMF消息體的大小只有基于XML協(xié)議的十分之一。因此在需要大量傳輸消息的場合，和純文本協(xié)議相比，AMF是一種高效率的傳輸方式。同時AMF也為開發(fā)者提供了一種便利而快速的通信開發(fā)接口，它可將前端Flex中本地

21、對象(例如：Object、Array、Date、XML等)傳給Server端時自動適配成Server端適當(dāng)?shù)膶ο蟆＠纾喝绻鸖erver端是PHP應(yīng)用，則AMF會自動轉(zhuǎn)譯為PHP的Associative Array；如果Server端是Java應(yīng)用，則AMF將其轉(zhuǎn)換為Java的數(shù)組。2.2.2 Adobe AIR介紹Flex 3.0中最大的變化在于新增AIR工程，AIR是Adobe富客戶端的桌面應(yīng)用解決方案，早期代號Apollo，Adobe將其定位為一個跨平臺的客戶端系統(tǒng)運行環(huán)境。Flex應(yīng)用、多媒體Flash、Html和Ajax通過AIR可以部署為桌面應(yīng)用，因為要支持對本地資源的操作，所以F

22、lex 3.0中新增許多對本地資源的操作，如本地文件、PDF文件等。另外，AIR應(yīng)用程序支持版本升級、集成網(wǎng)頁、使用Ajax技術(shù)等。在Flex 3.0中的AIR工程中新增HTMLControl類和HTMLPDFCapability類，通過這兩個類可實現(xiàn)加載PDF文件，豐富了AIR應(yīng)用程序的效果和功能。2.3 Flex開發(fā)下面以我們開發(fā)的一個技術(shù)交流網(wǎng)站為例，對Flex開發(fā)中的一些技術(shù)點做介紹。2.2.1 瀏覽器的前進/后退和瀏覽器的歷史對于普通HTML的網(wǎng)頁，瀏覽器提供中“回退”、“前進”按鈕來控制瀏覽網(wǎng)頁的歷史，在Flex中同樣可以控制瀏覽器的歷史。在Flex 3.0中增加了一個新類Brow

23、serManager，專門用來控制瀏覽器的歷史，通過截獲瀏覽器的控制消息來實現(xiàn)相應(yīng)的動作。2.2.2 Flex和HTML間的變量傳遞Flex中可以嵌入 HTML，HTML也可以嵌入Flex，這樣Flex和HTML間的信息交互是Flex開發(fā)中不可避免的題目。Flex中嵌入HTML較為容易實現(xiàn)，此時 HTML做為Flex控件中的一部分展現(xiàn)出來；而HTML中嵌入Flex的通信則相對復(fù)雜些，這里以此為重點做介紹： 1. 在HTML中首先要通過Javascript對要傳遞的變量進行定義，并將變量傳遞給Flash<script language="JavaScript" type

24、="text/javascript">var flashvars = "bookid=$bookid"AC_FL_RunContent("src", "testParameter","flashvars", flashvars,"width", "100%","height", "100%","align", "middle","id", "

25、testParameter","wmode", "opaque","quality", "high","bgcolor", "#869ca7","name", "testParameter","allowScriptAccess","sameDomain","type", "application/x-shockwave-flash","

26、pluginspage", "");</script> 1. 在 ActionScript中取得該變量private function getParams():void private var bookid:String;/獲得參數(shù)var params:Object = this.parameters;if (params != null) bookid = params"bookid".toString();initApp(); else Alert.show("No params");2.2.3 Flex開發(fā)環(huán)境除了 Adobe提供的商業(yè)IDE Flex Builder外，仍有一些免費的開源IDE可供使用，其中以FlashDevelop最為著名，在功能上毫不遜色，目前已能完整支持AIR，最新版本為 FlashDevelop 3.0.0 Beta 8。此外Flex Builder中的圖表(Charting)功能也屬于收費項目，對于一般的開發(fā)者和商業(yè)用戶來說，也有開源解決方案Open Flash Chart來替代，提供諸如餅圖、柱狀圖、折線圖和三維效果的圖表