Flex 4 组件开发章节摘录：理解 Flex

Mike Jones 由 Addison-Wesley Professional 出版 ISBN-10: 032160413X ISBN-13: 9780321604132

本章还包括如何安装和配置 Flash Builder 以进行组件开发。

Flex

最初，Flex 是一款 J2EE 应用服务器，“驻留”在服务器上，它将纯文本文件处理并生成已编译的内容（SWF 文件），当用户请求相关文件时。这可以，但也有其局限性。它价格昂贵——非常昂贵。此外，对于开发者来说，这是一项相当小众的技能。除非您在一个足够大的组织工作，能够购买 Flex 的副本，或者有一个愿意这样做的客户，否则您不太可能获得学习 Flex 服务器产品开发的机会。尽管如此，Flex 已经成为富媒体报告和数据可视化 Web 应用程序的首选技术；然而，这是一项高成本项目，因此从宏观上看，Flex 的市场并非巨大。

最终，Adobe（当时是 Macromedia）做出了一个里程碑式的决定。它意识到，作为一个仅限服务器端的产品，Flex 不太可能创下销售记录，或者更重要的是，提供一种普及的富互联网应用程序（RIA）开发和部署方式。Adobe 没有选择让 Flex 停止生命周期（End of Life）¹，而是将 Flex 从服务器端解决方案重新定位为开发工具集。这使得开发者能够创建、测试和部署完全用 Flex 构建的应用程序，而无需原始昂贵的服务器端产品。这一决定可能彻底改变了我们开发和部署 Web 应用程序的方式。

什么是 Flex？

简而言之，Flex 是一个基于 ActionScript 3.0 构建并利用 ActionScript 3.0 的应用程序框架，它利用 Flash Player 作为其在 Web 上的部署平台。最近，它还可以利用 Adobe Integrated Runtime (AIR) 的功能来开发桌面应用程序。

为了使开发过程尽可能流畅和高效，Flex 允许您使用 ActionScript 3.0 创建应用程序，或将其与 MXML 结合使用。MXML 是 XML 语言的一个子集，因此符合适用于 XML 的基本结构和规则。MXML 相对于纯 ActionScript 的优势在于两点。首先，您不需要成为 ActionScript 大师即可创建 Flex 应用程序，因为 MXML 承担了大部分复杂性，让您可以专注于开发您的应用程序。其次，由于其分层结构，MXML 在结构和关系方面易于理解，这使得用户界面的设计和开发比 ActionScript 更高效，概念上更容易可视化。

从纯粹的开发角度来看，Flex 还有额外的优势，特别是对于团队协作或协同工作的开发者。通过利用 MXML 的强大功能，团队中的一部分人可以快速开发应用程序的图形用户界面（GUI）元素，而无需与实际逻辑耦合。这有几个优点，例如允许您使用实际的 GUI 作为任何原型设计和交互式客户端概念的基础，而无需完全集成应用程序的全部功能。与 ActionScript 相比，MXML 易于重构，并且您通常需要用 ActionScript 实现的许多低级功能已经内置，无论是布局管理、样式、效果、事件，还是我个人最喜欢的，工具提示（Tooltips）。

一个常见的误解是，MXML 和 ActionScript 是 Flex 使用的两种互斥的语言。事实并非如此。MXML 只存在于“编译器眼中”。当您编译 Flex 应用程序时，任何 MXML 最初都会被编译/转换为 ActionScript，然后再最终编译成 SWF。默认情况下，您不会看到这个 ActionScript 阶段，因为编译器会在后台执行此操作，并在创建最终 SWF 后将其丢弃。如果您想查看 MXML 在转换为这种中间 ActionScript 阶段时是什么样子，可以设置一个编译器标志来保留生成的 ActionScript。（有关一些编译器命令和标志，请参阅附录 A，“Flex 资源”。）

Flex SDK

Flex 软件开发工具包（SDK）是 Flex 开发的核心。它包含 Flex 框架，该框架以源代码（以 ActionScript 类的形式）和编译库（以 SWC 的形式）提供。（有关 SWC 格式的更多信息，请参阅第 12 章，“Flex 库项目”。）SDK 还包含示例文件以及相关的独立和浏览器插件调试 Flash Player。此外，更重要的是，它包含 mxmlc 编译器，用于编译 Flex 应用程序，以及 compc 编译器，用于创建 SWC。（同样，有关 compc 和 SWC 格式的详细信息，请参阅第 12 章。）

