1.概述

回顧網絡應用開發(fā)領域，早期是C/S，后來逐漸過渡到B/S，再到以Ajax為核心的Web2.0，如今新一代的富客戶端技術又重新歸來，在這場新一輪的技術革新中，各大公司和開源社區(qū)都紛紛推出了自己的產品。目前具有代表性技術有微軟的Silverlight/WPF、Adobe的AIR/Flex和Sun的JavaFX，以及開源社區(qū)的Laszlo。

Flex及AIR是Adobe公司推出的基于開源、免費、跨平臺的新一代富客戶端平臺。這種新型的富客戶端能夠提供和早期C/S技術一樣出色的UI，但又和B/S一樣不需要在用戶的機器上進行任何部署，也不需要手動對應用程序進行版本更新。Adobe的富客戶端技術為AIR和Flex， 其核心以ActionScript語言為基礎，運用XML來描述界面。Adobe的RIA為終端用戶提供了兩種解決方案：Desktop應用和Web應用。對于Desktop應用，需要安裝Adobe的AIR作為其運行平臺(Runtime)，這時Rich Client程序如同本地的程序一樣運行，這種方式類似于Java應用程序，AIR相當于Java 運行環(huán)境(JRE)；對于Web應用，Adobe的Flex程序運行于內嵌在瀏覽器中的FlashPlayer上，借助Flash Player的良好普及率，Adobe實現(xiàn)了其統(tǒng)一的、跨平臺的承載平臺，和傳統(tǒng)的C/S相比，繼承了其界面豐富、操作性強等優(yōu)點，而又摒棄了其需要手動安裝、配置、升級等缺點。

Adobe借助Flex/AIR在RIA領域的巨大成功、以及依托Flash Player的廣泛的普及率來推廣其新一代富客戶端技術，使微軟看到了下一代互聯(lián)網和應用開發(fā)框架的美好前景，適時的推出了與Adobe Flash Player相類似而又相對抗的產品Silverlight/WPF，在微軟的解決方案中，WPF是.NET Framework 3.0的組成部分之一，它是一套基于XML、.NET Framework、向量繪圖的展示層開發(fā)框架，微軟視其為下一代用戶接口規(guī)范，將廣泛被用于下一代的Windows平臺的界面開發(fā)，這樣微軟也將逐漸淘汰以GDI 、GDI+、MFC等為代表的Win32 API。WPF可以編寫Web程序或者桌面應用程序，可以直接編譯為獨立運行的exe文件，WPF運行時必須安裝.NET Framework 3.0，這就要求WPF目前運行的操作系統(tǒng)必須是Windows Vista或者Windows XP SP2以上。而Silverlight為WPF的子集，是基于瀏覽器的插件，在瀏覽器中運行，客戶端無需安裝.Net Framework，其運行環(huán)境不受操作系統(tǒng)和瀏覽器的種類限制。雖然相對于Adobe的解決方案微軟推出較晚，但這也是目前在RIA領域最為強勁的后起之秀。

JavaFX是Sun公司推出的RIA技術解決方案，其前身為F3項目。和早期的Applet、Java Web Start等技術一脈相承，JavaFX其實同樣以Java Swing為基礎，運行于Java 虛擬機之上。但與原來的Java語言有所不同的是JavaFX是一種全新的腳本語言，為開發(fā)者提供了更加簡潔、快速的GUI API。JavaFX與前兩者最大的不同也就在于其使用的是DSL，我們雖然熟悉SQL這樣的DSL語言，但將DSL引入GUI開發(fā)還是尚屬首次，DSL的語法更適合GUI的本質，因此從語言的角度來說，JavaFX比.NET和ActionScript更為先進。但與前兩者相比，JavaFX無論在推出的時間還是產品里程上都遠落后于對手，其技術解決方案的成熟度也稍遜于其它兩種產品。

本文內容著重以Adobe的RIA解決方案Flex技術對RIA技術進行介紹。

