Flex教程 Flex程序開發初步
Flex應用程序是由ActionScript 3.0書寫的，一個可選靜態類型語言，引出面向對象編程的概念和功能。ActionScript 3與JavaScript語法非常相似--大部分JavaScript代碼的編譯與ActionScript代碼是同樣有效的--但是仍然增加了與Java類似的，基于類別的設計模型。
除ActionScript之外，Flex庫為用戶界面設計提供一種基于XML的領域特定語言，MXML。Flex編譯可以將MXML代碼轉換為ActionScript，然后將ActionScript代碼轉變為Flash bytecode。開源Flex SDK包括一系列豐富的用戶界面窗口工具，并且那里也有一個欣欣向榮的可共享的第三方Flex庫。用JavaFX寫用戶界面控制器
Flash Player的流行主要是因為其作為一種先進的矢量圖形嵌入，或者是Web頁面內的Flash movie。這個設計目標被延續到以后每個Flash Player版本中，使得Flex應用嵌入到HTML頁面變得非常容易。
想像一下最初版本的圖書館管理程序就是使用JSP頁面展示了可用的詳細目錄，使用HTML表格標簽。如果圖書館在目錄內擁有成千上萬的標題，用戶就必須等待瀏覽器上面顯示一個很長的HTML列表，或者翻閱目錄，大概每頁上面會有20個標題。
用Flex數據網格組件替代HTML表格會帶了幾點好處：Flex數據網格可以負載全部的目錄清單，因為它的顯示速度要比HTML快得多;數據網格支持內置的排序表，列調整以及數據篩選;數據網格列可以具有不同的格式程序，它們基于列表的數據類型;數據網格支持打印。
以下的實例包含了這種資源的代碼，為Flex應用展示如下數據網格：
- ﹤ 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﹥
列表一，Flex數據網格
Flex應用在MXML中有完整的描述，并且在應用程序元素里面包括一個公開的Flex數據網格組件。數據網格是一種ActionScript類，就像任何一種ActionScript類，它也可以從MXNL中使用：編譯者將會從XML名字空間以及標簽名稱中找到ActionScript類名稱。
ActionScript語言支持工具，并且ActionScript對象工具可以在MXML中被指定，就像XML屬性值。實例中的數據網格被分配了一種id特質，定義了一種方法來引入網格組件。我們也確定網格必須擴展到與Flex應用具有同樣得深度和廣度。在Java Web 應用程序上放入YUI Face
這種應用程序編譯的結果是二進制文件，BooksInventory.swf。SWF(Shockwave Flash格式)可以使用嵌入方式或者對象HTML標簽嵌入到現有的HTML頁面。瀏覽器idiosynchracies使得這種嵌入多少有些復雜;但是開源SWF對象項目使得很多復雜情況的解決變得更加自動化(FlexBuilder也會為SWF文件產生適當的的HTML標簽)。
下面的這個片段展示的就是使用SWFObject JavaScript API將BooksInventory.swf嵌入到HTML活著JSP頁面中。注意這種技術是如何日益增強HTML頁面的：如果Flash Player 的應用版本--版本10在這種情況下--出現，SWFObject's embedSWF()方式將會審核;如果不是，庫將會嘗試著插入Flash Player。然后將Flex應用放入到600*400像素范圍內，替代replaceConten元素的內容。
- ﹤ 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頁面傳遞數據到Flex組件。FlashVars是你指定到Flash Player對象的一個參數，是由名稱/值成對組成的，由分隔符&分開。
SWFObject使得這種分配非常容易：它允許JSON-style標記到指定的FlashVars。然后定義JSON數列作為bookInventory的變數值。書籍庫存量數據陣列必須在一個String中，因為FlashVar只能被分配String值。如果手工來做這工作就太乏味了，但是JSON數據有可能從一個服務器上的數據源引發，當創建HTML 或者 JSP (或者PHP或者Ruby on Rails)頁面的時候。也有可能當頁面在客戶端完全下載下來以后，使用異步Ajax呼叫檢索JSON數據。
The flashvars variable is passed to the Flex application as a parameter to embedSWF():
Flashvars變數被傳遞到Flex應用，作為embedSWF()的參數：
- ﹤ 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
設定初始化值之前，我們希望應用程序能夠檢索bookInventory flashVar，作為表格數據源分配它的值。接下來的代碼在Flex應用中的實現如下：
- ﹤ 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﹥
【編輯推薦】
