MXML標(biāo)記語言簡介

1. MXML語法

MXML語言是專門用于Flex程序中，描述界面表現(xiàn)的一中XML標(biāo)記語言。我們可以用它來管理程序的整體布局，控制組件的樣式和外觀，也可以構(gòu)建非可視化的對(duì)象，比如XML數(shù)據(jù)、與服務(wù)器端通信的WebService、組件的數(shù)據(jù)源等。

1.1 命名規(guī)范

MXML區(qū)分大小寫，且文件名和變量標(biāo)示名都區(qū)分大小寫。

MXML文件以mxml作為擴(kuò)展名，文件名要遵循AS中變量的命名規(guī)則。

所有的MXML都被視為用戶自定義的組件，相當(dāng)于對(duì)象，可以使用代碼動(dòng)態(tài)創(chuàng)建。

變量名必須以字母或下劃線開始，且只能包含字母、數(shù)字和下劃線。

不能命名為application，application是主程序文件的默認(rèn)標(biāo)記，不可再使用。

程序不能使用“mx”做為目錄名，mx 是官方組件庫的命名空間。

1.2 MXML文件結(jié)構(gòu)

MXML為標(biāo)準(zhǔn)的XML文件。

我們以一個(gè)MXML文件來說明：

Xml代碼

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
4. <mx:Script>
5. <![CDATA[
6. internalfunctiondoClick():void{
7. tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';
8. }
9. ]]>
10. </mx:Script>
12. <mx:Buttonx="41"y="90"label="HelloFlex"click="doClick()"/>
13. <mx:Labelid="tip_txt"x="41"y="41"text="你好，F(xiàn)lex"fontSize="12"/>
14. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">

<mx:Script>

<![CDATA[

internal function doClick():void{

tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';

}

]]>

</mx:Script>

<mx:Button x="41" y="90" label="Hello Flex"click="doClick()"/>

<mx:Label id="tip_txt" x="41" y="41"text="你好，F(xiàn)lex" fontSize="12"/>

</mx:Application>

第一行聲明XML文件采用的語法版本version 和編碼格式encoding（默認(rèn)為utf-8）。

mx:Application：在每個(gè)Flex項(xiàng)目中，可能有多個(gè)MXML文件，mx:Application為根節(jié)點(diǎn)標(biāo)示程序入口的運(yùn)行文件。

xmlns:mx=http://www.adobe.com/2006/mxml：將mx定義為XML的命名空間，對(duì)應(yīng)路徑為http://www.adobe.com/2006/mxml，F(xiàn)lex的配置文件中將這個(gè)路徑定義為一個(gè)全局資源標(biāo)識(shí)符，并對(duì)應(yīng)了一個(gè)列出mx命名空間下的所有標(biāo)簽的文件。flex-config.xml中配置了命名空間。該文件可在Flex Builder2的安裝路徑下的Flex SDK2frameworks目錄中找到。并找到如下代碼。

Xml代碼

1. <namespaces>
2. <!--SpecifyaURItoassociatewithamanifestofcomponentsforuseasMXML-->
3. <!--elements.-->
4. <namespace>
5. <uri>http://www.adobe.com/2006/mxml</uri>
6. <manifest>mxml-manifest.xml</manifest>
7. </namespace>
8. </namespaces>

<namespaces>

<!-- Specify a URI to associate with a manifest ofcomponents for use as MXML -->

<!-- elements.-->

<namespace>

<uri>http://www.adobe.com/2006/mxml</uri>

<manifest>mxml-manifest.xml</manifest>

</namespace>

</namespaces>

從上面的配置發(fā)現(xiàn)，http://www.adobe.com/2006/mxml這個(gè)URI和mxml-manifest.xml文件對(duì)應(yīng)，找到該文件，里面列出了所有標(biāo)簽和與標(biāo)簽相關(guān)聯(lián)的類文件路徑。

Xml代碼

1. <?xmlversion="1.0"?>
2. <componentPackage>
4. <componentid="Accordion"/>
5. ....................
6. ....................
7. <componentid="WebServiceOperation"/>
8. <componentid="RemoteObject"/>
9. <componentid="RemoteObjectOperation"/>
10. <componentid="HTTPService"/>
11. <componentid="Consumer"/>
12. <componentid="Producer"/>
14. </componentPackage>

<?xmlversion="1.0"?>

<componentPackage>

<component id="Accordion"/>

....................

....................

<component id="WebServiceOperation"/>

<component id="RemoteObject"/>

<component id="RemoteObjectOperation"/>

<component id="HTTPService"/>

<component id="Consumer"/>

<component id="Producer"/>

</componentPackage>

<componentid="Accordion"/>
中的id代表標(biāo)簽名，class表示類文件路徑。

