讓Flex助力互動(dòng)教學(xué)（下）Flex與各種潮流技術(shù)大比拼

劉樹明　邱元陽(yáng)　劉宗凡

在網(wǎng)絡(luò)開發(fā)方面，各種技術(shù)甚囂塵上，構(gòu)成了豐富的網(wǎng)絡(luò)應(yīng)用，令我們目不暇接。親兄弟Flex與Flash各有什么特長(zhǎng)？在RIA開發(fā)中，F(xiàn)lex與Silverlight、JavaFX誰(shuí)勝誰(shuí)負(fù)？Flex與AJAX誰(shuí)優(yōu)誰(shuí)劣？Flex與HTML5誰(shuí)前景光明？Flex開發(fā)平臺(tái)如何發(fā)展？下面請(qǐng)聽主持人和各位嘉賓娓娓道來(lái)。

Flex與Flash

劉樹明：Flash技術(shù)曾經(jīng)掀起過一陣應(yīng)用潮流。在網(wǎng)頁(yè)制作方面，它大量代替GIF動(dòng)畫、多媒體動(dòng)畫MTV，教師經(jīng)常用到的多媒體課件制作也廣泛使用Flash技術(shù)。作為矢量動(dòng)畫的杰出代表，F(xiàn)lash在同樣的甚至是更優(yōu)的畫面效果下能夠做到作品的體積更小。

作為網(wǎng)頁(yè)制作三劍客之一，F(xiàn)lash的知名度遠(yuǎn)超F(xiàn)lex。我第一次接觸Flex應(yīng)該是在2006年，一位同事在56網(wǎng)上看到一個(gè)比較好的視頻，想要將它下載下來(lái)用在自己的課件里面。我下載下來(lái)后驚奇地發(fā)現(xiàn)，得到的palyer.swf僅僅是一個(gè)播放器，并不是當(dāng)時(shí)常見的Flash MTV影片。這就是Flex的一個(gè)應(yīng)用。

邱元陽(yáng)：從最終效果上看，F(xiàn)lex與Flash似乎是異曲同工，因而容易讓人以為它們兩者可以互相代替。實(shí)際上，它們?cè)诠δ芎妥饔蒙系年P(guān)系并不是表面上看來(lái)這么簡(jiǎn)單的。

如果簡(jiǎn)單地說(shuō)，F(xiàn)lex是面向開發(fā)者（Developers）的工具，有很多的組件和框架可以應(yīng)用，可以開發(fā)企業(yè)級(jí)的網(wǎng)絡(luò)應(yīng)用；而Flash是面向設(shè)計(jì)者（Designer）的工具，主要做動(dòng)畫和小程序。兩者既有交集，也可以互相配合。

Flash也可以完全使用ActionScript腳本語(yǔ)言來(lái)寫成獨(dú)立的程序文件，即腳本文件或類文件；Flxe則常常是以腳本的形式寫在.mxml文件中。

從開發(fā)者的角度看，F(xiàn)lex是Macromedia發(fā)布的Presentation Server（展現(xiàn)服務(wù)），它是Java Web Container或者.net Server的一個(gè)應(yīng)用，根據(jù).mxml文件（純粹的xml描述文件）和ActionScript產(chǎn)生相應(yīng)的.swf文件，傳送到客戶端，由客戶端的Flash Player或者Shockwave Player解釋執(zhí)行，給用戶以豐富的體驗(yàn)。

Flash適合單兵作戰(zhàn)，對(duì)程序員的要求比較低，在獨(dú)立程序和小的項(xiàng)目上，運(yùn)用Flash是完全可以做到Flex的效果的，但它的時(shí)間軸和寫程序的方式與開發(fā)人員格格不入。Flex主要面向?qū)I(yè)程序員團(tuán)隊(duì)開發(fā)，專業(yè)性較高，適合一些大型項(xiàng)目的開發(fā)，如大型無(wú)客戶端（網(wǎng)頁(yè)式）的Flash網(wǎng)絡(luò)游戲，因?yàn)檫@樣的項(xiàng)目一般都是多人開發(fā)，而且具有合理的結(jié)構(gòu)性，便于后續(xù)修改。

