Programming Flex2 - 三.MXML

MXML相当于是Flex在Flash Player上的HTML。从名字上能看出其为一个XML文档。

所有的MXML文档分成两种类型。一种是主程序文档，一种是组件文档。
主程序文档的根节点必然是<Application>，而组件文档可以看作是非<Application>为根节点的mxml文档。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Button label="Example Button" />
</mx:Application>

在这段代码中，xmlns:mx声明使用了一个命名空间 http://www.adobe.com/2006/mxml，标示为mx。
因为 Application, Button都定义在该命名空间里，所在在使用的时候，前面都要加一个mx。

标示当然可以随便改，改成abc也行，像这样：

<?xml version="1.0" encoding="utf-8"?>
<abc:Application xmlns:abc="http://www.adobe.com/2006/mxml" layout="absolute">
    <abc:Button label="Example Button" />
</abc:Application>

甚至可以不加，像这样：

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://www.adobe.com/2006/mxml" layout="absolute">
    <Button label="Example Button" />
</Application>

如此一来，整个程序默认的命名空间就是http://www.adobe.com/2006/mxml。
但这样不太随大流^_^

如果想使用自定义的命名空间，只需多一个声明即可：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:example="http://www.example.com" layout="absolute">
    <mx:Button label="Example Button" />
    <example:Button />
</mx:Application>

==========================================

组件分两种，可视组件和不可视组件。
可视组件又分两种，容器类（Application，Vbox...）和操作类（Button，ComboBox，TextInput...）。
不可视组件也分两种，数据类（ArrayCollection...）和实用类（Binding...）。

设置组件属性有三种方法：
标签属性

<mx:Button id="exampleButton" label="Example Button" />

嵌套标签

<mx:Button id="exampleButton">
    <mx:label>Example Button</mx:label>
</mx:Button>

AS程序

exampleButton.label = "Example Button";

属性id，相当于定义组件的引用名，命名规则和程序中变量一样。

一般，除了必须使用嵌套标签时用之以外，基本都用标签属性来设置属性。
什么时候是例外呢？在属性值不是一个字符串类型，而是复杂类型时。比如ComboBox的dataProvider属性：

<mx:ComboBox id="exampleComboBox">
    <mx:dataProvider>
        <mx:ArrayCollection>
            <mx:String>A</mx:String>
            <mx:String>B</mx:String>
            <mx:String>C</mx:String>
            <mx:String>D</mx:String>
        </mx:ArrayCollection>
    </mx:dataProvider>
</mx:ComboBox>

三种方法相比下来
标签属性法：最简单，直观，限制大。
嵌套标签法：只适合特定场合。
AS程序法：万能，但实现起来稍复杂。

==========================================

MXML创建交互的两种形式：事件处理和数据绑定。

事件作为一个组件的属性存在，属性的值其实就是一小段AS程序。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">    <mx:Button id="alertButton" label="Show Alert" click="mx.controls.Alert.show('Example')" />
</mx:Application>

Flex的事件模型基于W3C所指定的： http://www.w3.org/TR/DOM-Level-3-Events/

数据绑定有三种方法：

大括号语法
<mx:Binding>
BindingUtils

前两者是MXML语法，最后是一个类。

大括号语法最简单。去掉'{}'，就是一句普通的AS代码。

<mx:VBox>
    <mx:Text id="output" text="{input.text}" width="200" height="200" />
    <mx:TextInput id="input" />
</mx:VBox>

<mx:Binding>在结构上比大括号语法来的有弹性，功能完全一样。该标签有两个属性：
source：数据变化对象
destination：随source变化而变化的对象

<mx:VBox>
    <mx:Text id="output" width="200" height="200" />
    <mx:TextInput id="input" />
</mx:VBox>
<mx:Binding source="input.text" destination="output.text" />

BindingUtils是mx.binding.utils.BindingUtils，语法如下：

BindingUtils.bindProperty(destinationObject, destinationProperty, sourceObject, sourceProperty);

<mx:Script>
    <![CDATA[
        import mx.binding.utils.BindingUtils;
    ]]>
</mx:Script>
<mx:VBox>
    <mx:Text id="output" width="200" height="200" />
    <mx:TextInput id="input" />    <mx:Button label="enable data binding" click="BindingUtils.bindProperty(output, 'text', input, 'text')" />
</mx:VBox>