Flex與JavaEE應用程序結合
本文向大家展示了Flex組件如何實現逐步增強一個Web應用:開源SWFObjec庫使得嵌入FlashPlayer變的簡化——一個Flex應用的實施環境——到HTML內。FlashPlayer,依次允許委派與用戶界面相關的邏輯到Flex組件內。Flex指定的用戶界面語言不僅僅使得用戶界面代碼更簡單,而且使得你的應用程序從FlashPlayer的實時編譯、用戶界面結果、多種手段支持等等中獲益匪淺。另外,因爲Flex支持以CSS爲基礎的樣式,你的Flex組件將會與外界環境HTML頁面相處得十分和諧。
Flex與JavaEE應用程序結合
一個關鍵方面在於逐步增強的Flex能夠通過數據傳輸到達Flex組件中。在前面我們曾經提到,服務器產生的JSON陣列反映了應用程序的數據,然後它作爲FlashVar傳遞到Flex組件內。
儘管FlashVar允許Flex成爲現有的企業級應用的一部分,並且對應用程序的改變很小,FlashVar仍然有一個非常大的限制:因爲FlashVar是由名稱/值組成的字符串,在瀏覽器上面對於字符串對象的最大長度有限制。對於大多數瀏覽器而言,這個限制是65KB。
兩個階段載入
你可以去掉這個限制,這需要你爲Flex組件執行它自己的數據載入作準備。這就需要兩個階段載入的網頁:
對瀏覽器的要求做出響應,第一個階段載入HTML頁面和嵌入的SWF(Flex)對象;
一旦Flex應用完全展現在瀏覽器上,Flex獲取應用程序的數據用來填充到Flex組件中。
第二階段載入很多豐富客戶端應用程序的一般協議,通過減少響應時間可以改善用戶體驗:只要用戶定留在同一個HTML頁面上,階段一的執行就只進行一次。所有之後的數據存取的發生都是通過第二階段實現的,緩解了每一次瀏覽器檢索以及重新展示用戶界面的時候對於服務器的要求。性能優勢得益於這種模式充分利用了每個應用一個頁面的模式,比如說谷歌的Gmail和地圖應用程序。
這篇文章的其餘部分將會說明Flex對於來自遠程網絡資源的數據載入最優化的三種方法:通過HTTP載入JSON數據,通過HTTP載入XML,以及通過高性能的串行協議直接引用服務器Java對象。對於RESTful數據存取而言,前兩種方法是一個好的選擇,儘管遠程對象引用適合RPC通信樣式。最新方法的一個優勢是客戶端以及服務器可以通過類型對象通信。Flex:EngineYard的全新雲服務
JSON超越HTTP
Flex的HTTPService類使得委託JSON數據載入到Flex客戶端的過程變得簡單。下面的ActionScript代碼獲得了指定的URL的內容,作爲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數據
HTTPService,FlexSDK的一部分,爲AjaxXMLHttpRequest對象提供相似的功能:給予一個URL,它使得你能夠從HTTP數據源異步的獲取數據。send()會立即調用返回。當結果返回的時候,或者採用另一個選擇,就是將錯誤刪除的時候,回調機制採用這項功能
這個實例的結果以及失敗處理程序功能都是由名稱引用的:編譯程序將會找到與方法相匹配的名稱以及必須的參數和返回類型,然後分配這些功能,作爲操作者來處理這些結果或者失敗的HTTP請求。
實例的結果和失敗處理功能每一個都是由一個單一行組成的,你可以使用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的結果特性是非類型對象,並且我們必須在其轉變爲JSON陣列之前將它轉變爲字符串。因爲這種轉變確認了數據或者轉變爲指定的數據類型,或者返回空值。在這個例子當中,錯誤的處理程序僅僅是顯示了一些不友好的模塊,標示出了通信錯誤的原因。
伴隨着這種改變,我們現在可以從Flex組件的外界環境HTML頁面中去掉FlashVar。因爲Flex組件執行它自己的數據載入,客戶端可以載入的數據總量是僅由可用的記憶存量限制的。