MXML簡介及使用

MXML是我們可以用來為我們的Adobe Flex程式布局使用者界面。我們也可以用MXML來定義程式的不可見部分，例如到伺服器端的資料源的通路以及使用者界面元件與伺服器端資料源的資料綁定。這個主題介紹了MXML，并且描述了MXML與程式标準的聯系。

使用MXML

我們使用兩種語言來編寫Flex程式：MXML與ActionScript。MXML是我們可以用來布局使用者界面元件的XML辨別語言。我們也可以使用MXML來定義一個程式的不可見部分，例如：到伺服器資料源的通路以及使用者界面元件和伺服器資料源的資料綁定。

與HTML類似，MXML提供了标簽來定義使用者界面。如果我們曾使用HTML來進行工作，MXML看起來就非常熟悉。然而，MXML比HTML更為結構化，并且他提供了一個更為豐富的标簽集合。例如，MXML包含了可視元件标簽，例如資料網格，樹，标簽浏覽，菜單等，并且包括提供網絡服務連接配接，資料綁定和動畫效果等非可視元件。我們同時可以使用自定義的元件來擴充MXML，并且這些元件可以作為MXML标簽來進行引用。

MXML與HTML之間最大的不同就在于MXML定義的程式将會被編譯成為SWF檔案，并且使用Flash播放器來運作，進而提供比基于頁面的HTML程式更為豐富與動态的使用者界面。

我們可以在單一的檔案或是多個檔案中編寫MXML程式。MXML同時支援在MXML和ActionScript檔案中編寫的自定義元件。

編寫一個簡單的程式

因為MXML是普通的XML檔案，是以我們在開發環境上有很廣的選擇。我們可以在簡單的文本編輯器，XML編輯器，或者是支援文本編輯的內建開發環境(IDE)中來編寫MXML代碼。Adobe提供了一個專業的名為Flex Builder的IDE，我們可以用來開發我們的程式。

下面的例子顯示了一個簡單的“Hello World”程式，這個程式僅包含一個<mx:Application>标簽與兩個子标簽，<mx:Panel>和<mx:Lable>。<mx:Application>标簽總是一個程式的根标簽。<mx:Panel>标簽定義了一個可以包含标題欄，标題，狀态資訊，邊框，内容區域作為其子節點的面闆容器。<mx:Label>标簽代表一個标簽控件，一個用來顯示文本的簡單使用者界面元件。

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >     <mx:Panel title="My Application" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >         <mx:Label text="Hello World!" fontWeight="bold" fontSize="24" />     

    </mx:Panel>

</mx:Application>

将這段代碼存為hello.mxml檔案。MXML檔案名必須以mxml作為擴充名。然後我們就可以編譯并且運作生成的SWF檔案。

下圖顯示了浏覽器視窗運作的“Hello World”程式的運作結果：

  關于XML編碼

文檔的第一行指明了一個可選的XML版本的聲明。包含指明MXML是如何編碼的編碼資訊是一個很好的習慣。許多文本編輯器可以讓我們選擇檔案編碼。在北美的作業系統中，ISO-8859-1是主流的編碼格式，并且許多程式在預設情況下使用這種編碼格式。我們可以使用UTF-8編碼格式來保證最大的平台相容性。UTF-8為檔案中的每一個字元提供一個唯一的數目，并且他是與平台，程式和語言無關的。如果我們指定了編碼格式，他必須與我們所用的檔案編碼相比對。下面的例子顯示了指明了UTF8編碼的XML聲明：

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

關于<mx:Application>标簽

除了作為Flex程式的根标簽，<mx:Application>标簽代表了一個程式容器。一個容器就是一個包含其他元件，并且具有内建的子元件布局規則的使用者界面元件。在預設情況下，一個程式容器從上到下布局其子元件。我們可以在一個程式容器中嵌入其他的容器類型，例如在上面所示的面闆容器。

關于MXML标簽屬性

MXML标簽的屬性，如<mx:Label>标簽的text,color,fontSize屬性，可以讓我們定義一個元件的初始狀态。我們可以在<mx:Script>标簽中使用Application來在運作時改變元件狀态。