xmlns:comp="comps.*"定義一個(gè)命名空間，因?yàn)槭褂昧送ㄅ浞?”，comps目錄下的所有MXML和AS類（不包括子目錄的文件）都被包括在comp命名空間下。如comps下有Login.mxml，則在程序中可這樣調(diào)用：

<comp:Login></comp:Login>

Application還有一個(gè)屬性layout，定義了該節(jié)點(diǎn)下元素的布局方式，也就是程序的總體布局方式。absolute 表示絕對(duì)定位，所有子元素將按照各自的x、y坐標(biāo)來定位。

2. 使用組件

<mx:Button></mx:Button>定義一個(gè)按鈕組件

如果組件中未包含其他子元素可這樣寫：<mx:Button />組件分類：

布局類：

包括所有的容器組件，如：HBox、Panel等，Spacer、HRule、VRule不是容器，但是主要用于布局。

導(dǎo)航類：

菜單條、按鈕條等各種導(dǎo)航功能的組件。

交互類：

內(nèi)容展示、數(shù)據(jù)交互相關(guān)組件，如：按鈕、下拉框、圖片、視頻等。

IDE中的組件面板列出了所有的可視化組件，可直接拖入編輯區(qū)使用。

通過IDE的代碼提示輸入<mx:跟進(jìn)可以列出mx下的所有對(duì)象。

3. 自定義MXML組件

基于組件開發(fā)模式是Flex的一個(gè)特色，程序中所有的MXML和AS類文件，都被當(dāng)作用戶自定義的組件。

我們來建一個(gè)MXML組件：

New->MXML Component

在彈出的窗口輸入組件的文件名Filename，并選擇擴(kuò)展哪一種組件Based on，我們這里選擇Image對(duì)象。然后Finish。

然后點(diǎn)擊Image組件，在屬性面板的Source屬性設(shè)置圖片的路徑。

Xml代碼

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">
3. </mx:Image>

<?xml version="1.0"encoding="utf-8"?>

<mx:Imagexmlns:mx="http://www.adobe.com/2006/mxml"source="pic/9.jpg">

</mx:Image>

然后在程序中就可以使用該自定義的組件，將其從用戶面板拖入到編輯區(qū)，圖片顯示正常。

Xml代碼

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"xmlns:ns1="*">
4. <mx:Script>
5. <![CDATA[
6. internalfunctiondoClick():void{
7. privatefunction_btn_click(event:MouseEvent):void{
8. tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';
9. }}
10. ]]>
11. </mx:Script>
13. <mx:Buttonx="41"y="90"label="HelloFlex"click="doClick()"/>
14. <mx:Labelid="tip_txt"x="41"y="41"text="你好，F(xiàn)lex"fontSize="12"/>
15. <ns1:imageEnbogax="205"y="90"/>
16. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"xmlns:ns1="*">

<mx:Script>

<![CDATA[

internal function doClick():void{

private function _btn_click(event:MouseEvent):void{

tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';

}}

]]>

</mx:Script>

<mx:Button x="41" y="90"label="Hello Flex" click="doClick()"/>

<mx:Label id="tip_txt" x="41"y="41" text="你好，F(xiàn)lex" fontSize="12"/>

<ns1:imageEnboga x="205"y="90"/>

</mx:Application>

<ns1:imageEnbogax="205" y="90"/>

就是我們拖入的自定義組件，程序自動(dòng)添加了ns1命名空間。我們改變自定義組件的位置放到view文件夾，代碼變成：

<view:imageEnboga x="205"y="90"/>

4. 編寫ActionScript

MXML文件經(jīng)過編譯最后也是被轉(zhuǎn)換成AS來執(zhí)行，在一個(gè)Flex程序中，主程序會(huì)被轉(zhuǎn)換為Application對(duì)象的子類，自定義對(duì)象會(huì)被轉(zhuǎn)換為父級(jí)對(duì)象的子類。

4.1 在MXML中使用AS

在組件的事件屬性中使用AS來處理事件

比如

Xml代碼

1. <mx:Buttonx="41"y="90"label="HelloFlex"click="tip_txt.text='歡迎來到RIA的世界--開始Flex之旅'"/>

<mx:Button x="41" y="90"label="Hello Flex" click="tip_txt.text='歡迎來到RIA的世界--開始Flex之旅'"/>

上面代碼中的click="tip_txt.text='歡迎來到RIA的世界--開始Flex之旅'"會(huì)被編譯為

Xml代碼

1. privatefunction_btn_click(event:MouseEvent):void{
2. tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';
3. }

private function_btn_click(event:MouseEvent):void{

tip_txt.text='歡迎來到RIA的世界--開始Flex之旅';

}

這個(gè)函數(shù)被注冊(cè)為按鈕的點(diǎn)擊事件偵聽器，一旦點(diǎn)擊事件觸發(fā)，函數(shù)就會(huì)被調(diào)用。

在MXML中插入AS塊

Xml代碼

1. <mx:Script>
2. <![CDATA[
3. //這里是AS代碼
4. ]]>
5. </mx:Script>

