1.3 Flex开发实践
Adobe Flex是一个免费的产品，可以使用任何一款编辑器开发。在诸多编辑器中，Flex Builder是一个不可或缺的、功能强大的编辑器，是基于Eclipse IDE开源项目构建的，继承了很多优秀的功能。Flex Builder有两个版本，即独立的开发工具版本和集成于Eclipse的插件版本，本书统一采用独立的开发工具版本。下面将基于Flex Builder 3.0，通过一个简单的示例程序介绍Flex的开发。
1.3.1 安装Flex开发环境
Flex Builder是一个实用的集成开发环境，通过这个环境，可以高效地完成Flex程序的编写。Flex的开发环境需要安装配置Flex Builder（统一使用Flex Builder 3.0）与Flex SDK，以及Flash Player插件。Flex Builder与Flash Player可运行于任何操作系统中，Flash Player插件根据浏览器的类型，提供相应的安装程序。
● Adobe Flex Builder
Flex Builder是一个Flex的集成开发环境，通过Flex Builder可以对程序进行所见即所得的界面设计，并支持MXML和ActionScript的智能编写，可以快速方便地构建Flex应用程序，在很大程度上提高Flex的开发效率。使用Flex Builder，还可以设置代码的断点，调试程序。
● Adobe FlexSDK
Flex SDK是Flex产品集中最基础的、也是必需的组件，使用其他组件必须在SDK的基础上，单独通过SDK就可以完成常用的程序设计。
1.安装Flex Builder 3.0
Flex Builder 3.0集成开发环境的安装程序可在Adobe的官方网站上下载，或者使用本书网络光盘中的安装程序。安装Flex Builder 3.0时，安装程序会自动安装Flex SDK 3.0。
Adobe公司Flex Builder官方下载地址为：
http://download.macromedia.com/pub/flex/flex_builder/FB3_win.exe
2.安装Flash Palyer插件
Flash Player插件有两种：一种是单纯的Flex程序运行播放器，另一种是针对Flex程序开发中调式运行的播放器。进行Flex开发，一般需要安装Flash Player的debug程序。
（1）安装Flash Palyer插件。Flash Player针对不同的浏览器内核提供相应的安装程序，在安装时根据机器上的浏览器选择安装。Adobe官方下载地址为get.adobe.com/flashplayer/。
● IE内核的Flash播放插件，如Adobe Flash Player Active 10.0.22.87.exe；
● 非IE内核的Flash播放插件，如Adobe Flash Player Plugin 10.0.22.87.exe。
（2）安装Flash Player的debug程序。对于Flex的开发，提供Flash Player的debug程序，用于调试AS脚本程序，方便程序的调试运行。针对不同的浏览器内核，同样提供相应的debug安装程序。可到Adobe官方网站上下载，或者使用本书网络光盘中的安装程序。
● IE内核的调试程序，如flashplayer_10_ax_debug.exe；
● 非IE内核的调试程序，如flashplayer10_1_rc2_debug_plugin_041910.exe。
3.Flex Builder开发界面
Flex Builder对MXML界面设计的支持是相当强大的，支持“所见即所得”的开发方式。MXML本身就是由标签语言配置而成的，因此对于MXML的操作方式更适合于配置和设计。同时，在MXML中我们会常常进行调用ActionScript脚本、调用自定义组件、做数据绑定等操作，Flex Builder对这些方面都提供了完善的支持。
Flex Builder对于MXML的开发提供了两种模式。在Flex Builder的编辑区上方可以看到Source和Design按钮。Source为代码编辑模式，我们可以手工书写MXML代码，完成ActionScript的编写；Design为UI设计模式。
1）Source编辑模式
在Flex Builder 3.0中打开一个MXML文件，切换到Source界面，各功能区域的作用如图1.2所示。
● 菜单栏：IDE支持的所有开发功能菜单；
● 工具栏：菜单栏中某些常用条目的快捷方式；
● 导航器：可以按照不同模式浏览当前项目的文件结构；
● 编辑区：代码编写区域；
● 定制视图：可以显示控制台、搜索窗口、调试窗口等信息；
● 大纲：显示当前代码的组织结构。
图1.2 Flex Builder的Source编辑模式
2）Design设计模式
当切换到UI设计状态后，即切换到UI设计界面，各功能区域的作用如图1.3所示。
● UI设计器：通过所见即所得的方式设计图形界面；
● 组件工具栏：可以从中选取各种Flex可视化组件，放到UI设计器中；
● 属性编辑区：编辑选定Flex可视化组件的各种属性。
图1.3 Flex Builder的Design设计模式
4.Flex的文件类型
在Flex中，可以创建各种文件格式，包括基本的MXML文件、单独的ActionScript文件、类以及接口等，不同的文件发挥不同的功能作用。创建完某一个项目后，右击其源代码目录，选择并展开New命令项，将会弹出右键源代码菜单，如图1.4所示。
图1.4 Flex文件类型
● MXML Component——项目组件化
在右键菜单中，可以选择并创建一个MXML Component组件文件，可以把每个组件独立出来。这样做可以使项目源代码组件化，把不同功能的组件独立出来管理。
● MXML Module——组件模块化
在右键源代码菜单中，可以选择并创建一个MXML Module模块文件。项目模块化实际上就是把相同功能的代码组织到一个模块中，通过多个模块的累积，从而形成一个完整的应用系统。
● 项目模式化
在右键源代码菜单中，可以选择并创建一个ActionScript文件、类或者接口。通常这类文件会在设计模式中被应用。设计模式是管理和组织大量代码有效的方法之一，是面向对象思想最直接的体现，而ActionScript语言本身就是一个面向对象的语言。
1.3.2 创建一个Flex应用
Project（项目）是Flex Builder中的基础，一个Project是一组相互关联的文件。所以，创建一个Flex应用程序，就需要创建一个项目。一个项目是由多个Flex的文件组织成的集合。下面来创建第一个Flex项目，具体步骤如下所述。
（1）在菜单栏单击左键或者在Flex导航器的空白处单击右键，选择“File（文件）”→“New（新建）”→“Flex Project（Flex项目）”命令，弹出“New Flex Project（新建Flex项目）”对话框，如图1.5和图1.6所示。
图1.5 新建Flex项目（方式一）
图1.6 新建Flex项目（方式二）
（2）在“Project name”文本框中输入项目名称——First Project，选择项目存放位置，在“Application type”选框中点选“Web application（runs in Adobe Flash Palyer）”单选项，在“Application server type”下拉列表中选择“None”选项，如图1.7所示。单击“Next”按钮，弹出输出配置对话框。
图1.7 填写项目名称
（3）在输出配置对话框中的“Qutput folder”处填写项目编译后文件的存放目录名称，默认使用“bin-debug”，单击“Next”按钮，进入下一步设置，如图1.8所示。
图1.8 设置编译文件存放目录
（4）在“Main application file（主应用程序文件）”文本框中输入默认项目启动的文件名（将在项目中自动创建一个该名称的主应用程序文件），其他项使用默认值，然后单击“Finish（完成）”按钮（见图1.9），完成项目的创建（见图1.10），自动打开主应用程序文件。
图1.9 设置新项目源文件目录与主程序
图1.10 完成项目创建
（5）在编辑工作区中单击“Design”按钮，进入设计模式，如图1.11所示。
图1.11 进入设计模式
（6）在左下角的组件工具箱的列表中，选择“Components”窗口下的“Label”控件，将该标签控件拖动到设计模式工作区中，如图1.12所示。
图1.12 加载Label控件
（7）在设计窗口中选中“Label”控件，然后在右下角的Flex Properties（属性工作区）里设置“Label”控件的属性。例如，在“Common”下设置“Text（文本）”为“Hello World!”，在“Style”下设置字体为“Courier New”，字体大小为“28”，加粗，颜色设置为蓝色，如图1.13所示。
图1.13 设置控件属性值
（8）在编辑工作区中单击“Source”按钮，切换到代码编辑模式，生成如下MXML源代码。
程序代码1.1 第一个简单的Flex应用源代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout=
"absolute">
<!—添加一个Label控件 -->
<mx:Label x="128" y="123" text="Hello World!" fontFamily="Courier
New" color="#0909B4"
fontSize="28" fontWeight="bold" textAlign="left" />
</mx:Application>
1.3.3 编译运行
Flex SDK中包含两个编译器：mxmlc和compc。mxmlc编译器可以把MXML和ActionScript代码编译为SWF文件，compc编译器可以把组件和库编译为SWC文件。Flex Builder 3.0中集成了Flex SDK，通过Flex SDK把Flex程序代码编译成SWF文件，并在浏览器中运行。
在1.3.2节创建了一个简单的Flex应用程序，编译与运行程序的步骤如下所述。
（1）如果Flex项目中有多个Application的MXML文件，想要设置其中一个文件为程序默认初始页，可以在左上角的导航窗口中选中该文件，单击鼠标右键，选择“Set as Default Application”（设置为默认应用程序）命令，效果如图1.14所示。
图1.14 设置默认应用程序
（2）如要运行1.3.2节创建的Flex程序，选中要编译运行的main文件，在菜单中选择“Run”→“Run main”命令，Flex Builder开始编译运行程序（见图1.15），运行后的效果如图1.16所示。
图1.15 编译运行程序
图1.16 程序运行结果
如果Flex程序中有ActionScript代码，需要在编译运行时进行调试，这时需要启用Flash Player的debug程序。例如，在main.mxml文件中添加初始化的一个脚本，然后进行调试。添加ActionScript脚本后的源代码如下。
程序代码1.2 添加一个ActionScript脚本源代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout=
"absolute" creationComplete="init();">
<!—添加一个Label控件 -->
<mx:Label x="128" y="123" text="Hello World!" fontFamily="Courier New"
color="#0909B4"
fontSize="28" fontWeight="bold" textAlign="left" />
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function init():void
{
//弹出一个系统对话框
Alert.show("这是创建的第一个Flex程序");
}
]]>
</mx:Script>
</mx:Application>
在Flex Builder中调试程序的具体方法如下所述。
在Flex程序的ActionScript代码段相应位置设置断点，方法是：在代码编辑模式下，直接在要设置断点的代码前面双击鼠标，或者选中代码后用快捷键设置，例如在main文件的ActionScript代码处设置断点，如图1.17所示。
图1.17 设置断点
（3）打开调试界面，即在右上角选择“Flex Debugging”（见图1.18），就进入了debug环境。选中要调试运行的主程序文件，如示例中main文件，在菜单中选择“Run”→“Debug main”命令，Flex Builder开始跟踪调试程序（见图1.19、图1.20、图1.21）。
图1.18 打开调试视图
图1.19 开始跟踪调试程序
图1.20 调试运行程序
图1.21 程序运行结果
注
在Flex Builder 3.0的调试状态下，debug窗口旁边的Variables窗口显示的是某一时刻各种变量的值。
Flex Builder沿袭了Eclipse体系，具有Eclipse所支持的开发配置、快捷键、调试控制、代码重构等方面优势，简化开发，为用户提供便利。
快捷键如下：
● Ctrl+Shift+C——单行注释；
● Ctrl+/——段注释；
● Tab——代码的缩进；
● Shift+Tab——代码的前进；
● Ctrl+Shift+B——加或去除断点；
● F1——Flex帮助；
● F3——转到定义；
● F11——开始调试；
● F5——调试进入下一层代码；
● F6——调试进入同层下一句错码；
● F7——跳到上一层继续调试；
● F8——调试到下一层断点。
1.3.4 项目发布
一个Web的Flex项目编译后，通常需要发布到Web服务器中。在进行项目部署发布时，需要根据项目的具体情况，选择发布到IIS，或者Java的Web服务器中，如Tomcat。项目发布的方法与Web项目发布相同，发布的是编译好的项目文件。下面以创建的第一个项目为例，介绍部署到Windows操作系统中的IIS服务器的具体步骤。
（1）将编译好的Flex项目复制到Web服务器所在机器硬盘中。
注
默认情况下Flex项目的bin-debug目录中是编译好的文件（见图1.22）。通常建一个文件夹，把bin-debug目录下的所有文件复制到新建的文件夹中，然后再移到Web服务器机器上。
图1.22 Flex项目编译好的文件
（2）为服务器中的Flex项目创建一个虚拟目录（见图1.23和图1.24），即设置为Web共享。
图1.23 设置虚拟目录
图1.24 IIS中设置好的虚拟目录
（3）在IIS中为Flex项目设置一个访问首页（见图1.25），并进行匿名访问设置（见图1.26）。
图1.25 设置访问首页
图1.26 设置匿名访问