劉宗凡：Flash適合強(qiáng)交互、強(qiáng)效果、少數(shù)據(jù)展示、少圖文混排、偏展示/工具屬性的應(yīng)用程序。例如，F(xiàn)lash交互廣告展示、頁(yè)游（Flash Game）等。而Flex適合較強(qiáng)交互、適當(dāng)效果、多數(shù)據(jù)展示、少圖文混排、偏工具屬性的應(yīng)用程序。例如，圖片在線修改、企業(yè)內(nèi)部系統(tǒng)、ERP系統(tǒng)、金融系統(tǒng)等。

Flex一般只用于開發(fā)程序部分，需要程序員和美工協(xié)同工作。而在Flash的項(xiàng)目中，這些一般都沒有分工。

從表現(xiàn)形式來(lái)看，F(xiàn)lash和Flex區(qū)別不大，但是它們的數(shù)據(jù)來(lái)源不相同。Flash需要展示的數(shù)據(jù)是直接嵌入到作品里面的；Flex的數(shù)據(jù)來(lái)源于后臺(tái)服務(wù)器，這點(diǎn)有點(diǎn)類似于普通的照相機(jī)和一次性照相機(jī)的工作方式。

Flex與RIA

劉樹明：Flex作為RIA應(yīng)用的突出代表，無(wú)需刷新網(wǎng)頁(yè)便可自動(dòng)通過后臺(tái)多次重復(fù)連接服務(wù)器進(jìn)行交換數(shù)據(jù)，給用戶帶來(lái)良好的使用體驗(yàn)。請(qǐng)兩位老師給大家談?wù)勱P(guān)于Flex和RIA的各種有關(guān)知識(shí)。

邱元陽(yáng)：RIA（Rich Internet Application）即富互聯(lián)網(wǎng)應(yīng)用。RIA首先應(yīng)該是一個(gè)網(wǎng)絡(luò)應(yīng)用程序，其次它還要具有桌面應(yīng)用程序的特征和功能。RIA應(yīng)用既能在瀏覽器上運(yùn)行，又能保持程序原來(lái)的功能和特征（富互聯(lián)網(wǎng)客戶端應(yīng)用）。

在企業(yè)應(yīng)用由Intranet轉(zhuǎn)向Internet時(shí)，就不再滿足于簡(jiǎn)單的表單和表格界面，而越來(lái)越倡導(dǎo)用戶體驗(yàn)，于是RIA的需求應(yīng)運(yùn)而生。

無(wú)論是B2B網(wǎng)站中的產(chǎn)品展示，還是SNS網(wǎng)站上的交友游戲，無(wú)論是娛樂網(wǎng)站上的Web游戲，還是教育網(wǎng)站上的交互設(shè)計(jì)，RIA技術(shù)都已在散發(fā)著炫目的光輝和迷人的魅力，給我們帶來(lái)無(wú)與倫比的用戶體驗(yàn)。

劉宗凡：在RIA的開發(fā)應(yīng)用中，Adobe公司的Flex、微軟公司的Silverlight和Java陣營(yíng)的JavaFX三足鼎立。Flash由于Flex SDK的支撐，很早就從單純的動(dòng)畫展示轉(zhuǎn)入RIA領(lǐng)域，而且由于Flash的普及（Flash播放器是下載次數(shù)最多的獨(dú)立軟件），F(xiàn)lex目前應(yīng)該是三大技術(shù)體系中市場(chǎng)份額最大、應(yīng)用最廣泛的技術(shù)；Silverlight是微軟推出的跨瀏覽器和跨平臺(tái)的插件，能在微軟的.NET上交付炫目的多媒體體驗(yàn)和有豐富交互功能的Web應(yīng)用，已經(jīng)對(duì)Flex有了很大的沖擊；JavaFX是未被收購(gòu)前的Sun公司在2007年推出的用來(lái)對(duì)抗Flex和Silverlight的桌面應(yīng)用。JavaFX Script可以讓用戶利用JRE“一次編寫，處處運(yùn)行”的優(yōu)勢(shì)，在現(xiàn)有知識(shí)的技術(shù)上創(chuàng)建跨設(shè)備的應(yīng)用；Flex產(chǎn)品能幫助應(yīng)用程序開發(fā)者利用強(qiáng)大的Flash運(yùn)行時(shí)創(chuàng)建數(shù)據(jù)驅(qū)動(dòng)的RIA，而且開發(fā)者還可以用Flash和Flex構(gòu)建器一起為基于Flex的應(yīng)用增加富交互元素。