Flex SDK 可免费下载和使用作为开发工具。但是，这是一个“warts and all”（不提供额外支持）的解决方案，要求您熟悉并能够通过命令行或自动化工具（如 ANT）执行应用程序。话虽如此，这是您开始开发 Flex 组件和应用程序所需的最低限度。

除了免费下载之外，Flex SDK 现在也是开源运动的一部分，因此您可以提交更新和错误修复来改进它。要做到这一点，请访问 http://opensource.adobe.com 并下载最新的 Flex SDK 版本。

命令行并不适合所有人，所以如果这一切听起来像个差事，不用担心。Adobe 意识到大多数开发者希望在一个专门的编辑器中开发 Flex 应用程序，因此它创建了 Flash Builder（以前称为 Flex Builder）。在我们继续讨论 Flash Builder 之前，让我们先看看关于 Flex 框架可能最冗长且最具争议的争论：Flex 与 Flash 的权衡。

Flex 开发与 Flash 创作

如果您正在阅读本文是因为您擅长 Flash 和 ActionScript，那么在继续之前，您需要了解一些事情。如前所述，Flex 本质上只是一组 ActionScript 3.0 类。因此，如果您将自己锁在一个房间里，除了 Flash Authoring 工具（或者一个文本编辑器）之外一无所有，您也可能能够制作出与 Flex 类似的东西。如果您真的下定决心，您甚至可能可以用 Python 或 Java 编写一些工具，让您可以使用一种源自 XML 的语言来快速轻松地定义应用程序的布局控件。问题是，您实际上不需要这样做；Macromedia/Adobe 已经完成了这项艰苦的工作并推出了 Flex。

另外，没有任何东西阻止您在 Flash 中创建内容并将其包含在 Flex 应用程序中。第 11 章，“使用 Flash Professional CS5 创建 Flex 组件”，将探讨如何为此目的利用 Flash。

Flash 与 Flex 辩论的大部分内容集中在开发工具上，主要是 Flash Builder 和 Flash（或官方称为 Flash Authoring）。为了区分，我的 Flex 指的是 Flex 框架；Flash Builder 指的是 Flex Authoring 工具；除非另有说明，Flash 指的是 Flash Authoring 工具。

Flash Builder 没有绘图工具或时间轴

Flash Builder 中的可视化工具与 Flash Authoring 工具不尽相同，因为它们针对的是不同的解决方案。Flash Authoring 工具目前主要面向更具视觉创造力的解决方案。另一方面，Flash Builder 更面向应用程序，但它同样富有创造性。Flash 拥有大量用于创建资源的视觉工具。Flash Builder 拥有可视化的布局系统，但它无法在视觉上创建内容，因为它没有可与 Flash 相媲美的工具集。Flash Authoring 有一个时间轴；Flex 框架技术上没有。这并不是说 Flex 不能随时间推移操纵内容；只是 Flex 使用编程方式来实现这一点。Flash 使用 ActionScript，并且可以导出向后兼容的内容以供早期版本的 Flash Player 使用。Flex 4.x 框架使用 MXML 和 ActionScript 3.0，因此仅针对 Flash Player 10 及以上版本。

Flex SWF 文件非常大

总的来说，Flex 应用程序的体积很大。这是因为 Flex 是基于框架的，因此需要这个框架来运行。然而，最近 Adobe 更新了 Flash Player，以便在用户的计算机上实现应用程序缓存，因此如果他们之前访问过使用该功能的网站，Flex 框架就会被下载并缓存在 Flash Player 中。然后，当他们访问您的 Web 应用程序时，只需要下载实际内容，而不是框架。Flex 应用程序的这一变化使得 Flex SWF 文件大小与纯 Flash Authoring SWF 文件大小相当。

Flash Builder 没有符号库

虽然 Flash Builder 没有符号库是事实，但它确实允许您创建简单的 MXML 对象（有时称为应用程序组件），这些对象在概念上与 Flash 的符号库非常相似。Flash Builder 相对于 Flash 符号的优势在于，由于其纯文本性质，在 Flex 应用程序中隐藏源代码的风险为零。这使得搜索比代码附加到符号或时间轴时丢失代码实例的风险更容易。

