Flex 4.0 RIA开发详解讲义

《Flex 4.0 RIA开发详解讲义》由会员分享，可在线阅读，更多相关《Flex 4.0 RIA开发详解讲义（619页珍藏版）》请在金锄头文库上搜索。

1、第1章 Flex概述Flex是Adobe公司推出的一系列工具和技术，使开发人 员可以开发和部署可升级的富互联网应用程序（RIAs）。 Flex提供了一种现代的、基于标准的语言来支持公共模板设 计、客户端运行环境、编程模型、开发模型和高级数据服务 。富互联网应用程序（RIAs）是指像使用Web一样的简单方 式来部署富客户端程序。这种程序具有比HTML更加健壮、 反应更加灵敏和互动性更丰富的特点。1.1 Flex简介传统的基于HTML的应用程序部署成本低、结构简单 、简单易学。很多用户和开发人员于是放弃了现代高性能计 算机能带来的用户体验，转而追求数据的快速访问，从而丧 失了一些重要的UI功能。

2、RIA利用相对健壮的客户端描述引擎。RIA的另一个好 处是：数据能够被缓存在客户端，从而可以实现一个比基于 HTML的响应速度更快且数据往返于服务器的次数更少的用 户界面。 Flex是Adobe公司近两年推出的重量级产品与技术。 Flex的出现就是为了高效地开发和部署富互联网应用程序。1.1 Flex简介Adobe公司对于Flex采取了开源的策略，所以开发者可 以在Flex原代码的基础上修改。新版Flex 4中的开发环境已 经更名为Flash Builder，而不再是Flex Builder系列。Flex采 用事件驱动机制，程序的执行过程严格按照事件发生的时间 顺序执行。本节将介绍为读者Fle

3、x开发技术的特点、优点和 新特性。1.1.1 Flex的技术特点Flex可以在企业内部或在 Web 上创建富互联网应用程 序（RIA），堪称最完整、最强大的RIA开发解决方案。它 使企业能够创建个性化的丰富多媒体应用程序，极大地提高 用户的体验，彻底革新人与 Web 的交互关系。 1增强用户体验 2完善的开发环境 3通用的配置环境 4企业级的特征 5消除页面加载 6标准的架构 7与浏览器兼容1.1.2 Flex SDK 4的新特性Flex 4较之Flex 3有了许多令人兴奋的新特性。 1新增主题和组件 2增强布局方式 3增强特效和滤镜效果 4新增双向绑定功能 5增强的CSS 6增强的HTML模

4、板 7增强的状态 8增强ASDoc的支持 9运行时共享库 10本地化1.2 Flash Builder的下载与安装Flash Builder的安装文件可从Adobe官方主页下载。安 装文件版本有Flash Builder 4 Standalone Installer版本和 Flash Builder 4 Plugin for Eclipse版本两种。Flash Builder 4 Standalone Installer是独立的开发工具的版本，Flash Builder 4 Plugin for Eclipse是可将Flex 4集成于Eclipse的安 装插件。本节介绍Flash Builde

5、r 4 Standalone Installer的下 载与安装。1.2.1 安装Flash Builder的系统要求Flash Builder 4可以安装在Windows操作系统上，也可 以安装于Mac OS X操作系统中。安装Flash Builder 4的最低 配置如下。 1Windows操作系统最低要求 2Mac OS X操作系统最低要求1.2.2 下载Flash Builder Beta（1）浏览器中输入“http:/ Adobe Flex主页。 （2）单击“Flash Builder 4”图标或者文字链接，进入 Flash Builder 4的下载页面。 （3）单击“Download

6、 the Flash Builder 4 beta 2 release”链接，进入Flash Builder 4验证页面。 （4）下载Adobe公司的产品需要输入Adobe ID和 Password，可以免费注册。注册步骤用户可按网页提示。 （5）单击“Flash Builder 4 Standalone Installer”下的 “Download Flash Builder 4 Installer for Windows”链接，开 始下载Windows平台版本的Flash Builder 4。1.2.3 Flash Builder 4 Beta的安装（1）双击“FlashBuilder.e

7、xe”，弹出选择安装语言对话 框。 （2）单击“OK”按钮，弹出安装第一步骤“简介”对话 框。 （3）单击“下一步”按钮，弹出安装第二步骤“许可协议 ”对话框。 （4）选择“本人接受许可协议条款”单选框，单击“下一 步”按钮，弹出安装第三步骤“选择安装文件夹”对话框。1.2.3 Flash Builder 4 Beta的安装（5）在文本框中输入安装路径或是单击“选择”按钮选 择安装路径。 （6）单击“安装”按钮。完成安装后自动弹出安装第五 步骤“安装完毕”对话框。 （7）单击“完成”按钮，完成安装。1.2.4 Flash Builder的新特性1新增工作流模式与Flash Catalyst的支

8、持 2新增网络监控功能 3添加单元测试的支持 4新增ASDoc的支持 5自动生成getter和setter 6自动生成事件处理函数结构 7增强调试器功能 8新增Flash CS4组件开发包 9导入和应用诸多主题 10新增类包浏览器1.3 Flex基础结构MXML介绍开发者使用两种语言来写Flex应用程序：MXML和 ActionScript。MXML是一种XML标识语言，用于进行组件 布局。MXML中的组件包括了可视组件和非可视组件。非外 观组件可以是从服务器中读取的数据源或用户组件绑定至服 务器中的数据。1.4 建立第一个Flex 4程序下面以“Hello World”为第一个例子为读者详细

