MXML与Flex界面(基础篇).ppt

第二讲 MXML与Flex界面(基础篇) 主讲人——王森 目 录 2.1 MXML简介 2.2 MXML语法基础与简单控件 2.3 ActionScript3.0 2.4 常用组件及布局管理器 * 目 录 2.1 MXML简介 2.2 MXML语法基础与简单控件 2.3 ActionScript3.0 2.4 常用组件及布局管理器 * MXML简介 2.1 MXML简介 MXML是由Flex引入的，是用来描述Flex应用程序界面的语言。 * MXML简介 2.1.1 什么是MXML MXML基于XML，是用来描述用户界面的语言。MXML遵循W3C XML标准，所以也可以把MXML看做普通的XML文件。下面就是一个MXML例子，包含标签、属性和命名控件等。 ?xml version=1.0 encoding=utf-8? s:Application xmlns:fx=/mxml/2009 xmlns:s=library:///flex/spark xmlns:mx=library:///flex/mx minWidth=955 minHeight=600 /s:Application 注意：与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中，mx:Application定义了一个程序的根标签。在mx:Application标签的子标签中定义程序的其他部。 2.事件模型标准 Flex事件模型借鉴了文档对象模型W3C DOM3事件规范模型。DOM3定义一个事件系统，这个系统允许事件监听器注册为平台中立与语言中立，通过一个树结构来描述事件流，并且为每一个事件提供了基本的脉络信息。MXML提供了标签允许指定应用或者组件代码来处理事件。例如，在下面的例子中click事件出发后，弹出提示框。 s:Button click=mx.controls.Alert.show(Hello)/ * MXML简介 3.Web服务标准 Flex提供了MXML标签与Web服务进行交互。Web服务描述语言文档（WSDL）中定义了交互的接口WSDL是一个Web服务理解的消息描述的标准格式，包括消息响应的格式、Web服务支持的协议以及消息发送的目的地。 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组件上实现的可视效果。 * 目 录 2.1 MXML简介 2.2 MXML语法基础与简单控件 2.3 ActionScript3.0 2.4 常用组件及布局管理器 * MXML简介 2.2 MXML语法基础与简单控件 MXML遵循XML的标准，但对于XML中的标签、属性、文件结构等XML元素进行了相应的约束和扩展。 * MXML简介 2.2.1 标签 MXML是一种描述Flex应用程序构造的XML语言。每个MXML文件应该以一个XML声明开始： 和其他XML语言一样，MXML包含元素（标签）和属性，对大小写敏感。但标签名称以大写字母开头，大小写混合，必须有相应的结束标签，如下所示。 也可以这样结束没有内容的标签，如下所示。 ?xml version=1.0? ?xml version=1.0 encoding=utf-8? s:ComboBox/s:ComboBox s:ComboBox/ * MXM