最终，它们都有自己的优点和缺点。这无关乎哪个更好，或者您能用 A 或 B 实现多少，这取决于您的“1337 S|<!11z”。更多的是选择适合您需求的技术和工具集，尽管这显然会是 Flash Builder 和 Flex 框架。

让我们详细了解一下 Flash Builder 并安装它，以便我们可以开始制作一些很酷的东西。

Flash Builder

当 Flex 最初出现时，它的开发环境是基于 Dreamweaver 的，代号为 Brady（灵感来自 Brady Bunch）²。Flash Builder 的第 2 版和第 3 版被称为 Flex Builder，以保持这个新开发工具和 Flex 框架之间的对称性。然而，因为 Flex Builder 可以用来创建不使用 Flex 框架的原生 ActionScript 应用程序，所以 Flex Builder 被重新命名为 Flash Builder，以配合 Flex 4 框架的发布，将其置于 Flash 平台之下，与 Flash CS5 和 Flash Catalyst 并列。

2. 最初，有一个名为 Partridge 的替代开发工具代号，它对 Java 开发者更友好，因为它基于 Eclipse 平台。然而，出于某种原因，Partridge 直到 Flex Builder 2 发布才得以实现，并且 Adobe 从服务器端开发 Flex 应用程序戏剧性地转向了客户端开发。随着 Flex 2 的出现，淘汰了最初受 Dreamweaver 启发但虽然可用但笨拙且更像 Dreamweaver 而非 Flash Builder 的 Flex 开发环境。

这实际上对您意味着什么？

Flash Builder 是一个集成开发环境（IDE），这意味着它提供了开发和部署 Flex 应用程序所需的所有工具。但是，如果我们只说到这里，那么它与 Flex SDK 并没有太大的区别。有趣的是，Flash Builder 实际上包含了 Flex SDK，并提供了一个更友好的工作流程，使 Flex 应用程序的开发更加容易，因为它提供了生产力工具和功能来协助您进行开发。

Flash Builder 基于 Eclipse 平台构建，提供两个版本：Standard 和 Premium。Premium 版本提供内存分析器、单元测试和网络监控。如果还不够，这些版本还有两个变体。您可以安装独立版本的 Flash Builder，或者如果您已经为其他开发需求使用 Eclipse 平台，则可以将 Flash Builder 作为插件安装到您的 Eclipse 副本之上。老实说，您选择如何安装 Flash Builder 完全取决于您，因为这两个选项之间没有其他区别。您需要做出的更重要的决定是您是否需要 Premium 版本提供的额外功能。此时，提及 Flash Builder 不像 SDK 那样免费，但它也不会让你破产，这是明智的。Flash Builder 的 Standard 版本可能是 Adobe 出售的最便宜的开发软件。

包装 Flex SDK

Flash Builder 可以使用多个版本的 Flex SDK，因此随着新版本的发布，您可以将它们集成到您的 Flash Builder IDE 中，并在全局和项目级别选择要使用的版本。Flash Builder 4 已预装 Flex 3.5 和 4.0 SDK。虽然您可以直接插入新版本的 SDK（例如，从 Adobe 的开源网站），但它不会为 Flash Builder 带来任何额外的功能、向导或工具，超出已有的功能；因此，不要将此视为升级 Flash Builder 的捷径。现在您已经了解了 Flash Builder 的基本构成和工作原理，让我们实际下载并安装它。

安装 Flash Builder

在 Windows 和 Mac OS X 上安装 Flash Builder 几乎是相同的。部分原因是 Eclipse 已经在这些操作系统上运行。为简洁起见，我将解释如何在 OS X 上安装 Flash Builder，并在适用的情况下，指出 Windows 上的关键区别。如前一节所述，Flash Builder 有两个变体：独立版和插件版。我将不详细介绍两者的安装，因为差别不大。但是，如果您已经使用 Eclipse 进行其他形式的 Web 或桌面软件开发，您可以显然选择是将 Flash Builder 作为该工作流程的一部分，还是将其作为独立版本单独使用。

下载 Flash Builder

Flash Builder 提供 60 天免费试用版，可直接从 Adobe 网站下载。下载量不大，但相当可观（约 500MB）。因此，您可能希望在阅读本章的同时开始下载，并在下载完成后，回顾“开始安装 Flash Builder”部分。