目前來(lái)看，這三種技術(shù)各有優(yōu)勢(shì)，F(xiàn)lex先入為主，目前已經(jīng)有了一個(gè)很大的市場(chǎng)，但是Silverlight的先天優(yōu)勢(shì)是有Windows平臺(tái)的支持，而JavaFX作為后起之秀，盡管目前應(yīng)用不是很廣泛，但其優(yōu)勢(shì)是它的開源策略，相信前景依然非常廣闊。

Flex與AJAX

劉樹明：我們知道，AJAX也是一種免刷新整個(gè)頁(yè)面而獲得服務(wù)器端更新數(shù)據(jù)的技術(shù)，它主要是采用JavaScript的XMLHttpRequest對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過這個(gè)對(duì)象，JavaScript可在不重載頁(yè)面的情況與Web服務(wù)器交換數(shù)據(jù)。那么AJAX與Flex各有些什么優(yōu)缺點(diǎn)呢？

劉宗凡：AJAX（Asynchronous JavaScript And XML，異步JavaScript及XML）是一種用于創(chuàng)建更好、更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。與Flex類似，它也是需要客戶端支持的一種技術(shù)，但它不需要一個(gè)專門的播放器，只需要客戶端瀏覽器的JavaScript支持。JavaScript、XML、HTML、CSS在AJAX中使用的Web標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)，桌面應(yīng)用程序有諸多優(yōu)勢(shì)，它們能夠涉及廣大的用戶，更易安裝及維護(hù)，也更易開發(fā)。為了正確地瀏覽AJAX應(yīng)用，CSS是AJAX開發(fā)人員所需要的一種重要武器。CSS提供了從內(nèi)容中分離應(yīng)用樣式和設(shè)計(jì)的機(jī)制。雖然CSS在AJAX應(yīng)用中扮演至關(guān)重要的角色，但它也是構(gòu)建跨瀏覽器應(yīng)用的一大阻礙，因?yàn)椴煌臑g覽器廠商支持各種不同的CSS級(jí)別。

AJAX的優(yōu)點(diǎn)是它不需要任何瀏覽器插件，而且它的應(yīng)用范圍也不會(huì)局限于像Flex這樣的播放器窗口，頁(yè)面上的所有div元素都可以接受AJAX從服務(wù)器上拉取的數(shù)據(jù)。但是它需要用戶允許JavaScript在瀏覽器上執(zhí)行，而且需要考慮各種瀏覽器的兼容性，就像DHTML應(yīng)用程序那樣，AJAX應(yīng)用程序必須在眾多不同的瀏覽器和平臺(tái)上經(jīng)過嚴(yán)格的測(cè)試。

邱元陽(yáng)：隨著AJAX的成熟，一些簡(jiǎn)化AJAX使用方法的程序庫(kù)也相繼問世。最為典型的是雅虎的YUI（Yahoo！ UI Library）。YUI是一個(gè)開放源代碼的JavaScript函數(shù)庫(kù)，為了能建立一個(gè)高度互動(dòng)的網(wǎng)頁(yè)，它采用了AJAX、DHTML和DOM等技術(shù)，也包含了許多CSS資源。它使用授權(quán)為BSD許可證。通過YUI函數(shù)庫(kù)，我們可以很輕松地實(shí)現(xiàn)動(dòng)畫、連線工具、資料源、元素、DOM、即拖即放、事件響應(yīng)等類似桌面應(yīng)用程序的一些操作，同時(shí)它還提供自動(dòng)完成、按鈕、月歷、容器、資料表、記錄器、表單、滑塊、分頁(yè)視圖、樹狀檢視等控件，并提供七種基本線框外帶附加組件，支援超過1000種不同網(wǎng)頁(yè)布局。

