第2章 熟悉开发环境FIex BuiIder 3

“工欲善其事，必先利其器。”Flex Builder 3是Adobe公司推出的集成开发环境。Flex Builder 3工作环境是一种具有丰富特征的开发环境，有利于开发者开发Flex和ActionScript应用程序。Flex Builder 3建立在Eclipse这一开源的集成开发环境（IDE）上，用户可使用强大的代码编辑器、可视化设计器、调试工具等来开发Flex应用程序。

本章将帮助读者熟悉Flex Builder 3开发环境，包括Flex Builder 3工作区、编译程序、调试程序、Flex工程、常用快捷键、Flex Help等内容。

2.1 熟悉Flex Builder 3工作区

Flex Builder 3工作区是开发Flex应用程序的工作环境，熟悉工作环境对开发的益处是显而易见的。Flex Builder 3平台是基于Eclipse平台，因此与Eclipse的布局风格异常相似。Flex Builder 3平台的特点是集可视化编辑与代码编辑为一体，用户在Flex Builder 3环境下可方便地切换设计模式和代码模式。Flex Builder 3工作区包括Perspectives（透视）、Editors（编辑器）、Views（视图）、菜单栏、工具栏等。Flex Builder 3工作区如图2-1所示。

2.2.1 Perspectives（透视）

透视是一种布局风格，与任务、编辑器和视图相关联。一旦切换透视，对应的任务、编辑器或视图就可能发生改变。Flex Builder 3包含两种透视，一种为“Development”透视，另一种为“Debugging”透视。

当用户创建了一个Flex工程时，工作区自动变换到“Development”透视。当用户开始调试到第一个断点时，工作区自动变换到“Debugging”透视。用户也可以手工切换透视。一种方法是单击“Window”|“Perspective”命令。另一种方法是使用透视工具条，它位于主编辑区的工具条上，如图2-2所示。

2.2.2 Editors（编辑器）

Flex Builder 3中的编辑器可以编辑各种文件类型。可调用MXML编辑器编写mxml格式文件，调用ActionScript编辑器编写as格式文件，调用CSS编辑器编写css格式文件，调用文本编辑器编写其他格式文件。当用户打开一种格式文件就会打开对应的编辑器。专用的编辑器中代码不同部分会有不同的颜色区别，如关键字会高亮显示。另外，在用户输入代码时专用的编辑器会自动出现代码提示。用户也可使用“Alt+/”快捷键手工打开代码提示。

1．MXML编辑器

MXML编辑器用以编辑MXML格式文件。双击mxml格式文件打开时自动调用MXML编辑器。MXML编辑器有两种模式：代码模式和设计模式。代码模式是指用户手工编写MXML代码。设计模式是指用户可视化地布局和设计程序。两种模式的切换方法是单击编辑器左上方的“Source”按钮和“Design”按钮。其中“Source”按钮表示代码模式，“Design”按钮表示设计模式。这两种模式是同步的。在一种模式下更新，会立刻作用于另一种模式。MXML编辑器如图2-3所示。

2．ActionScript编辑器

ActionScript编辑器用以编辑ActionScript类和接口文件。双击as格式文件打开时自动调用ActionScript编辑器。ActionScript编辑器中用户只能手工编写ActionScript代码，不过强大的代码提示功能将帮助用户编写ActionScript代码。ActionScript编辑器如图2-4所示。

3．CSS编辑器

CSS编辑器用以编辑层叠样式表（CSS）。双击css格式文件打开时自动调用CSS编辑器。CSS编辑器中用户只能手工编写CSS代码，不过不同的代码部分会用不同的颜色显示。CSS编辑器如图2-5所示。

2.2.3 Views（视图）

视图是用以辅助用户管理工程和开发项目。用户通过视图可以较直观地处理一些需求。例如，“Navigator view”（导航视图）可以管理工作区中的文件和文件夹，如图2-6所示。“Tasks view”（任务视图）显示所有的任务，包括自动产生的和手工添加的任务，如图2-7所示。

