《MXML与Flex界面(基础篇).ppt》由会员分享，可在线阅读，更多相关《MXML与Flex界面(基础篇).ppt（18页珍藏版）》请在金锄头文库上搜索。
1、第二讲MXML与Flex界面(基础篇)主讲人王森目录2.1 MXML简介2.2 MXML语法基础与简单控件2.3 ActionScript3.02.4 常用组件及布局管理器目录2.1 MXML简介2.2 MXML语法基础与简单控件2.3 ActionScript3.02.4 常用组件及布局管理器MXML简介2.1 MXML简介MXML是由Flex引入的，是用来描述Flex应用程序界面的语言。 MXML简介2.1.1 什么是MXMLMXML基于XML，是用来描述用户界面的语言。MXML遵循W3C XML标准，所以也可以把MXML看做普通的XML文件。下面就是一个MXML例子，包含标签、属性和命名
2、控件等。 注意：与HTML有以下不同点1.MXML借助XML的规范拥有更强的结构，更少的语法歧义。2.MXML引入的很丰富的标签集，如DataGrid、Tree和Menu等，并且还可以自定义标签。3.MXML定义的用户界面用Flash播放器运行，相对传统的基于HTML、页面为中心的Web应用而言，更具有吸引力。MXML简介2.1.2 MXML与标准MXML中融合了众多的标准，这些标准分别是XML、事件模型、Web服务、Java、HTTP、图像和CSS。 1.XML标准Flex程序采用XML文档格式。XML文档使用标签来定义结构化信息以及他们之间的关系。在MXML中，定义了一个程序的根标签。在标
3、签的子标签中定义程序的其他部。2.事件模型标准Flex事件模型借鉴了文档对象模型W3C DOM3事件规范模型。DOM3定义一个事件系统，这个系统允许事件监听器注册为平台中立与语言中立，通过一个树结构来描述事件流，并且为每一个事件提供了基本的脉络信息。MXML提供了标签允许指定应用或者组件代码来处理事件。例如，在下面的例子中click事件出发后，弹出提示框。MXML简介3.Web服务标准Flex提供了MXML标签与Web服务进行交互。Web服务描述语言文档（WSDL）中定义了交互的接口WSDL是一个Web服务理解的消息描述的标准格式，包括消息响应的格式、Web服务支持的协议以及消息发送的目的地。
4、4.Java标准Flex提供了MXML标签用来与服务器端的Java对象进行交互，包括普通的Java对象、JavaBean以及EJB，并提供Flex中变量与Java变量的对应。5.HTTP标准Flex提供了MXML标签用来发送标准的HTTP GET或POST请求，并且使用HTTP响应返回的数据，进行响应的处理。MXML简介6.图像标准Flex提供了MXML标签用来在程序中使用JPEG、GIF和PNG格式的图像。Flex同时提供了标签用来在程序中导入SWF文件以及SVG文件。7.CSS标准MXML样式是由W3C的CSS标准来定义和使用的。CSS提供了一种机制可以用来定义文本格式以及在Flex组件上
5、实现的可视效果。目录2.1 MXML简介2.2 MXML语法基础与简单控件2.3 ActionScript3.02.4 常用组件及布局管理器MXML简介2.2 MXML语法基础与简单控件MXML遵循XML的标准，但对于XML中的标签、属性、文件结构等XML元素进行了相应的约束和扩展。 MXML简介2.2.1 标签MXML是一种描述Flex应用程序构造的XML语言。每个MXML文件应该以一个XML声明开始： 和其他XML语言一样，MXML包含元素（标签）和属性，对大小写敏感。但标签名称以大写字母开头，大小写混合，必须有相应的结束标签，如下所示。 也可以这样结束没有内容的标签，如下所示。MXML简
6、介2.2.2 属性属性以小写字母开头，大小写混合。属性必须包含在引号内。 除了click或initialize之类的事件属性外，其他属性都被编译器作为文本字符串处理。如果需要绑定数据或者强迫编译器执行表达式，可以将变量的部分用花括号括起来。大部分属性可以作为子标签。上面代码的等效代码如下。myArrayMXML简介2.2.3 文件结构描述应用程序的MXML文件必须有一个位于其他元素之外的Application标签，如下所示。 定义组件的MXML不一定都以Application标签开始，也可以将Flex的组件作为开始。如下在上面代码中的xmlns属性，声明了XML命名空间。命名空间可以让用户在单
7、个文档中使用多重XML语言，而避免混淆不同语言中的元素名称。这里定义的命名空间是标准的MXML类库，它必须包含在每个MXML文件中。MXML简介2.2.4 MXML文件中插入ActionScript方法时要用到标签，具体语法如下。 下面是一个在MXML文件中插入ActionScript的例子。在这个标签中应注意如下几点：1、标签要成对出现。2、不能在标签内定义任何的类或者接口，因为当前MXML文件就是一个类，ActionScript并没有想java一样支持内部类定义。3、CDATA标签主要用来告诉编译器标签内的内容不要被解释成MXML语法，而是ActionScript。4、标签必须定义在MXM
8、L文件根标签的层次，否则会出现编译器错误。在MXML文件中标签对象都是用id属性来标示的，一个标签对象只能有一个唯一的id。另外需要说明的是只有类的对象才可能有id，这个id就是当前类对象的名字。MXML简介2.2.5 简单控件用户界面常见的元素在Flex中都可以使用相应的组件实现。例如用户界面上常见的按钮，在Flex中对应有按钮控件（Button Control）。MXML简介2.2.5.1 按钮控件标签 按钮控件对应的MXML标签为。除继承UIComponents类的属性外，它还包括一些常用属性，如表所示。MXML简介例：如右图所示，单击按钮后回弹出一个提醒框。代码如下：代码说明如下：1、import mx.controls.Alert:由于单击按钮后弹出了Alert对话框，所以在定义对话框之前需要引用Alert类。2、click=“clickHandler(event)”：在单击按钮后，将click事件传递给clickHandler方法处理，将event作为参数传递过去了。MXML简介2.2.5.3 单选框和复选框 如果需要实现在众多的选项中进行选择时，可以考虑使用单选框控件(RadioButton Control)和复选框控件(CheckBox Control)。