大量的AJAX應(yīng)用，會(huì)給客戶端的瀏覽器帶來(lái)比較大的負(fù)荷，而且因?yàn)橐紤]到各種瀏覽器的兼容性要求，Web應(yīng)用開發(fā)商通常需要花好幾倍的人力成本來(lái)協(xié)調(diào)瀏覽器兼容。這就是為什么澳大利亞電子產(chǎn)品經(jīng)銷商Kogan，對(duì)于在他的網(wǎng)站上使用IE7以下版本的瀏覽器購(gòu)物者多收取6.8%的款項(xiàng)的重要原因了。

劉樹明：相對(duì)于Flex來(lái)說(shuō)，AJAX確實(shí)是有優(yōu)點(diǎn)也有缺點(diǎn)。不過現(xiàn)在使用YUI的站點(diǎn)也越來(lái)越多了，Moodle從2.0版本起，就在它的各種組件中大量應(yīng)用了YUI的技術(shù)。JavaScript對(duì)于牛人來(lái)說(shuō)，可以寫出非常牛的程序。一個(gè)法國(guó)程序員Fabrice Bellard曾經(jīng)就用純JavaScript寫出了一個(gè)在Web上面運(yùn)行的Linux系統(tǒng)，不但能模擬PC機(jī)的CPU、內(nèi)存，連C語(yǔ)言編譯器等系統(tǒng)軟件都一應(yīng)俱全。但是對(duì)于普通的程序員來(lái)說(shuō)，也許Flex技術(shù)是更好的選擇。

Flex與HTML5

劉樹明：盡管Flex功能非常強(qiáng)大，而且目前暫時(shí)應(yīng)用比較廣，但是它畢竟還是需要相關(guān)播放器組件的支持。隨著HTML5技術(shù)的產(chǎn)生，F(xiàn)lex技術(shù)是否會(huì)面臨淘汰的危險(xiǎn)呢？

邱元陽(yáng)：作為新興的Web技術(shù)，HTML5走上了風(fēng)口浪尖，為眾人所景仰。

HTML5已經(jīng)成為一種趨勢(shì)，在它的脅迫下，瀏覽器的包容性越來(lái)越大。也許有一天，我們的瀏覽器不需要再安裝Activex，不需要Flash Player支持，不需要下載Applet、Silverlight等任何插件，而所有的動(dòng)畫和交互效果都能實(shí)現(xiàn)了。這個(gè)希望就可能寄托在HTML5和CSS3身上。

盡管HTML5和CSS3來(lái)勢(shì)洶洶，但是因?yàn)镕lash有著廣泛而根深蒂固的應(yīng)用基礎(chǔ)，F(xiàn)lex仍然大有可為。如果AJAX技術(shù)和Flex技術(shù)配合形成前端組件體系，將大大提高開發(fā)效率，改進(jìn)用戶體驗(yàn)。

Flex的核心價(jià)值在表現(xiàn)層，它有著基于組件的表現(xiàn)層快速開發(fā)模式?？梢哉f(shuō)，F(xiàn)lex在表現(xiàn)層的作用暫時(shí)無(wú)可替代。一個(gè)是Web應(yīng)用，一個(gè)是B/S架構(gòu)，兩者在功能和作用上并沒有可以完全替代的關(guān)系。而且，連Adobe都在積極推動(dòng)HTML5，它也未必會(huì)造成Flex和Flash的消亡。

劉宗凡：HTML5和CSS3適合較強(qiáng)交互、適當(dāng)效果、多數(shù)據(jù)展示、多圖文混排、偏應(yīng)用屬性的應(yīng)用程序。例如，Google系網(wǎng)站、各種傳統(tǒng)意義的網(wǎng)站、SNS系網(wǎng)站等，在手機(jī)等移動(dòng)終端Web網(wǎng)絡(luò)應(yīng)用方面也得到了普遍應(yīng)用。

