本文向大家展示了Flex組件如何實(shí)現(xiàn)逐步增強(qiáng)一個Web應(yīng)用：開源SWFObjec庫使得嵌入FlashPlayer變的簡化——一個Flex應(yīng)用的實(shí)施環(huán)境——到HTML內(nèi)。FlashPlayer，依次允許委派與用戶界面相關(guān)的邏輯到Flex組件內(nèi)。Flex指定的用戶界面語言不僅僅使得用戶界面代碼更簡單，而且使得你的應(yīng)用程序從FlashPlayer的實(shí)時(shí)編譯、用戶界面結(jié)果、多種手段支持等等中獲益匪淺。另外，因?yàn)镕lex支持以CSS為基礎(chǔ)的樣式，你的Flex組件將會與外界環(huán)境HTML頁面相處得十分和諧。

Flex與JavaEE應(yīng)用程序結(jié)合

　　一個關(guān)鍵方面在于逐步增強(qiáng)的Flex能夠通過數(shù)據(jù)傳輸?shù)竭_(dá)Flex組件中。在前面我們曾經(jīng)提到，服務(wù)器產(chǎn)生的JSON陣列反映了應(yīng)用程序的數(shù)據(jù)，然后它作為FlashVar傳遞到Flex組件內(nèi)。

　　盡管FlashVar允許Flex成為現(xiàn)有的企業(yè)級應(yīng)用的一部分，并且對應(yīng)用程序的改變很小，F(xiàn)lashVar仍然有一個非常大的限制：因?yàn)镕lashVar是由名稱/值組成的字符串，在瀏覽器上面對于字符串對象的***長度有限制。對于大多數(shù)瀏覽器而言，這個限制是65KB。

　　兩個階段載入

　　你可以去掉這個限制，這需要你為Flex組件執(zhí)行它自己的數(shù)據(jù)載入作準(zhǔn)備。這就需要兩個階段載入的網(wǎng)頁：

　　對瀏覽器的要求做出響應(yīng)，***個階段載入HTML頁面和嵌入的SWF(Flex)對象;

　　一旦Flex應(yīng)用完全展現(xiàn)在瀏覽器上，F(xiàn)lex獲取應(yīng)用程序的數(shù)據(jù)用來填充到Flex組件中。

　　第二階段載入很多豐富客戶端應(yīng)用程序的一般協(xié)議，通過減少響應(yīng)時(shí)間可以改善用戶體驗(yàn)：只要用戶定留在同一個HTML頁面上，階段一的執(zhí)行就只進(jìn)行一次。所有之后的數(shù)據(jù)存取的發(fā)生都是通過第二階段實(shí)現(xiàn)的，緩解了每一次瀏覽器檢索以及重新展示用戶界面的時(shí)候?qū)τ诜?wù)器的要求。性能優(yōu)勢得益于這種模式充分利用了每個應(yīng)用一個頁面的模式，比如說谷歌的Gmail和地圖應(yīng)用程序。

　　這篇文章的其余部分將會說明Flex對于來自遠(yuǎn)程網(wǎng)絡(luò)資源的數(shù)據(jù)載入***化的三種方法：通過HTTP載入JSON數(shù)據(jù)，通過HTTP載入XML，以及通過高性能的串行協(xié)議直接引用服務(wù)器Java對象。對于RESTful數(shù)據(jù)存取而言，前兩種方法是一個好的選擇，盡管遠(yuǎn)程對象引用適合RPC通信樣式。***方法的一個優(yōu)勢是客戶端以及服務(wù)器可以通過類型對象通信。Flex：EngineYard的全新云服務(wù)

　　JSON超越HTTP

　　Flex的HTTPService類使得委托JSON數(shù)據(jù)載入到Flex客戶端的過程變得簡單。下面的ActionScript代碼獲得了指定的URL的內(nèi)容，作為Flex客戶端完成事件處理程序的一部分。

...  
　　privatefunctiononCreationComplete():void{  
 
　　varhttp:HTTPService=newHTTPService();  
 
　　http.url="booksInventory.json";  
 
　　http.addEventListener(ResultEvent.RESULT,onResult);  
 
　　http.addEventListener(FaultEvent.FAULT,onFault);  
 
　　http.send();  
 
　　}  
 
　　privatefunctiononResult(event:ResultEvent):void{  
 
　　booksInventory.dataProvider=JSON.decode(event.resultasString)asArray;  
 
　　}  
 
　　privatefunctiononFault(event:FaultEvent):void{  
 
　　Alert.show("Can'tloaddata:"+event.message);  
 
　　}  
 
　　...  
 

 列表一：使用HTTPService獲取JSON數(shù)據(jù)

　　HTTPService，F(xiàn)lexSDK的一部分，為AjaxXMLHttpRequest對象提供相似的功能：給予一個URL，它使得你能夠從HTTP數(shù)據(jù)源異步的獲取數(shù)據(jù)。send()會立即調(diào)用返回。當(dāng)結(jié)果返回的時(shí)候，或者采用另一個選擇，就是將錯誤刪除的時(shí)候，回調(diào)機(jī)制采用這項(xiàng)功能

　　這個實(shí)例的結(jié)果以及失敗處理程序功能都是由名稱引用的：編譯程序?qū)业脚c方法相匹配的名稱以及必須的參數(shù)和返回類型，然后分配這些功能，作為操作者來處理這些結(jié)果或者失敗的HTTP請求。

　　實(shí)例的結(jié)果和失敗處理功能每一個都是由一個單一行組成的，你可以使用ActionScript功能讓這些代碼變的簡練一些：　　

privatefunctiononCreationComplete():void{  
　　varhttp:HTTPService=newHTTPService();  
 
　　http.url="booksInventory";  
 
　　http.addEventListener(ResultEvent.RESULT,  
 
　　function(event:ResultEvent):void{  
 
　　booksInventory.dataProvider=  
 
　　JSON.decode(event.resultasString)asArray;  
 
　　});  
 
　　http.addEventListener(FaultEvent.FAULT,  
 
　　function(event:FaultEvent):void{  
 
　　Alert.show("Can'tloaddata:"+event.message);  
 
　　});  
 
　　http.send();  
 
　　}  
 

 列表二：功能的成功和失敗處理

　　ResultEvent的結(jié)果特性是非類型對象，并且我們必須在其轉(zhuǎn)變?yōu)镴SON陣列之前將它轉(zhuǎn)變?yōu)樽址Ｒ驗(yàn)檫@種轉(zhuǎn)變確認(rèn)了數(shù)據(jù)或者轉(zhuǎn)變?yōu)橹付ǖ臄?shù)據(jù)類型，或者返回空值。在這個例子當(dāng)中，錯誤的處理程序僅僅是顯示了一些不友好的模塊，標(biāo)示出了通信錯誤的原因。

　　伴隨著這種改變，我們現(xiàn)在可以從Flex組件的外界環(huán)境HTML頁面中去掉FlashVar。因?yàn)镕lex組件執(zhí)行它自己的數(shù)據(jù)載入，客戶端可以載入的數(shù)據(jù)總量是僅由可用的記憶存量限制的。

【編輯推薦】

1. 解析重寫Flex組件中角色 規(guī)則和步驟
2. 開源Flex組件FlexReport使用指南
3. 學(xué)習(xí)總結(jié) 在Flex中如何嵌入Flex字體
4. 揭開Flex正則表達(dá)式的神秘面紗
5. 用ActionScript創(chuàng)建可視化的Flex組件