MXML标簽與ActionScript類的關系

Adobe将Flex作為一個ActionScript類庫來實作。這個類庫包含元件(容器與控件)，管理器類，資料服務類，以及其他特性的類。我們使用MXML與ActionScript語言配合類庫來開發我們的程式。

MXML标簽對應于ActionScript類或是類的屬性。Flex分析MXML标簽，并且編譯成為一個包含相應的ActionScript對象的SWF檔案。例如，Flex提供了ActionScript按鈕類來定義Flex按鈕控件。在MXML中，我們使用下面的MXML語句來建立一個按鈕控件：

<mx:Button label="Submit" />

當我們使用MXML标簽定義一個控件，我們建立了這個類的一個執行個體對象。這條MXML語句建立了一個Button對象，并且将按鈕對象的label屬性初始化為字元串Submit。

對應于一個ActionScript類的MXML标簽與ActionScript類使用相同的命名約定。類名以一個大寫字母開頭，在類名中以大寫字母分隔單詞。每一個MXML标簽都對應于ActionScript類的一個屬性，适合這個對象的一種風格，或者是這個對象的一個事件監聽器。

在Flex Builder中使用MXML

Flex Builder包含一個針對于Adobe Flex程式開發的代碼編輯器。當我們使用MXML工作時，Flex Builder代碼編輯器通過提示幫助我們完成代碼完成，文法錯誤檢查，格式化代碼以增強可讀性，進而幫助我們簡化我們的代碼編輯任務。

MXML與标準的關系

MXML使用标準，在這一部分我們描述MXML與下列标準的關系：

XML

事件模型

Web服務

Java

HTTP

圖像

CSS

XML标準

我們在XML文檔中編寫Flex程式。XML文檔使用标簽來定義結構化資訊以及他們之間的關系。在MXML中，<mx:Application>定義了一個程式的根标簽。我們在<mx:Application>标簽的子标簽中定義程式的其他部分。MXML标簽的例子包括容器标簽，例如<mx:VBox>，他定義了使用者界面的矩形區域，控件标簽，如<mx:TextInput>，定義了通常的使用者界面控件。

事件模型标準

Flex事件模型是文檔對象模型(DOM) 3 事件的一個子集，他是W3C的一個工作草案。DOM 3定義一個事件系統，這個系統允許事件監聽器的平台中立與語言中立注冊，通過一個樹結構來描述事件流，并且為每一個事件提供了基本的脈絡資訊。MXML提供了标簽屬性允許我們指定Application代碼來處理事件。例如，在下面的例子中click事件監聽器發送了一個網絡服務請求：

mx:Button click="mywebservice.myOperation.send()"/>

Web服務标準

Flex提供了MXML标簽來與在網絡服務描述語言文檔(WSDL)中定義了接口的網絡服務進行互動，這個檔案可以作為URL得到。WSDL是一個網絡服務了解的消息描述的标準格式，對應于這些消息的響應的格式，網絡服務支援的協定，以及消息發送到哪裡。

Flex程式支援網絡服務請求，結果作為簡單對象通路協定(SOAP)消息的格式，并且使用HTTP進行傳輸。SOAP提供了我們可以用來在網絡服務用戶端(例如，Flex程式)之間轉換結構化與類型資訊的基于XML格式的定義。

Java标準

Flex提供了MXML标簽用來與伺服器端Java對象進行互動，包括普通的老Java對象，JavaBean，以及EJB。

HTTP标準

Flex提供了MXML标簽用來發送标準的HTTP GET或是POST請求，并且使用HTTP響應傳回的資料進行工作。

圖像标準

Flex提供了MXML标簽用來在程式中使用JPEG,GIF，PNG格式的圖像。Flex同時提供了标簽用來在程式中導入SWF檔案與SVG檔案。

CSS标準

MXML風格是由W3C的CSS标準來定義和使用的。CSS提供了一種機制可以用來定義文本格式以及我們希望在Flex元件上實作的可視效果。