第 2 章 MXML

1. 第2章 MXML • MXML是Flex应用程序用于进行用户界面组件布局的语言。用户可以通过MXML来显式地定义应用程序的非可视方面，例如访问服务器端数据源和用户界面组件与数据源之间的数据绑定。本章主要讲述MXML语法基础，以及在Flex如何使用MXML。

2. 2.1 MXML简介 • MXML是由Flex引入的，用来描述Flex应用程序界面的语言。本节简要地介绍什么是MXML和MXML的标准。

3. 2.1.1 什么是MXML • MXML基于XML，是用来描述用户界面的语言。MXML遵循W3C XML标准，所以也可以把MXML看作普通的XML文件。可以使用任何的文本编辑器编写MXML。下面就是一个MXML的例子，包含标签、属性、命名控件等。 • <?xml version="1.0" encoding="utf-8"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> • </mx:Application> • 与HTML不同，MXML借助XML的规范拥有更强的结构，更少的语法歧义。MXML还引入了更丰富的标签集，如：DataGrid、Tree、TabNavigator、Accordion和Menu等。这些都是Flex标签集中的一部分。还可以扩展MXML标签，创建自己的组件。此外，二者最大的区别是，MXML定义的用户界面用Flash播放器运行，相对传统的基于HTML、页面为中心的Web应用而言，这将更具吸引力。

4. 2.1.2 MXML与标准 • MXML中融合了众多的标准，为了更好地理解MXML，下面讲述MXML与多个标准的关系。这些标准分别是XML、事件模型、Web服务、Java、HTTP、图像和CSS。 • 1．XML标准 Flex程序采用XML文档格式。XML文档使用标签来定义结构化信息以及他们之间的关系。在MXML中，<mx:Application>定义了一个程序的根标签。在<mx:Application>标签的子标签中定义程序的其他部分。MXML标签的例子包括容器标签，如<mx:VBox>，用于定义用户界面的矩形区域；控件标签，如<mx:TextInput>，用于定义通常的用户界面控件。 • 2．事件模型标准 3．Web服务标准 • 4．Java标准 5．HTTP标准 • 6．图像标准 7．CSS标准

5. 2.2 MXML语法基础 • MXML遵循XML的标准，但对于XML中的标签、属性、文件结构等XML元素进行了相应的约束和扩展。本节讲述MXML中如何定义标签、属性等元素，即MXML的语法基础。

6. 2.2.1 标签 • MXML是一种描述Flex应用程序构造的XML语言。每个MXML文件应该以一个XML声明开始： • <?xml version="1.0"?> • <?xml version="1.0" encoding="utf-8"?> • 和其他XML语言一样，MXML包含元素（标签）和属性，对大小写敏感。但标签名称以大写字母开头，大小写混合，必须有对应的结束标签，如下所示。 • <ComboBox> </ComboBox> • 也可以这样结束对没有内容的标签，如下所示。 • <ComboBox/>

7. 2.2.2 属性 • 属性以小写字母开头，大小写混合。属性必须包含在引号内。 • <ComboBox id="myCombo"/> • 除了click或initialize之类的事件属性外，其他属性都被编译器作为文本字符串处理。如果需要绑定数据或者强迫编译器执行表达式，可以将变量的部分用花括号括起来。 • <ComboBox dataProvider="{myArray}"/> • 大部分的属性都可以作为子标签。如， • <ComboBox dataProvider="{myArray}"/> • 等效代码如下。 • <ComboBox> • <dataProvider>{myArray}</dataProvider> • </ComboBox>

8. 2.2.3 文件结构 • 描述应用程序的MXML文件必须有一个位于其他元素之外的Application标签，如下所示。 • <?xml version="1.0"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> • <!--定义其他界面元素--> • </mx:Application> • 在上面的代码中xmlns属性，声明了XML的命名空间。命名空间可以让用户在单个文档中使用多重XML语言，而避免混淆不同语言中相同的元素名称。这里的":mx"就是一个在特定命名空间中使用的前缀。这里定义的命名空间是标准的MXML类库，它必须包含在每个MXML文件中。