Flex Builder 3中常见的视图还包括：Outline（树型输出视图）、Problems（错误视图）、Search（搜索视图）、Debug（调试视图）等。

2.2 编译与运行Flex 3.0程序详解

MXML语言和ActionScript语言都是需要编译后才能运行的。Flex Builder 3开发环境中集成了两者的编译器，用户只需选择相应的编译运行命令。

本书在介绍第一个Flex程序“Hello World”程序时，简单地介绍了如何编译与运行Flex应用程序。事实上编译时可选的参数较多，本节将为读者介绍详细的编译与运行过程。仍以“Hello World”为例，讲解编译与运行过程中的可选参数。编译步骤如下所示：

步骤1单击“Run”|“Run”|“Other…”命令，打开“Run”对话框，如图2-8所示。Flex Builder 3相比较Flex Builder 2改进的部分是会自动生成“launch configuration”（运行配置）。当然用户也可自己生成。生成方法是在想要的类型上双击或是单击工具条上的“新建”按钮。例如，给“Hello World”程序创建运行配置，可双击“AIR Application”项目，然后在“Name”文本框中输入运行配置的名称。

步骤2用户可在“Main”标签下修改一些基本的信息。例如，“Name：”文本框中修改名称，“Project：”文本框中修改运行配置对应的工程，“Application file：”文本框中修改运行配置的启动页。“Command line arguments:”文本框中输入一些命令参数。

步骤3 “Source”标签下记录的是运行配置的源，如图2-9所示。用户可以自行添加、修改、删除源。“Search for duplicate source files on the path”单选框表示是否在本路径下搜索源副本。

步骤4 “Common”标签下可修改运行配置的常用内容，如图2-10 所示。如在“Console Encoding”下的“Other”下拉框下选择编码标准，“Standard Input and Output”下的“File:”文本框下输入输出文件的位置，“Launch in background”单选框表示是否在后台运行。

2.3 调试Flex 3.0程序

程序常包含不可知的逻辑错误，这些错误不属于编译错误，编译器不能检查此类错误。例如，程序中要判断闰年，代码的语法正确但判断的方法是错误的，此时编译器不会报错。调试功能能跟踪代码每一步的执行，从而检查逻辑错误。Flex Builder 3开发环境有强大的调试功能，有利于程序进行代码检查。本节介绍如何调试Flex应用程序，包括添加断点、开始调试、监视变量等。

2.3.1 添加断点

断点的作用是使应用程序在带断点的代码行处中断，从而开始检查代码。同时，用户可使用Flex Builder 3自带的调试工具检测并修复错误。例如，变量视图和表达式视图。在代码编辑器中添加断点的方法很多。一种是在需添加断点的代码行最前面的“marker bar”处双击，如图2-11所示。一种是在需添加断点的代码行处按下“Ctrl+Shift+B”快捷键。

“Breakpoints view”（断点视图）中可管理断点，如图2-12所示。注意的是，断点视图只出现在调试应用程序时。

调试器只允许在以下代码的断点处中断。

（1）MXML标签中包含ActionScript事件处理，如<mx:Button click=“a_funtion()”…>。其中“click”是单击处理事件。

（2）ActionScript代码中，可以是MXML文件中的<mx:Script>标签下，也可以是ActionScript文件中。

（3）ActionScript文件中的任何代码行。

2.3.2 调试程序

在设置完断点后可单击“Run”|“Debug”命令，选择相应的运行配置开始调试，也可单击工具栏上的按钮或快捷键F11开始调试。调试器运行后就会自动进入“Flex Debugging”透视。其中比较有用的是“Debug View”（调试视图），如图2-13所示。调试视图在调试过程中会显示调试的位置。

调试工具栏中有关调试的按钮说明如表2-1所示。

2.3.3 监视变量

在调试程序时常需要监视某些变量的变化，从而发现代码中的错误。“Variables View”（变量视图）能自动跟踪程序中变量的变化，如图2-14所示。本步执行后有变化的变量将变为醒目的红色。

