第2章熟悉开发环境Flash Builderppt课件

1、第第2 2章章 熟悉开发环境熟悉开发环境Flash Builder 4Flash Builder 4“工欲善其事必先利其器工欲善其事必先利其器”。Flash Builder 4是是Adobe公司推出的集成开发环境。公司推出的集成开发环境。Flash Builder 4工作环境工作环境是一种具有丰富特征的开发环境，有利于开发者开发是一种具有丰富特征的开发环境，有利于开发者开发Flex和和ActionScript应用程序。应用程序。Flash Builder 4建立在建立在Eclipse这一开这一开源的集成开发环境（源的集成开发环境（IDE）上，用户可使用强大的代码编辑）上，用户可使用强大的代码编

2、辑器，可视化设计器，调试工具等来开发器，可视化设计器，调试工具等来开发Flex应用程序。应用程序。2.1 2.1 熟悉熟悉Flash Builder 4Flash Builder 4工作区工作区Flash Builder 4工作区是开发工作区是开发Flex应用程序的工作环应用程序的工作环境，熟悉工作环境对开发的益处是显而易见的。境，熟悉工作环境对开发的益处是显而易见的。Flash Builder 4平台是基于平台是基于Eclipse平台，因此与平台，因此与Eclipse的布局风格的布局风格异常相似。异常相似。Flash Builder 4平台的特点是集可视化编辑与代平台的特点是集可视化编辑与代

3、码编辑为一体，用户在码编辑为一体，用户在Flash Builder 4环境下可方便地切换环境下可方便地切换设计模式和代码模式。设计模式和代码模式。2.1.1 Perspectives2.1.1 Perspectives（透视）（透视）透视是一种布局风格，与任务、编辑器和视图相关透视是一种布局风格，与任务、编辑器和视图相关联。一旦切换透视，对应的任务、编辑器或视图就可能发生联。一旦切换透视，对应的任务、编辑器或视图就可能发生改变。改变。Flash Builder 4包含包含3种透视：种透视：“Flash”透视、透视、“Flash Debug”透视以及透视以及“Flash Profile”透视。透

4、视。2.1.2 Editors2.1.2 Editors（编辑器）（编辑器）1MXML编辑器编辑器2ActionScript编辑器编辑器3CSS编辑器编辑器2.1.3 Views2.1.3 Views（视图）（视图）视图是用以辅助用户管理工程和开发项目。用户通视图是用以辅助用户管理工程和开发项目。用户通过视图可以较直观地处理一些需求。例如，过视图可以较直观地处理一些需求。例如，“包资源管理器包资源管理器”既可以管理工作区中的文件和文件夹，又可以浏览包和类既可以管理工作区中的文件和文件夹，又可以浏览包和类的结构。的结构。2.2 2.2 编译与运行编译与运行Flex 4Flex 4程序详解程序详解

5、MXML语言和语言和ActionScript语言都是需要编译后才能语言都是需要编译后才能运行的。运行的。Flash Builder 4开发环境中集成了两者的编译器，开发环境中集成了两者的编译器，用户只需选择相应的编译运行命令。用户只需选择相应的编译运行命令。本书在介绍第一个本书在介绍第一个Flex程序程序“Hello World”程序时程序时，简单地介绍了了如何编译与运行，简单地介绍了了如何编译与运行Flex应用程序。事实上编应用程序。事实上编译时可选的参数较多，本节将为读者介绍详细的编译与运行译时可选的参数较多，本节将为读者介绍详细的编译与运行过程。仍以过程。仍以“Hello World”为

6、例，讲解编译与运行过程中为例，讲解编译与运行过程中的可选参数。的可选参数。2.3 2.3 调试调试Flex 4Flex 4程序程序程序常包含不可知的逻辑错误，这些错误不属于编程序常包含不可知的逻辑错误，这些错误不属于编译错误，编译器不能检查此类错误。例如，程序中要判断闰译错误，编译器不能检查此类错误。例如，程序中要判断闰年，代码的语法正确但判断的方法是错误的，此时编译器不年，代码的语法正确但判断的方法是错误的，此时编译器不会报错。使用在调试功能能跟踪代码每一步的执行，从而检会报错。使用在调试功能能跟踪代码每一步的执行，从而检查逻辑错误。查逻辑错误。Flash Builder 4开发环境有强大的

7、调试功能，开发环境有强大的调试功能，有利于程序进行代码检查。本节介绍如何调试有利于程序进行代码检查。本节介绍如何调试Flex应用程序应用程序，包括添加断点、开始调试、监视变量等。，包括添加断点、开始调试、监视变量等。2.3.1 2.3.1 添加断点添加断点断点的作用是使应用程序在带断点的代码行处中断断点的作用是使应用程序在带断点的代码行处中断，从而开始检查代码。同时，用户可使用，从而开始检查代码。同时，用户可使用Flash Builder 4自自带的调试工具检测并修复错误。例如，变量视图和表达式视带的调试工具检测并修复错误。例如，变量视图和表达式视图。在代码编辑器中添加断点的方法很多。图。在代