9. 2.3.4 <mx:Script> • MXML文件中直接插入ActionScript方法时要用到<mx:Script>标签，具体语法如下。 • <mx:Script> • <![CDATA[ • //插入ActionScript • ]]> • </mx:Script> • 在这个标签里，需要注意的地方有如下几点： • 标签要成对出现。 • 不能在标签内定义任何的类或者接口，因为本身当前的MXML文件就是一个类，ActionScript并没有像Java一样支持内部类定义。 • CDATA标签主要用来告诉编译器标签内的内容不要被解释成MXML语法，而是ActionScript。 • <mx:Script>标签必须定义在MXML文件根标签的层次，否则会出现编译器错误。

10. 2.3 Flex中使用MXML • MXML从本质上说一种XML规范的标签语言。在Flex中，利用MXML标签来定义用户接口和基本组件，如控件类DataGrid、Label、Button和Hslider等，但是有时也用来定义一些非可视的对象，比如数据服务数据源的封装和绑定（WebService连接和数据绑定等），还有一些效果类。下面主要从功能的角度介绍Flex中MXML的使用。

11. 2.3.1 定义界面组件 • MXML提供了丰富的组件标签集。在MXML中可以利用标签、属性定义Flex提供组件。组件在MXML都有其对应的标签，以及定义该组件的相关属性。例如：按钮控件对应<mx:Button>标签，按钮上显示的文字在该标签的label属性中定义。使用组件的时候，插入该组件组件对应的标签，定义该组件相关属性即可。 使用MXML定义控件

12. 2.3.2 自定义组件 • 在Flex中，不仅可以使用Flex提供的丰富的组件，还可以利用MXML在这些组件的基础上定义组件。 • 与Flex提供的组件不同，自定义组件需要开发者自己编写。在Flex的组件文件中定义，然后在需要的地方对该组件进行引用。 • 下面的例子是一个自定义的银行选择组件，如图所示。 使用自定义组件

13. 2.3.3 数据绑定 • 在MXML中，还可以对组件进行数据绑定。Flex针对用户界面数据的复杂性，提出双向的数据绑定机制：可以将用户界面控件绑定到服务调用的数据结果集上，反过来，也可以将服务的参数与用户界面控件输入的值进行绑定。 • 下面是一个简单的查询手机余额的应用，如图所示。 使用数据绑定

14. 2.3.4 使用样式表 • MXML中可以利用<mx:Style>标签定义样式或者引入外部的样式表。Flex使用样式表标准来保证用户界面的一致性，并使应用更易于维护。就像在HTML中一样，可以在应用中嵌入一个指向外部的样式表，或在特定的标记元素下，将某种风格定义为其属性。 • 下面的应用中即使用<mx:Style>引入外部的样式表，如图所示。 使用样式表

15. 2.3.5 使用效果 • 适当的使用特效，如浮动提示和进度状态，有助于客户直观的了解当前内容。在MXML中，可以通过设置效果达到这一目的。 • 下面例子使用了Flex特性库中的内建的特效，在这个例子中，当myView组件显示时，使用WipeRight特效，而消失时则使用了WipeLeft特效。 • <?xml version="1.0" encoding="utf-8"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" • backgroundGradientColors="[#ffffff, #ffffff]"> • <mx:View id="myView" width="100“ height="100" • showEffect="WipeRight" hideEffect="WipeLeft"/> • <mx:Hbox> • <mx:Button label="显示" click="myView.visible=true"/> • <mx:Button label="消失" click="myView.visible=false"/> • </mx:HBox> • </mx:Application>

16. 2.3.6 存储和验证数据 • 可以使用数据模型来存储特定数据，数据模型是一个可以提供存储数据属性和包含附加方法的ActionScript对象。声明一个简单的没有任何方法的数据模型可以使用<mx:Model> 或<mx:XML>标记，还可以使用验证组件验证存储数据的有效性。Flex包含了一套标准的数据验证组件，当然也可以创建自己的验证组件。详细情况可以参考Flex数据篇中“存储数据”、“验证数据”相关章节。 • 下面的例子显示了一个简单的数据验证，如图所示。 使用数据验证

17. 2.2.7 格式化数据 • 除了进行数据验证之外，还可以对输入的数据进行格式化。与验证数据类似，可以使用Flex提供的数据格式器对指定的数据进行格式化，在MXML中定义相应的格式器即可。详细情况可以参考Flex数据篇中“格式化数据”相关章节。 • 下面的例子对用户输入的电话号码进行格式化处理，如图所示。 格式化数据

18. 2.3.8 命名空间 • 在XML中，属性“xmlns”指定xml的命名空间。在MXML中同样使用该属性定义命名空间。在XML中标签和命名空间是紧密关联的。 • 使用命名空间后，可以使用自定义标签。在下面的例子中包含一个自定义标签：“CustomBox”。 • <?xml version="1.0"?> • <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:my="containers.boxes.*"> • <mx:Panel title="命名空间例子" marginTop="10" marginBottom="10" • marginLeft="10" marginRight="10" > • <my:CustomBox/> • </mx:Panel> • </mx:Application>

19. 2.3.9 触发事件 • Flex应用程序是基于事件驱动的，每一个组件都有许多不同的事件和其对应，例如<mx:Button>有click事件等。组件可触发的事件都可以将事件的名称，作为组件标签的属性指定该事件发生的处理方法。例如在按钮的组件标签<mx:Button>中定义click属性，并为click属性指定处理方法，该处理方法可在<mx:Script>内利用ActionScript定义。 • 下面的例子中，在按钮控件对应的MXML标签内，使用click属性定义了在单击按钮事件发生时处理的方法，