9、说明如 何建立第一个Flex 4程序，步骤如下。 （1）选择“文件”|“新建”|“Flex项目”命令，弹出“新建 Flex项目”对话框。 （2）在“项目名”文本框中输入项目名称，“应用程序类 型”下拉框选择“Web(runs in Adobe Flash Palyer)”。 （3）在“主应用程序”文本框中输入默认项目启动的文 件名，其他可默认。单击“完成”按钮，完成项目的创建。1.4 建立第一个Flex 4程序（4）在编辑工作区中单击“Design”按钮，进入设计模 式。 （5）从左下角的“组件”列表，选择“控件”子文件夹下 的“标签”控件。拖动控件到设计模式工作区。 （6）选择“标签”控件，

10、然后在右下角的属性工作区里 设置“标签”控件的属性。 （7）在代码模式下，生成的MXML代码。1.5 编译与运行第一个Flex 4程序前面建立了“Hello World”程序，编译与运行程序的步 骤如下。 （1）在想要成为程序默认初始页的mxml文件上右击， 选择“设置为默认应用程序”。 （2）菜单中选择“运行”|“运行HelloWorld”命令， Flash Builder 4就开始编译与运行程序。 （3）效果如图1-19所示。1.6 小结本章对Flex进行了介绍，包括Flex技术特点、新特性和 优点。Flex应用程序具有丰富的交互性、操作性和用户体验 ，能开发出与HTML更强大的网络应用程

11、序。 本章图文并茂地讲解了Flash Builder 4的下载与安装。 Flash Builder 4是Flex应用程序开发的利器，能快速、有效 地开发Flex应用程序。有关Flash Builder 4的内容将在下一 章介绍。 本章最后以“Hello World”为例，为读者详细讲解了 Flex应用程序的开发编写及编译运行过程。第2章 熟悉开发环境Flash Builder 4“工欲善其事必先利其器”。Flash Builder 4是Adobe公 司推出的集成开发环境。Flash Builder 4工作环境是一种具 有丰富特征的开发环境，有利于开发者开发Flex和 ActionScript应

12、用程序。Flash Builder 4建立在Eclipse这一开 源的集成开发环境（IDE）上，用户可使用强大的代码编辑 器，可视化设计器，调试工具等来开发Flex应用程序。2.1 熟悉Flash Builder 4工作区Flash Builder 4工作区是开发Flex应用程序的工作环境 ，熟悉工作环境对开发的益处是显而易见的。Flash Builder 4平台是基于Eclipse平台，因此与Eclipse的布局风格异常相 似。Flash Builder 4平台的特点是集可视化编辑与代码编辑 为一体，用户在Flash Builder 4环境下可方便地切换设计模 式和代码模式。2.1.1 Pe

13、rspectives（透视）透视是一种布局风格，与任务、编辑器和视图相关联。 一旦切换透视，对应的任务、编辑器或视图就可能发生改变 。Flash Builder 4包含3种透视：“Flash”透视、“Flash Debug”透视以及“Flash Profile”透视。2.1.2 Editors（编辑器）1MXML编辑器 2ActionScript编辑器 3CSS编辑器2.1.3 Views（视图）视图是用以辅助用户管理工程和开发项目。用户通过视 图可以较直观地处理一些需求。例如，“包资源管理器”既可 以管理工作区中的文件和文件夹，又可以浏览包和类的结构 。2.2 编译与运行Flex 4程序详解

14、MXML语言和ActionScript语言都是需要编译后才能运 行的。Flash Builder 4开发环境中集成了两者的编译器，用 户只需选择相应的编译运行命令。 本书在介绍第一个Flex程序“Hello World”程序时，简 单地介绍了了如何编译与运行Flex应用程序。事实上编译时 可选的参数较多，本节将为读者介绍详细的编译与运行过程 。仍以“Hello World”为例，讲解编译与运行过程中的可选 参数。2.3 调试Flex 4程序程序常包含不可知的逻辑错误，这些错误不属于编译错 误，编译器不能检查此类错误。例如，程序中要判断闰年， 代码的语法正确但判断的方法是错误的，此时编译器不会报

15、 错。使用在调试功能能跟踪代码每一步的执行，从而检查逻 辑错误。Flash Builder 4开发环境有强大的调试功能，有利 于程序进行代码检查。本节介绍如何调试Flex应用程序，包 括添加断点、开始调试、监视变量等。2.3.1 添加断点断点的作用是使应用程序在带断点的代码行处中断，从 而开始检查代码。同时，用户可使用Flash Builder 4自带的 调试工具检测并修复错误。例如，变量视图和表达式视图。 在代码编辑器中添加断点的方法很多。 调试器只允许在以下代码的断点处中断。 MXML标签中包含ActionScript事件处理，如 。其中“click”是单击处 理事件。 ActionScr

16、ipt代码中。可以是MXML文件中的 标签下，也可以是ActionScript文件中。 ActionScript文件中的任何代码行。2.3.2 调试程序在设置完断点后可选择“运行”|“调试”命令，选择相应 的运行配置开始调试。也可单击工具栏上的按钮或快捷键 F11开始调试。调试器运行后就会自动进入“Flash Debug”透 视。其中比较有用的是调试视图。 在调试程序时常需要监视某些变量的变化，从而发现代 码中的错误。变量视图能自动跟踪程序中变量的变化。2.4 Flex 4项目工程概述Flex 4现支持创建的项目工程有三类：Flex 项目、 ActionScript 项目、和Flex 库项目。不同的工程用于开发不 同的项目。Flex 项目工程是普通的RIA工程，主要用于开发 互联网应用程序。ActionScript 项目工程主要用于开发 ActionScript类库。Flex 库项目用于开发共享库，可以是自 定义组件，也可