1.1 Flex發(fā)展歷程

        Flash Player最早為Macromedia公司產品，作為因特網頁的矢量動畫平臺，早期的Flash Player主要是面向娛樂功能和多媒體應用。其后推出了ActionScript語言做為補充，通過ActionScript可以對Flash Player中的動畫和控件進行更為復雜的邏輯控制。2000年8月Macromedia 推出了Flash 5.0，并推出了全新的ActionScript語言，這是ActionScript的一次飛躍，ActionScript的語法已經開始定位并發(fā)展成為一種完整的面向對象的語言，并且遵循ECMAScript的標準。隨后2004年Macromedia推出被收購前的最為經典的版本Flash MX 2004，在這個版本中ActionScript升級為2.0版本，改造了ActionScript 1.0中的不完善，使其完全支持Class、Interface等面向對象的語法表達，第一次真正意義上具有了和Java、C++一樣的編程能力，同時第一次引入了Flex的概念，即Flex 1.0。2005年12月Adobe收購Macromedia公司，由此帶了的巨大變革，Adobe將其打造為新一代的RIA，2007年3月27日發(fā)布了Flash 9.0，Flash 9.0支持全新腳本語言ActionScript 3.0，ActionScript 3.0是Flash/Flex歷史上第二次飛躍，從此以后，ActionScript終于被認可為一種“正規(guī)的”、“完整的”、“清晰的”面向對象語言。新的ActionScript包含上百個類庫，這些類庫函蓋了圖形、算法、矩陣、XML、網絡傳輸?shù)戎T多范圍，為開發(fā)者提供了一個豐富的開發(fā)環(huán)境基礎。隨著ActionScript3.0而來的是新的Flash RunTime虛擬機(VM2.0)，VM2.0的運行效率是VM1.0的幾倍。在這個版本中同時推出Flex 3.0和引入AIR的概念。可以說是對Macromedia的原有產品徹底的一次升華，變化如此之大，以至于ActionScript 2.0到ActionScript 3.0間、Flex 2到Flex 3、VM1.0到VM2.0間并不兼容。針對Flex/AIR的開發(fā)，Adobe公司出品了基于Eclipse的Flex Builder 3.0。

        Flex大事記：

Ø       Flex 1.0——2004年1月發(fā)布

Ø       Flex 2.0——2006年7月發(fā)布

Ø       Flex 3.0——2008年2月發(fā)布

1.2 Flex編程與Flash制作

       雖然對于Flex應用和多媒體應用都運行于Flash Player這一同一平臺，但對于動畫、影音等多媒體應用仍然的是美工或媒體制作者的工作，而Flex應用編程則完全是程序員的工作，可以說是兩套面向不同需求的應用開發(fā)。在Flex的GUI編程中提供了和Java、.NET、VB、Delphi中相類似UI控件，諸如：輸入框、按鈕、樹、面板、表格、菜單、日期、進度條、各類選擇框等，并與這些傳統(tǒng)語言相類似的界面控制機制，諸如：消息、觸發(fā)動作(Action)等。一個熟悉Java編程的開發(fā)者，很容易過渡到Flex的開發(fā)，ActionScript語言本身、甚至Flex中提供的很多類庫都和Java相類似。從另外一個角度來看，一個Flex開發(fā)者完全不懂Flash制作也沒有任何問題，Flex應用僅僅是運行在Flash Player上而已。當然做為Adobe的統(tǒng)一解決方案，Flex開發(fā)并不排斥對影音和動畫等媒體的操作，實際上兩者可以完美的結合。

2 Flex技術分析

與以往純B/S技術不同，Flex是結合了B/S與C/S技術優(yōu)點的新一代富客戶端技術。

2.1 新一代富客戶端的技術特點

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

2.      架構方面：用XML來描述GUI的外觀，GUI和邏輯相分離，真正意義上的MVC，使得應用開發(fā)的結構更為清晰。前端界面使用XML來描述，界面的控制由ActionScript來負責，后端的應用邏輯則封裝在后端中間件中，與Flex前端界面相分離。

3.      可拓展性方面：Flex做為前端的客戶組件，非常容易與各類后端技術相結合，例如AMF、PHP、Java、.Net、ColdFusion等，這樣后端應用服務可以規(guī)劃為類似的“中間件”組件，將業(yè)務邏輯封裝其中，中間應用服務組件的選擇預留給用戶極大的選擇空間，方便而靈活。

4.      從運行的環(huán)境方面：程序可以在瀏覽器中，也可以運行在瀏覽器外，極大拓展了應用的使用場合。新一代富客戶端可以根據(jù)需求更加靈活的部署。

5.      在性能方面：傳統(tǒng)的B/S有各種方式來提高應用服務器的效率，但Flex框架的解決方案與此不同，能夠在性能方面有更大的提升。眾所周知，傳統(tǒng)Web應用客戶端每次刷新頁面都會對服務器產生請求，服務器要將新的HTML和HTML中包含的圖片傳遞給Client，當請求數(shù)量較大時，動態(tài)生成HTML及下載圖片的過程都會嚴重地消耗著服務器的資源(CPU、IO、Memory、Network)。而新一代富客戶應用是通過第一次運行時將應用一次性下載到本地，所有的GUI都在本地運行，運行過程中只產生少量的數(shù)據(jù)更新請求，而不需要服務器端實時地產生刷新的頁面，也就不存在服務器對HTML等內容的動態(tài)構造，這樣后端服務器將完全專注于數(shù)據(jù)邏輯的處理，這樣充分利用客戶端本地機器的CPU，并最大限度的減少網絡帶寬。

