开始Flex Builder 3

Flex Builder 3是创建Flex程序的“官方”IDE。我在第一章讲过，Flex Builder 3建在Eclipse IDE之上。这是一个大多数程序员熟悉的多语言IDE，特别是Java开发者。本书后面我们在ColdFusion中使用这个环境。

在第一章，我指出你该注意的一个小规则：如果你在Microsoft Vista环境下运行Flex Builder 3并且第一次启动，你必须右键点击，运行方式选择为Administrator。如果你不这么做，你会得到一条错误信息。以后的操作不需要这样。

假定你的Flex Builder 3已经运行，而且你按照第一章的操作步骤，你会看到图2-1。

 图2-1. Flex开始页

 

默认的启动页叫做Flex开始页，包括简单的指南和程序例子。花点时间看看这个是值得的。以我的观点，这是一个很好的学习工具。

 

 *****如果你将Flex Builder 3作为Eclipse的一个插件安装，你将不能看到此起始页。不必担心，你可以选择Help>Flex Start Page。

 

特别引人注目的是Flex欢迎页左边的介绍性视频。如果你点击它，你将在新窗口看到如图2-2的内容。

 图2-2. Flex支持中心

 

花点时间看一下，回顾一下其它指南是值得的。

 

*****这些屏幕和指南有时会更新。因此如果你的屏幕看起来和图2-2不大一样，那就不必担心。用最新版本的指南就可以了。

 

现在你知道了如何使用Flex开始页，让我们大体浏览一下Flex Builder/Eclipse。如果你还没有打开Flex Builder就请参考图2-1。

注意在Flex开始页有许多额外的窗口打开。它们称作Flex导航，大纲和问题。过一会我们创建第一个项目时会讨论它们的功能。

在Eclipse中，这些额外的窗口称作Views。我们刚才看到的是Flex导航，大纲和问题Views。

 我在第一章讲过，Eclipse是多语言环境。每种语言对工具和所需Views都有它自己的要求。无论什么语言，Eclipse将自动安装这些工具和必须的Views。这种自动排列称作透视法。

如果你先下载单独的Eclipse后来添加Flex Builder 3插件（如我在第一章说的），那么默认的透视图是Java。但是，如果你下载的是绑定的Eclipse/Flex Builder 3，默认的透视图是Flex的。这就是你所看到的为什么屏幕启动面不一样。

在本书的后面我们会用到Views和透视图，在我们使用它之前，我们需要创建我们的第一个Flex项目。

 

2.1.1创建一个Flex项目

与大多数IDEs一样，在一个程序开发之前，Eclipse需要定义一个项目。Flex项目和其它项目一样，是一个管理环境，里面包含创建，测试以及配置你的程序的所需的所有文件。

我们开始创建我们的第一个程序。跟大多数编程书籍一样，我们用一个“Hello World”程序开始。

1.选择File>New，如图2-3。

 图2-3. Flex Builder 3的New选择项

 

2.选择Flex Project。然后会打开如图2-4的对话框。

 

图2-4.New Flex Project对话框

 

如果你是一个Flex Builder 2用户，这个New Flex Project对话框看起来完全不同了。你首先要做的就是给你的项目起一个名字。你可以起任何名字，因为它只起到一个辨认作用。

3.在Project name中键入Welcome作为项目名字。

在Project name框下面，你会看到一个Project location部件。有一个默认地址来存储你的项目，这个我们在第一章提及。当Flex Builder安装后，它就建立一个工作区文件夹。我们将在本书后面讨论工作区，但现在只需知道这个文件夹包含Flex所需的重要工具，用以运行和汇编，也是项目文件定位的信息。

*Flex Builder 2在Documents文件夹下建立一个Flex Builder 2文件夹。Flex Builder 3稍有不同。工作目录的不同根据你的操作系统和安装类型而异。例如，如图2-5，默认的目录是工作区。

 图2-5.默认位置

 

你很少会进入这些文件夹，特别是新手。所以现在不必太关心这个。

在检查盒下面就是默认位置，你会发现项目名字就在工作区目录后面。因为你使用默认位置，所以它是灰色的，如图2-5。

Flex Builder 3的新功能是程序类型的选择。网络程序（在Flash Player中运行）选择允许你创建在网络浏览器中运行网络的SWF文件。这是传统的运行SWF文件的途径，并且我们在本书开头就着重强调了一下。

桌面程序（在Adobe AIR中运行）引用Adobe刚刚发布的一个新技术。AIR是Adobe Integrated Runtime的缩写。我们将在本书后面详细讨论。但现在只需知道它允许网络程序作为一个桌面图标在浏览器外部运行。这就回到了第一章的开始，在那里我提到要区分网络和桌面程序越来越困难。