但是在PC機(jī)的RIA應(yīng)用方面，F(xiàn)lex現(xiàn)在并不過時(shí)。首先，F(xiàn)lex所需的Flash播放器在PC機(jī)上非常普及，采用Flex技術(shù)的Web應(yīng)用幾乎不存在使用障礙；其次，在一些比較流行的應(yīng)用技術(shù)上，F(xiàn)lex積累了很多的開源項(xiàng)目，開發(fā)人員在面臨架構(gòu)一個(gè)新項(xiàng)目的時(shí)候，如果他們采用Flex技術(shù)實(shí)現(xiàn)，可以在現(xiàn)有的開源項(xiàng)目的基礎(chǔ)上輕易完成，節(jié)省大量的人力物力。所以在相當(dāng)?shù)囊欢螘r(shí)間內(nèi)，我覺得Flex技術(shù)還是會(huì)有很廣闊的應(yīng)用空間。但是HTML5這種新技術(shù)走向前臺(tái)是難以阻擋的，未來(lái)可能是相當(dāng)一段時(shí)間內(nèi)，會(huì)呈現(xiàn)以Flex為代表的RIA技術(shù)和HTML5技術(shù)并存的局面。

開發(fā)平臺(tái)與技術(shù)

劉樹明：隨著人力成本占項(xiàng)目開發(fā)總成本的比例越來(lái)越大，開發(fā)平臺(tái)和開發(fā)技術(shù)的選擇對(duì)于項(xiàng)目開發(fā)和項(xiàng)目管理越來(lái)越重要了，相比其他的RIA技術(shù)，F(xiàn)lex在開發(fā)方面有什么特點(diǎn)呢？

劉宗凡：Flash主要基于Flex SDK進(jìn)行開發(fā)，這是一個(gè)可視化開發(fā)界面，可以通過拖拽方式開發(fā)，提高開發(fā)效率。

Silverlight主要的開發(fā)平臺(tái)是微軟的.NET平臺(tái)。近年來(lái)，微軟貌似對(duì)這項(xiàng)技術(shù)非常重視，投入很多的人力物力，使Silverlight不但從Silverlight 1到Silverlight 5更新速度很快，.NET平臺(tái)也更新?lián)Q代非常快，功能越來(lái)越先進(jìn)。Visual Studio 2010中新增了更為強(qiáng)大的Silverlight開發(fā)功能，包括了可完整編輯的設(shè)計(jì)接口、拖放式數(shù)據(jù)系結(jié)、自動(dòng)綁定控件、數(shù)據(jù)源選擇、與Expression Blend樣式資源整合、Silverlight項(xiàng)目支持和完整的IntelliSense。

JavaFX的集成開發(fā)環(huán)境類似于J2EE，使用得比較多的是Netbeans和Eclipse，在這些集成環(huán)境下面，程序員也可以使用和VB或Delphi非常相像的可視化編輯器。

在過去幾年中，F(xiàn)lex/ActionScript社區(qū)創(chuàng)建了大量開源的開發(fā)支持工具：

RIATest是面向Flex的GUI自動(dòng)化測(cè)試工具，它支持Windows以及Max OS X。

Flexcover是面向Flex、AIR以及ActionScript 3的開源代碼覆蓋率檢測(cè)工具。

Alcon是輕量級(jí)的調(diào)試工具，支持ActionScript3、Flex及AIR開發(fā)。

Fluint（Flex unit and integration的簡(jiǎn)稱）是面向Flex 2/3應(yīng)用的測(cè)試框架。

Arthropod是面向Flex和AIR開發(fā)的調(diào)試工具，憑借Arthropod，開發(fā)者可以在運(yùn)行期輕松調(diào)試應(yīng)用。

De MonsterDebugger是面向Adobe Flash、Flex及AIR項(xiàng)目的開源、輕量級(jí)但功能完善的調(diào)試器，它完全使用Adobe AIR開發(fā)。

ASTUce是衰退測(cè)試框架，其靈感來(lái)源于xUnit架構(gòu)，如JUnit。它支持對(duì)ActionScript 3的單元測(cè)試。

AsUnit是面向ActionScript 3的開源的單元測(cè)試框架。AsUnit 2.x已經(jīng)完全集成了Flash IDE。

FlexMonkey是面向Flex應(yīng)用的測(cè)試框架，它可以對(duì)Flex UI功能進(jìn)行捕獲、重放以及確認(rèn)，可以記錄并回放Flex UI的交互并生成ActionScript測(cè)試腳本，這些腳本可以輕松集成到持續(xù)集成過程中。