6.      在開發(fā)效率方面，Flex的界面編程技術更類似于VB或是Delphi，開發(fā)中所見即所得，比起修改ASP、JSP、PHP和Javascript所表現(xiàn)的界面有極高的開發(fā)效能，而Flex采用ActionScript是面向對象的語言，是一種和Java、.NET相其類似的語言，對于Java或.NET程序員來說Flex技術很容易上手，學習和整體維護成本很低。

7.      能夠與視頻、音頻等多媒體完美結合。Flex內建視頻、音頻等多媒體原生組件，因此為程序員提供了方便、易用的API。特別是最新的更新中已經包含了對H.264編碼協(xié)議的支持。

8.      和B/S相比，Flex能夠更方便的實現(xiàn)全雙工的消息通信。對于某些特定的應用，需要實時從服務器Push消息給Client，Flex提供了方便的解決方案，突破了傳統(tǒng)的HTTP消息基于Get/Post被動請求的模式。

Flex框架分析

圖2－1  Flex的基本結構

       Flex是一套Adobe的RIA技術的集合，Flex應用在多層架構中做為表示層。Flex包括：Flex SDK、Flex Builder、Flash Player、LiveCycle Data Service、ActionScript、MXML。

Ø       Flex SDK就如同Java的JDK一樣，為開發(fā)人員提供了一個免費的開發(fā)套件，同時這也是一套開源項目。開發(fā)者可以通過Flex SDK開發(fā)完整的RIA應用。

Ø       Flex Builder是Adobe公司為開發(fā)Flex/AIR應用而提供的IDE，是一款商業(yè)收費軟件，最新版本為3.0，其中包含了Flex SDK。Flex Builder中還包含Flex Charting，即Flex的圖表，提供了豐富的圖表控件，諸如：折線圖、餅圖、柱狀圖等

Ø       LiveCycle Data Service是Adobe提供的商業(yè)付費組件，內置數(shù)據(jù)管理服務，Flex-Ajax橋接，Jave消息服務(JMS)適配器以及實時協(xié)作工具的企業(yè)級技術

Ø       MXML是宣告式的、基于XML的界面描述語言，用來表達UI布局和相關動作。在Flex技術中，前端的界面由MXML來描述，控制邏輯由ActionScript來負責，通過二者有機的結合來完成整個GUI的開發(fā)

       在如圖2—1中一個典型案例中，中間層可以采用Java、PHP、.NET、ColdFusion和BlazeDS等技術，和Flex的通訊可以采用AMF或HTTP協(xié)議，AMF（Action Message Format）協(xié)議是一種二進制格式，專門用于ActionScript和后臺服務器端的通信，比HTTP通信的速度要快很多，而且支持多種數(shù)據(jù)類型，對于Java、.NET、ColdFusion、PHP等編程語言都有相應的Remoting服務器端。通過Remoting服務端接口，ActionScript直接調用服務器端對象的方法，彌補了客戶端在和數(shù)據(jù)庫服務器通信以及文件操作等方面上的不足。例如，Flex提供的基于Java的數(shù)據(jù)服務器Flex Data Service(簡稱FDS)，可以很方便地讓用戶部署自己的Java后端應用程序。

2.2.1 BlazeDS與AMF

        BlazeDS是由Adobe公司開發(fā)并提供的一套中間層技術解決方案，BlazeDS是基于Java遠程調用和Web消息通信的組件，BlazeDS實際上是一套Java應用，運行在Server端。這樣就和前端Flex的應用相分離，將業(yè)務邏輯封裝其中，為前端Flex和后端數(shù)據(jù)庫建立起中間橋梁，BlazeDS相當于J2EE中的中間件。BlazeDS已經開源，并運行在Tomcat容器中。

        AMF是Action Message Format的縮寫，是Adobe公司定義的協(xié)議，AMF是BlazeDS與前端Flex應用通信的方式之一，BlazeDS和前端通信還可以采用SOAP或HTTP等其它協(xié)議。與這些通信方式不同，AMF采用二進制的編碼方式，并采用Zlib對消息進行壓縮，AMF消息體的大小只有基于XML協(xié)議的十分之一。因此在需要大量傳輸消息的場合，和純文本協(xié)議相比，AMF是一種高效率的傳輸方式。同時AMF也為開發(fā)者提供了一種便利而快速的通信開發(fā)接口，它可將前端Flex中本地對象(例如：Object、Array、Date、XML等)傳給Server端時自動適配成Server端適當?shù)膶ο蟆＠纾喝绻?/span>Server端是PHP應用，則AMF會自動轉譯為PHP的Associative Array；如果Server端是Java應用，則AMF將其轉換為Java的數(shù)組。

