3.1 MXML語法
通常情況下,Flex程序由以下三種文件組成:
l 以 mxml為后綴的程序文件
l 以 as 為后綴的 ActionScript 文件
l 以css 為后綴的樣式表文件
MXML文件就好比大腦,as文件和css文件是他的手和腳,主程序MXML文件將項目中的所有文件組合在一起,形成一個有機的整體。
本章簡要說明MXML的語法,并結合實力分析MXML文件的內容結構。
在上一章的實例中,創建了一個簡單的Flex程序,主程序文件是一個“mxml”為后綴名的文件,這個文件所采用的便是我們這里要講的MXML語言。
MXML語言,是專門用于Flex程序中,描述界面表現的一種XML標記語言。我們可以用它來管理程序的整體布局,控制組建的央視和外觀,也可以構建非可視化的對象,比如XML數據、與服務器端通信的WebService、組件的數據源等等。
3.1.1 命名規范
類似網頁中實用的HTML語言,MXML提供了一系列的標簽供用戶使用,到哪MXML的語法更嚴格的多,他提供的內置標簽也更豐富。
MXML區分大小寫,且文件名和變量標識名都區分大小寫。字母大小寫錯誤是編程中常見的錯誤,隱蔽性較高,有時很難排錯。在編寫代碼時,應采用合理的命名規范,避免出現這類錯誤。
在Flex程序中,每個MXML文件必須以小寫的“mxml”作為后綴,文件名要遵循ActionScript中變量的命名規則。因為在程序中,所有的MXML文件名可以直接被ActionScript當作一種用戶定的數據類型來使用。因此,MXML文件名不能和ActionScript類文件同名,否則就會造成類型沖突。在ActionScript中,變量名必須以字母或下劃線開始,且只能包含字母、數字和下劃線。
需要注意的是,MXML文件不能名為“application” ,“application”是住程序文件所采用的默認標記,不可以在被使用。也不能和程序中任意組件的id值同名。
例如,下面是HelloWorld.mxml文件的源代碼:
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('這是點擊后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="這是點擊前的文字" fontSize="12" width="136"/>
5 </mx:Application>
嘗試作如下修改:

再次編譯,將無法通過編譯,得到如下錯誤信息:identifier and class may not have the same name,意思是說組件的唯一標識名“id”不可以和對象重名。
還有一點說明:程序不可以使用“mx”作為目錄名。“mx”是Flex Framework的官方組件庫的命名空間,受到Flex編譯器的保護。假如在程序目錄中創建了名為“mx”的目錄,這個目錄中存放的MXML文件和ActionScript類文件都將無法使用,會被編譯器忽略。
為了避免文件名沖突,同時也為了增強程序的可讀性,文件和變量一般采用有意義的單詞、名詞簡寫或字符組合來命名。下面介紹一些習慣用法:
(1) 用類型的簡寫作后綴,比如:LoginPanel表示登陸面板;SendBtn表示發送按鈕;UserTxt表示文本組件。
(2) 使用下劃線組合單詞,比如:User_Name、User_Email表示用戶的信息;Move_Speed表示速度。
(3) 常量全部使用大寫,比如:PI表示圓周率;CLICK_EVENT表示點擊事件名。
不管時使用哪種方式,目的都是為了提高程序的代碼質量,這對開發和日后的維護都很有幫助。
3.1.2 MXML文件結構
一個MXML文件由哪些元素構成?我們已經知道MXML文件其實是一個標準的mxl文件,因此可以參考XML語法來分析MXML文件的內容。
這里仍然以上一章實例的代碼為例:
2 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
3 <mx:Button id="btn" x="51" y="107" label="Click me" click="trace('這是點擊后的文字')"/>
4 <mx:Label id="tip_txt" x="182" y="109" text="這是點擊前的文字" fontSize="12" width="136"/>
5 </mx:Application>
在MXL文件中,需要在第一行聲明XML文件采用的語法版本號和文件采用的編碼格式。從上面的代碼中可以看到這兩個屬性:version和encoding,其中encoding編碼格式這個屬性是可選的。選定的編碼格式必須符合文件采用的編碼格式,默認為utf-8格式。在中文操作系統中,一般都使用utf-8這個編碼格式,他兼容采用雙字節編碼的語言(包括中文、韓文、日文等)和其他常見的西方語言,而且跨平臺,是使用最廣發的編碼格式。另外也可以使用簡體中文專用編碼gb2312.
mx:Application標簽是一個特殊的標簽。在每個Flex項目中,可能有多個MXML文件,但作為程序入口的運行文件只有一個,主文件的標示是根節點為mx:Application,一個程序中只能出現一個mx:Application節點。
在根節點中,還看到了一個屬性:xmlns:mx=http://www.adobe.com/2006/mxml,表示將mx定義為MXL的命名空間。xmlns標簽專門用來定義XML的命名空間,XML命名空間可以用來定義一套獨立的XML標簽,并且為這些標簽制定特殊的解析方式。比如XML中默認的標簽格式為:<Button>node</Button>,這里的Button節點被作為一個普通的文本節點,沒有什么特殊的意義。定義命名空間后,在節點上就愛上空間前綴:<mx:Button></mx:Button>,這時候mx:Button 就代表mx空間下的Button對象。
mx命名空間對應的路徑是“http://www.adobe.com/2006/mxml”,Flex的配置文件中將這個路徑定義為一個全局資源標識符,并對應了一個MXL文件。在這個文件中,列出了mx命令空間下的所有標簽。在Flex Builder2的安裝路徑下,進入Flex SDK2\frameworks目錄中,找到flex-config.xml 文件并使用記事本或其他編輯工具打開,找到下面的內容:
2 <!—Specify a URI to associate with a manifest of components for use as MXML-->
3 <!—elements.
4 <namespace>
5 <uri>http://www.adobe.com/2006/mxml</uri>
6 <manifest>mxml-manifest.xml</manifest>
7 </namespace>
8 </namespaces>
從上面的配置中發現,http://www.adobe.com/2006/mxml 這個URI和mxml-manifest.xml文件對應。下面打開同目錄下的mxml-manifest.xml 文件,里面列出了MXML中的所有標簽和與標簽相關的類文件路徑。
2 <componentPackage>
3 <component id="Accordion" class="mx.containers.Accordion"/>
4 <component id="AddChildAction" class="mx.effects.AddChildAction"/>
5 <component id="AnimateProperty" class="mx.effects.AnimateProperty"/>
6 <component id="Application" class="mx.core.Application"/>
7 <component id="ApplicationControlBar" class="mx.containers.ApplicationControlBar"/>
8 <component id="ArrayCollection" class="mx.collections.ArrayCollection"/>
9 <component id="Blur" class="mx.effects.Blur"/>
10










































11










































12 <component id="SecureHTTPChannel" class="mx.messaging.channels.SecureHTTPChannel"/>
13 <component id="SecureRTMPChannel" class="mx.messaging.channels.SecureRTMPChannel"/>
14 </componentPackage>
在這份列表中,節點的id代表標簽名,class表示類文件的路徑。比如mx:Application標簽,也就是對應了mx.core.Application類。
在開發中,當程序中有很多的MXML文件和AS文件時,為了方便調用,我們可以將功能類似的文件放在一個文件夾中,定義一個命名空間,這樣會節省很多時間。在自定義命名空間時,為了方便,一般直接指定命名空間包括的標簽路徑。比如:
xmlns:myComp="components.*"
因為使用了通配符“*”,components目錄下的所有MXML文件和ActionScript類文件(不包括目錄和目錄中的文件)都被包括在myComp命名空間下。假如components中有一個LoginPanelmxml文件,則在程序中調用者個文件時,代碼如下:
<myComp:LoginPanel></myComp:LoginPanel>
myComp下的標簽被自動指向components中的文件。
當標簽數量較多且分布在不同文件夾時,可以模仿Flex配置文件的做法,使用XML文件來描述標簽的路徑。在后面的內容中,我們會經常看到命名空間的使用。
Application標簽中還有一個屬性layout,這個屬性定義了Application節點下元素的布局方式。由于Application是根節點,因此他的布局方式決定了程序的總體布局方式。“absolute”表示決定定位,所有子元素將按照各自的x、y坐標來定位。
Application節點中有兩個子節點,分別是mx:Button和mx:Label節點,代表了兩個組件,節點中的屬性定義了組件初始化后的一些狀態,比如坐標、標示名、文字等等。
說明:由于在網上相關資源太少所以本文是按照《Flex第一步》編寫,由于時間比較短所以第三章內容沒有全部出來同時編寫過程中有錯別字,請大家擔待。^_^