译者声明
1. 请大家在转载和使用时保持本文的完整性。
2. 本文所有资料均来自 Flex 官方文档，其英文版权归 Adobe 公司所有。
3. 文中某些内容根据译者的理解稍作改动，因此与原版英文在文字上不完全一
致。同时，由于译者水平有限，翻译不妥之处请大家多多见谅。
重庆大坪 刘刚
第一章 Flex是如何工作的
该部分文档的内容是为用户提供关于 Adobe®Flex 工作机制的一个快速综述。通过本章
节的学习，你可以创建你的第一个 Flex 应用程序，并将它与你以前所熟悉的 Web 开发技术
进行比较，以领会 Flex 的内涵和精髓。
第一节 构建并运行 Flex 应用程序
Flex 是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用 Adobe®
Flash® Player 9 作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”，以满
足用户更为直观和极具交互性的在线体验。
开发 Flex 应用程序的典型步骤如下（通常是这样）：
1. 选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）
2. 布置组件以设计用户界面。
3. 使用样式和主题来增强视觉方面的设计。
4. 添加动态行为（例如程序部件之间的相互作用）。
5. 定义并连接所需的数据库服务。
6. 将源代码编译成 SWF 文件，然后在 Flash Player 中运行。
一个典型的 Flex 应用程序包括如下元素：
1. Flex framework
Adobe® Flex 2 framework 包含了创建 RIA 所需要的所有组件，它们是：用于应用程序
布局规划的容器；针对用户界面和从用户处获取数据的控制（例如文本框和按钮）；广泛支
持的数据绑定、数据格式化、以及有效值验证；事件驱动的开发模式。Flex framework 被包
含在公用组件库（SWC）文件中。
2. MXML
每个 Flex 应用程序至少包含有一个 MXML 文件，它被作为该程序的主文件。MXML
是一种标记语言，它是基于 XML 的一种实现，用来创建 Flex 应用程序。你可以使用它去声
明程序中所使用的标签结构的定义。
3. ActionScript 3.0
你可以使用 ActionScript 3.0 为应用程序添加动态行为，它是基于 ECMAScript 的一种实
现，类似于 JavaScript。你可以将 ActionScript 作为一个脚本块，在 MXML 文件中直接进行
添加；或者创建一个单独的 ActionScript 文件，然后将它们导入到 MXML 文件中。
4. CSS
你可以通过设置组件的属性（properties）来改变组件（按钮、列表框等）的视觉样式。
例如，按钮组件有一个 fontFamily 属性，你可以使用它来进行字体的设置。样式的属性通常
有四种方法来进行控制：通过主题(theme)；在 CSS 文件中进行定义；在 MXML 文件中的样
式块中进行定义；在组件的实例中进行设置。
5. 图形资源
与很多应用程序一样，Flex 包含了各种各样的图形资源，如图标和图象。
6. 数据
一些组件被使用来进行数据显示（combo box 或者 data grid）的工作。同时，你还可以
使用各种方式来将这些组件与数据联系起来，如使用数组、收集对象、数据模型、以及外部
XML 数据资源，等等。
Flex 应用程序是如何编译和发布的：
所有的元素都被编译或连接到你的 Flex 应用程序中，就象下图所示：
Flex 应用程序被编译成一个 SWF 文件，然后在 Flash Player 下运行。当一个源代码被
编译时，它就被转换成 ActionScript 类（译者注：这正是 Flex 精髓的地方之一，即提供从
MXML 到 ActionScript 的转换），并与图形和其它资源合并到 SWF 文件里。在运行时，SWF
文件与所需的外部库、服务和数据源进行交互。
一般的 Flex 应用程序并不需要服务器端所提供的支持。因此，你可以在你的本地计算
机上编译它们，然后在 Web 服务的 HTML 页面中发布给你的用户。
当然，你还可以将 Flex 与 Adobe® Flex Data Services 2、Cold Fusion Flash Remoting
Service、或者其它 Java 和 J2EE Service 服务器技术结合起来，进行 B/S 结构的网络应用程
序的开发。
MXML：一切开始的地方
你可以在 MXML 中使用 Flex 所提供的组件来定义用户界面。这里有一个主 MXML 程
序文件的例子：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Panel>
<mx:TextArea text="Say hello to Flex!" />
<mx:Button label="Close" />
</mx:Panel>
</mx:Application>
如果你对 XML 已经很熟悉了，就能一眼识别出这个例子的格式。MXML 代码的头两
行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。
Flex 应用程序所有的具体内容都被放在<mx:Application>标签对中。同时，你还可以在
父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。
该例子创建了一个简单的程序，它在屏幕上显示“Say hello to Flex！”的文字。在该程
序中，声明了 TextArea 和 Button 组件，并设置了它们相应的 text 和 label 属性。
备注：在 MXML 文件中的每个标签都有前缀 mx，它是 Flex 的设计命名空间。
程序被编译后运行，如下图所示：
第二节 连接数据
请记住，在 Flex 应用程序中对数据的操作最重要的事情是：Flex 应用程序并不直接与
一个数据库进行连接。因此，Adobe® Flex Builder 2 没有提供直接连接数据的工具。你可以
通过使用 MXML 和 ActionScript 代码来操作和管理数据。
在 Flex 中，你可以使用几种方法去操纵和管理数据，它们大多数相关的内容已经超出
了在这里进行简要介绍的范围（更多的信息，请查看后面的章节）。不管怎样，请想象一种
可以连接外部数据的方法，随后的例子将演示与 XML 结构的数据进行连接。
数据的生成
因为 Flex 应用程序并不直接与一个数据库进行连接，所以你需要使用某种类型的服务
来支持对数据的使用。在随后的例子中，将使用 HTTPService 组件从 PHP 所产生的一个 XML
文件中获取数据。
连接数据库的第一步是生成将在 Flex 程序中使用到的数据。在与 PHP 的应用中，你将
采用如下的步骤：
1. 创建一个数据库（如 MySQL）。
2. 编写一个 PHP 脚本连接 MySQL 数据库并生成 XML 格式的数据。
这些步骤同样适合于在其它工作平台上生成的数据（如 ASP.NET、 JSP 等）。
连接外部数据源
对于 PHP 所生成的 XML 格式数据，你可以使用 HTTPService 组件来请求获取数据，
就象这样：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:HTTPService
id="productsRequest"
url="http://www.somesite.com/products.php" />
...
HTTPService 组件定义了一个请求 ID，你将使用这个 ID 来控制提供数据的 URL 或者
服务器与数据之间的绑定。
外部数据与数据驱动控制的绑定
通过数据与数据驱动控制（data-driven control） 的绑定，你就可以处理 HTTPService
的结果（XML 数据），就象这样：
<mx:DataGrid x="20" y="80" id="productGrid" width="400"
dataProvider="{productRequest.lastResult.products.items}" >
<mx:columns>
<mx:DataGridColumn headerText="Name" dataField="name" />
<mx:DataGridColumn headerText="Price" dataField="price" />
</mx:columns>
</mx:DataGrid>
数据绑定的语法显示在数据控制的 dataProvider 属性中（在波浪形的括号里），它包含
了 HTTPService 请求 ID、lastResult 方法、以及 XML 文件的数据结构。在这个例子中，XML
数据源的数据结构看起来就象这样：
<XML>
<products>
<item>
<name>Mobile Phone</name>
<price>$199</price>
</item>
<item>
<name>Car Charger</name>
<price>$34</price>
</item>
...
