Flex教程 Flex程序開(kāi)發(fā)初步
Flex應(yīng)用程序是由ActionScript 3.0書(shū)寫(xiě)的，一個(gè)可選靜態(tài)類(lèi)型語(yǔ)言，引出面向?qū)ο缶幊痰母拍詈凸δ?。ActionScript 3與JavaScript語(yǔ)法非常相似--大部分JavaScript代碼的編譯與ActionScript代碼是同樣有效的--但是仍然增加了與Java類(lèi)似的，基于類(lèi)別的設(shè)計(jì)模型。
除ActionScript之外，F(xiàn)lex庫(kù)為用戶(hù)界面設(shè)計(jì)提供一種基于XML的領(lǐng)域特定語(yǔ)言，MXML。Flex編譯可以將MXML代碼轉(zhuǎn)換為ActionScript，然后將ActionScript代碼轉(zhuǎn)變?yōu)镕lash bytecode。開(kāi)源Flex SDK包括一系列豐富的用戶(hù)界面窗口工具，并且那里也有一個(gè)欣欣向榮的可共享的第三方Flex庫(kù)。用JavaFX寫(xiě)用戶(hù)界面控制器
Flash Player的流行主要是因?yàn)槠渥鳛橐环N先進(jìn)的矢量圖形嵌入，或者是Web頁(yè)面內(nèi)的Flash movie。這個(gè)設(shè)計(jì)目標(biāo)被延續(xù)到以后每個(gè)Flash Player版本中，使得Flex應(yīng)用嵌入到HTML頁(yè)面變得非常容易。
想像一下最初版本的圖書(shū)館管理程序就是使用JSP頁(yè)面展示了可用的詳細(xì)目錄，使用HTML表格標(biāo)簽。如果圖書(shū)館在目錄內(nèi)擁有成千上萬(wàn)的標(biāo)題，用戶(hù)就必須等待瀏覽器上面顯示一個(gè)很長(zhǎng)的HTML列表，或者翻閱目錄，大概每頁(yè)上面會(huì)有20個(gè)標(biāo)題。
用Flex數(shù)據(jù)網(wǎng)格組件替代HTML表格會(huì)帶了幾點(diǎn)好處：Flex數(shù)據(jù)網(wǎng)格可以負(fù)載全部的目錄清單，因?yàn)樗娘@示速度要比HTML快得多;數(shù)據(jù)網(wǎng)格支持內(nèi)置的排序表，列調(diào)整以及數(shù)據(jù)篩選;數(shù)據(jù)網(wǎng)格列可以具有不同的格式程序，它們基于列表的數(shù)據(jù)類(lèi)型;數(shù)據(jù)網(wǎng)格支持打印。
以下的實(shí)例包含了這種資源的代碼，為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)用程序元素里面包括一個(gè)公開(kāi)的Flex數(shù)據(jù)網(wǎng)格組件。數(shù)據(jù)網(wǎng)格是一種ActionScript類(lèi)，就像任何一種ActionScript類(lèi)，它也可以從MXNL中使用：編譯者將會(huì)從XML名字空間以及標(biāo)簽名稱(chēng)中找到ActionScript類(lèi)名稱(chēng)。
ActionScript語(yǔ)言支持工具，并且ActionScript對(duì)象工具可以在MXML中被指定，就像XML屬性值。實(shí)例中的數(shù)據(jù)網(wǎng)格被分配了一種id特質(zhì)，定義了一種方法來(lái)引入網(wǎng)格組件。我們也確定網(wǎng)格必須擴(kuò)展到與Flex應(yīng)用具有同樣得深度和廣度。在Java Web 應(yīng)用程序上放入YUI Face
這種應(yīng)用程序編譯的結(jié)果是二進(jìn)制文件，BooksInventory.swf。SWF(Shockwave Flash格式)可以使用嵌入方式或者對(duì)象HTML標(biāo)簽嵌入到現(xiàn)有的HTML頁(yè)面。瀏覽器idiosynchracies使得這種嵌入多少有些復(fù)雜;但是開(kāi)源SWF對(duì)象項(xiàng)目使得很多復(fù)雜情況的解決變得更加自動(dòng)化(FlexBuilder也會(huì)為SWF文件產(chǎn)生適當(dāng)?shù)牡腍TML標(biāo)簽)。
下面的這個(gè)片段展示的就是使用SWFObject JavaScript API將BooksInventory.swf嵌入到HTML活著JSP頁(yè)面中。注意這種技術(shù)是如何日益增強(qiáng)HTML頁(yè)面的：如果Flash Player 的應(yīng)用版本--版本10在這種情況下--出現(xiàn)，SWFObject's embedSWF()方式將會(huì)審核;如果不是，庫(kù)將會(huì)嘗試著插入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對(duì)象
你可以使用FlashVars從HTML頁(yè)面?zhèn)鬟f數(shù)據(jù)到Flex組件。FlashVars是你指定到Flash Player對(duì)象的一個(gè)參數(shù)，是由名稱(chēng)/值成對(duì)組成的，由分隔符&分開(kāi)。
SWFObject使得這種分配非常容易：它允許JSON-style標(biāo)記到指定的FlashVars。然后定義JSON數(shù)列作為bookInventory的變數(shù)值。書(shū)籍庫(kù)存量數(shù)據(jù)陣列必須在一個(gè)String中，因?yàn)镕lashVar只能被分配String值。如果手工來(lái)做這工作就太乏味了，但是JSON數(shù)據(jù)有可能從一個(gè)服務(wù)器上的數(shù)據(jù)源引發(fā)，當(dāng)創(chuàng)建HTML 或者 JSP (或者PHP或者Ruby on Rails)頁(yè)面的時(shí)候。也有可能當(dāng)頁(yè)面在客戶(hù)端完全下載下來(lái)以后，使用異步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中公開(kāi)的FlashVars
處理JSON
設(shè)定初始化值之前，我們希望應(yīng)用程序能夠檢索bookInventory flashVar，作為表格數(shù)據(jù)源分配它的值。接下來(lái)的代碼在Flex應(yīng)用中的實(shí)現(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﹥
【編輯推薦】
