Flex4.0RIA开发详解讲义.ppt
《Flex4.0RIA开发详解讲义.ppt》由会员分享,可在线阅读,更多相关《Flex4.0RIA开发详解讲义.ppt(619页珍藏版)》请在淘文阁 - 分享文档赚钱的网站上搜索。
1、第第1 1章章 Flex Flex概述概述Flex是是Adobe公司推出的一系列工具和技术,使开发公司推出的一系列工具和技术,使开发人员可以开发和部署可升级的富互联网应用程序(人员可以开发和部署可升级的富互联网应用程序(RIAs)。)。Flex提供了一种现代的、基于标准的语言来支持公共模板提供了一种现代的、基于标准的语言来支持公共模板设计、客户端运行环境、编程模型、开发模型和高级数据设计、客户端运行环境、编程模型、开发模型和高级数据服务。富互联网应用程序(服务。富互联网应用程序(RIAs)是指像使用)是指像使用Web一样的简一样的简单方式来部署富客户端程序。这种程序具有比单方式来部署富客户端程
2、序。这种程序具有比HTML更加更加健壮、反应更加灵敏和互动性更丰富的特点。健壮、反应更加灵敏和互动性更丰富的特点。1.1 Flex1.1 Flex简介简介传统的基于传统的基于HTML的应用程序部署成本低、结构简单、的应用程序部署成本低、结构简单、简单易学。很多用户和开发人员于是放弃了现代高性能计简单易学。很多用户和开发人员于是放弃了现代高性能计算机能带来的用户体验,转而追求数据的快速访问,从而算机能带来的用户体验,转而追求数据的快速访问,从而丧失了一些重要的丧失了一些重要的UI功能。功能。RIA利用相对健壮的客户端描述引擎。利用相对健壮的客户端描述引擎。RIA的另一个的另一个好处是:数据能够被
3、缓存在客户端,从而可以实现一个比好处是:数据能够被缓存在客户端,从而可以实现一个比基于基于HTML的响应速度更快且数据往返于服务器的次数更的响应速度更快且数据往返于服务器的次数更少的用户界面。少的用户界面。Flex是是Adobe公司近两年推出的重量级产品与技术。公司近两年推出的重量级产品与技术。Flex的出现就是为了高效地开发和部署富互联网应用程序。的出现就是为了高效地开发和部署富互联网应用程序。1.1 Flex1.1 Flex简介简介Adobe公司对于公司对于Flex采取了开源的策略,所以开发者采取了开源的策略,所以开发者可以在可以在Flex原代码的基础上修改。新版原代码的基础上修改。新版F
4、lex 4中的开发环境中的开发环境已经更名为已经更名为Flash Builder,而不再是,而不再是Flex Builder系列。系列。Flex采用事件驱动机制,程序的执行过程严格按照事件发采用事件驱动机制,程序的执行过程严格按照事件发生的时间顺序执行。本节将介绍为读者生的时间顺序执行。本节将介绍为读者Flex开发技术的特开发技术的特点、优点和新特性。点、优点和新特性。1.1.1 Flex1.1.1 Flex的技术特点的技术特点Flex可以在企业内部或在可以在企业内部或在 Web 上创建富互联网应用程上创建富互联网应用程序(序(RIA),堪称最完整、最强大的),堪称最完整、最强大的RIA开发解
5、决方案。它开发解决方案。它使企业能够创建个性化的丰富多媒体应用程序,极大地提使企业能够创建个性化的丰富多媒体应用程序,极大地提高用户的体验,彻底革新人与高用户的体验,彻底革新人与 Web 的交互关系。的交互关系。1增强用户体验增强用户体验2完善的开发环境完善的开发环境3通用的配置环境通用的配置环境4企业级的特征企业级的特征5消除页面加载消除页面加载6标准的架构标准的架构7与浏览器兼容与浏览器兼容1.1.2 Flex SDK 41.1.2 Flex SDK 4的新特性的新特性Flex 4较之较之Flex 3有了许多令人兴奋的新特性。有了许多令人兴奋的新特性。1新增主题和组件新增主题和组件2增强布
6、局方式增强布局方式3增强特效和滤镜效果增强特效和滤镜效果4新增双向绑定功能新增双向绑定功能5增强的增强的CSS6增强的增强的HTML模板模板7增强的状态增强的状态8增强增强ASDoc的支持的支持9运行时共享库运行时共享库10本地化本地化1.2 Flash Builder1.2 Flash Builder的下载与安装的下载与安装Flash Builder的安装文件可从的安装文件可从Adobe官方主页下载。官方主页下载。安装文件版本有安装文件版本有Flash Builder 4 Standalone Installer版本和版本和Flash Builder 4 Plugin for Eclipse
7、版本两种。版本两种。Flash Builder 4 Standalone Installer是独立的开发工具的版本,是独立的开发工具的版本,Flash Builder 4 Plugin for Eclipse是可将是可将Flex 4集成于集成于Eclipse的安的安装插件。本节介绍装插件。本节介绍Flash Builder 4 Standalone Installer的下的下载与安装。载与安装。1.2.1 1.2.1 安装安装Flash BuilderFlash Builder的系统要求的系统要求Flash Builder 4可以安装在可以安装在Windows操作系统上,也操作系统上,也可以安
8、装于可以安装于Mac OS X操作系统中。安装操作系统中。安装Flash Builder 4的的最低配置如下。最低配置如下。1Windows操作系统最低要求操作系统最低要求2Mac OS X操作系统最低要求操作系统最低要求1.2.2 1.2.2 下载下载Flash Builder BetaFlash Builder Beta(1)浏览器中输入)浏览器中输入“http:/”,打开,打开Adobe Flex主主页。页。(2)单击)单击“Flash Builder 4”图标或者文字链接,进图标或者文字链接,进入入Flash Builder 4的下载页面。的下载页面。(3)单击)单击“Download
9、 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 Bui
10、lder 4。1.2.3 Flash Builder 4 Beta1.2.3 Flash Builder 4 Beta的安装的安装(1)双击)双击“FlashBuilder.exe”,弹出选择安装语,弹出选择安装语言对话框。言对话框。(2)单击)单击“OK”按钮,弹出安装第一步骤按钮,弹出安装第一步骤“简介简介”对话框。对话框。(3)单击)单击“下一步下一步”按钮,弹出安装第二步骤按钮,弹出安装第二步骤“许许可协议可协议”对话框。对话框。(4)选择)选择“本人接受许可协议条款本人接受许可协议条款”单选框,单击单选框,单击“下一步下一步”按钮,弹出安装第三步骤按钮,弹出安装第三步骤“选择安装文件
11、夹选择安装文件夹”对话框。对话框。1.2.3 Flash Builder 4 Beta1.2.3 Flash Builder 4 Beta的安装的安装(5)在文本框中输入安装路径或是单击)在文本框中输入安装路径或是单击“选择选择”按按钮选择安装路径。钮选择安装路径。(6)单击)单击“安装安装”按钮。完成安装后自动弹出安装按钮。完成安装后自动弹出安装第五步骤第五步骤“安装完毕安装完毕”对话框。对话框。(7)单击)单击“完成完成”按钮,完成安装。按钮,完成安装。1.2.4 Flash Builder1.2.4 Flash Builder的新特性的新特性1新增工作流模式与新增工作流模式与Flash
12、Catalyst的支持的支持2新增网络监控功能新增网络监控功能3添加单元测试的支持添加单元测试的支持4新增新增ASDoc的支持的支持5自动生成自动生成getter和和setter6自动生成事件处理函数结构自动生成事件处理函数结构7增强调试器功能增强调试器功能8新增新增Flash CS4组件开发包组件开发包9导入和应用诸多主题导入和应用诸多主题10新增类包浏览器新增类包浏览器1.3 Flex1.3 Flex基础结构基础结构MXMLMXML介绍介绍开发者使用两种语言来写开发者使用两种语言来写Flex应用程序:应用程序:MXML和和ActionScript。MXML是一种是一种XML标识语言,用于进
13、行组标识语言,用于进行组件布局。件布局。MXML中的组件包括了可视组件和非可视组件。中的组件包括了可视组件和非可视组件。非外观组件可以是从服务器中读取的数据源或用户组件绑非外观组件可以是从服务器中读取的数据源或用户组件绑定至服务器中的数据。定至服务器中的数据。1.4 1.4 建立第一个建立第一个Flex 4Flex 4程序程序下面以下面以“Hello World”为第一个例子为读者详细说明为第一个例子为读者详细说明如何建立第一个如何建立第一个Flex 4程序,步骤如下。程序,步骤如下。(1)选择)选择“文件文件”|“新建新建”|“Flex项目项目”命令,命令,弹出弹出“新建新建Flex项目项目
14、”对话框。对话框。(2)在)在“项目名项目名”文本框中输入项目名称,文本框中输入项目名称,“应用应用程序类型程序类型”下拉框选择下拉框选择“Web(runs in Adobe Flash Palyer)”。(3)在)在“主应用程序主应用程序”文本框中输入默认项目启动文本框中输入默认项目启动的文件名,其他可默认。单击的文件名,其他可默认。单击“完成完成”按钮,完成项目的按钮,完成项目的创建。创建。1.4 1.4 建立第一个建立第一个Flex 4Flex 4程序程序(4)在编辑工作区中单击)在编辑工作区中单击“Design”按钮,进入设按钮,进入设计模式。计模式。(5)从左下角的)从左下角的“组件
15、组件”列表,选择列表,选择“控件控件”子文子文件夹下的件夹下的“标签标签”控件。拖动控件到设计模式工作区。控件。拖动控件到设计模式工作区。(6)选择)选择“标签标签”控件,然后在右下角的属性工作控件,然后在右下角的属性工作区里设置区里设置“标签标签”控件的属性。控件的属性。(7)在代码模式下,生成的)在代码模式下,生成的MXML代码。代码。1.5 1.5 编译与运行第一个编译与运行第一个Flex 4Flex 4程序程序前面建立了前面建立了“Hello World”程序,编译与运行程序的程序,编译与运行程序的步骤如下。步骤如下。(1)在想要成为程序默认初始页的)在想要成为程序默认初始页的mxml
16、文件上右击,文件上右击,选择选择“设置为默认应用程序设置为默认应用程序”。(2)菜单中选择)菜单中选择“运行运行”|“运行运行HelloWorld”命令,命令,Flash Builder 4就开始编译与运行程序。就开始编译与运行程序。(3)效果如图)效果如图1-19所示。所示。1.6 1.6 小结小结本章对本章对Flex进行了介绍,包括进行了介绍,包括Flex技术特点、新特性技术特点、新特性和优点。和优点。Flex应用程序具有丰富的交互性、操作性和用户应用程序具有丰富的交互性、操作性和用户体验,能开发出与体验,能开发出与HTML更强大的网络应用程序。更强大的网络应用程序。本章图文并茂地讲解了本
17、章图文并茂地讲解了Flash Builder 4的下载与安装。的下载与安装。Flash Builder 4是是Flex应用程序开发的利器,能快速、有效应用程序开发的利器,能快速、有效地开发地开发Flex应用程序。有关应用程序。有关Flash Builder 4的内容将在下一的内容将在下一章介绍。章介绍。本章最后以本章最后以“Hello World”为例,为读者详细讲解了为例,为读者详细讲解了Flex应用程序的开发编写及编译运行过程。应用程序的开发编写及编译运行过程。第第2 2章章 熟悉开发环境熟悉开发环境Flash Builder 4Flash Builder 4“工欲善其事必先利其器工欲善其
18、事必先利其器”。Flash Builder 4是是Adobe公司推出的集成开发环境。公司推出的集成开发环境。Flash Builder 4工作环境是一种工作环境是一种具有丰富特征的开发环境,有利于开发者开发具有丰富特征的开发环境,有利于开发者开发Flex和和ActionScript应用程序。应用程序。Flash Builder 4建立在建立在Eclipse这一这一开源的集成开发环境(开源的集成开发环境(IDE)上,用户可使用强大的代码编)上,用户可使用强大的代码编辑器,可视化设计器,调试工具等来开发辑器,可视化设计器,调试工具等来开发Flex应用程序。应用程序。2.1 2.1 熟悉熟悉Flas
19、h Builder 4Flash Builder 4工作区工作区Flash Builder 4工作区是开发工作区是开发Flex应用程序的工作环境,应用程序的工作环境,熟悉工作环境对开发的益处是显而易见的。熟悉工作环境对开发的益处是显而易见的。Flash Builder 4平台是基于平台是基于Eclipse平台,因此与平台,因此与Eclipse的布局风格异常相的布局风格异常相似。似。Flash Builder 4平台的特点是集可视化编辑与代码编辑平台的特点是集可视化编辑与代码编辑为一体,用户在为一体,用户在Flash Builder 4环境下可方便地切换设计模环境下可方便地切换设计模式和代码模式
20、。式和代码模式。2.1.1 Perspectives2.1.1 Perspectives(透视)(透视)透视是一种布局风格,与任务、编辑器和视图相关联。透视是一种布局风格,与任务、编辑器和视图相关联。一旦切换透视,对应的任务、编辑器或视图就可能发生改一旦切换透视,对应的任务、编辑器或视图就可能发生改变。变。Flash Builder 4包含包含3种透视:种透视:“Flash”透视、透视、“Flash Debug”透视以及透视以及“Flash Profile”透视。透视。2.1.2 Editors2.1.2 Editors(编辑器)(编辑器)1MXML编辑器编辑器2ActionScript编辑器
21、编辑器3CSS编辑器编辑器2.1.3 Views2.1.3 Views(视图)(视图)视图是用以辅助用户管理工程和开发项目。用户通过视图是用以辅助用户管理工程和开发项目。用户通过视图可以较直观地处理一些需求。例如,视图可以较直观地处理一些需求。例如,“包资源管理器包资源管理器”既可以管理工作区中的文件和文件夹,又可以浏览包和既可以管理工作区中的文件和文件夹,又可以浏览包和类的结构。类的结构。2.2 2.2 编译与运行编译与运行Flex 4Flex 4程序详解程序详解MXML语言和语言和ActionScript语言都是需要编译后才能语言都是需要编译后才能运行的。运行的。Flash Builder
22、 4开发环境中集成了两者的编译器,开发环境中集成了两者的编译器,用户只需选择相应的编译运行命令。用户只需选择相应的编译运行命令。本书在介绍第一个本书在介绍第一个Flex程序程序“Hello World”程序时,程序时,简单地介绍了了如何编译与运行简单地介绍了了如何编译与运行Flex应用程序。事实上编应用程序。事实上编译时可选的参数较多,本节将为读者介绍详细的编译与运译时可选的参数较多,本节将为读者介绍详细的编译与运行过程。仍以行过程。仍以“Hello World”为例,讲解编译与运行过程为例,讲解编译与运行过程中的可选参数。中的可选参数。2.3 2.3 调试调试Flex 4Flex 4程序程序
23、程序常包含不可知的逻辑错误,这些错误不属于编译程序常包含不可知的逻辑错误,这些错误不属于编译错误,编译器不能检查此类错误。例如,程序中要判断闰错误,编译器不能检查此类错误。例如,程序中要判断闰年,代码的语法正确但判断的方法是错误的,此时编译器年,代码的语法正确但判断的方法是错误的,此时编译器不会报错。使用在调试功能能跟踪代码每一步的执行,从不会报错。使用在调试功能能跟踪代码每一步的执行,从而检查逻辑错误。而检查逻辑错误。Flash Builder 4开发环境有强大的调试功开发环境有强大的调试功能,有利于程序进行代码检查。本节介绍如何调试能,有利于程序进行代码检查。本节介绍如何调试Flex应应用
24、程序,包括添加断点、开始调试、监视变量等。用程序,包括添加断点、开始调试、监视变量等。2.3.1 2.3.1 添加断点添加断点断点的作用是使应用程序在带断点的代码行处中断,断点的作用是使应用程序在带断点的代码行处中断,从而开始检查代码。同时,用户可使用从而开始检查代码。同时,用户可使用Flash Builder 4自带自带的调试工具检测并修复错误。例如,变量视图和表达式视的调试工具检测并修复错误。例如,变量视图和表达式视图。在代码编辑器中添加断点的方法很多。图。在代码编辑器中添加断点的方法很多。调试器只允许在以下代码的断点处中断。调试器只允许在以下代码的断点处中断。MXML标签中包含标签中包含
25、ActionScript事件处理,如事件处理,如。其中。其中“click”是单是单击处理事件。击处理事件。ActionScript代码中。可以是代码中。可以是MXML文件中的文件中的标签下,也可以是标签下,也可以是ActionScript文件中。文件中。ActionScript文件中的任何代码行。文件中的任何代码行。2.3.2 2.3.2 调试程序调试程序在设置完断点后可选择在设置完断点后可选择“运行运行”|“调试调试”命令,选命令,选择相应的运行配置开始调试。也可单击工具栏上的按钮或择相应的运行配置开始调试。也可单击工具栏上的按钮或快捷键快捷键F11开始调试。调试器运行后就会自动进入开始调试
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex4 RIA 开发 详解 讲义
限制150内