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

1、第第2 2部分部分 熟悉开发环境熟悉开发环境Flash Builder 4Flash Builder 4Flash 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平台的特点是集可视化编辑与代码编辑平台的特点是集可视化编辑与代码编辑为一体，用户在为一体，用户在Flash

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

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

5、言都是需要编译后才能运行的。行的。Flash Builder 4开发环境中集成了两者的编译器，用开发环境中集成了两者的编译器，用户只需选择相应的编译运行命令。户只需选择相应的编译运行命令。前面第一个前面第一个Flex程序程序“Hello World程序时，简单地介程序时，简单地介绍了了如何编译与运行绍了了如何编译与运行Flex应用程序。事实上编译时可选的应用程序。事实上编译时可选的参数较多。参数较多。2.3 2.3 调试调试Flex 4Flex 4程序程序程序常包含不可知的逻辑错误，这些错误不属于编译程序常包含不可知的逻辑错误，这些错误不属于编译错误，编译器不能检查此类错误。例如，程序中要判断

6、闰年错误，编译器不能检查此类错误。例如，程序中要判断闰年，代码的语法正确但判断的方法是错误的，此时编译器不会，代码的语法正确但判断的方法是错误的，此时编译器不会报错。使用在调试功能能跟踪代码每一步的执行，从而检查报错。使用在调试功能能跟踪代码每一步的执行，从而检查逻辑错误。逻辑错误。Flash Builder 4开发环境有强大的调试功能，有开发环境有强大的调试功能，有利于程序进行代码检查。利于程序进行代码检查。2.3.1 2.3.1 添加断点添加断点断点的作用是使应用程序在带断点的代码行处中断，断点的作用是使应用程序在带断点的代码行处中断，从而开始检查代码。同时，用户可使用从而开始检查代码。同

7、时，用户可使用Flash Builder 4自带自带的调试工具检测并修复错误。例如，变量视图和表达式视图的调试工具检测并修复错误。例如，变量视图和表达式视图。在代码编辑器中添加断点的方法很多。在代码编辑器中添加断点的方法很多。调试器只允许在以下代码的断点处中断。调试器只允许在以下代码的断点处中断。MXML标签中包含标签中包含ActionScript事件处理，如事件处理，如。其中。其中“click是单是单击处理事件。击处理事件。ActionScript代码中。可以是代码中。可以是MXML文件中的文件中的标签下，也可以是标签下，也可以是ActionScript文件中。文件中。ActionScrip

8、t文件中的任何代码行。文件中的任何代码行。2.3.2 2.3.2 调试程序调试程序在设置完断点后可选择在设置完断点后可选择“运转运转” “调试命令，选调试命令，选择相应的运行配置开始调试。也可单击工具栏上的按钮或快择相应的运行配置开始调试。也可单击工具栏上的按钮或快捷键捷键F11开始调试。调试器运行后就会自动进入开始调试。调试器运行后就会自动进入“Flash Debug透视。其中比较有用的是调试视图。透视。其中比较有用的是调试视图。在调试程序时常需要监视某些变量的变化，从而发现在调试程序时常需要监视某些变量的变化，从而发现代码中的错误。变量视图能自动跟踪程序中变量的变化。代码中的错误。变量视图

9、能自动跟踪程序中变量的变化。2.4 Flex 42.4 Flex 4项目工程概述项目工程概述Flex 4现支持创建的项目工程有三类：现支持创建的项目工程有三类：Flex 工程、工程、ActionScript 工程、和工程、和Flex 库项目。不同的工程用于开发不库项目。不同的工程用于开发不同的项目。同的项目。Flex 项目工程是普通的项目工程是普通的RIA工程，主要用于开发工程，主要用于开发互联网应用程序。互联网应用程序。ActionScript 项目工程主要用于开发项目工程主要用于开发ActionScript类库。类库。Flex 库项目用于开发共享库，可以是自库项目用于开发共享库，可以是自定

10、义组件，也可以是定义组件，也可以是ActionScript代码。代码。2.4.1 Flex 2.4.1 Flex 工程工程Flex 项目是最基础配置的工程，项目是最基础配置的工程，Flex项目包括两种应用项目包括两种应用程序类型：程序类型：Web和和Desktop。使用。使用Flex框架、框架、XML、Web services等来开发等来开发Flex应用程序。应用程序。Web应用程序类型是在应用程序类型是在Flash Builder 4中编译后会将可执行文件中编译后会将可执行文件swf文件放在文件放在HTML文件中，最终生成的是文件中，最终生成的是Web应用程序。应用程序。Desktop应用应

11、用程序类型是在程序类型是在Flash Builder 4中编译后会将文件放在中编译后会将文件放在AIR平平台中，最终生成的是台中，最终生成的是AIR应用程序。应用程序。2.4.2 ActionScript 2.4.2 ActionScript 工程工程ActionScript 项目使用的是项目使用的是Flash API，而不是，而不是Flex框架框架。ActionScript 项目没有可视化的表现。也就是说项目没有可视化的表现。也就是说ActionScript应用程序中没有设计模式这样的概念。应用程序中没有设计模式这样的概念。ActionScript项目编译后也可运行于项目编译后也可运行于Fl

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

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