8、码编辑器中添加断点的方法很多。调试器只允许在以下代码的断点处中断。调试器只允许在以下代码的断点处中断。MXML标签中包含标签中包含ActionScript事件处理，如事件处理，如。其中。其中“click”是单击处是单击处理事件。理事件。ActionScript代码中。可以是代码中。可以是MXML文件中的文件中的标签下，也可以是标签下，也可以是ActionScript文件中。文件中。ActionScript文件中的任何代码行。文件中的任何代码行。2.3.2 2.3.2 调试程序调试程序在设置完断点后可选择在设置完断点后可选择“运行运行” “调试调试”命令，命令，选择相应的运行配置开始调试。也可单

9、击工具栏上的按钮或选择相应的运行配置开始调试。也可单击工具栏上的按钮或快捷键快捷键F11开始调试。调试器运行后就会自动进入开始调试。调试器运行后就会自动进入“Flash Debug”透视。其中比较有用的是调试视图。透视。其中比较有用的是调试视图。在调试程序时常需要监视某些变量的变化，从而发在调试程序时常需要监视某些变量的变化，从而发现代码中的错误。变量视图能自动跟踪程序中变量的变化。现代码中的错误。变量视图能自动跟踪程序中变量的变化。2.4 Flex 42.4 Flex 4项目工程概述项目工程概述Flex 4现支持创建的项目工程有三类：现支持创建的项目工程有三类：Flex 项目、项目、Acti

10、onScript 项目、和项目、和Flex 库项目。不同的工程用于开发不库项目。不同的工程用于开发不同的项目。同的项目。Flex 项目工程是普通的项目工程是普通的RIA工程，主要用于开发工程，主要用于开发互联网应用程序。互联网应用程序。ActionScript 项目工程主要用于开发项目工程主要用于开发ActionScript类库。类库。Flex 库项目用于开发共享库，可以是自库项目用于开发共享库，可以是自定义组件，也可以是定义组件，也可以是ActionScript代码。代码。2.4.1 Flex 2.4.1 Flex 项目项目Flex 项目是最基础配置的工程，项目是最基础配置的工程，Flex项

11、目包括两种项目包括两种应用程序类型：应用程序类型：Web和和Desktop。使用。使用Flex框架、框架、XML、Web services等来开发等来开发Flex应用程序。应用程序。Web应用程序类型是应用程序类型是在在Flash Builder 4中编译后会将可执行文件（中编译后会将可执行文件（swf文件）放在文件）放在HTML文件中，最终生成的是文件中，最终生成的是Web应用程序。应用程序。Desktop应用应用程序类型是在程序类型是在Flash Builder 4中编译后会将文件放在中编译后会将文件放在AIR平平台中，最终生成的是台中，最终生成的是AIR应用程序。应用程序。2.4.2 A

12、ctionScript 2.4.2 ActionScript 项目项目ActionScript 项目使用的是项目使用的是Flash API，而不是，而不是Flex框框架。架。ActionScript 项目没有可视化的表现。也就是说项目没有可视化的表现。也就是说ActionScript应用程序中没有设计模式这样的概念。应用程序中没有设计模式这样的概念。ActionScript项目编译后也可运行于项目编译后也可运行于Flash Player中。中。2.4.3 Flex 2.4.3 Flex 库项目库项目Flex库项目用以创建自定义的代码库。代码库可共库项目用以创建自定义的代码库。代码库可共享于应用

13、程序或是其他开发人员。享于应用程序或是其他开发人员。Flex库项目编译后生成库项目编译后生成SWC文件。文件。SWC文件包含组件、各种资源和文件包含组件、各种资源和catalog.xml文文件。件。SWC常被用于制作主题和制作应用程序的外观。一个常被用于制作主题和制作应用程序的外观。一个SWC主题可以包括多个主题可以包括多个CSS文件和全部的图片、动画资源。文件和全部的图片、动画资源。2.5 Flash Builder 42.5 Flash Builder 4常用快捷键常用快捷键快捷键的作用是使得开发工作更加高效和简单。快捷键的作用是使得开发工作更加高效和简单。Flash Builder 4中

14、提供了许多快捷键。用户想要更多的快捷中提供了许多快捷键。用户想要更多的快捷键说明，可选择键说明，可选择“帮助帮助” “键辅助键辅助”命令或命令或“Shift+Ctr+L”组合键查看。组合键查看。2.6 2.6 使用使用FlexFlex帮助帮助开发开发Flex应用程序过程中难免会遇到困难，如对某一应用程序过程中难免会遇到困难，如对某一组件的某一属性不清楚，此时也查看组件的某一属性不清楚，此时也查看Flex 帮助。在安装帮助。在安装Flash Builder 4后，自动安装了后，自动安装了Flex 帮助。用户可选择帮助。用户可选择“帮助帮助” “帮助内容帮助内容”命令打开命令打开Flex 帮助。帮助。Flex 帮助左下方的图标表示显示全部内容，图标表示帮助左下方的图标表示显示全部内容，图标表示显示搜索结果，图标表示显示链接，图标表示显示书签。单击显示搜索结果，图标表示显示链接，图标表示显示书签。单击不同的图标会切换至不同的内容。另外，用户可在左上方的不同的图标会切换至不同的内容。另外，用户可在左上方的“搜索搜索”输入框中输入要搜索的内容。输入框中输入要搜索的内容。2.7 2.7 小结小结Flash Builder 4是功能强大的集成开发环境，能高效是功能强大的集成开发环境，能高效地开发地开发Flex应用程序。本章