第三章 Flex的基础 （5-6小节）

第五节使 用 MXML

MXML 是一 种 XML 语言，你可以使用它去布 置 Adobe Flex 应用程序的用户界面。你还可以使 用 MXML 去定义其它的方面，如存取服务器端的数据，将用户组件与服务器端数据源进行绑定等 。

MXML 看起来与你所熟悉 的 HTML 很类似，然而 ， MXML 更为结构化，并提供更为丰富的标签集 。 MXML 与 HTML 之间最大的不同之处在于， 以 MXML 所定义的应用程序将被编译 成 SWF 文件并 由 Flash Player 进行渲染，它提供 比 HTML 程序更为丰富的和动态的用户界面。

你可以 将 MXML 应用程序编写成一个文件或多个文件。同时 ， MXML 还支持 以 MXML 和 ActionScrip 所定制的组件。

编写一个简单的应用程序

随后的简单程序显 示 “ Hello World ”，该例子包含 了 <mx:Application> 标签和两个子标签，即 <mx:Panel> 标签和 <mx:Label> 标签。 <mx:Application> 是所 有 Fles 应用程序的根标签 。 <mx:Panel> 标签定义了一个面板容器，它包括了标题栏、状态信息、边界、以及容纳子对象的内容区域 。 <mx:Label> 标签中使用了一 个 Label 控件用来显示文本 。

<?xml version="1.0"? > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Panel title="My Application" paddingTop="10" paddingBottom="10 " paddingLeft="10" paddingRight="10" >

<mx:Label text="Hello World!" fontWeight="bold" fontSize="24" />

</mx:Panel> </mx:Application>

将文件保存 为 hello.mxml 。请注意 ， MXML 文件的后 缀 .mxml 必须是小写。然后编译并运行所生成 的 SWF 文件，结果如下所示 ：

MXML 标签 与 ActionScript 类的关 系

Adobe 是通 过 ActionScript 类库来实 现 Flex 应用程序的。类库包括了组件（容器和控件），管理类，数据服务类等等。事实上，你是在使用类库所支持 的 MXML 和 ActionScript 来开 发 Flex 应用程序 。

MXML 标签 与 ActionScript 类或类的属性相对应 。 Flex 剖 析 MXML 标签并编译成相应 的 SWF 文件。举个例子 ， Flex 提 供 ActionScript 按钮类 /Button class 来定义按钮控件。 在 MXML 中，你使用如 下 MXML 语句来创建一个按钮控件 ：

<mx:Button label="Submit" />

当你使 用 MXML 标签来声明一个控件时，事实上你就创建了相应那个类的一个实例对象。上 述 MXML 语句创建了一个按钮对象，并初始化它 的 label 属性值。

与 MXML 相关的技术标准

与 MXM 相关的技术标准有 ：

1. XML 标准 。 XML 文档使用标签去决定结构化信息的内容，以及它们之间的关系 。

2. 事件模型标准 。 Flex 事件模型是文档对象模 型 /Document Object Model （ DOM ）第三级事件的一个子集，该模型是 由 World Wide Web Consortium （ W3C ）起草制定 。

3. Web 服务标 准 Flex 提供与服务器交互 的 MXML 标签，遵循 了 Web 服务描述语 言 /Web Services Description Language （ WSDL ）的规则。具体包括了简单对象访问协 议 /Simple Object Access Protocol （ SOAP ）和超文本传送协 议 /Hypertext Transfer Protocol （ HTTP ） 。

4. Java 标 准

Flex 提供了与服务器 端 Java 对象交互 的 MXML 标签，包 括 plain old Java objects （ POJOs ）， JavaBeans 和企业 级 /Enterprise JavaBeans （ EJBs ） 。

5. HTTP 标 准

Flex 提供了相应 的 MXML 标签去支持标准 的 HTTP GET 和 POST 请求，以及 对 HTTP 返回数据的处理 。

6. 图形标 准

