Flex4.0RIA开发详解讲义.ppt
《Flex4.0RIA开发详解讲义.ppt》由会员分享,可在线阅读,更多相关《Flex4.0RIA开发详解讲义.ppt(619页珍藏版)》请在三一办公上搜索。
1、第1章 Flex概述,Flex是Adobe公司推出的一系列工具和技术,使开发人员可以开发和部署可升级的富互联网应用程序(RIAs)。Flex提供了一种现代的、基于标准的语言来支持公共模板设计、客户端运行环境、编程模型、开发模型和高级数据服务。富互联网应用程序(RIAs)是指像使用Web一样的简单方式来部署富客户端程序。这种程序具有比HTML更加健壮、反应更加灵敏和互动性更丰富的特点。,1.1 Flex简介,传统的基于HTML的应用程序部署成本低、结构简单、简单易学。很多用户和开发人员于是放弃了现代高性能计算机能带来的用户体验,转而追求数据的快速访问,从而丧失了一些重要的UI功能。RIA利用相对
2、健壮的客户端描述引擎。RIA的另一个好处是:数据能够被缓存在客户端,从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器的次数更少的用户界面。Flex是Adobe公司近两年推出的重量级产品与技术。Flex的出现就是为了高效地开发和部署富互联网应用程序。,1.1 Flex简介,Adobe公司对于Flex采取了开源的策略,所以开发者可以在Flex原代码的基础上修改。新版Flex 4中的开发环境已经更名为Flash Builder,而不再是Flex Builder系列。Flex采用事件驱动机制,程序的执行过程严格按照事件发生的时间顺序执行。本节将介绍为读者Flex开发技术的特点、优点和新特
3、性。,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增强的CSS6增强的HTML模板7增强的状态8增强ASDoc的支持9运行时共享库10
4、本地化,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 Builder 4 Standalone Installer的下载与安装。,
5、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 the Flash Builder 4 beta 2 relea
6、se”链接,进入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.exe”,弹出选择安装语言对话框。(2)单击“OK”按钮,弹出安装第一步骤
7、“简介”对话框。(3)单击“下一步”按钮,弹出安装第二步骤“许可协议”对话框。(4)选择“本人接受许可协议条款”单选框,单击“下一步”按钮,弹出安装第三步骤“选择安装文件夹”对话框。,1.2.3 Flash Builder 4 Beta的安装,(5)在文本框中输入安装路径或是单击“选择”按钮选择安装路径。(6)单击“安装”按钮。完成安装后自动弹出安装第五步骤“安装完毕”对话框。(7)单击“完成”按钮,完成安装。,1.2.4 Flash Builder的新特性,1新增工作流模式与Flash Catalyst的支持2新增网络监控功能3添加单元测试的支持4新增ASDoc的支持5自动生成getter和
8、setter6自动生成事件处理函数结构7增强调试器功能8新增Flash CS4组件开发包9导入和应用诸多主题10新增类包浏览器,1.3 Flex基础结构MXML介绍,开发者使用两种语言来写Flex应用程序:MXML和ActionScript。MXML是一种XML标识语言,用于进行组件布局。MXML中的组件包括了可视组件和非可视组件。非外观组件可以是从服务器中读取的数据源或用户组件绑定至服务器中的数据。,1.4 建立第一个Flex 4程序,下面以“Hello World”为第一个例子为读者详细说明如何建立第一个Flex 4程序,步骤如下。(1)选择“文件”|“新建”|“Flex项目”命令,弹出“
9、新建Flex项目”对话框。(2)在“项目名”文本框中输入项目名称,“应用程序类型”下拉框选择“Web(runs in Adobe Flash Palyer)”。(3)在“主应用程序”文本框中输入默认项目启动的文件名,其他可默认。单击“完成”按钮,完成项目的创建。,1.4 建立第一个Flex 4程序,(4)在编辑工作区中单击“Design”按钮,进入设计模式。(5)从左下角的“组件”列表,选择“控件”子文件夹下的“标签”控件。拖动控件到设计模式工作区。(6)选择“标签”控件,然后在右下角的属性工作区里设置“标签”控件的属性。(7)在代码模式下,生成的MXML代码。,1.5 编译与运行第一个Fle
10、x 4程序,前面建立了“Hello World”程序,编译与运行程序的步骤如下。(1)在想要成为程序默认初始页的mxml文件上右击,选择“设置为默认应用程序”。(2)菜单中选择“运行”|“运行HelloWorld”命令,Flash Builder 4就开始编译与运行程序。(3)效果如图1-19所示。,1.6 小结,本章对Flex进行了介绍,包括Flex技术特点、新特性和优点。Flex应用程序具有丰富的交互性、操作性和用户体验,能开发出与HTML更强大的网络应用程序。本章图文并茂地讲解了Flash Builder 4的下载与安装。Flash Builder 4是Flex应用程序开发的利器,能快速
11、、有效地开发Flex应用程序。有关Flash Builder 4的内容将在下一章介绍。本章最后以“Hello World”为例,为读者详细讲解了Flex应用程序的开发编写及编译运行过程。,第2章 熟悉开发环境Flash Builder 4,“工欲善其事必先利其器”。Flash Builder 4是Adobe公司推出的集成开发环境。Flash Builder 4工作环境是一种具有丰富特征的开发环境,有利于开发者开发Flex和ActionScript应用程序。Flash Builder 4建立在Eclipse这一开源的集成开发环境(IDE)上,用户可使用强大的代码编辑器,可视化设计器,调试工具等来
12、开发Flex应用程序。,2.1 熟悉Flash Builder 4工作区,Flash Builder 4工作区是开发Flex应用程序的工作环境,熟悉工作环境对开发的益处是显而易见的。Flash Builder 4平台是基于Eclipse平台,因此与Eclipse的布局风格异常相似。Flash Builder 4平台的特点是集可视化编辑与代码编辑为一体,用户在Flash Builder 4环境下可方便地切换设计模式和代码模式。,2.1.1 Perspectives(透视),透视是一种布局风格,与任务、编辑器和视图相关联。一旦切换透视,对应的任务、编辑器或视图就可能发生改变。Flash Build
13、er 4包含3种透视:“Flash”透视、“Flash Debug”透视以及“Flash Profile”透视。,2.1.2 Editors(编辑器),1MXML编辑器2ActionScript编辑器3CSS编辑器,2.1.3 Views(视图),视图是用以辅助用户管理工程和开发项目。用户通过视图可以较直观地处理一些需求。例如,“包资源管理器”既可以管理工作区中的文件和文件夹,又可以浏览包和类的结构。,2.2 编译与运行Flex 4程序详解,MXML语言和ActionScript语言都是需要编译后才能运行的。Flash Builder 4开发环境中集成了两者的编译器,用户只需选择相应的编译运行
14、命令。本书在介绍第一个Flex程序“Hello World”程序时,简单地介绍了了如何编译与运行Flex应用程序。事实上编译时可选的参数较多,本节将为读者介绍详细的编译与运行过程。仍以“Hello World”为例,讲解编译与运行过程中的可选参数。,2.3 调试Flex 4程序,程序常包含不可知的逻辑错误,这些错误不属于编译错误,编译器不能检查此类错误。例如,程序中要判断闰年,代码的语法正确但判断的方法是错误的,此时编译器不会报错。使用在调试功能能跟踪代码每一步的执行,从而检查逻辑错误。Flash Builder 4开发环境有强大的调试功能,有利于程序进行代码检查。本节介绍如何调试Flex应用
15、程序,包括添加断点、开始调试、监视变量等。,2.3.1 添加断点,断点的作用是使应用程序在带断点的代码行处中断,从而开始检查代码。同时,用户可使用Flash Builder 4自带的调试工具检测并修复错误。例如,变量视图和表达式视图。在代码编辑器中添加断点的方法很多。调试器只允许在以下代码的断点处中断。MXML标签中包含ActionScript事件处理,如。其中“click”是单击处理事件。ActionScript代码中。可以是MXML文件中的标签下,也可以是ActionScript文件中。ActionScript文件中的任何代码行。,2.3.2 调试程序,在设置完断点后可选择“运行”|“调试
16、”命令,选择相应的运行配置开始调试。也可单击工具栏上的按钮或快捷键F11开始调试。调试器运行后就会自动进入“Flash Debug”透视。其中比较有用的是调试视图。在调试程序时常需要监视某些变量的变化,从而发现代码中的错误。变量视图能自动跟踪程序中变量的变化。,2.4 Flex 4项目工程概述,Flex 4现支持创建的项目工程有三类:Flex 项目、ActionScript 项目、和Flex 库项目。不同的工程用于开发不同的项目。Flex 项目工程是普通的RIA工程,主要用于开发互联网应用程序。ActionScript 项目工程主要用于开发ActionScript类库。Flex 库项目用于开发
17、共享库,可以是自定义组件,也可以是ActionScript代码。,2.4.1 Flex 项目,Flex 项目是最基础配置的工程,Flex项目包括两种应用程序类型:Web和Desktop。使用Flex框架、XML、Web services等来开发Flex应用程序。Web应用程序类型是在Flash Builder 4中编译后会将可执行文件(swf文件)放在HTML文件中,最终生成的是Web应用程序。Desktop应用程序类型是在Flash Builder 4中编译后会将文件放在AIR平台中,最终生成的是AIR应用程序。,2.4.2 ActionScript 项目,ActionScript 项目使用
18、的是Flash API,而不是Flex框架。ActionScript 项目没有可视化的表现。也就是说ActionScript应用程序中没有设计模式这样的概念。ActionScript项目编译后也可运行于Flash Player中。,2.4.3 Flex 库项目,Flex库项目用以创建自定义的代码库。代码库可共享于应用程序或是其他开发人员。Flex库项目编译后生成SWC文件。SWC文件包含组件、各种资源和catalog.xml文件。SWC常被用于制作主题和制作应用程序的外观。一个SWC主题可以包括多个CSS文件和全部的图片、动画资源。,2.5 Flash Builder 4常用快捷键,快捷键的作
19、用是使得开发工作更加高效和简单。Flash Builder 4中提供了许多快捷键。用户想要更多的快捷键说明,可选择“帮助”|“键辅助”命令或“Shift+Ctr+L”快捷键查看。,2.6 使用Flex帮助,开发Flex应用程序过程中难免会遇到困难,如对某一组件的某一属性不清楚,此时也查看Flex 帮助。在安装Flash Builder 4后,自动安装了Flex 帮助。用户可选择“帮助”|“帮助内容”命令打开Flex 帮助。Flex 帮助左下方的图标表示显示全部内容,图标表示显示搜索结果,图标表示显示链接,图标表示显示书签。单击不同的图标会切换至不同的内容。另外,用户可在左上方的“搜索”输入框中
20、输入要搜索的内容。,2.7 小结,Flash Builder 4是功能强大的集成开发环境,能高效地开发Flex应用程序。本章主要介绍了Flash Builder 4的相关基础。内容包括熟悉Flash Builder 4工作区,如何编译运行程序,如何调试程序,不同项目工程的作用、常用快捷键、Flex 帮助的使用等。通过本章的学习,读者会对Flash Builder 4的开发环境会有一个比较清楚的了解。,第3章 ActionScript 3.0基础,ActionScript 3.0是在Flash Player运行环境下的编程语言,是一种面向对象的语言。在Flex工程中,使用ActionScript
21、 3.0语言作为编程语言。应用程序的功能实现全部依赖于ActionScript 3.0。,3.1 ActionScript 3.0概述,ActionScript 3.0是运行于Flash Player运行环境的编程语言,使用新的ActionScript虚拟机AVM 2。AVM 2使用新的二进制指令集,并在性能上有很大改进。同时,ActionScript 3.0使用面向对象模型,扩展和提高了应用程序接口。ActionScript 3.0代码被Flex Builder或Flash中的编译器编译成二进制数据。这种二进制数据被装入SWF文件中,然后运行于Flash Player运行环境中。,3.2 使
22、用ActionScript 3.0,Flex工程中可有两种方式使用ActionScript 3.0代码:一种是在MXML文件的标签下使用ActionScript 3.0代码,另一种是直接在AS文件中编写ActionScript 3.0代码。,3.2.1 在MXML文件中直接编写ActionScript 3.0,在MXML文件中编写ActionScript 3.0代码,只要在MXML文件下插入标签。在MXML文件中的标签下使用ActionScript 3.0。在Flex Builder 3的编辑器中输入标签会自动封闭。例如,输入“”后,自动生成封闭区域“”。,3.2.2 在AS文件中编写Acti
23、onScript 3.0,ActionScript Class、ActionScript File和ActionScript Interface都属于AS文件。它们三者的文件格式都为AS格式,不同的只是其中的定义有所区别。Flex应用程序中最常使用的AS文件是ActionScript Class,也就类的定义。用户可使用ActionScript Class创建向导来完成创建。,3.2.3 MXML中引用AS文件,MXML文件中若要引用AS文件有两种方式:一种是引用使用标签中的“source”属性。这种方式可看成是将MXML文件和AS文件分离,从而减小MXML文件的代码,提高重用性。另外一种方法
24、是引用ActionScript Class(类)。使用这种方法的前提是AS文件中定义的是一个类。,3.3 创建第一个ActionScript 3.0应用程序,用户可以使用Flash、Flex Builder、Dreamweaver等任何文本编辑器编写ActionScript 3.0代码(as格式文件)。1设计ActionScript 3.0应用程序2创建HelloWorld工程和Greeter类3编写Greeter类4HelloWorld.mxml文件中添加ActionScript 3.0代码5编译运行程序,3.4 小结,ActionScript 3.0是Flex应用程序中的编程语言,控制Fl
25、ex应用程序的执行,完成应用程序的各项功能。在Flex工程中使用ActionScript 3.0有两种方法:一种是在MXML文件的标签下,一种是在AS文件中。对于大型应用程序来说,代码与模型的分离能使得程序更简洁。另外,将ActionScript 3.0代码写入AS文件也提高了代码的重用性。可以使用标签中的Source属性来指明引用的AS文件,也可以使用引用类的方法来使用AS类。,第4章 数据类型,程序中使用的各种变量都应预先加以定义,即先定义,后使用。对变量的定义可以包括三个方面:数据类型,存储类型,作用域。数据类型表示了变量的性质、表示形式、占据存储空间等。在ActionScript 3.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex4 RIA 开发 详解 讲义
链接地址:https://www.31ppt.com/p-6505805.html