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