MXML简介

使用样式表
2.3.5 使用效果
适当的使用特效，如浮动提示和进度状态，有助于客户直观的了解当前内 容。在MXML中，可以通过设置效果达到这一目的。 下面例子使用了Flex特性库中的内建的特效，在这个例子中，当myView组 件显示时，使用WipeRight特效，而消失时则使用了WipeLeft特效。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="/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>
2.1.1 什么是MXML
MXML基于XML，是用来描述用户界面的语言。MXML遵循W3C XML标准，所以也可以把MXML看作普通的XML文件。可以使 用任何的文本编辑器编写MXML。下面就是一个MXML的例子， 包含标签、属性、命名控件等。 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="/2006/mxml"> </mx:Application> 与HTML不同，MXML借助XML的规范拥有更强的结构，更少的 语法歧义。MXML还引入了更丰富的标签集，如：DataGrid、 Tree、TabNavigator、Accordion和Menu等。这些都是Flex 标签集中的一部分。还可以扩展MXML标签，创建自己的组 件。此外，二者最大的区别是，MXML定义的用户界面用 Flash播放器运行，相对传统的基于HTML、页面为中心的 Web应用而言，这将更具吸引力。
第2章 MXML
MXML是Flex应用程序用于进行用户界面组件布局 的语言。用户可以通过MXML来显式地定义应用程 序的非可视方面，例如访问服务器端数据源和用 户界面组件与数据源之间的数据绑定。本章主要 讲述MXML语法基础，以及在Flex如何使用MXML。
2.1 MXML简介
MXML是由Flex引入的，用来描述Flex应用程序界 面的语言。本节简要地介绍什么是MXML和MXML的 标准。
2.3.9 触发事件
Flex应用程序是基于事件驱动的，每一个组件都 有许多不同的事件和其对应，例如<mx:Button>有 click事件等。组件可触发的事件都可以将事件的 名称，作为组件标签的属性指定该事件发生的处 理方法。例如在按钮的组件标签<mx:Button>中定 义click属性，并为click属性指定处理方法，该 处理方法可在<mx:Script>内利用ActionScript定 义。 下面的例子中，在按钮控件对应的MXML标签内， 使用click属性定义了在单击按钮事件发生时处理 的方法，
2.3.4 <mx:Script>
MXML文件中直接插入ActionScript方法时要用到<mx:Script>标签， 具体语法如下。 <mx:Script> <![CDATA[ //插入ActionScript ]]> </mx:Script> 在这个标签里，需要注意的地方有如下几点： 标签要成对出现。 不能在标签内定义任何的类或者接口，因为本身当前的MXML文件 就是一个类，ActionScript并没有像Java一样支持内部类定义。 CDATA标签主要用来告诉编译器标签内的内容不要被解释成MXML语 法，而是ActionScript。 <mx:Script>标签必须定义在MXML文件根标签的层次，否则会出现 编译器错误。
2.3.1 定义界面组件
MXML提供了丰富的组件标签集。在MXML中可以利 用标签、属性定义Flex提供组件。组件在MXML都 有其对应的标签，以及定义该组件的相关属性。 例如：按钮控件对应<mx:Button>标签，按钮上显 示的文字在该标签的label属性中定义。使用组件 的时候，插入该组件组件对应的标签，定义该组 件相关属性即可。
使用数据验证
2.2.7 格式化数据
除了进行数据验证之外，还可以对输入的数据进 行格式化。与验证数据类似，可以使用Flex提供 的数据格式器对指定的数据进行格式化，在MXML 中定义相应的格式器即可。详细情况可以参考 Flex数据篇中“格式化数据”相关章节。 下面的例子对用户输入的电话号码进行格式化处 理，如图所示。
使用MXML定义控件
2.3.2 自定义组件
在Flex中，不仅可以使用Flex提供的丰富的组件，还可以 利用MXML在这些组件的基础上定义组件。 与Flex提供的组件不同，自定义组件需要开发者自己编写。 在Flex的组件文件中定义，然后在需要的地方对该组件进 行引用。 下面的例子是一个自定义的银行选择组件，如图所示。

2.3.6 存储和验证数据
可以使用数据模型来存储特定数据，数据模型是一个可以 提供存储数据属性和包含附加方法的ActionScript对象。 声明一个简单的没有任何方法的数据模型可以使用 <mx:Model> 或<mx:XML>标记，还可以使用验证组件验证存 储数据的有效性。Flex包含了一套标准的数据验证组件， 当然也可以创建自己的验证组件。详细情况可以参考Flex 数据篇中“存储数据”、“验证数据”相关章节。 下面的例子显示了一个简单的数据验证，如图所示。
2.2.3 文件结构
描述应用程序的MXML文件必须有一个位于其他元素之外的 Application标签，如下所示。 <?xml version="1.0"?> <mx:Application xmlns:mx="/2006/mxml"> <!--定义其他界面元素--> </mx:Application> 在上面的代码中xmlns属性，声明了XML的命名空间。命名 空间可以让用户在单个文档中使用多重XML语言，而避免混 淆不同语言中相同的元素名称。这里的":mx"就是一个在特 定命名空间中使用的前缀。这里定义的命名空间是标准的 MXML类库，它必须包含在每个MXML文件中。
2.3 Flex中使用MXML
MXML从本质上说一种XML规范的标签语言。在Flex 中，利用MXML标签来定义用户接口和基本组件， 如控件类DataGrid、Label、Button和Hslider等， 但是有时也用来定义一些非可视的对象，比如数 据服务数据源的封装和绑定（WebService连接和 数据绑定等），还有一些效果类。下面主要从功 能的角度介绍Flex中MXML的使用。
格式化数据
2.3.8 命名空间
在XML中，属性“xmlns”指定xml的命名空间。在MXML中同样使用 该属性定义命名空间。在XML中标签和命名空间是紧密关联的。 使用命名空间后，可以使用自定义标签。在下面的例子中包含一 个自定义标签：“CustomBox”。 <?xml version="1.0"?> <mx:Application xmlns:mx="/2006/mxml" xmlns:my="containers.boxes.*"> <mx:Panel title="命名空间例子" marginTop="10" marginBottom="10" marginLeft="10" marginRight="10" > <my:CustomBox/> </mx:Panel> </mx:Application>
2.2 MXML语法基础
MXML遵循XML的标准，但对于XML中的标签、属性、 文件结构等XML元素进行了相应的约束和扩展。本 节讲述MXML中如何定义标签、属性等元素，即 MXML的语法基础。
2.2.1 标签
MXML是一种描述Flex应用程序构造的XML语言。每 个MXML文件应该以一个XML声明开始： <?xml version="1.0"?> <?xml version="1.0" encoding="utf-8"?> 和其他XML语言一样，MXML包含元素（标签）和属 性，对大小写敏感。但标签名称以大写字母开头， 大小写混合，必须有对应的结束标签，如下所示。 <ComboBox> </ComboBox> 也可以这样结束对没有内容的标签，如下所示。 <ComboBox/>
使用数据绑定
2.3.4 使用样式表
MXML中可以利用<mx:Style>标签定义样式或者引入外部的 样式表。Flex使用样式表标准来保证用户界面的一致性， 并使应用更易于维护。就像在HTML中一样，可以在应用中 嵌入一个指向外部的样式表，或在特定的标记元素下，将 某种风格定义为其属性。 下面的应用中即使用<mx:Style>引入外部的样式表，如图 所示。