美國(guó)外貿(mào)網(wǎng)站技成培訓(xùn)網(wǎng)
2 ．1 MXML/ActionScript 說明
MXML 從本質(zhì)上說一種XML規(guī)范的標(biāo)簽語言，主要用來定義描述可視用戶接口，如控件類DataGrid,Label,Button,Hslider等，但是也有時(shí)用來定義一些非可視的對(duì)象比如FDS數(shù)據(jù)源的封裝和綁定，比如WebService連接，數(shù)據(jù)綁定Binding,還有一些效果類Effects.MXML基本上和HTML的語法很相象，都是利用標(biāo)簽來定義用戶接口和基本組件，但是MXML有比HTML更龐大的標(biāo)簽庫。HTML和MXML最明顯的不同是MXML文件最終由FlashPlayer來編譯解析和展示，而HTML是由IE來直接解析和展示。當(dāng)我們學(xué)習(xí)任何一種語言是，第一個(gè)程序都是hell world。我們也不能免俗。
????? <?xml version="1.0"?>
<!-- 注釋 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
?????? ???? <mx:Box>
<mx:TextInput text="Hello World!" />
????????????? </mx:Box>
</mx:Application>
首先Flex MXML文件的注釋方式為 <!-- 注釋 --> 。一般一個(gè) MXML 應(yīng)用文件的根標(biāo)簽都是 <mx:Application> ， 而 xmlns:mx="http://www.adobe.com/2006/mxml" 則定義了 Flex 類庫組件的名字空間，由此說開去，如果我們有自定義的類庫或者是第三方類庫時(shí)，這個(gè)地方名字空間的聲明是必須的。 <mx:Box> 是一個(gè)容器類對(duì)象， <mx:TextInput text="Hello World!" /> 是一個(gè)控件類對(duì)象。 MXML 機(jī)制規(guī)定容器類對(duì)象內(nèi)可以無限內(nèi)嵌容器類對(duì)象或者控件類對(duì)象，而控件類對(duì)象不能嵌套容器類對(duì)象或別的控件類對(duì)象。同時(shí)無論容器類對(duì)象或者控件類對(duì)象都有各自所屬的屬性集合，方法集合，時(shí)間集合。 TextInput 中 text 就是其中的一個(gè)屬性。
ActionScript3 是被用來展示 Flex2 類對(duì)象的基礎(chǔ)方式。因?yàn)樗械?/span> MXML 標(biāo)簽對(duì)象都最終會(huì)被編譯成 AS 類對(duì)象字節(jié)碼的。 FlashPlayer 中的 AVM(AS 虛擬機(jī) ) 內(nèi)置了 as 的所有基礎(chǔ)標(biāo)準(zhǔn)類和方法，在運(yùn)行時(shí)， AVM 執(zhí)行展示這些文件字節(jié)碼。外表上 AcitionScript 和 JavaScript 是很相似的。實(shí)際上， JavaScript 是基于 ECMA-262 標(biāo)準(zhǔn)的，而 ActionScript 是基于 ECMA-262 Edition4 規(guī)范的。和 JavaScript 一樣， ActionScript 也是一種弱類型的語言。在 OO 編程模式的實(shí)現(xiàn)上， ActionScript 還遠(yuǎn)遠(yuǎn)不能讓人滿意，開發(fā)者可以把 AS 寫成 OO 的樣子，但是 OO 核心思想中的封裝多態(tài)和繼承卻徒有其表。況且也沒有足夠的運(yùn)行時(shí) Runtime 處理高端需求的彈性，比如 Java 中的反射機(jī)制。作者認(rèn)為， ActionScript3 在 OO 的實(shí)現(xiàn)上還有空間可以拓展。
?????? 但從腳本語言的觀點(diǎn)出發(fā)， ActionScript 中我們的確可以方便的做很多東西。比如可以寫組件事件偵聽邏輯，創(chuàng)建新的類對(duì)象，處理回調(diào)函數(shù)，定義包 package 和組件等。在 Flex2 應(yīng)用程序中利用 ActionScript 腳本的方法和場(chǎng)合有以下幾種。
1． 在 MXML 文件的 <mx:Script> 標(biāo)簽中插入 as 代碼，這里可以寫事件處理函數(shù)，自定義事件，錯(cuò)誤處理函數(shù)，以及任何你想寫的 as 邏輯。
2． 在 ActionScript 文件定義組件類。另外考慮到組件重用，可以將此 AS 組件編譯成 swc 庫文件備用。
3． 在 ActionScript 文件中擴(kuò)展標(biāo)準(zhǔn)組件。
4． 可以把所有的 MXML 文件 <mx:Script> 標(biāo)簽中的邏輯放到一個(gè)或者若干個(gè) AS 文件中，用時(shí)可以 import 到 MXML 文件中。
上面提到在MXML文件中直接插入AS代碼的方法時(shí)要用用到<mx:Script>標(biāo)簽，具體語法是
??? <mx:Script>
????????????? <![CDATA[
???????????????????? import mx.controls.Button;
???????????????????? public function myHandler():void{
??????????????????????????? var myButton:Button = new Button();
??????????????????????????? myButton.label = "label";
??????????????????????????? ........
???????????????????? }
????????????? ]]>
?????? </mx:Script>
在這個(gè)標(biāo)簽里，需要注意的地方有幾點(diǎn)。
1．??? 標(biāo)簽要成對(duì)出現(xiàn)。
2．??? 你不能在標(biāo)簽內(nèi)定義任何的的類或者接口，因?yàn)楸旧懋?dāng)前的MXML文件就是一個(gè)類，ActionScript并沒有像Java一樣支持內(nèi)部類定義。
3．??? [CDATA[ 標(biāo)簽主要用來告訴編譯器標(biāo)簽內(nèi)的內(nèi)容不要被解釋成 MXML 語法，而是 ActionScript.
4．??? <mx:Script> 標(biāo)簽必須定義在 MXML 文件根標(biāo)簽的層次否則會(huì)出現(xiàn)編譯期錯(cuò)誤。另外 Flex2 語法上支持一個(gè) MXML 文件中定義多個(gè) <mx:Script> 標(biāo)簽。
下面舉一個(gè)在MXML文件中使用AS標(biāo)簽的例子。
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
?????? <mx:Script>
????????????? <![CDATA[
???????????????????? //import mx.controls.Button;
???????????????????? public function myHandler():void{
??????????????????????????? var temp:String = "Hello Flex2";
??????????????????????????? textInput.text = temp;
???????????????????? }
????????????? ]]>
?????? </mx:Script>
?????? <mx:TextInput id="textInput" creationComplete="myHandler()" />
</mx:Application>
在MXML文件中標(biāo)簽對(duì)象都是用id屬性來標(biāo)識(shí)的,一個(gè)標(biāo)簽對(duì)象只能有一個(gè)唯一的id.另外
需要說明的是只有類的對(duì)象才可能有id，這個(gè)id就是當(dāng)前類對(duì)象的名字。比如，我們上面定義的TextInput就可以有id屬性，但是當(dāng)我們用mxml語法自定義一個(gè)組件類時(shí)，組件類根標(biāo)簽是不能設(shè)置id屬性的，否則會(huì)出現(xiàn)編譯錯(cuò)誤。原因很好理解，因?yàn)檫@個(gè)組件MXML文件只是一個(gè)類定義，不是一個(gè)類對(duì)象。只有對(duì)象才可能有id，不是嗎？有了id我們就可以像MXML文件內(nèi)全局變量一樣任意控制當(dāng)前類對(duì)象的所有屬性和事件處理。就像
textInput.text = temp ；
當(dāng)你想索引另外的自定義類文件或者標(biāo)準(zhǔn)庫文件時(shí)有可能會(huì)用到import或者include。如你想在as標(biāo)簽內(nèi)索引Button標(biāo)準(zhǔn)組件可以用這個(gè)語法 /import mx.controls.Button 。 另外如果你想用你自定義的一個(gè) AS 文件中的一個(gè)函數(shù)，你可以這樣寫
????????????? <mx:Script>
????????????? <![CDATA[
???????????????????? include "myactionscript.as"
????????????? ]]>
?????? </mx:Script>
2.2 Flex2 項(xiàng)目源文件的編譯過程
首先說明一下，一個(gè)完整的Flex應(yīng)用可以包括MXML文件，ActionScript文件，SWF文件，和SWC文件等。Flex編譯器工作的第一個(gè)步驟是將主MXML文件以及文件內(nèi)include的所有子文件轉(zhuǎn)換成一個(gè)單獨(dú)的ActionScript類文件。連接所有被索引（imported）的的庫或自定義類文件。最后形成一個(gè)可以被部署到服務(wù)器上的swf文件。
2.3 Flex2 類庫架構(gòu)
Flex2 類庫主要包括可視化組件類，行為類以及系統(tǒng)管理類。整個(gè)類庫結(jié)構(gòu)非常復(fù)雜。不過在我們的開發(fā)中主要用到的類包有，
1.mx.utils 包，很多有用的工具類在這里定義。
2.mx.collections 包，Flex2的數(shù)據(jù)容器類
3.mx.charts 包，各種圖形組件包
4.mx.controls 包，所有的可視組件類都在這里；
5.flash.events 包，flex 事件處理類定義。
6.flash.utils 包，flash基礎(chǔ)工具類定義，做一些底層控制時(shí)經(jīng)常用到。
2.4 ActionScript 自定義組件
本小結(jié)我們將簡(jiǎn)要地介紹自定義組件的相關(guān)基礎(chǔ)概念，在哪里創(chuàng)建以及怎么創(chuàng)建的問題。在實(shí)際的項(xiàng)目中我們經(jīng)常需要自己定義一些組件。那么自定義組件的好處主要有兩個(gè)。首先，自定義組件可以很好的隔離和封裝我們通用的表現(xiàn)層邏輯；第二，它可以使我們建立起針對(duì)應(yīng)用的組件庫，使我們以后方便的重用這些組件。
??? 自定義一個(gè)組件可以有兩種表示形式，一種是利用MXML標(biāo)準(zhǔn)庫標(biāo)簽定義組件的形式，另一種在ActionScript中定義組件類。我們都知道任何Flex組件不論是標(biāo)簽形式還是AS形式都最終被FlashPlayer解釋成類對(duì)象。組件類定義完成后，那么我們到底該怎么以類文件為模板new一個(gè)組件對(duì)象呢？首先可以說清楚的是，我們基本上有以下4種方式初始化一個(gè)組件對(duì)象。
1.???? 在MXML<mx:Script>標(biāo)簽外，創(chuàng)建MXML類對(duì)象。
2.???? 在MXML<mx:Script>標(biāo)簽外，創(chuàng)建AS類對(duì)象。
3.???? 在MXML<mx:Script>標(biāo)簽中，創(chuàng)建AS類對(duì)象。
4.???? 在MXML<mx:Script>標(biāo)簽中，創(chuàng)建MXML類對(duì)象。
舉例分析如下
比如我們繼承mx.containers.Panell基礎(chǔ)類創(chuàng)建一個(gè)CustomPanel自定義組件，類文件定義有兩種方式分別為CustomPanelAS.as和CustomPanelMXML.mxml
CustomPanelAS.as 的代碼為：
package demo.flexinaction.samples
{
??? import mx.containers.Panel;
??? public class CustomPanelAS extends Panel
??? {
??????? public function CustomPanelAS(){
??????????? super();
??????? }
??? }
}
Package 關(guān)鍵字表明了當(dāng)前類所在的目錄位置，這樣做主要為在別的mxml或as文件中名字空間的定義提供索引。和Java的類定義很相像，要倒入類定義中需要索引的類文件 mx.containers.Panel。你不能把一個(gè)類聲明成私有的，private關(guān)鍵字只有被用來定義類私有屬性以及私有方法extends關(guān)鍵字說明當(dāng)前類需要繼承的父類。與類同名的方法CustomPanelAS()是當(dāng)前類的構(gòu)造器。Flex2不支持構(gòu)造器的重載。super();說明調(diào)用父類的構(gòu)造器。
CustomPanelMXML.mxml 文件代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="CustomPanel rendered by MXML" >
</mx:Panel>
<?xml version="1.0" encoding="utf-8"?> 聲明了當(dāng)前mxml文件的schema以及按照utf-8標(biāo)準(zhǔn)編碼。xmlns:mx= http://www.adobe.com/2006/mxml 聲明了Flex2標(biāo)準(zhǔn)類庫的名字空間，這樣我們才能在標(biāo)簽中利用mx前綴引用標(biāo)準(zhǔn)類庫。當(dāng)然也可以定義為別的名字?；蛘邽榭站拖駒mlns= http://www.adobe.com/2006/mxml ，如果這樣，那么在引用標(biāo)準(zhǔn)類庫的時(shí)候就要這樣。
<Panel xmlns:mx="http://www.adobe.com/2006/mxml" title="CustomPanel rendered by MXML" ></Panel>
類文件定義完了，我們看看Flex2中是怎么創(chuàng)建這個(gè)對(duì)象的。主應(yīng)用文件是AdobeFlexInAction.mxml，源代碼為：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
??? xmlns:panels="demo.flexinaction.samples.*" initialize="doInit()">
??? <mx:Script>
??????? <![CDATA[
??????????? import demo.flexinaction.samples.CustomPanelAS;
??????????? import demo.flexinaction.samples.CustomPanelMXML;
??????????? private function doInit():void{
??????????????? Application 運(yùn)行時(shí)(Runtime)動(dòng)態(tài)創(chuàng)建對(duì)象
??????????????? //1. 利用ActionScript類CustomPanelAS創(chuàng)建
??????????????? var panelC:CustomPanelAS = new CustomPanelAS();
??????????????? // 設(shè)置對(duì)象title屬性
??????????????? panelC.title = 'CustomPanel rendered by ActionScript';
??????????????? // 將新創(chuàng)建對(duì)象加入父容器
??????????????? hbox.addChild(panelC);
??????????????? //2. 利用MXML組件類文件CustomPanelMXML創(chuàng)建
??????????????? var panelD:CustomPanelMXML = new CustomPanelMXML();
??????????????? // 將新創(chuàng)建對(duì)象加入父容器
??????????????? hbox.addChild(panelD);
??????????? }
??????? ]]>
??? </mx:Script>
??? <mx:VBox id="hbox" width="407" height="414">
??????? <!--Application 初始化時(shí)創(chuàng)建對(duì)象 -->
??????? <!-- 在MXML標(biāo)簽中利用組件類文件CustomPanelMXML創(chuàng)建初始化對(duì)象 -->
??????? <panels:CustomPanelMXML id="panelA" />
??????? <!-- 在MXML標(biāo)簽中利用組件類文件CustomPanelAS創(chuàng)建初始化對(duì)象 -->
??????? <panels:CustomPanelAS id="panelB" title="'CustomPanel rendered by ActionScript"/>
??? </mx:VBox>
</mx:Application>
xmlns:panels="demo.flexinaction.samples.*" 是我們自定義文件的名字空間，前綴為panels，名字空間的引入主要是為了避免大型應(yīng)用的類文件名字沖突，利用名字空間，可以很好地避免這個(gè)問題。應(yīng)用初始化時(shí)調(diào)用doInit()方法。Flex2標(biāo)準(zhǔn)的可視化組件都有initialize事件doInit()為事件處理函數(shù)。具體注釋請(qǐng)參考代碼中的說明。