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

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