Flex學習記錄(一)——MXML基本知識

我們使用兩種語言來編寫Flex程序：MXML和ActionScript。MXML是用來布局用戶界面組件的XML標識語言，我們也可以使用MXML來定義一個程序的不可見部分，例如：到服務器數據源的訪問以及用戶界面組件和服務器數據源的數據綁定。

一.簡單的MXML
新建一個HellowWorld.mxml文件，並拷貝下面的內容，看一下運行結果。

<?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>

 

這是一個最簡單的MXML程序，從這個例子，我們可以學到如下幾點：
1.<s:Application>是一個程序的root tag,代表一個Spark應用容器。一個項目應該只有一個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控件集里沒有相應的控件時再用MX控件集的控件
3.MXML中的每個tag都和ActionScript中的類或屬性對應，ActionScript中的類在MXML中用節點表示,屬性可以用attribute表示，也可以用property表示。比如Panel和Label都是Spark控件集中的類。text,fontSize等都是Label類的屬性
4.MXML的文件名不能和ActionScript里面的類和控件名相同，不能和MXML里的tag相同，也不能是application，且后綴必須是小寫的mxml。

二.MXML中屬性的賦值
MXML中的屬性可以用attribute表示，也可以用property表示。如果屬性的類型是簡單的類型，用兩種方式都能表示，如果是復雜的類型，則只能用屬性的方式表示，其通用格式如下：

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

下面對於幾種常見的復雜類型，舉例說明一下
1.MXML中數組的表示
MXML中可以用tag<fx:Array>和</fx:Array>來表示一個數組，且該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對象的表示

<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的值可以用{靜態變量}表示，也可以直接用常量表示。例如下面兩種方式都可以

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

5.MXML中用\來轉義特殊字符，用{\n}或&#13來表示換行符，用&lt;String&gt;來表示<String>

三.定制Application的外觀
1.控件庫里有一些容器控件，可以進行控制應用的外觀，比如HGroup和VGroup控制控件的排列方式，TabNavigator添加Tab查看方式等
2.用CSS控制外觀，需要用<fx:Style>tag來包含CSS的定義，且該定義必須是root tag的子節點。

<?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的事件中可以用簡單的ActionScript語句
<s:Button label="Click Me" click="textarea1.text='Hello World';" />
2.在MXML中插入ActionScript語句

<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.使用{}進行數據綁定

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

4.對MXML中的tag增加id attribute，這樣可以在ActionScript語句中直接訪問該對象。
5.用ActionScript創建可以在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>

注：文中給出的例子均來自adobe