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 >