3.1 MXML 的构成

3.1 MXML的构成 第三章：MXML语法基础

目录什么是MXML MXML与标准 MXML基本语法 2

什么是MXML • MXML是Flex应用程序用于进行用户界面组件布局的语言。用户可以通过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> 3

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

MXML与标准 • 2．事件模型标准。Flex中的事件模型是DOM Level 3 Events的子集。DOM Level 3定义了一个事件系统，它允许事件监听的平台和语言中立。通过树结构来描述事件流程，提供每一个事件的基本信息。MXML标签提供属性，再使用ActionScript代码来控制事件。例如，在以下代码中，click事件就触发了ActionScript代码来完成下一步操作。<mx:Button click="mywebservice.myOperation.send()"/> 5

MXML与标准 • 3．Web Services标准。Flex 提供了标签来调用Web Services。Web Services在WSDL（Web Services Description Language）文件中定义了其界面。WSDL具有标准的格式来描述Web Services所理解的信息、Web Services对信息回应的格式、Web Services所支持的协议，以及哪里发送信息。 Flex支持Web Services的要求和返回结果，其格式为SOAP（Simple Object Access Protocol）信息，并且使用HTTP来传输。SOAP提供定义XML为基础的格式，用来在用户端和Web Services交换信息。 6

MXML与标准 • 4.Java标准。Flex提供MXML标签与服务器端的Java Object产生联系。 • 5.HTTP标准。Flex提供MXML标签来建立HTTP GET和POST要求，并且可以得到HTTP的返回值。 • 6.图形标准。Flex提供MXML标签来使用JPEG、GIF和PNG图像格式，同时也提供标签来使用SWF文件和SVG文件。 • 7.CSS标准。MXML的样式上使用CSS标准，CSS提供了对Flex组件的外观和效果定义的途径。 7

MXML基本语法-文件名 • MXML文件名必须是合法的ActionScript标识符号；必须以字母或者下划线（_）起始；文件名中只能包含字母、数字和下划线；文件名不能与ActionScript类的名称、组件名一样，也不能是Application；不要使用与MXML标签名一样的文件名；文件名必须有小写的.mxml后缀。 8

MXML基本语法-组件的属性 • 在MXML中，组件的属性与相应的ActionScript类的属性名称一样。属性名称起始于一个小写的字母，并且在分离的单词的头一个字母使用大写字母。大多数属性可以是标签的一个属性。示例代码如下： • <mx:Label x=“139”y=“55”text=“Hello World!”width=“125”height=“29”></mx:Label> • 用户也可以定义组件属性为它的子标签，示例代码如下： • <mx:Label> <mx:x>139</mx:x> <mx:y>55</mx:y> <mx:text>Hello World!</mx:x> …..</mx:Label> 9

MXML基本语法-样式属性 • MXML标签中的样式属性是与其他属性不同的，因为它对应于ActionScript中的使用setStyle(stylename,value)设定的样式属性。例如，在MXML代码中，设定文本的fontFamily属性为Tahoma时，代码如下: • <mx:TextArea id="myText" text="Hello World!" fontFamily="Tahoma"/> • 在ActionScript中，与上述MXML代码得到相同结果的代码如下： • myText.text="Hello World!"; • myText.setStyle("fontFamily","Tahoma"); 10

MXML基本语法-常数 • 在MXML中，可以使用静态的常数，即恒定不变的值来定义属性的值，示例代码如下： • <mx:HBox width="200" horizontalScrollPolicy="ScrollPolicy.OFF" > • 这里的ScrollPolicy.OFF是在ActionScript中设定的静态恒量。同样，也可以设定属性值为静态衡量的数值，OFF的值为"off". • 在ActionScript代码中，应该使用静态恒量来定义属性值。 • var myHBox:HBox = new HBox(); • myHBox.horizontalScrollPolicy=ScrollPolicy.OFF; 11

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

Thank you ! 第三章：MXML语法基础谢谢！

3.1 MXML 的构成