<mx:Script>

<![CDATA[

//這里是AS代碼

]]>

</mx:Script>

此標(biāo)簽可以放在根節(jié)點(diǎn)內(nèi)的任何位置，同時(shí)必須用CDATA將代碼包起來。CDATA不能嵌套使用。

AS中的注釋是//單行注釋

MXML中的注釋和XML一樣<!-- 注釋-->

4.2 創(chuàng)建外部AS文件

New->ActionScript file可以創(chuàng)建一個(gè)外部AS文件

Xml代碼

1. <mx:Scriptsource="my.as"/>

<mx:Scriptsource="my.as"/>

在程序中可以使用上面的代碼導(dǎo)入。

4.3 創(chuàng)建AS類文件

New->ActionScript Class可以創(chuàng)建一個(gè)AS類文件

Xml代碼

1. package
2. {
3. publicclassTest
4. {
5. functionTest(){
6. trace("Test");
7. }
8. }
9. }

package

{

public class Test

{

function Test(){

trace("Test");

}

}

}

上面代碼創(chuàng)建了一個(gè)Test類，在構(gòu)造函數(shù)Test()中在控制臺(tái)打印Test。

在主程序中可調(diào)用：

Xml代碼

1. <?xmlversion="1.0"encoding="utf-8"?>
2. <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"applicationComplete="initApp()">
4. <mx:Script>
5. <![CDATA[
6. internalfunctioninitApp():void{
8. varmyTest:Test=newTest();
9. }
10. ]]>
11. </mx:Script>
12. </mx:Application>

<?xml version="1.0"encoding="utf-8"?>

<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"applicationComplete="initApp()">

<mx:Script>

<![CDATA[

internal function initApp():void{

var myTest:Test = new Test();

}

]]>

</mx:Script>

</mx:Application>

applicationComplete是Application對(duì)象的一個(gè)事件，程序初始化后觸發(fā)此事件。

var myTest:Test = new Test()這個(gè)代碼的作用是創(chuàng)建一個(gè)Test對(duì)象，創(chuàng)建對(duì)象用new關(guān)鍵字。

5 編輯非可視化對(duì)象

創(chuàng)建數(shù)據(jù)

Xml代碼

<mx:Arrayid="array_data">

<mx:String>Flexdeveloper</mx:String>

<mx:String>Flashdeveloper</mx:String>

<mx:String>Webdeveloper</mx:String>

<mx:String>Mobiledeveloper</mx:String>

</mx:Array>

<mx:Array id="array_data">

<mx:String>Flexdeveloper</mx:String>

<mx:String>Flashdeveloper</mx:String>

<mx:String>Webdeveloper</mx:String>

<mx:String>Mobiledeveloper</mx:String>

</mx:Array>

定義1個(gè)包含4個(gè)字符串元素的數(shù)組，相當(dāng)于下面的代碼

Xml代碼

1. <mx:Script>
2. <![CDATA[
3. publicvararray_data:Array=newArray();
4. array_data.push("Flexdeveloper");
5. array_data.push("Flashdeveloper");
6. array_data.push("Webdeveloper");
7. array_data.push("Mobiledeveloper");
8. ]]>
9. </mx:Script>

<mx:Script>

<![CDATA[

public var array_data:Array = new Array();

array_data.push("Flex developer");

array_data.push("Flash developer");

array_data.push("Web developer");

array_data.push("Mobile developer");

]]>

</mx:Script>

定義好數(shù)組之后，可以作為List或者其他組件的數(shù)據(jù)源dataProvider

<mx:List x="20" y="20"dataProvider="{array_data}"width="180"></mx:List>

Xml代碼

1. <mx:XMLid="myData">
2. <nodelabel="資料">
3. <nodelabel="Music">
4. <nodelabel="古典"/>
5. <nodelabel="搖滾"/>
6. <nodelabel="民歌"/>
7. </node>
8. <nodelabel="Movie">
9. <nodelabel="法國"/>
10. <nodelabel="美國"/>
11. </node>
12. </node>
13. </mx:XML>

<mx:XML id="myData">

<node label="資料">

<node label="Music">

<node label="古典"/>

<node label="搖滾"/>

<node label="民歌"/>

</node>

<node label="Movie">

<node label="法國"/>

<node label="美國"/>

</node>

</node>

</mx:XML>

創(chuàng)建一段XML做為Tree樹型組件的數(shù)據(jù)源。

<mx:Tree x="20" y="200"labelField="@label" dataProvider="{myData}"width="180"></mx:Tree>

用MXML語句創(chuàng)建類實(shí)例

<view:Test></view:Test>

這樣就創(chuàng)建了之前定義的Test類的實(shí)例。相當(dāng)于用ASnew一個(gè)出來

愛華網(wǎng)本文地址 » http://www.klfzs.com/a/25101013/185666.html