第一章 Flex是如何工作的 （1、2、3小节）

第一章 Flex 是如何工作的

该部分文档的内容是为用户提供关 于 Adobe ® Flex 工作机制的一个快速综述。通过本章节的学习，你可以创建你的第一 个 Flex 应用程序，并将它与你以前所熟悉 的 Web 开发技术进行比较，以领 会 Flex 的内涵和精髓。

第一节构建并运 行 Flex 应用程 序

Flex 是一个提供开发设计和运行支持的架构，它可以使开发人员创建利 用 Adobe® Flash® Player 9 作为前台的“富客户端互联网应用程 序 /rich Internet applications/RIA ”，以满足用户更为直观和极具交互性的在线体验。

开 发 Flex 应用程序的典型步骤如下（通常是这样） ：

1. 1. 选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等 ）
2. 2. 布置组件以设计用户界面 。
3. 3. 使用样式和主题来增强视觉方面的设计 。
4. 4. 添加动态行为（例如程序部件之间的相互作用） 。
5. 5. 定义并连接所需的数据库服务 。
6. 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 文件中的样式块中进行定义；在组件的实例中进行设置。

1. 5. 图形资 源 与很多应用程序一样 ， Flex 包含了各种各样的图形资源，如图标和图象 。
2. 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. 1. 创建一个数据库（ 如 MySQL ） 。
2. 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> ...

通过设 置 dataField 属性，项目数据 （ name 和 price ）作为数据栅格中每一列的数据。

在运行时加载数据

你还可以 在 Flex 程序开始运行时加载数据，就象随后所示，在 HTTPService 中向某个特定 的 URL 发送一个请求 ：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="productsRequest.send() " >

当你 将 creationComplete 方法添加到应用程序标签里后，数据会在运行时进行加载并交于数据驱动控制（在这个例子中是数据栅格）。

你还可以 将 HTTPService 请求添加到一个控制事件上而不是程序里的标签中，就象如下所示 ：

<mx:Button x="50" y="8" label="Get Data" click="productsRequest.send();" />

Flex 提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调用、数据服务、或者其它企业级技术来操纵和管理数据。

第三节关 于 Flash Player 安全性方面的问题

出于安全方面的考虑，在客户端 的 Flash Player 中运行的应用程序，只有在满足如下条件之一的情况时才能访问远程的数据源， ：

1. 应用程序所编译 的 SWF 文件与远程数据源位于同一个域中 。

1. 2. 使用代理 （ proxy ），并且你 的 SWF 文件位于和代理相同的服务器上 。 Adobe Flex Data Services 为 Flex 应用程序提供了一个完整的代理管理系统。同时，你还可以通过使用一 种 web 脚本语言， 如 ColdFusion 、 JSP 、 PHP 或 者 ASP 来创建一个简单的代理服务 。
2. 3. 安 装 crossdomain.xml （跨域策 略 /cross-domain policy ）文件在数据源的宿 主 Web 服务器上 。 crossdomain.xml 文件允许位于其它域中 的 SWF 文件对数据源的访问。