Flex 还提供了相应 的 MXML 标签去使 用 JPEG ， GIF 和 PNG 图象。 Flex 还能够 将 SWF 文件 和 Scalable Vector Graphics （ SVG ）文件导入到应用程序中 。

7. 层叠样式表标 准 MXML 样式的定义和使用遵循 了 W3C Cascading Style Sheets （ CSS ）标准 。

第六节使 用 ActionScript Adobe Flex 开发人员还可以使 用 ActionScript 去扩展应用程序的功能性 。 ActionScript 提供了 比 MXML 更为低层的、更细致的、更为强大的功能。

关 于 ActionScript

ActionScript 是一种运用 于 Adobe Flash Player 的编程语言，它 与 core JavaScript 非常类似。 ActionScript 3.0 的特性完全实现 了 ECMAScript for XML (E4X) 。

MXML 程序中 的 ActionScript

ActionScript 极大地扩展 了 Flex 开发人员的能力。通过使 用 ActionScript ，你可以定义事件监听器，获取或设置组件的属性，处理回调功能，创建新的类、包和组件等。

你可以运用如下所示方法 在 Flex 中使 用 ActionScript ：

1. 1. 在 <mx:Script> 标签中插 入 ActionScript 代码块 。
2. 2. 调用存储 在 system_classes 目录结构中的全 局 ActionScript 功能函数 。
3. 3. 引 用 user_classes 中的外部类和包来处理更为复杂的任务 。
4. 4. 使用标准 的 Flex 组件 。
5. 5. 使 用 ActionScript 类扩展已有的组件 。
6. 6. 使 用 ActionScript 创建新的组件 。
7. 7. 在 Flash 创建环境中创建新的组件 （ SWC 文件） 。

ActionScript 的编 译

Flex 应用程序的逻辑实现是 由 ActionScript 类， MXML 文件， SWF 文件，外部组件共同组成。最后 由 Flash Player 下 载 SWF 文件并在客户端机器上进行运行。

你可以 在 MXML 文件中使 用 ActionScript 代码段 。 Flex 编译器将 主 MXML 文件和它的子文件变换成一个单独 的 ActionScript 类。同时，你还可以 在 MXML 文件中导 入 ActionScript 类，这些类会被添加到最后 的 SWF 文件中。

随后的例子显示了源文件是如何生 成 SWF 文件，并通 过 J2EE 服务器发送给客户端的：

在 Flex 应用程序中使 用 ActionScript

当你编写一 个 Flex 应用程序时，使 用 MXML 去布置用户的界面，使 用 ActionScript 去处理与用户的交互。你可以使用不同的方法 将 ActionScript 和 MXML 混合在一起。

在 Flex 应用程序中使 用 ActionScript ，你可以 在 <mx:Script> 标签中添加脚本块，或者包含外部 的 ActionScript 文件。另外，你还可以 在 MXML 程序中导入外部的类文件或整个类的包。

创 建 ActionScript 组件

通过使 用 ActionScript 并 在 Flex 程序中进行引用的方式，你可以创建可复用的组件。使 用 ActionScript 所创建的组件可以包含图形元素、定制的商业逻辑、或扩展已存在 的 Flex 组件。

例如，你可以定义一个定制的按钮，它 由 Flex 的按钮控件派生出来，就象这样 ：

package myControls { public class MyButton extends Button { public function MyButton() {

...

}

...

} }

这个例子中，你 在 MyButton.as 文件里编写 好 MyButton 控件，并将文件保存 到 Flex 应用程序的根目录 的 myControls 子目录下。然后 在 Flex 应用程序中引用你定制的按钮控件，如 在 MyApp.mxml 文件里，就象这样 ：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

xmlns:cmp="myControls.*" >

<cmp:MyButton label="Jack"/>

</mx:Application>

本例中，你首先定 义 cmp 命名空间，用它来放置你定制的组件，然后使用该命名空间为前缀 的 MXML 标签对组件进行引用。