要安装 Flash Builder，您首先需要下载适用于您各自操作系统的 Flash Builder 安装程序。Windows 和 OS X 用户可以从 Adobe 的下载页面（www.adobe.com/go/flex_trial）下载。

从下拉框中选择您的操作系统，滚动到“下载”按钮，然后点击它开始下载免费试用版。如果您想收到一两封电子邮件以帮助您开始使用 Flex 框架，请在向下滚动页面时勾选相应的框。如果您想下载 Flash Builder 的插件版本而不是独立版本，请滚动到下载页面的底部；您会看到一个文本链接，将您带到插件页面。在那里，您可以以相同的方式下载。

开始安装 Flash Builder

下载完成后，找到安装程序并启动它。对大多数人来说，这就像双击一样简单。

当安装程序启动时，您会看到初始安装屏幕，其中包括最终用户许可协议（EULA），每个人——包括我自己——都会忽略并直接通过“接受”按钮点击（参见图 1.1）。为了不打破常规，请接受协议……前提是您同意它。然后继续到下一个屏幕。

在下一个屏幕上，您可以输入序列号或以试用模式运行 Flash Builder（参见图 1.2）。无论您选择哪个选项，都会出现一个语言选项的下拉列表。选择一种语言，然后点击“下一步”。

此时会出现 Adobe 登录屏幕（参见图 1.3）。这是一个可选屏幕，所以如果您不想登录 Adobe，只需点击“跳过”按钮。（登录可以帮助您访问帮助和其他功能，但您以后可以随时登录。）另一方面，如果您想登录或注册 Adobe ID，请选择相应的选项，并在通过身份验证后，点击“下一步”继续。

您已经完成了一半的安装程序设置。在图 1.4 所示的屏幕上，您选择要安装 Flash Builder 的位置。我个人来说，除非有某种行政原因或特殊情况需要您将其安装在其他文件夹中，否则只需点击“下一步”，让安装程序将 Flash Builder 安装在您计算机的默认安装目录中。

默认安装路径如下：

• Windows 32位: C:\Program Files\Adobe\Flash Builder 4
• Windows 64位: C:\Program Files (x86)\Adobe\Adobe Flash Builder 4
• Mac OS X: /Applications/Adobe Flash Builder 4

如果您满意，就该开始实际安装了。如果任何地方不正确或者您改变了对某个选项的主意，您可以使用“返回”按钮回到相关屏幕进行修改。在您进行更正后，只需点击“下一步”即可返回“安装选项”对话框。点击“安装”按钮开始实际安装，然后一边安装一边泡杯茶或咖啡。

在您享用完提神饮品后，安装很可能已经完成。（用时并不长，但如果您现在去拿饮料，就可以在不被打扰的情况下舒适地阅读本章的剩余部分。）如果一切顺利，您应该会看到“恭喜”屏幕（参见图 1.5）。通过点击“完成”按钮关闭安装程序。您刚刚成功安装了 Flash Builder，现在我们可以首次启动它了。

安装失败

如果您在安装过程中遇到问题或安装程序失败，请记下收到的错误消息，然后访问 Adobe 的 Flex 支持中心（www.adobe.com/support/flex/）。“安装帮助”选项卡很可能为您提供解决方案。不过，如今问题似乎很少，所以您应该不会有什么大问题。

启动 Flash Builder

作为安装后过程的一部分，安装程序在 Windows 上（开始 > 程序文件 > Adobe）放置了 Flash Builder 的快捷方式。在 OS X 上，安装程序会打开一个 Flash Builder 文件夹的 Finder 窗口，如果您愿意，可以为其创建一个别名。将来要打开 OS X 上的 Flash Builder，您会在“应用程序”目录中找到它。（如果您选择将其安装在其他位置，它会在您放置它的地方。）

准备好继续时，请点击或双击（取决于您的个人设置）Flash Builder 应用程序以启动它。这可能需要几秒钟，因为 Flash Builder 在首次运行时需要创建默认文件。闪屏消失后，您将在 Flash Builder 中看到 Flex 开始页面（参见图 1.6）。随意探索 Flex 开始页面上的教程。浏览完之后，我们将创建您的第一个项目，以便您准备好进行开发。