2.2.2 Adobe AIR介紹

       Flex 3.0中最大的變化在于新增AIR工程，AIR是Adobe富客戶端的桌面應用解決方案，早期代號Apollo，Adobe將其定位為一個跨平臺的客戶端系統(tǒng)運行環(huán)境。Flex應用、多媒體Flash、Html和Ajax通過AIR可以部署為桌面應用，因為要支持對本地資源的操作，所以Flex 3.0中新增許多對本地資源的操作，如本地文件、PDF文件等。另外，AIR應用程序支持版本升級、集成網頁、使用Ajax技術等。在Flex 3.0中的AIR工程中新增HTMLControl類和HTMLPDFCapability類，通過這兩個類可實現(xiàn)加載PDF文件，豐富了AIR應用程序的效果和功能。

2.3 Flex開發(fā)

        下面以我們開發(fā)的一個技術交流網站為例，對Flex開發(fā)中的一些技術點做介紹。

2.2.1 瀏覽器的前進/后退和瀏覽器的歷史

      對于普通HTML的網頁，瀏覽器提供中“回退”、“前進”按鈕來控制瀏覽網頁的歷史，在Flex中同樣可以控制瀏覽器的歷史。在Flex 3.0中增加了一個新類BrowserManager，專門用來控制瀏覽器的歷史，通過截獲瀏覽器的控制消息來實現(xiàn)相應的動作。

2.2.2 Flex和HTML間的變量傳遞

       Flex中可以嵌入HTML，HTML也可以嵌入Flex，這樣Flex和HTML間的信息交互是Flex開發(fā)中不可避免的題目。Flex中嵌入HTML較為容易實現(xiàn)，此時HTML做為Flex控件中的一部分展現(xiàn)出來；而HTML中嵌入Flex的通信則相對復雜些，這里以此為重點做介紹：

1. 在HTML中首先要通過Javascript對要傳遞的變量進行定義，并將變量傳遞給Flash

<script language="JavaScript" type="text/javascript">

    ……

          var flashvars = "bookid={$bookid}";

    AC_FL_RunContent(

               "src", "testParameter",

               "flashvars", flashvars,  

               "width", "100%",

               "height", "100%",

               "align", "middle",

               "id", "testParameter",

               "wmode", "opaque",

               "quality", "high",

               "bgcolor", "#869ca7",

               "name", "testParameter",

               "allowScriptAccess","sameDomain",

               "type", "application/x-shockwave-flash",

               "pluginspage", "http://www.adobe.com/go/getflashplayer"

);

          ……

      </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來替代，提供諸如餅圖、柱狀圖、折線圖和三維效果的圖表等。

2.4 Flex與搜索

       網站采用Flex技術后，部分內容就會嵌入在Flash中展現(xiàn)，其中重要的文字信息和內容如何被索引、如何被搜索引擎捕獲就是一個很重要的問題了。這實際上涉及到兩個領域，Adobe的Flash和搜索引擎技術。基于對Flash中內容的搜索需求，Adobe公司已經發(fā)布了Flash-Reading工具，該工具專門針對搜索引擎，可供其機器人可以識別到Flash中的內容。另一方面，以Google為首的一部分搜索引擎已經采用了Flash-Indexing服務，能夠搜索Flash中的文字、超鏈接，甚至能夠索引到Flash中的菜單、按鈕和橫幅。但和傳統(tǒng)的純HTML網站相比，復雜的動態(tài)Flash內容目前搜索引擎依舊無法索引，對于通過Javascript加載的Flash也將無法索引。雖然目前的解決方案尚不完善，不過隨著技術的發(fā)展，Flex的搜索技術會逐漸成熟。

2.5 Flex的3D技術

       Flex 3.0本身不支持3D，也未提供基于3D的API，目前只有第三方的3D API可供使用，使用比較多的是如下三個開源項目：

Ø      Papervision3D

Ø      Away3D

Ø      Flash3D

       由于在目前發(fā)布的Flex版本中不支持3D技術，所以這些Flex三維解決方案都只算是偽3D技術，通過改變2D物件的視覺效果來模擬三維場景，缺點是不能很好的實現(xiàn)透視，裁剪有時會出現(xiàn)錯誤。

       除了開源項目外，比較實用的商業(yè)方案是Alternativa 3D，這也是目前實現(xiàn)的最為出色的Flex 3D技術，Alternativa甚至提供了基于Flash Player 10 Beta的3D版本。

       在下一個版本的Flex 4.0及Flash Player 10中，Adobe將集成對3D的支持，將提供原生的3D API，第一次實現(xiàn)真正意義上的三維制作和編程。

2 結束語

        綜上所述，以Flex為代表的這場新的技術革新中，使我們有必要重新思考架構的拓展、業(yè)務能力的創(chuàng)新和開發(fā)效率的提升，同時也給我們的開發(fā)和測試提出了一個新的課題，迎接新的挑戰(zhàn)，改善我們產品，優(yōu)化我們的技術，降低成本，最大限度的提升用戶的體驗價值。