Flex教程 Flex程序開發(fā)初步
Flex應(yīng)用程序是由ActionScript 3.0書寫的，一個可選靜態(tài)類型語言，引出面向?qū)ο缶幊痰母拍詈凸δ堋ctionScript 3與JavaScript語法非常相似--大部分JavaScript代碼的編譯與ActionScript代碼是同樣有效的--但是仍然增加了與Java類似的，基于類別的設(shè)計模型。
除ActionScript之外，F(xiàn)lex庫為用戶界面設(shè)計提供一種基于XML的領(lǐng)域特定語言，MXML。Flex編譯可以將MXML代碼轉(zhuǎn)換為ActionScript，然后將ActionScript代碼轉(zhuǎn)變?yōu)镕lash bytecode。開源Flex SDK包括一系列豐富的用戶界面窗口工具，并且那里也有一個欣欣向榮的可共享的第三方Flex庫。用JavaFX寫用戶界面控制器
Flash Player的流行主要是因為其作為一種先進的矢量圖形嵌入，或者是Web頁面內(nèi)的Flash movie。這個設(shè)計目標(biāo)被延續(xù)到以后每個Flash Player版本中，使得Flex應(yīng)用嵌入到HTML頁面變得非常容易。
想像一下最初版本的圖書館管理程序就是使用JSP頁面展示了可用的詳細(xì)目錄，使用HTML表格標(biāo)簽。如果圖書館在目錄內(nèi)擁有成千上萬的標(biāo)題，用戶就必須等待瀏覽器上面顯示一個很長的HTML列表，或者翻閱目錄，大概每頁上面會有20個標(biāo)題。
用Flex數(shù)據(jù)網(wǎng)格組件替代HTML表格會帶了幾點好處：Flex數(shù)據(jù)網(wǎng)格可以負(fù)載全部的目錄清單，因為它的顯示速度要比HTML快得多;數(shù)據(jù)網(wǎng)格支持內(nèi)置的排序表，列調(diào)整以及數(shù)據(jù)篩選;數(shù)據(jù)網(wǎng)格列可以具有不同的格式程序，它們基于列表的數(shù)據(jù)類型;數(shù)據(jù)網(wǎng)格支持打印。
以下的實例包含了這種資源的代碼，為Flex應(yīng)用展示如下數(shù)據(jù)網(wǎng)格：
- ﹤ xml version="1.0" encoding="utf-8"?﹥
- ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"﹥
- ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥
- ﹤ /mx:Application﹥
列表一，F(xiàn)lex數(shù)據(jù)網(wǎng)格
Flex應(yīng)用在MXML中有完整的描述，并且在應(yīng)用程序元素里面包括一個公開的Flex數(shù)據(jù)網(wǎng)格組件。數(shù)據(jù)網(wǎng)格是一種ActionScript類，就像任何一種ActionScript類，它也可以從MXNL中使用：編譯者將會從XML名字空間以及標(biāo)簽名稱中找到ActionScript類名稱。
ActionScript語言支持工具，并且ActionScript對象工具可以在MXML中被指定，就像XML屬性值。實例中的數(shù)據(jù)網(wǎng)格被分配了一種id特質(zhì)，定義了一種方法來引入網(wǎng)格組件。我們也確定網(wǎng)格必須擴展到與Flex應(yīng)用具有同樣得深度和廣度。在Java Web 應(yīng)用程序上放入YUI Face
這種應(yīng)用程序編譯的結(jié)果是二進制文件，BooksInventory.swf。SWF(Shockwave Flash格式)可以使用嵌入方式或者對象HTML標(biāo)簽嵌入到現(xiàn)有的HTML頁面。瀏覽器idiosynchracies使得這種嵌入多少有些復(fù)雜;但是開源SWF對象項目使得很多復(fù)雜情況的解決變得更加自動化(FlexBuilder也會為SWF文件產(chǎn)生適當(dāng)?shù)牡腍TML標(biāo)簽)。
下面的這個片段展示的就是使用SWFObject JavaScript API將BooksInventory.swf嵌入到HTML活著JSP頁面中。注意這種技術(shù)是如何日益增強HTML頁面的：如果Flash Player 的應(yīng)用版本--版本10在這種情況下--出現(xiàn)，SWFObject's embedSWF()方式將會審核;如果不是，庫將會嘗試著插入Flash Player。然后將Flex應(yīng)用放入到600*400像素范圍內(nèi)，替代replaceConten元素的內(nèi)容。
- ﹤ html﹥
- ﹤ head﹥
- ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥
- ﹤ script type="text/javascript" src="swfobject.js"/﹥
- ﹤ script type="text/javascript"﹥
- swfobject.embedSWF("BooksInventory.swf",
- "replaceContent",
- "600", "400",
- "10.0.0", "playerProductInstall.swf");
- ﹤ /script﹥
- ﹤ /head﹥
- ﹤ body﹥
- ﹤ div id="replaceContent"﹥
- ﹤ !-- Original HTML table here--﹥
- ﹤ /div﹥
- ﹤ /body﹥
- ﹤ /html﹥
列表二，嵌入SWF文件到HTML，伴有SWF對象
你可以使用FlashVars從HTML頁面?zhèn)鬟f數(shù)據(jù)到Flex組件。FlashVars是你指定到Flash Player對象的一個參數(shù)，是由名稱/值成對組成的，由分隔符&分開。
SWFObject使得這種分配非常容易：它允許JSON-style標(biāo)記到指定的FlashVars。然后定義JSON數(shù)列作為bookInventory的變數(shù)值。書籍庫存量數(shù)據(jù)陣列必須在一個String中，因為FlashVar只能被分配String值。如果手工來做這工作就太乏味了，但是JSON數(shù)據(jù)有可能從一個服務(wù)器上的數(shù)據(jù)源引發(fā)，當(dāng)創(chuàng)建HTML 或者 JSP (或者PHP或者Ruby on Rails)頁面的時候。也有可能當(dāng)頁面在客戶端完全下載下來以后，使用異步Ajax呼叫檢索JSON數(shù)據(jù)。
The flashvars variable is passed to the Flex application as a parameter to embedSWF():
Flashvars變數(shù)被傳遞到Flex應(yīng)用，作為embedSWF()的參數(shù)：
- ﹤ html﹥
- ﹤ head﹥
- ﹤ meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/﹥
- ﹤ script type="text/javascript" src="swfobject.js"/﹥
- ﹤ script type="text/javascript"﹥
- var flashvars = {
- bookInventory: '[' +
- '{"Title":"Programming in Scala", ' +
- '"Author(s)":"Odersky, Martin. Lex Spoon. Bill Venners",' +
- '"Year": 2008,' +
- '"Publisher": "Artima Press", ' +
- '"Price": 49.95, ' +
- '"Stock": 1520' +
- '}, ' +
- '{"Title":"Essential ActionScript 3", ' +
- '"Author(s)": "Moock, Colin", ' +
- '"Year": 2007,' +
- '"Publisher": "O\'Reilly", ' +
- '"Price": 47.95, ' +
- '"Stock": 2500' +
- '}, ' +
- '{"Title":"Programming Erlang", ' +
- '"Author(s)": "Armstrong, Joe", ' +
- '"Year": 2007,' +
- '"Publisher": "Pragmatic", ' +
- '"Price": 32.95, ' +
- '"Stock": 3525' +
- '}' +
- ']'
- };
- swfobject.embedSWF("BooksInventory.swf",
- "replaceContent",
- "600", "400",
- "10.0.0", "playerProductInstall.swf",
- flashvars);
- ﹤ /script﹥
- ﹤ /head﹥
- ﹤ body﹥
- ﹤ div id="replaceContent"﹥
- ﹤ !-- Original HTML table here--﹥
- ﹤ /div﹥
- ﹤ /body﹥
- ﹤ /html﹥
列表三，HTML中公開的FlashVars
處理JSON
設(shè)定初始化值之前，我們希望應(yīng)用程序能夠檢索bookInventory flashVar，作為表格數(shù)據(jù)源分配它的值。接下來的代碼在Flex應(yīng)用中的實現(xiàn)如下：
- ﹤ xml version="1.0" encoding="utf-8"?﹥
- ﹤ mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- creationComplete="onCreationComplete()"﹥
- ﹤ mx:Script﹥
- ﹤ ![CDATA[
- import com.adobe.serialization.json.JSON;
- private function onCreationComplete():void {
- var invParam:String = Application.application.parameters.bookInventory;
- inventoryTable.dataProvider = JSON.decode(invParam) as Array;
- }
- ]]﹥
- ﹤ /mx:Script﹥
- ﹤ mx:DataGrid width="100%" height="100%" id="inventoryTable"/﹥
- ﹤ /mx:Application﹥
【編輯推薦】
