FLEX

FLEX
2009年12月04日
　　[b]注意：本资料自供参考[/b]
　　[b] [/b]
　　[b] [/b]
　　[b]第一章 [/b][b]Flex[/b][b] [/b][b]是如何工作的[/b]
　　该部分文档的内容是为用户提供关于Adobe®Flex 工作机制的一个快速综述。通过本章
　　节的学习，你可以创建你的第一个Flex 应用程序，并将它与你以前所熟悉的Web 开发技术
　　进行比较，以领会Flex 的内涵和精髓。
　　[b]第一节 [/b][b]构建并运行[/b][b]Flex [/b][b]应用程序[/b]
　　Flex 是一个提供开发设计和运行支持的架构，它可以使开发人员创建利用Adobe®
　　Flash® Player 9 作为前台的“富客户端互联网应用程序/rich Internet applications/RIA”，以满
　　足用户更为直观和极具交互性的在线体验。
　　[b]开发 [/b][b]Flex [/b][b]应用程序的典型步骤如下（通常是这样）：[/b]
　　1. 选取一系列预先定制好的、用于设计应用程序界面的组件（如表格、按钮等等）
　　2. 布置组件以设计用户界面。
　　3. 使用样式和主题来增强视觉方面的设计。
　　4. 添加动态行为（例如程序部件之间的相互作用）。
　　5. 定义并连接所需的数据库服务。
　　6. 将源代码编译成SWF 文件，然后在Flash Player 中运行。
　　[b]一个典型的 [/b][b]Flex [/b][b]应用程序包括如下元素：[/b]
　　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 数据资源，等等。
　　[b]Flex [/b][b]应用程序是如何编译和发布的：[/b]
　　所有的元素都被编译或连接到你的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 结构的网络应用程
　　序的开发。
　　[b]MXML[/b]：[b]一切开始的地方[/b]
　　你可以在MXML 中使用Flex 所提供的组件来定义用户界面。这里有一个主MXML 程
　　序文件的例子：
　　
　　
　　
　　
　　
　　
　　
　　如果你对XML 已经很熟悉了，就能一眼识别出这个例子的格式。MXML 代码的头两
　　行包含了版本号、编码、以及命名空间的信息，文档的主体包含的是程序的具体内容。
　　Flex 应用程序所有的具体内容都被放在标签对中。同时，你还可以在
　　父标签对中嵌套其它的子标签对（译者注：反正标签是成对出现的，这点一定要记住）。
　　该例子创建了一个简单的程序，它在屏幕上显示“Say hello to Flex！”的文字。在该程
　　序中，声明了TextArea 和Button 组件，并设置了它们相应的text 和label 属性。
　　备注：在MXML 文件中的每个标签都有前缀mx，它是Flex 的设计命名空间。
　　程序被编译后运行，如下图所示：
　　[b]第二节连接数据[/b]
　　[b] [/b]
　　请记住，在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 等）。
　　[b]连接外部数据源[/b]
　　对于 PHP 所生成的XML 格式数据，你可以使用HTTPService 组件来请求获取数据，
　　就象这样：
　　
　　[b][/b]
　　[b]...[/b]
　　[b] [/b]
　　HTTPService 组件定义了一个请求ID，你将使用这个ID 来控制提供数据的URL 或者
　　服务器与数据之间的绑定。
　　[b]外部数据与数据驱动控制的绑定[/b]
　　通过数据与数据驱动控制（data-driven control）的绑定，你就可以处理HTTPService
　　的结果（XML 数据），就象这样：
　　
　　
　　
　　
　　
　　
　　数据绑定的语法显示在数据控制的dataProvider 属性中（在波浪形的括号里），它包含了HTTPService 请求ID、lastResult 方法、以及XML 文件的数据结构。在这个例子中，XML数据源的数据结构看起来就象这样：
　　
　　
　　
　　Mobile Phone
　　$199
　　
　　
　　Car Charger
　　$34
　　
　　...
　　通过设置dataField 属性，项目数据（name 和price）作为数据栅格中每一列的数据。
　　[b]在运行时加载数据[/b]
　　你还可以在Flex 程序开始运行时加载数据，就象随后所示，在 HTTPService 中向某个
　　特定的URL 发送一个请求：
　　
　　当你将creationComplete 方法添加到应用程序标签里后，数据会在运行时进行加载并交
　　于数据驱动控制（在这个例子中是数据栅格）。
　　你还可以将HTTPService 请求添加到一个控制事件上而不是程序里的标签中，就象如下所示：
　　
　　Flex 提供许多方法去连接、管理、格式化、以及校验数据。你可以通过使用远程程序调
　　用、数据服务、或者其它企业级技术来操纵和管理数据。
　　しい