邱元陽(yáng)：Flex開發(fā)過程通常使用已經(jīng)含有Flex 4 SDK的Adobe Flash Builder，F(xiàn)lash Builder環(huán)境下所有的Flex開發(fā)都基于Flex SDK框架，該框架為你提供可重復(fù)使用、可擴(kuò)展的UI組件、數(shù)據(jù)獲取服務(wù)和事件處理模塊等。它包含對(duì)智能編碼、調(diào)試及可視設(shè)計(jì)的支持，提供功能強(qiáng)大的測(cè)試工具，這些工具可以提高開發(fā)速度并創(chuàng)建出性能更高的應(yīng)用程序。

Flex還有一些應(yīng)用框架可以提高編程生產(chǎn)率及改善產(chǎn)品質(zhì)量，2008年推出的一些Flex/ActionScript框架對(duì)于Flex使用率的提升功不可沒。他們是Cairngorm、PureMVC、Model-Glue：Flex、Foundry、Guasax Flex Framework、ARP、Flest Framework、EasyMVC以及Adobe FAST。從那以后涌現(xiàn)出了越來(lái)越多的框架，這些框架豐富了Flex開發(fā)生態(tài)圈：

Ruboss這個(gè)Flex框架集成了Ruby on Rails和Merb。它還有一個(gè)RESTful接口以與Adobe AIR的嵌入式SQLite數(shù)據(jù)庫(kù)進(jìn)行通信。Ruboss框架與Rails和Merb應(yīng)用的關(guān)系就好像是Adobe LiveCycle Data Services ES與J2EE應(yīng)用的關(guān)系一樣。

Mate Flex框架發(fā)布于2008年，其目的是簡(jiǎn)化事件驅(qū)動(dòng)的Flex應(yīng)用開發(fā)。Swiz是面向Flex的IoC框架。它并沒有太多的強(qiáng)制要求，如目錄結(jié)構(gòu)或是樣板代碼等，這一點(diǎn)與其他框架如JEE大不相同.Prana是又一個(gè)面向ActionScript的IoC框架，它基于Spring框架的XML方式進(jìn)行開發(fā)。

JumpShip是個(gè)ActionScript MVC框架，包含了標(biāo)準(zhǔn)的數(shù)據(jù)模型以進(jìn)行自動(dòng)化的數(shù)據(jù)分類、枚舉以及搜索。它反對(duì)在框架中使用單例模式，而單例模式在現(xiàn)代的軟件框架中得到了廣泛的應(yīng)用。

GAIA是面向Adobe Flash的前端ActionScript框架，支持Flex Builder.Razor是個(gè)ActionScript組件框架，對(duì)常用的Flex組件提供了另一種選擇.Flight Framework是又一個(gè)ActionScript框架，支持MVC及其他設(shè)計(jì)模式。

劉樹明：從本質(zhì)上來(lái)說(shuō)Flex仍是客戶端技術(shù)。利用Flex技術(shù)，還可以構(gòu)建RIA電子商務(wù)網(wǎng)站，實(shí)現(xiàn)HTTP的斷點(diǎn)續(xù)傳，Web方式下的在線音視頻，Web方式下的圖形化拖拽操作和動(dòng)態(tài)圖表等。目前也有基于Flex技術(shù)的網(wǎng)絡(luò)硬盤，甚至能實(shí)現(xiàn)仿真實(shí)驗(yàn)網(wǎng)絡(luò)平臺(tái)。國(guó)內(nèi)外的一些大型的網(wǎng)站，如Slideshare、Youtube、豆丁、優(yōu)酷等，在知識(shí)管理的核心技術(shù)上都采用了Flex。也有一些網(wǎng)站的應(yīng)用并不是采用單一技術(shù)，而是采用多種技術(shù)的組合，如WEBQQ，其客戶端主要是采用AJAX，服務(wù)器端通訊的接口又是采用Flex（也許是因?yàn)樾枰用軘?shù)據(jù)接口的用意）。隨著技術(shù)的發(fā)展，更先進(jìn)的技術(shù)可能會(huì)替代類似Flex的RIA技術(shù)，也可能是與之長(zhǎng)期并存。