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