*如果你想看一下这种新技术的示范，请到http://desktop.ebay.com 你可以使用它在eBay浏览和购物。

4.现在，确信网络程序（运行在Flash Player中）被选择了。

如第一章所讨论的，Flex位于其它主要的服务器技术之上。例如.NET, PHP, Java,和ColdFusion. Flex将要提供由这些技术输出的数据。

这个选择服务器技术允许你选择你要运行的哪一个服务器。我们将在本书后面讨论。

5.现在暂时把Server technology设置为None。

6.点击Next。

 7.下一个对话框，如图2-6，指定配置你的项目所需的结束文件的位置。默认是bin-debug。你没有理由修改它，选择Next。

 图2-6.默认输出文件夹

 

下一个对话框，如图2-7，允许你指定项目里文件夹的名字，这个文件夹容纳你的项目的源文件。源文件是在转换成SWF之前的你创建的文件以及任何附加文件。Flex Builder默认的建立一个src文件夹。你他妈最好不要修改它。

 图2-7.在Create a Flex Project对话框中命名程序文件名

 

如果你用Flash，你知道源文件有一个后缀名.fla。在Flex中，源文件有一个后缀名.mxml。所有Flex项目包含一个称为程序文件（application file）的MXML文件和几个称为components的MXML。现在不懂不必担心。我们将在后面详细讨论。

默认情况下，Flex Builder的程序文件和项目名字一样。你可以改变它，但是没必要，不要吃饱了撑的。

8.点击Finish。现在Flex Builder就要工作了，如图2-8。

 图2-8.Flex Builder透视图（其实就是界面）

 

项目文件建立后，Eclipse就打开Flex界面。

注意Flex Navigator View现在包含项目所需的文件和文件夹。文件夹bin-debug包含你的代码的输出。Src文件夹包含主程序：Welcome.mxml。本书我们在src文件夹上花大量时间。

Outline View将给我们显示我们程序的结构。我们将在本章后面用到。

主要的区域就是写代码的地方，称作Editor View。这是我们写代码和设计工作的地方。

在Flex界面中，我们有其它的sub-Perspectives。例如，当你在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 View和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）。控制器是简单的组件，用来接收和发送数据。你将会学到，所有这些组件都关联到ActionScript文件。

1.找到Label control并把它拖到Editor View。注意当你向着设计区中心移动的时候，一个垂直线就会出现，表明这是中心。如图2-10。

 图2-10.Label control

 

注意Label control有许多默认文本，叫做Label。

2.双击这个默认的文本并且输入Welcome to Flex Programming!。

3.回车。

你按下Ctrl/Cmd+S或点击Save工具栏上的图标来保存你的文件，如图2-11。

 Figure 2-11.保存程序

 

我们现在来测试一下你的杰作

4.点击左上角的Run Application按钮，如图2-12。

图2-12.Run Application按钮

 

默认浏览器就会打开，用来显示你的程序，如图2-13。

 图2-13.默认浏览器的输出

 

*如果你安装的Flex Builder插件，你会看到一个临时屏幕，问你这是什么程序类型。如果出现，你就选择Flex程序并且点击OK。

 

祝贺你！你刚才创建并运行了你的第一个Flex程序！

5.关闭浏览器回到Flex Builder。

让我们用别的方法来改变Label control的文本。

2.1.3改变属性

当你在标签中添加文本，或改变默认文字的时候，你就改变了Label control的属性。本例中，你改变了text属性。

Flex Builder允许我们通过程序或可视化操作改变许多组件（components）的属性。让我们看看可视化操作是怎样的。

点击舞台上的Label并且看看右侧的Flex Properties View，如图2-14。

 图2-14.Flex Properties View

 

这个面板是上下文敏感的，依据你正在操作的组件而改变。例如，如果你操作一个Button组件，这个选项就不同了。

如你所见，这个面板，只显示常用属性。有一个选项可以看所有可用选项。

在面板顶部，标签右边，你可以看到几个按钮。第一个按钮是Standard View，也就是你正在看的。第二个是Category View，如图2-15。

 图2-15.属性的Category View

 

通过此方式，你可以看到你正在操作的组件的各种可用属性。通过不同范畴可将之分解。在本书中你会遇到许多这样的属性。但还有别的方法查看这些属性。

如果你点击第三个按钮，它就会排列这些属性，不是通过范畴来排，而是通过字母顺序，如图2-16。

 图2-16.属性的Alphabetical View

 

你可以使用这三个按钮在Standard，Category和Alphabetical Views之间转换。

*单词“属性”在Flex Builder中定义的相当广泛。你会看到，事件处理器也被归类为属性。

我们了解了一点点，现在剖析一下我们创建的内容的机制。