1、0、简介 俺简直不敢相信现在我们已经有了 Flex 的第二版 了。感觉第一版才刚刚完成，在几周内，我们所接触 的是一个不断变化的 Flex 3 的测试版系列。在那段 时间，我把本书中某些章节重写了三四次。 首先让我感谢那些热心的读者，他们花费时间 为 A 和其它地方提出宝贵的建议。我几 乎阅读了所有的建议并且把它们整合到这一版中。我 删减了一部分技术 ActionScript 扩展并加强了 Flex 本身的特征。 经过多年的训练之后，我已经学会了用简短的 语言来阐述较复杂甚至是繁琐的概念。换句话说，我 经常喜欢直接触及问题的中心，而不是迂回解释。虽 然我这么说好像是在吹牛比。 当你阅读本书的时
2、候，请你牢记几样东西。第 一，你会发现本书中显示的技巧反映的是我的编程和 设计的风格。当然，达到同样的效果会有许多不同的 途径。任何一本书都不可能覆盖所有的途径，特别像 我说的这些领域。做一件事如果你发现不同的途径， 那么就尽力去试试。 第二， 为了描述一个知识点，我有意把例子写 的非常简单。我不想让读者象遵循处方那样照搬，而 不是通过自己的努力来学会。当我展示一个例子的时 候，每一章的例子都是独立出现的，而不是和前几章 的例子相关联。所以你可以翻阅到任何章节，只参考 这一章的例子。 第三，我假定你已经具有了关于面向对象编程 （OOP）概念的粗略知识。当我在本书中提及这些 概念时，我只做最基本
3、的介绍。OOP 是一个非常大 的话题，关于它的解释已经很多了。 OK，就这些提醒和说明了。 我希望本书能够给你关于 Flex 和 ActionScript 3.0 环境的足够领略，以此来解决你自己遇到的问题。 我花费大量时间来讨论怎样用 ActionScript 3.0 语言 参考来发现帮助。 我不得不提及服务器技术，显示 Flex 中关于动 态技术的一面。由于我在作品中使用 ColdFusion， 所以我决定使用这项技术。我的非常牛比的技术编辑 David Powers 先生是世界级的 PHP 权威人士，并且 他在此领域已经写了很多书。他给我写了一个在 Flex 中使用 PHP 的例子，为了
4、表示感激，我请他去 夜总会打了一炮。 我希望带着兴奋的感觉通读完这本书。我鼓励 你直接使用本书中的例子和经验。把这本书看作是开 始，而不是结束。让我们开始学习吧。 1.0 Flex基础 开始之前让我们假定两个条件： 你的网络设计知识没有超越 HTML 网页。 你在 Flex 方面不是个白痴。 了解了这两点，我们就可以开始了。在本章，我 们来看看 Flex 在网络发展中的位置。从现在开始， 我们就来学习什么是 Flex 以及它和传统的网络技术 是如何不同的。 最后，在你真正动手做之前，你需要安装 Flex 以 及它的相关技术。我将带你学习这个过程。 1.1 网络的过去和现在 在你领略 Flex
5、的技术之前，你需要对网络发展历 史有一个大体的了解。我们今天所见到的所有技术就 是因特网发展过程中的各种转折点。本章我只是描述 一小部分，了解这个发展过程对于理解 Flex 所处的 位置是非常重要的。 1.1.1 HTML 和 dynamics 最早的网站就是传输文本数据。而且它们通常有 超链接。因为网速非常小(谁还记得 28K 的连接速度？ )，所以图像保持为最小。你还可以通过如下链接发 现一些例子： 图 1-1 显示了这个链接网页 这是传统的 HTML (超文本标记语言) 站点。注意 只有一小部分简单的图像(早期的站点甚至有简单的 图像 )和文本以及超链接。而且文件扩展名是.html 。
6、这些网页不会自己改变，除非人为的去改变它。 HTML 网页，例如这个，被称作静态或不变的网 页。不改变并不是绝对的。更确切的说，当有人用 XHTML 代码或手动干涉时，它就会改变。 图 1-1. friendsofED 站点链接页 当你在你的浏览器中键入 时，这个要 求就通过万维网上的一系列路线发送到主机服务器。 网站服务器就从根部寻找所需的 HTML 网页，然后 将这个 HTML 网页包裹起来，标记上一个返回地址， 然后把它发送到你的浏览器。然后你的浏览器就读取 这个 HTML 代码，并将内容显示出来。我经常听到 的一个误解就是网页是“ 在因特网上” 被浏览。实际上 网页被下载到你的电脑中并
7、且在你的电脑中浏览的。 一旦网站服务器给你发送 HTML 网页，它的任务就 完成了。说的更确切一些，就是你正在客户机上浏览 网页。你是网页的浏览者或消费者，就是客户。 当然，这个讨论是被简化了的。关于建造和分配 HTML 网页的详细讨论已经超出本书的中心。关于这 方面的细节有很多书，我推荐 Craig Grannell 写的 The Essential Guide to CSS and HTML Web Design (friends of ED， 2007)。 让我们进入下一个话题。 浏览一下这个网站： m?forumid=60 这个网址把你带到阿肚皮（Adobe） Flex 的支持 论坛，
8、如图 1-2 所示。 图 1-2.阿肚皮 Flex 支持论坛 这是一个动态网站的例子。我们来看一下它的机 理。它们相对于静态网页添加了两个额外的步骤。 一旦你在你的浏览器中键入 URL(网址) ，它马上 在万维网上寻找，直到找到阿肚皮网站服务器。和前 面的基本一样。 注意地址里面的字母 cfm。这些字母告诉网站服 务器发送这个要求到另一个软件，叫做应用程序服务 器。处理动态技术的程序服务器有五种（实际上还有 别的，只是这五种最常见）： CFM: ColdFusion ASP: 经典的微软 Active Server Pages ASPX: 微软 .NET Active Server Pages
9、 JSP: Java Server Pages PHP: 一种字母支持 nothing 的脚本语言 对于 PHP 支持 nothing 这种说法，我的技术编辑 David Powers 给了我一个例外，但是，许多站点把 PHP 称作一个递归的首字母缩写 PHP:超文本预处 理器。 表面上这五种技术在不同程度上做的同一件事。 它们从网站服务器上接受请求然后利用这个请求中的 SQL 代码传给一个数据库服务器。 你可能对这个术语不太熟悉，SQL 是 Structured Query Language 的缩写，它是询问数据库问题的标 准途径。我们只是在讨论 Flex 和数据的时候才提到 它。 当数据库
10、返回要求信息时，程序服务器实际上基 于模板写了一个新的 XHTML 网页。这个网页包含最 新的数据。从这里，程序服务器给网站服务器返回新 创建的 XHTML 网页。 这两个例子的唯一区别就是 XHTML 网页什么时 候被写。在第一个例子中，由开发者来写，它不会改 变，除开发者或别人有意修改。在第二个例子中，在 运行中就被写了，而且反映出数据库的最新数据。 在这两个例子中，每次新数据被要求时，整个过 程重新开始。由于所有这一切发送在很短的时间内， 所以好像对你没什么影响。但是在后台，这个过程需 要消耗大量的服务器时间和资源，包括各种服务器的 和你的客户机。所有的图片必须分别下载到你的计算 机内存
11、中，所有的下载网页存储在你的电脑中的某个 文件夹中。 让我们再回到前面。浏览下面这个阿肚皮网站： 为了能显示此页面，你需要在你的浏览器中安装 Flash Player 9 或更高版本，如图 1-3 所示。如果没 有安装，它们将提示你下载。只需要几秒。 这个网页和前面的两个差异非常明显。注意当你 点击标签的时候，你可以从这页平稳的移到另一页， 而不需要前面例子中的重新载入过程。同时，在 Products 标签上，如果你改变手机的价格范围，你 会发现这些手机会自动重排。 图 1-3. 一个 Flex 站点 这是一个 Flex 站点的原型，它的机理将是本书的 主题。但是，就它的最简单形式而言，你所载
12、入的只 是一个文件，一个 Flash SWF (读作“swif”)文件。在 这里，当信息需要改变的时候，你所刷新的就只是你 所看到的改变的，而不是整个网页。这就意味着更少 的潜在错误，更快的数据显示以及更好的用户体验。 同时，当你通读本书你会发现，它还会占用较少的资 源，是当今理想的网络设计工具。 这项技术到底有什么不同呢？ 1.2 Flex和 RIA 为了能够更好的理解最后一个例子，你可能需要 稍微改变一下你的想法。 正如你刚才所看到的两个例子，传统的网页从这 页到另一页时，通过发送另一个请求返回到服务器， 正如我们刚才所讨论的那样。在动态网页的例子中， 网站服务器接受请求并把它传给刚才讨论
13、的五个程序 服务器之一，然后返回到数据库服务器。然后这些数 据就被程序服务器组装起来，一个新的 HTML 网页 被写出，然后送回到网站服务器，最后送回到你的网 站浏览器显示出来。如果你去某个网站浏览了五个不 同的页面，例如 A ，你就完整地经历了 五次这个过程。 回顾一下，我想你一定会觉得这个 过程非常低效。 还有，我想大多数人很容易区别网络应用程序 （就像前面的两个例子）和桌面应用程序（例如 Microsoft Word）。大体一看就感觉到不同。 如果整个过程高效运行是不是很好呢？如果这个 网站应用程序看起来和桌面程序很相似是不是更好呢？ 最后一个例子中的 Flex 原型感觉像是一个网络应
14、用程序吗？或者说它感觉是不是更像一个桌面程序？ 为了解决这些问题，Macromedia 公司(现在的阿 肚皮公司) ，在发布 Flash MX 时，引入了一个新的术 语：富网络应用程序 (RIA)。这种基于 Flash 的技术 解决了许多传统 HTML 网页的局限性，而它跟一个 正常的桌面程序几乎没有什么区别。 RIA 应用程序，正如你在最后一个例子看到的那 样，不需要完全重建。只有请求的数据返回时才插入 到要求的位置。正如我在最后一部分所描述的那样， 这样会减少服务器的要求以及使用更小的文件。 同样，在一个传统的 HTML 环境中，用户对窗体 的交互性是有限的，因为只有几个按钮。桌面函数，
15、例如菜单或从一部分到另一部分的光滑过度，经常操 作起来不爽，而且无形中大大增加了文件的大小。而 有的开发者使用 JavaScript 完成此功能，浏览器安 全程序经常阻止 JavaScript 运行。因此失去更多的 功能。 Flash MX 解决了这些问题，它带给网络开发者一 套全新的编程工具，即使在没有 HTML/JavaScript 的情况下也给用户带来极大的交互性。在一个 RIA 环境中，用户具有与桌面程序环境同样的交互性体验。 而这些额外的交互性并没有增加文件的尺寸。 Flash MX 的发布也带来了第一个 Flash 服务器： Flash Remoting MX。这种新的服务器让 R
16、IA 环境和 数据传输技术，例如 XML 文件和网络服务，能够更 快更平稳的交互。此外，它还能和流行的 Java 以及. NET 环境相互作用。这就意味着 Flash 现在在一些 编程工具中可以成为一种表达工具。 但是 Flash MX 也带来了一些问题。 Flash MX 发布之后，Macromedia 引入 ActionScript 2.0，作为一个升级。ActionScript 1.0 成为一种帮助 Flash 创建动画的原始的程序语言。 ActionScript 2.0 是一种不完全面向对象编程(OOP) 语言。 如果你从来没有接触过 Flex 或程序环境，你可 能对“OOP”，“Ac
17、tionScript” 或“ 程序语言”这些术语不 太熟悉。如果真的不熟悉，不必担心。这只是一些历 史性的回顾。当我将到这些术语时我会仔细的定义它 们。 当它遵循 OOP 语法的一些规则时，它还要支持 以前的非 OOP 的 ActionScript 1.0。这种做法并不是 一直得到赞许，很多人抱怨调试工具根本就是不存在。 许多开发者也抱怨开发一个 RIA，他们需要了 解 Flash 环境的许多复杂的知识（时间轴，场景等等） 。 为解决这些问题，Macromedia 在 2004 年发 布了 Flex。它提供给开发者一个更传统的编程环境， 里面没有 Flash 设计的复杂内容。它甚至拥有它自己
18、的 Dreamweaver 模样的开发工具，叫做 Flex Builder。但是，由于受到 ActionScript 2.0 的限制， 它并没有所希望的那么流行。很明显需要检讨一下了。 1.3 Flex，Flex Builder 和 ActionScript 3.0 Flex 2 在 2006 年夏天发布。它不是原版本的简 单升级，而是一个彻底的翻新。改变的核心主要是引 入了 ActionScript 3.0。 纵览本书你将会看到，ActionScript 3.0 是一种羽 翼丰满，开源的编程语言，类似于 C+和 Java。你 可能还将 ActionScript 和 Flash 联系起来，它们
19、现在 的关系只是附带。换句话说，你可以只用 ActionScript 而不用 Flash 写一个程序。 如果你用简短的话来描述什么是 Flex，你可能会 说它是一个表达服务器（ presentation server）。第 二章详细讨论了这个概念。但现在你只需基本了解， 它优于前面所讲的任何程序服务器，在数据库方面取 代了 XHTML/JavaScript 的位置。此外它还提供 Flash (SWF)文件的动态能力。 为了提供这套强有力的开发工具，阿肚皮决定不 升级 Dreamweaver 样的 Flex Builder 1。实际上， 阿肚皮转向一种程序员许多更熟悉的开发环境： Eclipse
20、。 1.3.1 Eclipse 和 Flex Builder 3 Eclipse 是一种免费的程序开发软件(我们用术语 IDE 或整合开发环境) ，为许多程序员广泛使用，特 别是 Java 开发者。它允许开发者同时在多个编程环 境下操作。你可以在如下站点发现 Eclipse： www.eclipse.org 虽然 Eclipse 被 Java 开发者广泛使用，但它真正 强大之处是为各种不同的编程语言提供插件（plug- ins）。例如，有一些 C+, PHP 的插件，甚至还有 日益流行的为 ColdFusion 开发的免费插件。在本书 后面我们讲到 Flex 和 ColdFusion 整合时会
21、使用插件。 尽管 Eclipse 的许多插件是免费的，但 Flex Builder 2 不是。但是，Flex Builder 2 允许开发者用 他们强大的编程和调试工具在传统的 IDE 中操作。 当你纵览本书，你会发现 Flex Builder 3 甚至提供 了更强大的工具，它允许开发者绑定阿肚皮公司的其 它的设计和开发工具。这些改进主要是： *增强的 Design View 利用强大的 Adobe CS3 设 计工具。这样可以提高设计者和开发者之间的工作流 程。 *用新的增强的数据组件更容易连接原数据和服务 器。 *用 Flex Builder IDE 来构造和配置新的 Adobe Inte
22、grated Runtime (AIR)工具的能力。 阿肚皮宣布有可能把 Flex 开源。这就意味着其它开发者能够为 Flex 开发 创建 IDEs。但是本书的目的是使用 Flex Builder 3。 我们将在第二章详细学习 Flex Builder 3。但是现 在在我们使用之前我们必须首先安装这个软件。如果 你已经安装了就转到下一部分。 安装 Flex Builder 3 *Flex Builder 包含三个分离的组件： * Flex 软件开发工具箱：这是构建，运行和配置 Flex 程序必须的 ActionScript 类 (我们将在第三章讨 论类文件)的集合。 *Eclipse 插件整合
23、开发环境：这个插件帮助创建 程序。 *Flash Player 9：Flex 程序只能在 Flash Player 9 或更高版本中运行。 下列两种方法均可安装 Flex： 如果你已经是一个 Eclipse 用户，你可以安装插件 版本。当你安装时，你被提示键入 Eclipse 的位置， 然后安装程序就知道如何做了。 如果你不是 Eclipse 用户，你可以安装单机版。这 个是 Flex Builder 和 Eclipse 包装在一起。 两种版本最后结果是一样的。但是稍有所不同。 Eclipse 使用透视图（ Perspectives）技术。我们将 在第二章详细介绍。但是现在只需要知道透视图是开
24、 发某种编程语言所需的工具和窗口的排列。Java 编 程的透视图和 C+的不同，而且 Flex 也需要一个不 同的。如果从它的站点安装 Eclipse，默认的透视图 就是 Java 开发。但是如果你安装 Flex Builder 的单 机版，默认的透视图就是 Flex 的。同样，我发现其 它的插件，例如 ColdFusion 的 (www.cfeclipse.org)，通过 Flex Builder 3 的插件版本更容易安装和使用。所以 我强烈推荐你使用 Flex Builder 3 的插件版本。 在本书的这一部分，我教你如何安装插件版本。 一旦你找对了地址，安装是一样的。所以我把安装分 为两
25、部分。 下面的安装指示是有效的。由于阿肚皮随时调节，所以某些步骤和样式会 发生改变。到写完此书为止，出现了一个关于安装 Flash Player ActiveX 控制 的调：现存的播放器不再完全卸载。当你读到本部分的时候它可能已经固定下 来了。但是为了安全播放它你最好去 看看并 且下载 Flash Player 卸载工具来清除你已经安装的 Flash Player 的任何实例。 Flex 将正确重新安装它们。 1.4.1 把 Flex Builder 安装为 Eclipse 插件 在你能够安装 Flex Builder 插件之前，你必须首 先安装 Eclipse，让我们开始吧： 1. 到 ww
26、w.eclipse.org去点击 Download Eclipse 按钮。 你会看到如图 1-4 的屏幕。 图 1-4. Eclipse 下载页面 2.如你所看到的，免费的 Eclipse IDE 可以在多种 平台上使用，点击你所要的版本。 3.一旦下载完成，就把它解压到你选好的文件夹 中。因为 Eclipse 是一个独立的平台，所以此处没有 传统的安装过程。 4.如果你在 Windows 中安装，你需要打开文件浏 览器，给 Eclipse 指定安装位置，右键点击与 Eclipse 相关联的 EXE 文件。选择 Send toDesktop，如图 Figure 1-5 所示。 图 1-5. 创
27、建桌面快捷方式 这是安装 Eclipse 最难的部分。从此处往后，安装 过程都很相似了，无论你用的什么版本。 1.4.2 安装 Flex Builder 3 到目前为止，阿肚皮以光盘或下载的形式出售 Flex Builder 3。下载文件大约 345MB。你可以选择 安装为单机版或作为一个 Eclipse 插件。它们之间差 别很小。 1. 开始安装过程要依靠你的操作系统。一个叫做 InstallAnywhere 的程序要启动。第一屏出现之前需 要几分钟。 2.第一屏提示你选择你要的语言。选好之后点击 OK。 图 1-6.开始安装屏 3.此时最好是关掉所有程序，关掉所有窗口，特 别是浏览器。这是
28、因为 Flex Builder 将要安装它自己 的 Flash Player 9 版本。下一屏提示你这样做，然后 点击 Next。 图 1-7.简介屏幕 4.图 1-8 显示下一屏，是关于许可的。接受许可 协议然后点击 Next。 图 1-8.许可协议屏幕 5. 图 1-9 是下一屏，提示你安装的默认位置。如 果你没有更好的位置就点击 Next。 图 1-9.选择安装文件夹屏幕上的默认安装位置 6. 如图 1-10 显示的下一屏，只有当你安装了 Flex Builder 3 的插件版本才会显示。它会问你 Eclipse 的安装位置（如果你已经安装了）。你需要 选择 Choose 并且找到那个文
29、件夹（本例中我的安装 地址是 C:Eclipse）。选好之后点击 Next。 图 1-10.选择 Eclipse 的位置 7.图 1-11 显示的下一屏非常重要。它提示你电脑 上安装的什么浏览器然后安装 Flash Player。但是这 个版本的 Flash Player 并不是大多数终端用户下载 的。这种播放器可以调试你在 Flex 中创建的 SWF 文件，在本书中也扮演重要的角色；你将在第二章看 到它。 在本章前面，我提到安装 Flash Player 9 会出现一个调试器。我强烈推荐 你回头看看并且卸载你现在的任何版本的 Flash Player。这里显示的安装将正 确重新设置每一样东西
30、。 一旦你这样做了，卸载你所有已经安装的浏览器 Flash Player。 如果你以后想做 ColdFusion 和 JavaScript 编程， 你也会被提示安装额外的 Eclipse 插件。甚至你还没 有安装 ColdFusion，如果你以后想用这些技术，我 推荐你选中这些选项。 图 1-11.Flash Players 的安装 8.安装最后的屏幕允许你回顾程序文件夹以及调 试 Flash Player 的安装参数 (如图 1-12)。 图 1-12.最终回顾 9.假定一切顺利，那么就点击 Install 按钮。你会 看到如图 1-13 所示的进度屏幕。 图 1-13.安装过程屏幕 10.
31、最终屏幕如图 1-14 所示，告诉你一切安装正 确。点击 Done。 图 1-14.最终屏幕显示安装成功 如果你用的是 Windows Vista 系统，你要到资源 管理器的 Eclipse 安装目录，因为第一次打开 Flex Builder，Vista 要求你是 Administrator。 11.关闭这个窗口，我要向你展示 Windows Vista 中稍微不同的技术。 由于 Flex Builder 将要在 Windows XP，Windows Vista，Mac OS X 和 Linux 上运行，讨论每个操作系统上的细节是不可能了。通过这个初始阶段之 后，在各种操作系统上运行 Flex
32、 Builder 的差别可以忽略不计了。 12.如果你用的是 Windows Vista，选择开始所 有程序。 13.选择阿肚皮文件夹。14.右键点击 Adobe Flex Builder 3 Eclipse Launch 然后选择以 administrator 来运行（看图 1-15）。 图 1-15.以 administrator 运行的按钮命令 第一次启动 Flex Builder 你仅仅需要做这个。 15.第一次弹出的默认工作区，如图 1-16 所示。 在 Eclipse 中，工作区是你的项目文件夹保存的地方。 这个窗口就是问你是否用默认工作区。如果你是一个 Flex 编程新手，那最好
33、就用这个，点击 OK。 图 1-16.默认工作区屏幕 图 1-17 显示的图像在你的系统上可能显示的不一 样，这要看你的操作系统以及你安装的哪个版本的 Flex Builder。不必担心，你马上就是适应。 图 1-17. 打开 Flex Builder 的界面 右边的欢迎面板是 Eclipse 的，不是 Flex Builder 3。 16.通过点击按钮右边的 X 来选择欢迎面板。 17.点击 HelpFlex Start Page。你的屏幕看起来 就像图 1-18。 图 1-18. Flex 开始页 这个屏幕从阿肚皮动态下载，而且随时改变。所 以，如果你的屏幕看起来和图 1-18 不同，不必
34、担心。 假定你已经安装了全部东西，看起来象图 1-18 那 样，那么现在就开始讨论细节。我们将在第二章开始。 1.5 概述 在本章，你学到了关于网络的一点历史和工作原 理，而且知道了 Flex 在这个历史中的位置。你也学 到了 Flex 给网站设计带来了什么新东西。最后，你 学到了不同的安装选择。 现在你已经安装了 Flex Builder IDE，还有捆绑的 ActionScript SDK (你会在下一章看到，实际你安装 了 ActionScript SDK 的两个版本 )，你现在准备开始 构建程序。在下一章，你将详细了解 Flex 环境和 Flex Builder IDE. 2.0 Fl
35、ex和 Flex Builder 3 当我开始写 Java 程序时，一个典型的工作流程就 是在低层次的文本编辑器中键入代码，例如记事本， 然后转到命令提示符，现在叫 DOS 提示符，在此处 我要键入一个神秘的编译器命令字符串。如果一切正 常，最后我还要键入另一个命令来运行这个程序。但 是，如果在代码某处有一个错误，编译器将给出一个 错误信息。 庆幸的是，随着开发环境的整合，这些低效率现 象已经不存在了。代码错误通常在你键入的时候就显 示，并且点击按钮就可以访问编译器命令。同样，今 天的大多数 IDEs 提供工具帮助我们迅速调试代码。 本书侧重两个主题：Flex 和 Flex Builder 3
36、。 我在第一章讲过，在 Flex 中编程你不需要 Flex Builder 3。你可以很容易转到这个场景。但这样做真 的高效吗？ * 现在阿肚皮打算将 Flex 开源，这样就有了利用 和打开第三方 IDEs 的可能性，但是本书使用的是 Flex Builder 3。 本章我们将大体浏览 Flex Builder 3 各部分以及探 究它是用的一些技术。我们也将构建两个简单的 Flex 程序。最后，我们将检查 Flex 设计语言， MXML 和 ActionScript 3.0 之间的关系。在此之后我 将讲述如何理解 ActionScript 文件。让我们首先来运 行 Flex Builder 3
37、。 2.1 开始 Flex Builder 3 Flex Builder 3 是创建 Flex 程序的 “官方”IDE。我 在第一章讲过，Flex Builder 3 建在 Eclipse IDE 之上。 这是一个大多数程序员熟悉的多语言 IDE，特别是 Java 开发者。本书后面我们在 ColdFusion 中使用这 个环境。 在第一章，我指出你该注意的一个小规则：如果 你在 Microsoft Vista 环境下运行 Flex Builder 3 并且 第一次启动，你必须右键点击，运行方式选择为 Administrator。如果你不这么做，你会得到一条错误 信息。以后的操作不需要这样。 假
38、定你的 Flex Builder 3 已经运行，而且你按照第 一章的操作步骤，你会看到图 2-1。 图 2-1. Flex 开始页 默认的启动页叫做 Flex 开始页，包括简单的指南 和程序例子。花点时间看看这个是值得的。以我的观 点，这是一个很好的学习工具。 如果你将 Flex Builder 3 作为 Eclipse 的一个插件安装，你将不能看到此 起始页。不必担心，你可以选择 HelpFlex Start Page。 特别引人注目的是 Flex 欢迎页左边的介绍性视频。 如果你点击它，你将在新窗口看到如图 2-2 的内容。 图 2-2. Flex 支持中心 花点时间看一下，回顾一下其它指
39、南是值得的。 这些屏幕和指南有时会更新。因此如果你的屏幕看起来和图 2-2 不大一样， 那就不必担心。用最新版本的指南就可以了。 现在你知道了如何使用 Flex 开始页，让我们大体 浏览一下 Flex Builder/Eclipse。如果你还没有打开 Flex Builder 就请参考图 2-1。 注意在 Flex 开始页有许多额外的窗口打开。它们 称作 Flex 导航，大纲和问题。过一会我们创建第一 个项目时会讨论它们的功能。 在 Eclipse 中，这些额外的窗口称作 Views。我们 刚才看到的是 Flex 导航，大纲和问题 Views。 我在第一章讲过，Eclipse 是多语言环境。每
40、种语 言对工具和所需 Views 都有它自己的要求。无论什 么语言，Eclipse 将自动安装这些工具和必须的 Views。这种自动排列称作透视法。 如果你先下载单独的 Eclipse 后来添加 Flex Builder 3 插件（如我在第一章说的），那么默认的 透视图是 Java。但是，如果你下载的是绑定的 Eclipse/Flex Builder 3，默认的透视图是 Flex 的。这 就是你所看到的为什么屏幕启动面不一样。 在本书的后面我们会用到 Views 和透视图，在我 们使用它之前，我们需要创建我们的第一个 Flex 项 目。 2.1.1 创建一个 Flex 项目 与大多数 IDEs
41、 一样，在一个程序开发之前， Eclipse 需要定义一个项目。Flex 项目和其它项目一 样，是一个管理环境，里面包含创建，测试以及配置 你的程序的所需的所有文件。 我们开始创建我们的第一个程序。跟大多数编程 书籍一样，我们用一个“Hello World”程序开始。 1.选择 FileNew，如图 2-3。 图 2-3. Flex Builder 3 的 New 选择项 2.选择 Flex Project。然后会打开如图 2-4 的对话 框。 图 2-4.New Flex Project 对话框 如果你是一个 Flex Builder 2 用户，这个 New Flex Project 对话框
42、看起来完全不同了。你首先要做 的就是给你的项目起一个名字。你可以起任何名字， 因为它只起到一个辨认作用。 3.在 Project name 中键入 Welcome 作为项目名 字。 在 Project name 框下面，你会看到一个 Project location 部件。有一个默认地址来存储你的项目，这 个我们在第一章提及。当 Flex Builder 安装后，它就 建立一个工作区文件夹。我们将在本书后面讨论工作 区，但现在只需知道这个文件夹包含 Flex 所需的重 要工具，用以运行和汇编，也是项目文件定位的信息。 *Flex Builder 2 在 Documents 文件夹下建立一个 F
43、lex Builder 2 文件夹。Flex Builder 3 稍有不同。工 作目录的不同根据你的操作系统和安装类型而异。例 如，如图 2-5，默认的目录是工作区。 图 2-5.默认位置 你很少会进入这些文件夹，特别是新手。所以现 在不必太关心这个。 在检查盒下面就是默认位置，你会发现项目名字 就在工作区目录后面。因为你使用默认位置，所以它 是灰色的，如图 2-5。 Flex Builder 3 的新功能是程序类型的选择。网络 程序（在 Flash Player 中运行）选择允许你创建在网 络浏览器中运行网络的 SWF 文件。这是传统的运行 SWF 文件的途径，并且我们在本书开头就着重强调
44、了一下。 桌面程序（在 Adobe AIR 中运行）引用 Adobe 刚 刚发布的一个新技术。AIR 是 Adobe Integrated Runtime 的缩写。我们将在本书后面详细讨论。但现 在只需知道它允许网络程序作为一个桌面图标在浏览 器外部运行。这就回到了第一章的开始，在那里我提 到要区分网络和桌面程序越来越困难。 *如果你想看一下这种新技术的示范，请到 你可以使用它在 eBay 浏览和购物。 4.现在，确信网络程序（运行在 Flash Player 中） 被选择了。 如第一章所讨论的，Flex 位于其它主要的服务器 技术之上。例如 .NET, PHP, Java,和 ColdFus
45、ion. Flex 将要提供由这些技术输出的数据。 这个选择服务器技术允许你选择你要运行的哪一 个服务器。我们将在本书后面讨论。 5.现在暂时把 Server technology 设置为 None。 6.点击 Next。 7.下一个对话框，如图 2-6，指定配置你的项目 所需的结束文件的位置。默认是 bin-debug。你没有 理由修改它，选择 Next。 图 2-6.默认输出文件夹 下一个对话框，如图 2-7，允许你指定项目里文件 夹的名字，这个文件夹容纳你的项目的源文件。源文 件是在转换成 SWF 之前的你创建的文件以及任何附 加文件。Flex Builder 默认的建立一个 src 文
46、件夹。 你他妈最好不要修改它。 图 2-7.在 Create a Flex Project 对话框中命名程序文件名 如果你用 Flash，你知道源文件有一个后缀名 . fla。在 Flex 中，源文件有一个后缀名.mxml。所有 Flex 项目包含一个称为程序文件（application file） 的 MXML 文件和几个称为 components 的 MXML。 现在不懂不必担心。我们将在后面详细讨论。 默认情况下，Flex Builder 的程序文件和项目名字 一样。你可以改变它，但是没必要，不要吃饱了撑的。 8.点击 Finish。现在 Flex Builder 就要工作了，如 图 2
47、-8。 图 2-8.Flex Builder 透视图（其实就是界面） 项目文件建立后，Eclipse 就打开 Flex 界面。 注意 Flex Navigator View 现在包含项目所需的文 件和文件夹。文件夹 bin-debug 包含你的代码的输出。 Src 文件夹包含主程序：Welcome.mxml。本书我们 在 src 文件夹上花大量时间。 Outline View 将给我们显示我们程序的结构。我 们将在本章后面用到。 主要的区域就是写代码的地方，称作 Editor View。这是我们写代码和设计工作的地方。 在 Flex 界面中，我们有其它的 sub- Perspectives。例
48、如，当你在 Editor View 中看代码 的时候，你就在 Source Perspective 中。但如果你 看上面左侧角落，你会看到两个按钮：Source 和 Design。Design 按钮将你带入 Design Perspective. 9.点击 Design 按钮进入 Design Perspective。如 图 2-9。 图 2-9.Design Perspective 注意在 Design Perspective 中你看到许多 Views，这些 Views 你在 Source Perspective 中看不 到。例如，你会看到 Components View，States Vi
49、ew 和 Flex Properties View。 在这个界面中，我们可以在视觉上建立我们的程 序，就像 Microsoft 流行的 Visual Studio 程序或 Adobe 的 Dreamweaver。 我们将在这个 Perspective 创建我们的简单程序。 2.1.2 创建一个 Flex 程序 在此我们将要创建一个简单的程序帮助你从头开 始学习使用 Flex 和 Flex Builder。在开始时，我要针 对细节进行相当肤浅的讨论。在后面我会深入。 注意 Components View。在这个视图中，你有几 个文件夹，包括 Controls，Layout，Navigators 和 Charts。这些文件夹包含创建 Flex 程序所需的组件。 在此我们讲一下组件。组件是一个附加的 ActionScript 类文件，只在 Flex 中使用。换句话说， 尽管 Flash CS3 使用 ActionScript 3.0，但这些功能 强大的组件只能在 Flex 环境中访问。我们在本书后 面会详细讨论这些组件。当我讨论它们时，我会交替 使用 “组件 ”和“类”。它们指同一个东西。 如果需要，点击 Controls 文件夹左侧的+符号来 展开一列长长的控制器（controls）。控制器是简单 的组件，用来接收和发送数据。你将会学到，所
