1.概述
回顧網(wǎng)絡(luò)應(yīng)用開發(fā)領(lǐng)域，早期是C/S，后來逐漸過渡到B/S，再到以Ajax為核心的Web2.0，如今新一代的富客戶端技術(shù)又重新歸來，在這場新一輪的技術(shù)革新中，各大公司和開源社區(qū)都紛紛推出了自己的產(chǎn)品。目前具有代表性技術(shù)有微軟的Silverlight/WPF、Adobe的AIR/Flex和Sun的JavaFX，以及開源社區(qū)的Laszlo。
Flex及AIR是Adobe公司推出的基于開源、免費(fèi)、跨平臺(tái)的新一代富客戶端平臺(tái)。這種新型的富客戶端能夠提供和早期C/S技術(shù)一樣出色的UI，但又和B/S一樣不需要在用戶的機(jī)器上進(jìn)行任何部署，也不需要手動(dòng)對應(yīng)用程序進(jìn)行版本更新。Adobe的富客戶端技術(shù)為AIR和Flex， 其核心以ActionScript語言為基礎(chǔ)，運(yùn)用XML來描述界面。Adobe的RIA為終端用戶提供了兩種解決方案：Desktop應(yīng)用和Web應(yīng)用。對于Desktop應(yīng)用，需要安裝Adobe的AIR作為其運(yùn)行平臺(tái)(Runtime)，這時(shí)Rich Client程序如同本地的程序一樣運(yùn)行，這種方式類似于Java應(yīng)用程序，AIR相當(dāng)于Java 運(yùn)行環(huán)境(JRE)；對于Web應(yīng)用，Adobe的Flex程序運(yùn)行于內(nèi)嵌在瀏覽器中的FlashPlayer上，借助Flash Player的良好普及率，Adobe實(shí)現(xiàn)了其統(tǒng)一的、跨平臺(tái)的承載平臺(tái)，和傳統(tǒng)的C/S相比，繼承了其界面豐富、操作性強(qiáng)等優(yōu)點(diǎn)，而又摒棄了其需要手動(dòng)安裝、配置、升級等缺點(diǎn)。
Adobe借助Flex/AIR在RIA領(lǐng)域的巨大成功、以及依托Flash Player的廣泛的普及率來推廣其新一代富客戶端技術(shù)，使微軟看到了下一代互聯(lián)網(wǎng)和應(yīng)用開發(fā)框架的美好前景，適時(shí)的推出了與Adobe Flash Player相類似而又相對抗的產(chǎn)品Silverlight/WPF，在微軟的解決方案中，WPF是.NET Framework 3.0的組成部分之一，它是一套基于XML、.NET Framework、向量繪圖的展示層開發(fā)框架，微軟視其為下一代用戶接口規(guī)范，將廣泛被用于下一代的Windows平臺(tái)的界面開發(fā)，這樣微軟也將逐漸淘汰以GDI 、GDI+、MFC等為代表的Win32 API。WPF可以編寫Web程序或者桌面應(yīng)用程序，可以直接編譯為獨(dú)立運(yùn)行的exe文件，WPF運(yùn)行時(shí)必須安裝.NET Framework 3.0，這就要求WPF目前運(yùn)行的操作系統(tǒng)必須是Windows Vista或者Windows XP SP2以上。而Silverlight為WPF的子集，是基于瀏覽器的插件，在瀏覽器中運(yùn)行，客戶端無需安裝.Net Framework，其運(yùn)行環(huán)境不受操作系統(tǒng)和瀏覽器的種類限制。雖然相對于Adobe的解決方案微軟推出較晚，但這也是目前在RIA領(lǐng)域最為強(qiáng)勁的后起之秀。
JavaFX是Sun公司推出的RIA技術(shù)解決方案，其前身為F3項(xiàng)目。和早期的Applet、Java Web Start等技術(shù)一脈相承，JavaFX其實(shí)同樣以Java Swing為基礎(chǔ)，運(yùn)行于Java 虛擬機(jī)之上。但與原來的Java語言有所不同的是JavaFX是一種全新的腳本語言，為開發(fā)者提供了更加簡潔、快速的GUI API。JavaFX與前兩者最大的不同也就在于其使用的是DSL，我們雖然熟悉SQL這樣的DSL語言，但將DSL引入GUI開發(fā)還是尚屬首次，DSL的語法更適合GUI的本質(zhì)，因此從語言的角度來說，JavaFX比.NET和ActionScript更為先進(jìn)。但與前兩者相比，JavaFX無論在推出的時(shí)間還是產(chǎn)品里程上都遠(yuǎn)落后于對手，其技術(shù)解決方案的成熟度也稍遜于其它兩種產(chǎn)品。
本文內(nèi)容著重以Adobe的RIA解決方案Flex技術(shù)對RIA技術(shù)進(jìn)行介紹。
1.1 Flex發(fā)展歷程
Flash Player最早為Macromedia公司產(chǎn)品，作為因特網(wǎng)頁的矢量動(dòng)畫平臺(tái)，早期的Flash Player主要是面向娛樂功能和多媒體應(yīng)用。其后推出了ActionScript語言做為補(bǔ)充，通過ActionScript可以對Flash Player中的動(dòng)畫和控件進(jìn)行更為復(fù)雜的邏輯控制。2000年8月Macromedia 推出了Flash 5.0，并推出了全新的ActionScript語言，這是ActionScript的一次飛躍，ActionScript的語法已經(jīng)開始定位并發(fā)展成為一種完整的面向?qū)ο蟮恼Z言，并且遵循ECMAScript的標(biāo)準(zhǔn)。隨后2004年Macromedia推出被收購前的最為經(jīng)典的版本Flash MX 2004，在這個(gè)版本中ActionScript升級為2.0版本，改造了ActionScript 1.0中的不完善，使其完全支持Class、Interface等面向?qū)ο?/span>的語法表達(dá)，第一次真正意義上具有了和Java、C++一樣的編程能力，同時(shí)第一次引入了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終于被認(rèn)可為一種“正規(guī)的”、“完整的”、“清晰的”面向?qū)ο笳Z言。新的ActionScript包含上百個(gè)類庫，這些類庫函蓋了圖形、算法、矩陣、XML、網(wǎng)絡(luò)傳輸?shù)戎T多范圍，為開發(fā)者提供了一個(gè)豐富的開發(fā)環(huán)境基礎(chǔ)。隨著ActionScript3.0而來的是新的Flash RunTime虛擬機(jī)(VM2.0)，VM2.0的運(yùn)行效率是VM1.0的幾倍。在這個(gè)版本中同時(shí)推出Flex 3.0和引入AIR的概念。可以說是對Macromedia的原有產(chǎn)品徹底的一次升華，變化如此之大，以至于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應(yīng)用和多媒體應(yīng)用都運(yùn)行于Flash Player這一同一平臺(tái)，但對于動(dòng)畫、影音等多媒體應(yīng)用仍然的是美工或媒體制作者的工作，而Flex應(yīng)用編程則完全是程序員的工作，可以說是兩套面向不同需求的應(yīng)用開發(fā)。在Flex的GUI編程中提供了和Java、.NET、VB、Delphi中相類似UI控件，諸如：輸入框、按鈕、樹、面板、表格、菜單、日期、進(jìn)度條、各類選擇框等，并與這些傳統(tǒng)語言相類似的界面控制機(jī)制，諸如：消息、觸發(fā)動(dòng)作(Action)等。一個(gè)熟悉Java編程的開發(fā)者，很容易過渡到Flex的開發(fā)，ActionScript語言本身、甚至Flex中提供的很多類庫都和Java相類似。從另外一個(gè)角度來看，一個(gè)Flex開發(fā)者完全不懂Flash制作也沒有任何問題，Flex應(yīng)用僅僅是運(yùn)行在Flash Player上而已。當(dāng)然做為Adobe的統(tǒng)一解決方案，Flex開發(fā)并不排斥對影音和動(dòng)畫等媒體的操作，實(shí)際上兩者可以完美的結(jié)合。
2 Flex技術(shù)分析
與以往純B/S技術(shù)不同，Flex是結(jié)合了B/S與C/S技術(shù)優(yōu)點(diǎn)的新一代富客戶端技術(shù)。
2.1 新一代富客戶端的技術(shù)特點(diǎn)
1. 可操作性方面：Flex富客戶端的界面和操作性將能夠和傳統(tǒng)的C/S相媲美，提供更豐富、更友善、易用性更強(qiáng)的界面給用戶，同時(shí)互動(dòng)性更好，而開發(fā)效率卻大為提高；特別是Flex內(nèi)建對音頻和視頻(包括H.264技術(shù))的支持，給用戶提供更好的操作體驗(yàn)。之所以Ajax會(huì)大行其道，就是因?yàn)?/span>Ajax的出現(xiàn)可以彌補(bǔ)傳統(tǒng)B/S在界面友善方面的不足，例如Web2.0中普遍提供了一個(gè)頁面中可以多個(gè)Tab的切換，給用戶帶來更多的方便，但對于更復(fù)雜的操作模式則無能為力。而新一代的富客戶端如同傳統(tǒng)C/S應(yīng)用一樣，可以提供更為復(fù)雜的界面，同時(shí)其數(shù)據(jù)持有能力也更強(qiáng)。
2. 架構(gòu)方面：用XML來描述GUI的外觀，GUI和邏輯相分離，真正意義上的MVC，使得應(yīng)用開發(fā)的結(jié)構(gòu)更為清晰。前端界面使用XML來描述，界面的控制由ActionScript來負(fù)責(zé)，后端的應(yīng)用邏輯則封裝在后端中間件中，與Flex前端界面相分離。
3. 可拓展性方面：Flex做為前端的客戶組件，非常容易與各類后端技術(shù)相結(jié)合，例如AMF、PHP、Java、.Net、ColdFusion等，這樣后端應(yīng)用服務(wù)可以規(guī)劃為類似的“中間件”組件，將業(yè)務(wù)邏輯封裝其中，中間應(yīng)用服務(wù)組件的選擇預(yù)留給用戶極大的選擇空間，方便而靈活。
4. 從運(yùn)行的環(huán)境方面：程序可以在瀏覽器中，也可以運(yùn)行在瀏覽器外，極大拓展了應(yīng)用的使用場合。新一代富客戶端可以根據(jù)需求更加靈活的部署。
5. 在性能方面：傳統(tǒng)的B/S有各種方式來提高應(yīng)用服務(wù)器的效率，但Flex框架的解決方案與此不同，能夠在性能方面有更大的提升。眾所周知，傳統(tǒng)Web應(yīng)用客戶端每次刷新頁面都會(huì)對服務(wù)器產(chǎn)生請求，服務(wù)器要將新的HTML和HTML中包含的圖片傳遞給Client，當(dāng)請求數(shù)量較大時(shí)，動(dòng)態(tài)生成HTML及下載圖片的過程都會(huì)嚴(yán)重地消耗著服務(wù)器的資源(CPU、IO、Memory、Network)。而新一代富客戶應(yīng)用是通過第一次運(yùn)行時(shí)將應(yīng)用一次性下載到本地，所有的GUI都在本地運(yùn)行，運(yùn)行過程中只產(chǎn)生少量的數(shù)據(jù)更新請求，而不需要服務(wù)器端實(shí)時(shí)地產(chǎn)生刷新的頁面，也就不存在服務(wù)器對HTML等內(nèi)容的動(dòng)態(tài)構(gòu)造，這樣后端服務(wù)器將完全專注于數(shù)據(jù)邏輯的處理，這樣充分利用客戶端本地機(jī)器的CPU，并最大限度的減少網(wǎng)絡(luò)帶寬。
6. 在開發(fā)效率方面，Flex的界面編程技術(shù)更類似于VB或是Delphi，開發(fā)中所見即所得，比起修改ASP、JSP、PHP和Javascript所表現(xiàn)的界面有極高的開發(fā)效能，而Flex采用ActionScript是面向?qū)ο蟮恼Z言，是一種和Java、.NET相其類似的語言，對于Java或.NET程序員來說Flex技術(shù)很容易上手，學(xué)習(xí)和整體維護(hù)成本很低。
7. 能夠與視頻、音頻等多媒體完美結(jié)合。Flex內(nèi)建視頻、音頻等多媒體原生組件，因此為程序員提供了方便、易用的API。特別是最新的更新中已經(jīng)包含了對H.264編碼協(xié)議的支持。
8. 和B/S相比，Flex能夠更方便的實(shí)現(xiàn)全雙工的消息通信。對于某些特定的應(yīng)用，需要實(shí)時(shí)從服務(wù)器Push消息給Client，Flex提供了方便的解決方案，突破了傳統(tǒng)的HTTP消息基于Get/Post被動(dòng)請求的模式。
Flex框架分析
圖2－1 Flex的基本結(jié)構(gòu)
Flex是一套Adobe的RIA技術(shù)的集合，Flex應(yīng)用在多層架構(gòu)中做為表示層。Flex包括：Flex SDK、Flex Builder、Flash Player、LiveCycle Data Service、ActionScript、MXML。
Ø Flex SDK就如同Java的JDK一樣，為開發(fā)人員提供了一個(gè)免費(fèi)的開發(fā)套件，同時(shí)這也是一套開源項(xiàng)目。開發(fā)者可以通過Flex SDK開發(fā)完整的RIA應(yīng)用。
Ø Flex Builder是Adobe公司為開發(fā)Flex/AIR應(yīng)用而提供的IDE，是一款商業(yè)收費(fèi)軟件，最新版本為3.0，其中包含了Flex SDK。Flex Builder中還包含Flex Charting，即Flex的圖表，提供了豐富的圖表控件，諸如：折線圖、餅圖、柱狀圖等
Ø LiveCycle Data Service是Adobe提供的商業(yè)付費(fèi)組件，內(nèi)置數(shù)據(jù)管理服務(wù)，Flex-Ajax橋接，Jave消息服務(wù)(JMS)適配器以及實(shí)時(shí)協(xié)作工具的企業(yè)級技術(shù)
Ø MXML是宣告式的、基于XML的界面描述語言，用來表達(dá)UI布局和相關(guān)動(dòng)作。在Flex技術(shù)中，前端的界面由MXML來描述，控制邏輯由ActionScript來負(fù)責(zé)，通過二者有機(jī)的結(jié)合來完成整個(gè)GUI的開發(fā)
在如圖2—1中一個(gè)典型案例中，中間層可以采用Java、PHP、.NET、ColdFusion和BlazeDS等技術(shù)，和Flex的通訊可以采用AMF或HTTP協(xié)議，AMF（Action Message Format）協(xié)議是一種二進(jìn)制格式，專門用于ActionScript和后臺(tái)服務(wù)器端的通信，比HTTP通信的速度要快很多，而且支持多種數(shù)據(jù)類型，對于Java、.NET、ColdFusion、PHP等編程語言都有相應(yīng)的Remoting服務(wù)器端。通過Remoting服務(wù)端接口，ActionScript直接調(diào)用服務(wù)器端對象的方法，彌補(bǔ)了客戶端在和數(shù)據(jù)庫服務(wù)器通信以及文件操作等方面上的不足。例如，Flex提供的基于Java的數(shù)據(jù)服務(wù)器Flex Data Service(簡稱FDS)，可以很方便地讓用戶部署自己的Java后端應(yīng)用程序。
2.2.1 BlazeDS與AMF
BlazeDS是由Adobe公司開發(fā)并提供的一套中間層技術(shù)解決方案，BlazeDS是基于Java遠(yuǎn)程調(diào)用和Web消息通信的組件，BlazeDS實(shí)際上是一套Java應(yīng)用，運(yùn)行在Server端。這樣就和前端Flex的應(yīng)用相分離，將業(yè)務(wù)邏輯封裝其中，為前端Flex和后端數(shù)據(jù)庫建立起中間橋梁，BlazeDS相當(dāng)于J2EE中的中間件。BlazeDS已經(jīng)開源，并運(yùn)行在Tomcat容器中。
AMF是Action Message Format的縮寫，是Adobe公司定義的協(xié)議，AMF是BlazeDS與前端Flex應(yīng)用通信的方式之一，BlazeDS和前端通信還可以采用SOAP或HTTP等其它協(xié)議。與這些通信方式不同，AMF采用二進(jìn)制的編碼方式，并采用Zlib對消息進(jìn)行壓縮，AMF消息體的大小只有基于XML協(xié)議的十分之一。因此在需要大量傳輸消息的場合，和純文本協(xié)議相比，AMF是一種高效率的傳輸方式。同時(shí)AMF也為開發(fā)者提供了一種便利而快速的通信開發(fā)接口，它可將前端Flex中本地對象(例如：Object、Array、Date、XML等)傳給Server端時(shí)自動(dòng)適配成Server端適當(dāng)?shù)膶ο?。例如：如?/span>Server端是PHP應(yīng)用，則AMF會(huì)自動(dòng)轉(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將其定位為一個(gè)跨平臺(tái)的客戶端系統(tǒng)運(yùn)行環(huán)境。Flex應(yīng)用、多媒體Flash、Html和Ajax通過AIR可以部署為桌面應(yīng)用，因?yàn)橐С謱Ρ镜刭Y源的操作，所以Flex 3.0中新增許多對本地資源的操作，如本地文件、PDF文件等。另外，AIR應(yīng)用程序支持版本升級、集成網(wǎng)頁、使用Ajax技術(shù)等。在Flex 3.0中的AIR工程中新增HTMLControl類和HTMLPDFCapability類，通過這兩個(gè)類可實(shí)現(xiàn)加載PDF文件，豐富了AIR應(yīng)用程序的效果和功能。
2.3 Flex開發(fā)
下面以我們開發(fā)的一個(gè)技術(shù)交流網(wǎng)站為例，對Flex開發(fā)中的一些技術(shù)點(diǎn)做介紹。
2.2.1 瀏覽器的前進(jìn)/后退和瀏覽器的歷史
對于普通HTML的網(wǎng)頁，瀏覽器提供中“回退”、“前進(jìn)”按鈕來控制瀏覽網(wǎng)頁的歷史，在Flex中同樣可以控制瀏覽器的歷史。在Flex 3.0中增加了一個(gè)新類BrowserManager，專門用來控制瀏覽器的歷史，通過截獲瀏覽器的控制消息來實(shí)現(xiàn)相應(yīng)的動(dòng)作。
2.2.2 Flex和HTML間的變量傳遞
Flex中可以嵌入HTML，HTML也可以嵌入Flex，這樣Flex和HTML間的信息交互是Flex開發(fā)中不可避免的題目。Flex中嵌入HTML較為容易實(shí)現(xiàn)，此時(shí)HTML做為Flex控件中的一部分展現(xiàn)出來；而HTML中嵌入Flex的通信則相對復(fù)雜些，這里以此為重點(diǎn)做介紹：
- 在HTML中首先要通過Javascript對要傳遞的變量進(jìn)行定義，并將變量傳遞給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>
- 在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外，仍有一些免費(fèi)的開源IDE可供使用，其中以FlashDevelop最為著名，在功能上毫不遜色，目前已能完整支持AIR，最新版本為FlashDevelop 3.0.0 Beta 8。
此外Flex Builder中的圖表(Charting)功能也屬于收費(fèi)項(xiàng)目，對于一般的開發(fā)者和商業(yè)用戶來說，也有開源解決方案Open Flash Chart來替代，提供諸如餅圖、柱狀圖、折線圖和三維效果的圖表等。
2.4 Flex與搜索
網(wǎng)站采用Flex技術(shù)后，部分內(nèi)容就會(huì)嵌入在Flash中展現(xiàn)，其中重要的文字信息和內(nèi)容如何被索引、如何被搜索引擎捕獲就是一個(gè)很重要的問題了。這實(shí)際上涉及到兩個(gè)領(lǐng)域，Adobe的Flash和搜索引擎技術(shù)。基于對Flash中內(nèi)容的搜索需求，Adobe公司已經(jīng)發(fā)布了Flash-Reading工具，該工具專門針對搜索引擎，可供其機(jī)器人可以識(shí)別到Flash中的內(nèi)容。另一方面，以Google為首的一部分搜索引擎已經(jīng)采用了Flash-Indexing服務(wù)，能夠搜索Flash中的文字、超鏈接，甚至能夠索引到Flash中的菜單、按鈕和橫幅。但和傳統(tǒng)的純HTML網(wǎng)站相比，復(fù)雜的動(dòng)態(tài)Flash內(nèi)容目前搜索引擎依舊無法索引，對于通過Javascript加載的Flash也將無法索引。雖然目前的解決方案尚不完善，不過隨著技術(shù)的發(fā)展，Flex的搜索技術(shù)會(huì)逐漸成熟。
2.5 Flex的3D技術(shù)
Flex 3.0本身不支持3D，也未提供基于3D的API，目前只有第三方的3D API可供使用，使用比較多的是如下三個(gè)開源項(xiàng)目：
Ø Papervision3D
Ø Away3D
Ø Flash3D
由于在目前發(fā)布的Flex版本中不支持3D技術(shù)，所以這些Flex三維解決方案都只算是偽3D技術(shù)，通過改變2D物件的視覺效果來模擬三維場景，缺點(diǎn)是不能很好的實(shí)現(xiàn)透視，裁剪有時(shí)會(huì)出現(xiàn)錯(cuò)誤。
除了開源項(xiàng)目外，比較實(shí)用的商業(yè)方案是Alternativa 3D，這也是目前實(shí)現(xiàn)的最為出色的Flex 3D技術(shù)，Alternativa甚至提供了基于Flash Player 10 Beta的3D版本。
在下一個(gè)版本的Flex 4.0及Flash Player 10中，Adobe將集成對3D的支持，將提供原生的3D API，第一次實(shí)現(xiàn)真正意義上的三維制作和編程。
2 結(jié)束語
綜上所述，以Flex為代表的這場新的技術(shù)革新中，使我們有必要重新思考架構(gòu)的拓展、業(yè)務(wù)能力的創(chuàng)新和開發(fā)效率的提升，同時(shí)也給我們的開發(fā)和測試提出了一個(gè)新的課題，迎接新的挑戰(zhàn)，改善我們產(chǎn)品，優(yōu)化我們的技術(shù)，降低成本，最大限度的提升用戶的體驗(yàn)價(jià)值。