创建您的第一个项目

现在您已经熟悉了 IDE，您可以设置 IDE 并准备创建组件。关于如何配置 Flash Builder 进行组件开发，没有特定的指导方针。但我自己在这方面积累了不少经验，有机会测试了各种设置，我认为您将要学习的用 Flash Builder 开发组件的方法是简单、实用，而且最重要的是——高效的。考虑到这一点，让我们开始创建第一个项目。

由于 IDE 在 Windows 和 OS X 上功能相同，我将在后面的所有屏幕截图中都使用 OS X；在适用的情况下，我会提供 Mac 和 PC 格式的文件位置和快捷键。

从“文件”菜单中，选择“新建”>“Flex 项目”（参见图 1.7）。不用担心该菜单中的其他选项。我们将在后续内容中介绍各个条目。

点击“Flex 项目”条目后，项目向导将启动。第一个对话框相当直观。您唯一需要做的是为项目命名（参见图 1.8）。

这里有一些提示：您的项目名称不能包含空格；它应该具有描述性但不过于冗长；除了下划线或连字符外，不能包含特殊字符；我建议不要使用任何数字。此外，通常将名称格式化为 CamelCase，即每个单词的首字母都大写，就像本句中的 CamelCase 一样。如果您想为项目名称添加前缀或后缀，其大小写由您决定。如果您想了解更多关于 ActionScript 和 Flex 中命名规范的信息，Adobe 提供了一份编码标准文档，您可以随时阅读；有关 URL，请参阅附录 A。

考虑到这些信息，将您的项目命名为 DFC_DevelopingComponents。目前，请将其他设置保留为默认值。在本书中，我们将创建几个项目，因此图
1.8 和随后的屏幕截图将成为您熟悉的一部分。

点击“下一步”以继续流程的下一步。

在下一个屏幕上，我们看到 Flex 编译文件的默认输出文件夹。请注意，它被称为 bin-debug。这是因为默认情况下，Flex 会编译带有调试信息生成的 SWF 二进制文件；因此，文件夹的名称是因为它们是带有调试信息的二进制文件：bin-debug。您可以保持这些设置不变（我们稍后会讨论）。点击“下一步”以继续项目创建过程的下一步。

图 1.9 包含有关您项目的大量信息。在这里，您可以通过“源路径”选项卡添加外部源目录。您可以将此视为提供对资源和类的访问，而无需实际导入它们。您还可以通过“库路径”选项卡链接库项。目前，我不会解释库元素，因为我们在本书的第二部分“开发组件”和
第三部分“分发”中会用到它们。

在图 1.9 所示屏幕的底部有三个文本字段，用于保存项目结构的默认值。首先，您有主源文件夹。默认情况下，它是 src。Flash Builder 以前允许您直接将内容放在项目根目录下，但这可能会变得混乱并在部署应用程序时引起问题。因此，在 Flash Builder 中，所有资源和内容的默认根目录设置为 src。

下一个字段是主应用程序文件。请注意，它的名称与项目名称相同。同样，您可以更改它，同时牢记前面关于项目名称的限制和建议。许多开发者，包括我自己，都会将主应用程序文件重命名为 Main.mxml。为了清晰起见，我们将其名称与项目保持一致。

最后，输出文件夹 URL 通常仅在您的 Flex 项目与服务器端解决方案一起使用时才会被填充，因此需要以略有不同的方式进行路径设置和部署，而不是非服务器端项目，并且可以安全地留空。与前一个屏幕一样，我想让您看到这个屏幕，以便您了解它的存在，我们将来会再次讨论它。点击“完成”按钮完成向导。

向导完成后，您会立即看到两件事发生：包导航器现在包含您新扩展的项目，并且 DFC_DevelopingComponents.mxml 已在选项卡中打开，位于 Flex 开始页面旁边（如果您仍然打开了开始页面）。

摘要

本章介绍了 Flex 框架和 Flex SDK，并从开发角度简要概述了 Flash 和 Flex 之间的区别。您还下载并安装了 Flash Builder，并创建了您的第一个项目。您已准备好继续前进！

本章内容到此结束。现在我们可以深入研究 Flex 组件了，所以请烧上水，再泡一杯热饮。也为我泡一杯。