我們使用兩種語(yǔ)言來(lái)編寫(xiě)Flex程序：MXML和ActionScript。MXML是用來(lái)布局用戶界面組件的XML標(biāo)識(shí)語(yǔ)言，我們也可以使用MXML來(lái)定義一個(gè)程序的不可見(jiàn)部分，例如：到服務(wù)器數(shù)據(jù)源的訪問(wèn)以及用戶界面組件和服務(wù)器數(shù)據(jù)源的數(shù)據(jù)綁定。一.簡(jiǎn)單的MXML
新建一個(gè)HellowWorld.mxml文件，并拷貝下面的內(nèi)容，看一下運(yùn)行結(jié)果。

<?xml version="1.0"?> <!-- mxml\HellowWorld.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:mx="library://ns.adobe.com/flex/mx"xmlns:s="library://ns.adobe.com/flex/spark"><s:layout><s:VerticalLayout/></s:layout><s:Panel title="My Application"><s:Label text="Hello World" fontWeight="bold" fontSize="24"/></s:Panel> </s:Application>

這是一個(gè)最簡(jiǎn)單的MXML程序，從這個(gè)例子，我們可以學(xué)到如下幾點(diǎn)：
1.<s:Application>是一個(gè)程序的root tag,代表一個(gè)Spark應(yīng)用容器。一個(gè)項(xiàng)目應(yīng)該只有一個(gè)root tag.
2.xmlns:fx="http://ns.adobe.com/mxml/2009是ActionScript元素所在的命名空間
xmlns:mx="library://ns.adobe.com/flex/mx是MX控件集所在的命名空間
xmlns:s="library://ns.adobe.com/flex/spark是Spark控件集所在的命名空間
MX和Spark控件集有很多相同的控件，Spark是為Flex4新出的，盡量使用Spark控件集中的控件，在Spark控件集里沒(méi)有相應(yīng)的控件時(shí)再用MX控件集的控件
3.MXML 中的每個(gè)tag都和ActionScript中的類(lèi)或?qū)傩詫?duì)應(yīng)，ActionScript中的類(lèi)在MXML中用節(jié)點(diǎn)表示,屬性可以用attribute表 示，也可以用property表示。比如Panel和Label都是Spark控件集中的類(lèi)。text,fontSize等都是Label類(lèi)的屬性
4.MXML的文件名不能和ActionScript里面的類(lèi)和控件名相同，不能和MXML里的tag相同，也不能是application，且后綴必須是小寫(xiě)的mxml。二.MXML中屬性的賦值
MXML中的屬性可以用attribute表示，也可以用property表示。如果屬性的類(lèi)型是簡(jiǎn)單的類(lèi)型，用兩種方式都能表示，如果是復(fù)雜的類(lèi)型，則只能用屬性的方式表示，其通用格式如下：

<s:property><s:propertytype>...用property的形式列出屬性對(duì)象里面的各個(gè)變量</s:propertytype> </s:property>

下面對(duì)于幾種常見(jiàn)的復(fù)雜類(lèi)型，舉例說(shuō)明一下
1.MXML中數(shù)組的表示
MXML中可以用tag<fx:Array>和</fx:Array>來(lái)表示一個(gè)數(shù)組，且該tag可以省略。

<mynamespace:nameOfObjectProperty><fx:Array><fx:Number>94062</fx:Number><fx:Number>14850</fx:Number><fx:Number>53402</fx:Number></fx:Array> </mynamespace:nameOfObjectProperty>

2.MXML中Vector的表示

<fx:Declarations> <fx:Vector type="String"> <fx:String>one</fx:String><fx:String>two</fx:String><fx:String>three</fx:String></fx:Vector> </fx:Declarations>

3.MXML中XML對(duì)象的表示

<mynamespace:value xmlns:a="http://www.example.com/myschema"><fx:XML><a:purchaseorder><a:billingaddress>...</a:billingaddress></a:purchaseorder></fx:XML> </mynamespace:value>

4.MXML中property的值可以用{靜態(tài)變量}表示，也可以直接用常量表示。例如下面兩種方式都可以

<s:Wipe direction="{spark.effects.WipeDirection.LEFT}">... </s:Wipe> <s:Wipe direction="left">... </s:Wipe>

5.MXML中用\來(lái)轉(zhuǎn)義特殊字符，用{\n}或&#13來(lái)表示換行符，用&lt;String&gt;來(lái)表示<String>三.定制Application的外觀
1.控件庫(kù)里有一些容器控件，可以進(jìn)行控制應(yīng)用的外觀，比如HGroup和VGroup控制控件的排列方式，TabNavigator添加Tab查看方式等
2.用CSS控制外觀，需要用<fx:Style>tag來(lái)包含CSS的定義，且該定義必須是root tag的子節(jié)點(diǎn)。

<?xml version="1.0"?> <!-- mxml/CSSExample.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:mx="library://ns.adobe.com/flex/mx"xmlns:s="library://ns.adobe.com/flex/spark"><fx:Style>@namespace s "library://ns.adobe.com/flex/spark";@namespace mx "library://ns.adobe.com/flex/mx";/* class selector */.myClass {color: Red}/* type selector */s|Button {font-size: 18pt}</fx:Style><s:Panel title="My Application"><s:Button styleName="myClass" label="This is red 18 point text."/></s:Panel> </s:Application>

3.用skin控制控件外觀
<s:Button skinClass="com.mycompany.skins.MyButtonSkin" />四.ActionScript和MXML的交互
1.在MXML的事件中可以用簡(jiǎn)單的ActionScript語(yǔ)句
<s:Button label="Click Me" click="textarea1.text='Hello World';" />
2.在MXML中插入ActionScript語(yǔ)句

<fx:Script><![CDATA[public var s:Boolean;public function doSomething():void {// The following statements must be inside a function.s = label1.visible;label1.text = "label1.visible = " + String(s);}]]> </fx:Script> <fx:Script source="includes/IncludedFile.as"/>

3.使用{}進(jìn)行數(shù)據(jù)綁定

<fx:Script><![CDATA[[Bindable]public var myText:String = "Display" + "\n" + "Content";]]> </fx:Script> <s:TextArea width="100%" text="{myText}"/>

4.對(duì)MXML中的tag增加id attribute，這樣可以在ActionScript語(yǔ)句中直接訪問(wèn)該對(duì)象。
5.用ActionScript創(chuàng)建可以在MXML中使用的控件。

<?xml version="1.0"?> <!-- mxml/CustomMXMLComponent.mxml --> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:mx="library://ns.adobe.com/flex/mx"xmlns:s="library://ns.adobe.com/flex/spark"xmlns:MyComps="myComponents.boxes.*"><s:Panel title="My Application"height="150"><MyComps:MyComboBox/></s:Panel> </s:Application>

注：文中給出的例子均來(lái)自adobe

作者：Jingle Guo
出處：http://www.cnblogs.com/studynote/

總結(jié)

以上是生活随笔為你收集整理的Flex学习记录(一)——MXML基本知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。