用户也可手工添加需监视的表达式。方法是在“Expressions View”（表达式视图）中右击空白区域，弹出的右键菜单，如图2-15所示。单击“Add Watch Expression…”命令，弹出“Add Watch Expression”对话框，如图2-16所示。在“Expression：”文本框中输入要观察的变量，然后单击“OK”按钮完成添加变量。也可在代码编辑器中选择相应的表达式代码，右击选择“Watch”命令添加到表达式视图中。例如，监视“(t-5)*a”表达式的值，可先选择“(t-5)*a”，然后右击，在右击菜单中选择“Watch”命令添加监视。

2.4 Flex 3.0项目工程概述

Flex 3.0现支持创建的项目工程有四类：Flex Project、ActionScript Project、AIR Project和Flex Library Project。不同的工程用于开发不同的项目。Flex Project工程是普通的RIA工程，主要用于开发互联网应用程序。ActionScript Project工程主要用于开发ActionScript类库。AIR Project工程是Flex 3.0新增的工程，用于开发桌面应用程序。Flex Library工程用于开发共享库，可以是自定义组件，也可以是ActionScript代码。

2.4.1 Flex Project

Flex Project是最基础配置的工程。使用Flex框架、XML、Web services等来开发Flex应用程序。Flex Project项目在Flex Builder 3中编译后会将可执行文件（swf文件）放在HTML文件中。也就是说Flex Project项目生成的是Web应用程序。

2.4.2 ActionScript Project

ActionScript Project使用的是Flash API，而不是Flex框架。ActionScript Project没有可视化的表现。也就是说ActionScript应用程序中没有设计模式的概念。ActionScript Project项目编译后也可运行于Flash Player中。

2.4.3 AIR Project

AIR Project是Flex 3.0新增的工程，用以创建AIR应用程序。AIR应用程序是一种桌面应用程序。它摆脱了原先RIA只能运行于浏览器中的局限，支持部分系统API等特性。AIR应用程序既有RIA丰富的交互性，也支持在桌面环境下运行，它将成为未来桌面应用程序开发的新选择。

另外，AIR Project工程支持Flex Project工程中的全部组件和类，能开发出功能更强大的RIA应用程序。

2.4.4 Flex Library Project

Flex Library Project用以创建自定义的代码库。代码库可共享于应用程序或是其他开发人员。Flex Library Project编译后生成SWC文件。SWC文件包含组件、各种资源和catalog.xml文件。SWC常被用于制作主题和制作应用程序的外观。一个SWC主题可以包括多个CSS文件和全部的图片、动画资源。

2.5 Flex Builder 3常用快捷键

快捷键的作用是使得开发工作更加高效和简单。Flex Builder 3中提供了许多快捷键。表2-2列举常用的快捷键。

用户想要更多的快捷键说明，可单击“Help”|“Key Assist…”命令或“Shift+Ctr+L”快捷键查看。

2.6 使用Flex Help

开发Flex应用程序过程中难免会遇到困难，如对某一组件的某一属性不清楚，此时也可查看Flex Help。在安装Flex Builder 3后，自动安装了Flex Help。用户可单击“Help”|“Help Contents”命令打开Flex Help，如图2-17所示。

Flex Help左下方的图标表示显示全部内容，图标表示显示搜索结果，图标表示显示链接，图标表示显示书签。单击不同的图标会切换至不同的内容。另外，用户可在左上方的“Search”输入框中输入要搜索的内容。

2.7 小结

Flex Builder 3是功能强大的集成开发环境，能高效地开发Flex应用程序。本章主要介绍了Flex Builder 3的相关基础知识。内容包括熟悉Flex Builder 3工作区，如何编译运行程序，如何调试程序，不同项目工程的作用、常用快捷键、Flex Help的使用等。通过本章的学习，读者会对Flex Builder 3的开发环境会有一个比较清楚的了解。