集成Flex与Ajax应用程序

集成Flex与Ajax应用程序2010-11-23 IBM Brice Mason传统的Ajax开发依旧是实现富 Internet 应用程序（RIA）的最主要方法。但是，Adobe® Flex 的流行度不容忽视。本文将介绍 Adobe Flex Ajax Bridge （FABridge），这是让您可以采用轻松而一致的方法集成与 Flex 内容的代码库。阅读完本文后，您将能够利用通过 Flash 资源获得的丰富功能。

构建 Ajax 应用程序已被证明是提供优秀应用程序的一致方法。但是， Adobe Flex 的流行不容忽视。在不断努力实现最佳用户体验时，我们经常需要面对一项困难的任务：将嵌入到 Ajax 应用程序中的基于 Flash 的资源集成在一起。本文将讨论如何使用 FABridge 将 Flash 内容与现有 Ajax 内容集成在一起，FABridge 是由 Adobe开发的代码库，用于处理这项特殊任务。

作为一名 Ajax开发人员，现在是个特殊时刻。我们始终站在第一线，准备迎合用户并让他们对我们构建的应用程序留下最佳的第一印象。随着 Web 标准不断演进并且越来越多的供应商决定执行这些标准，我们的工作变得越来越轻松，使我们可以将精力集中在用户体验上。JavaScript 框架（例如 Ext JS、jQuery和 Prototype）的进一步推进也使我们很少担心代码是否可以跨要求支持的平台工作，因此有更多时间进行创新。

虽然现在我们可以使用的工具、技术和资源的确越来越多，但是推动 Flash开发的开发方法也在发生变化。对于许多工作室，开发流程将涉及用户界面（UI）组，从而实现支持在服务器端生成的应用程序的设计。使用现在已有的JavaScript 框架，我们正朝着客户端应用程序开发的方向发展。但是，Flex 平台 — 生成 Flash 应用程序的免费开源框架 — 的出现将我们进一步引入应用程序开发的竞技场。这类创新带给我们的好处在于客户端，但是必须确保充分、仔细地处理它与当前架构的集成。

在介绍展示如何使用 Ajax和Flex 资源的代码样例之前，您必须了解必备的工具和技巧：

我使用 Ext JS JavaScript 库生成了本文中的Ajax 样例，因此需要下载包含库和支持文档的.zip 文件。

接下来，获取拥有调试功能的Adobe Flex 3 SDK和Adobe Flash Player 9 免费副本（如果您还没有的话）。

虽然本文不作要求，但是您至少还需要查看 Adobe Flex Builder 3 的试用版本，这是基于 Eclipse 的IDE，除了高级调试和分析功能之外，您还可以快速地进行 Flex 应用程序开发（请参阅参考资料）。

最后，了解 PHP 的工作知识十分有帮助。

集成问题

如果您期望用 Flex 资源替代所有 Ajax 内容，您的任务将更简单一些。但是，这是一种不太可能而且通常不切实际的方法，因为经常需要保留传统的Ajax 功能。幸运的是，您完全可以利用两种环境的优点来生成丰富、集成的应用程序。

将数据从 Flash 容器（HTML/JavaScript 代码）传递到 ActionScript 代码中有许多种简单方法，包括使用查询字符串和 <param> 标记。但是，这种方法仅限于将数据传递到容器中。一种功能更强大的技术是使用 ExternalInterface 类，这是一个应用程序编程接口（API），它用于代理 ActionScript 与 JavaScript 语言之间的通信。清单 1 中的示例最佳演示了 ExternalInterface 的使用：

清单 1. ExternalInterface 示例

// ActionScript code
function exposed（）:String
{
  return "Hello, JavaScript！";
}
ExternalInterface.addCallback（ "getActionScript", exposed ）;
// HTML/JavaScript code
<script language="JavaScript">
var result = flashObject.getActionScript（）;
</script>
<object id="flashObject" ...>
  <embed name="flashObject" ... />
</object>

清单 1 演示了如何使用 ExternalInterface 类注册 ActionScript 函数，以便 JavaScript 代码可以调用该函数。您可以通过先定义 ActionScript 函数，然后使用 addCallback（）方法将该函数公开给要执行的JavaScript 来完成操作。在 HTML 端，只需获得 Flash 容器的句柄并调用该函数，该函数是使用 addCallback（）方法的第一个参数命名的。虽然此演示主要是将函数公开给 JavaScript 代码，但是您可以使用另一种方式：使用 ExternalInterface 类的call（）方法。

ExternalInterface 类可以十分强大，但是实现该类有很大的缺点。要使用 ExternalInterface，必须可以编写代码以实现 ActionScript和JavaScript 环境。这不但要求额外的技巧，而且需要翻倍的工作量。在这种情况下，维护代码以及两个非常健壮的技能集可能会变得很困难。

为了解决针对 Flash 外部 API 的开发限制，Adobe 发布了 FABridge。Flex SDK 附带的FABridge 是用于公开 Flash 内容以编写浏览器脚本的小型库，并且它可以在大多数主要浏览器平台中工作。使用 FABridge，现在实质上不再需要直接实现 Flash 外部 API 所需的管道代码。此外，实现桥接所需的技能也不再健壮。作为一名 JavaScript开发人员，您只需能够了解哪些 ActionScript 属性和方法可用。让我们从演示 FABridge 功能的一些示例开始。