Flex 4.0 RIA开发详解(第2版)完整版PPT电子教案.ppt

第1章Flex概述,Flex是Adobe公司推出的一系列工具和技术，使开发人员可以开发和部署可升级的富互联网应用程序（RIAs）。Flex提供了一种现代的、基于标准的语言来支持公共模板设计、客户端运行环境、编程模型、开发模型和高级数据服务。富互联网应用程序（RIAs）是指像使用Web一样的简单方式来部署富客户端程序。这种程序具有比HTML更加健壮、反应更加灵敏和互动性更丰富的特点。,1.1Flex简介,传统的基于HTML的应用程序部署成本低、结构简单、简单易学。很多用户和开发人员于是放弃了现代高性能计算机能带来的用户体验，转而追求数据的快速访问，从而丧失了一些重要的UI功能。RIA利用相对健壮的客户端描述引擎。RIA的另一个好处是：数据能够被缓存在客户端，从而可以实现一个比基于HTML的响应速度更快且数据往返于服务器的次数更少的用户界面。Flex是Adobe公司近两年推出的重量级产品与技术。Flex的出现就是为了高效地开发和部署富互联网应用程序。,1.1Flex简介,Adobe公司对于Flex采取了开源的策略，所以开发者可以在Flex原代码的基础上修改。新版Flex4中的开发环境已经更名为FlashBuilder，而不再是FlexBuilder系列。Flex采用事件驱动机制，程序的执行过程严格按照事件发生的时间顺序执行。本节将介绍为读者Flex开发技术的特点、优点和新特性。,1.1.1Flex的技术特点,Flex可以在企业内部或在Web上创建富互联网应用程序（RIA），堪称最完整、最强大的RIA开发解决方案。它使企业能够创建个性化的丰富多媒体应用程序，极大地提高用户的体验，彻底革新人与Web的交互关系。1增强用户体验2完善的开发环境3通用的配置环境4企业级的特征5消除页面加载6标准的架构7与浏览器兼容,1.1.2FlexSDK4的新特性,Flex4较之Flex3有了许多令人兴奋的新特性。1新增主题和组件2增强布局方式3增强特效和滤镜效果4新增双向绑定功能5增强的CSS6增强的HTML模板7增强的状态8增强ASDoc的支持9运行时共享库10本地化,1.2FlashBuilder的下载与安装,FlashBuilder的安装文件可从Adobe官方主页下载。安装文件版本有FlashBuilder4StandaloneInstaller版本和FlashBuilder4PluginforEclipse版本两种。FlashBuilder4StandaloneInstaller是独立的开发工具的版本，FlashBuilder4PluginforEclipse是可将Flex4集成于Eclipse的安装插件。本节介绍FlashBuilder4StandaloneInstaller的下载与安装。,1.2.1安装FlashBuilder的系统要求,FlashBuilder4可以安装在Windows操作系统上，也可以安装于MacOSX操作系统中。安装FlashBuilder4的最低配置如下。1Windows操作系统最低要求2MacOSX操作系统最低要求,1.2.2下载FlashBuilderBeta,（1）浏览器中输入“,1.2.3FlashBuilder4Beta的安装,（1）双击“FlashBuilder.exe”，弹出选择安装语言对话框。（2）单击“OK”按钮，弹出安装第一步骤“简介”对话框。（3）单击“下一步”按钮，弹出安装第二步骤“许可协议”对话框。（4）选择“本人接受许可协议条款”单选框，单击“下一步”按钮，弹出安装第三步骤“选择安装文件夹”对话框。,1.2.3FlashBuilder4Beta的安装,（5）在文本框中输入安装路径或是单击“选择”按钮选择安装路径。（6）单击“安装”按钮。完成安装后自动弹出安装第五步骤“安装完毕”对话框。（7）单击“完成”按钮，完成安装。,1.2.4FlashBuilder的新特性,1新增工作流模式与FlashCatalyst的支持2新增网络监控功能3添加单元测试的支持4新增ASDoc的支持5自动生成getter和setter6自动生成事件处理函数结构7增强调试器功能8新增FlashCS4组件开发包9导入和应用诸多主题10新增类包浏览器,1.3Flex基础结构MXML介绍,开发者使用两种语言来写Flex应用程序：MXML和ActionScript。MXML是一种XML标识语言，用于进行组件布局。MXML中的组件包括了可视组件和非可视组件。非外观组件可以是从服务器中读取的数据源或用户组件绑定至服务器中的数据。,1.4建立第一个Flex4程序,下面以“HelloWorld”为第一个例子为读者详细说明如何建立第一个Flex4程序，步骤如下。（1）选择“文件”|“新建”|“Flex项目”命令，弹出“新建Flex项目”对话框。（2）在“项目名”文本框中输入项目名称，“应用程序类型”下拉框选择“Web(runsinAdobeFlashPalyer)”。（3）在“主应用程序”文本框中输入默认项目启动的文件名，其他可默认。单击“完成”按钮，完成项目的创建。,1.4建立第一个Flex4程序,（4）在编辑工作区中单击“Design”按钮，进入设计模式。（5）从左下角的“组件”列表，选择“控件”子文件夹下的“标签”控件。拖动控件到设计模式工作区。（6）选择“标签”控件，然后在右下角的属性工作区里设置“标签”控件的属性。（7）在代码模式下，生成的MXML代码。,1.5编译与运行第一个Flex4程序,前面建立了“HelloWorld”程序，编译与运行程序的步骤如下。（1）在想要成为程序默认初始页的mxml文件上右击，选择“设置为默认应用程序”。（2）菜单中选择“运行”|“运行HelloWorld”命令，FlashBuilder4就开始编译与运行程序。（3）效果如图1-19所示。,1.6小结,本章对Flex进行了介绍，包括Flex技术特点、新特性和优点。Flex应用程序具有丰富的交互性、操作性和用户体验，能开发出与HTML更强大的网络应用程序。本章图文并茂地讲解了FlashBuilder4的下载与安装。FlashBuilder4是Flex应用程序开发的利器，能快速、有效地开发Flex应用程序。有关FlashBuilder4的内容将在下一章介绍。本章最后以“HelloWorld”为例，为读者详细讲解了Flex应用程序的开发编写及编译运行过程。,第2章熟悉开发环境FlashBuilder4,“工欲善其事必先利其器”。FlashBuilder4是Adobe公司推出的集成开发环境。FlashBuilder4工作环境是一种具有丰富特征的开发环境，有利于开发者开发Flex和ActionScript应用程序。FlashBuilder4建立在Eclipse这一开源的集成开发环境（IDE）上，用户可使用强大的代码编辑器，可视化设计器，调试工具等来开发Flex应用程序。,2.1熟悉FlashBuilder4工作区,FlashBuilder4工作区是开发Flex应用程序的工作环境，熟悉工作环境对开发的益处是显而易见的。FlashBuilder4平台是基于Eclipse平台，因此与Eclipse的布局风格异常相似。FlashBuilder4平台的特点是集可视化编辑与代码编辑为一体，用户在FlashBuilder4环境下可方便地切换设计模式和代码模式。,2.1.1Perspectives（透视）,透视是一种布局风格，与任务、编辑器和视图相关联。一旦切换透视，对应的任务、编辑器或视图就可能发生改变。FlashBuilder4包含3种透视：“Flash”透视、“FlashDebug”透视以及“FlashProfile”透视。,2.1.2Editors（编辑器）,1MXML编辑器2ActionScript编辑器3CSS编辑器,2.1.3Views（视图）,视图是用以辅助用户管理工程和开发项目。用户通过视图可以较直观地处理一些需求。例如，“包资源管理器”既可以管理工作区中的文件和文件夹，又可以浏览包和类的结构。,2.2编译与运行Flex4程序详解,MXML语言和ActionScript语言都是需要编译后才能运行的。FlashBuilder4开发环境中集成了两者的编译器，用户只需选择相应的编译运行命令。本书在介绍第一个Flex程序“HelloWorld”程序时，简单地介绍了了如何编译与运行Flex应用程序。事实上编译时可选的参数较多，本节将为读者介绍详细的编译与运行过程。仍以“HelloWorld”为例，讲解编译与运行过程中的可选参数。,2.3调试Flex4程序,程序常包含不可知的逻辑错误，这些错误不属于编译错误，编译器不能检查此类错误。例如，程序中要判断闰年，代码的语法正确但判断的方法是错误的，此时编译器不会报错。使用在调试功能能跟踪代码每一步的执行，从而检查逻辑错误。FlashBuilder4开发环境有强大的调试功能，有利于程序进行代码检查。本节介绍如何调试Flex应用程序，包括添加断点、开始调试、监视变量等。,2.3.1添加断点,断点的作用是使应用程序在带断点的代码行处中断，从而开始检查代码。同时，用户可使用FlashBuilder4自带的调试工具检测并修复错误。例如，变量视图和表达式视图。在代码编辑器中添加断点的方法很多。调试器只允许在以下代码的断点处中断。MXML标签中包含ActionScript事件处理，如。其中“click”是单击处理事件。ActionScript代码中。可以是MXML文件中的标签下，也可以是ActionScript文件中。ActionScript文件中的任何代码行。,2.3.2调试程序,在设置完断点后可选择“运行”|“调试”命令，选择相应的运行配置开始调试。也可单击工具栏上的按钮或快捷键F11开始调试。调试器运行后就会自动进入“FlashDebug”透视。其中比较有用的是调试视图。在调试程序时常需要监视某些变量的变化，从而发现代码中的错误。变量视图能自动跟踪程序中变量的变化。,2.4Flex4项目工程概述,Flex4现支持创建的项目工程有三类：Flex项目、ActionScript项目、和Flex库项目。不同的工程用于开发不同的项目。Flex项目工程是普通的RIA工程，主要用于开发互联网应用程序。ActionScript项目工程主要用于开发ActionScript类库。Flex库项目用于开发共享库，可以是自定义组件，也可以是ActionScript代码。,2.4.1Flex项目,Flex项目是最基础配置的工程，Flex项目包括两种应用程序类型：Web和Desktop。使用Flex框架、XML、Webservices等来开发Flex应用程序。Web应用程序类型是在FlashBuilder4中编译后会将可执行文件（swf文件）放在HTML文件中，最终生成的是Web应用程序。Desktop应用程序类型是在FlashBuilder4中编译后会将文件放在AIR平台中，最终生成的是AIR应用程序。,2.4.2ActionScript项目,ActionScript项目使用的是FlashAPI，而不是Flex框架。ActionScript项目没有可视化的表现。也就是说ActionScript应用程序中没有设计模式这样的概念。ActionScript项目编译后也可运行于FlashPlayer中。,2.4.3Flex库项目,Flex库项目用以创建自定义的代码库。代码库可共享于应用程序或是其他开发人员。Flex库项目编译后生成SWC文件。SWC文件包含组件、各种资源和catalog.xml文件。SWC常被用于制作主题和制作应用程序的外观。一个SWC主题可以包括多个CSS文件和全部的图片、动画资源。,2.5FlashBuilder4常用快捷键,快捷键的作用是使得开发工作更加高效和简单。FlashBuilder4中提供了许多快捷键。用户想要更多的快捷键说明，可选择“帮助”|“键辅助”命令或“Shift+Ctr+L”快捷键查看。,2.6使用Flex帮助,开发Flex应用程序过程中难免会遇到困难，如对某一组件的某一属性不清楚，此时也查看Flex帮助。在安装FlashBuilder4后，自动安装了Flex帮助。用户可选择“帮助”|“帮助内容”命令打开Flex帮助。Flex帮助左下方的图标表示显示全部内容，图标表示显示搜索结果，图标表示显示链接，图标表示显示书签。单击不同的图标会切换至不同的内容。另外，用户可在左上方的“搜索”输入框中输入要搜索的内容。,2.7小结,FlashBuilder4是功能强大的集成开发环境，能高效地开发Flex应用程序。本章主要介绍了FlashBuilder4的相关基础。内容包括熟悉FlashBuilder4工作区，如何编译运行程序，如何调试程序，不同项目工程的作用、常用快捷键、Flex帮助的使用等。通过本章的学习，读者会对FlashBuilder4的开发环境会有一个比较清楚的了解。,第3章ActionScript3.0基础,ActionScript3.0是在FlashPlayer运行环境下的编程语言，是一种面向对象的语言。在Flex工程中，使用ActionScript3.0语言作为编程语言。应用程序的功能实现全部依赖于ActionScript3.0。,3.1ActionScript3.0概述,ActionScript3.0是运行于FlashPlayer运行环境的编程语言，使用新的ActionScript虚拟机AVM2。AVM2使用新的二进制指令集，并在性能上有很大改进。同时，ActionScript3.0使用面向对象模型，扩展和提高了应用程序接口。ActionScript3.0代码被FlexBuilder或Flash中的编译器编译成二进制数据。这种二进制数据被装入SWF文件中，然后运行于FlashPlayer运行环境中。,3.2使用ActionScript3.0,Flex工程中可有两种方式使用ActionScript3.0代码：一种是在MXML文件的标签下使用ActionScript3.0代码，另一种是直接在AS文件中编写ActionScript3.0代码。,3.2.1在MXML文件中直接编写ActionScript3.0,在MXML文件中编写ActionScript3.0代码，只要在MXML文件下插入标签。在MXML文件中的标签下使用ActionScript3.0。在FlexBuilder3的编辑器中输入标签会自动封闭。例如，输入“”后，自动生成封闭区域“”。,3.2.2在AS文件中编写ActionScript3.0,ActionScriptClass、ActionScriptFile和ActionScriptInterface都属于AS文件。它们三者的文件格式都为AS格式，不同的只是其中的定义有所区别。Flex应用程序中最常使用的AS文件是ActionScriptClass，也就类的定义。用户可使用ActionScriptClass创建向导来完成创建。,3.2.3MXML中引用AS文件,MXML文件中若要引用AS文件有两种方式：一种是引用使用标签中的“source”属性。这种方式可看成是将MXML文件和AS文件分离，从而减小MXML文件的代码，提高重用性。另外一种方法是引用ActionScriptClass（类）。使用这种方法的前提是AS文件中定义的是一个类。,3.3创建第一个ActionScript3.0应用程序,用户可以使用Flash、FlexBuilder、Dreamweaver等任何文本编辑器编写ActionScript3.0代码（as格式文件）。1设计ActionScript3.0应用程序2创建HelloWorld工程和Greeter类3编写Greeter类4HelloWorld.mxml文件中添加ActionScript3.0代码5编译运行程序,3.4小结,ActionScript3.0是Flex应用程序中的编程语言，控制Flex应用程序的执行，完成应用程序的各项功能。在Flex工程中使用ActionScript3.0有两种方法：一种是在MXML文件的标签下，一种是在AS文件中。对于大型应用程序来说，代码与模型的分离能使得程序更简洁。另外，将ActionScript3.0代码写入AS文件也提高了代码的重用性。可以使用标签中的Source属性来指明引用的AS文件，也可以使用引用类的方法来使用AS类。,第4章数据类型,程序中使用的各种变量都应预先加以定义，即先定义，后使用。对变量的定义可以包括三个方面：数据类型，存储类型，作用域。数据类型表示了变量的性质、表示形式、占据存储空间等。在ActionScript3.0语言中，数据类型可分为：基本数据类型：其值不可以再分解为其他类型。复杂数据类型：复杂数据类型根据已定义的一个或多个数据类型定义。,4.1常量与变量,对于基本数据类型量，按其取值是否可改变又分为常量和变量两种。在程序执行过程中，其值不发生改变的量称为常量，其值可变的量称为变量。常量和变量可与数据类型结合起来，如整型常量、整型变量、实型常量、实型变量、字符串常量、字符串变量。在程序中常量是可以不经说明而直接引用的，而变量则必须先定义后使用。,4.1.1直接常量和符号常量,1直接常量整型常量：12、0、-3；实型常量：4.6、-1.23；字符串常量：“adf”、“b”。2符号常量符号常量是用标识符代表一个常量。标识符是用来标识变量名、符号常量名、函数名、数组名、类型名、文件名的有效字符序列。,4.1.2变量,程序中其值可以改变的量称为变量。一个变量应该有一个名字，在内存中占据一定的存储单元。变量定义必须放在变量使用之前。变量名和变量值是两个不同的概念。变量名是指变量的名称，用以区别不同的变量。变量值是指变量中包含的值。,4.1.3变量赋初值,变量赋初值是指变量定义时就赋值给变量，也称为变量初始化。,4.1.4局部变量和全局变量,局部变量也称为内部变量，是在函数内作定义说明的变量。其作用域仅限于函数内，离开该函数后再使用这种变量就是非法的。主调函数中定义的变量也只能在主调函数中使用，不能在其他函数中使用。形参变量是属于被调函数的局部变量，实参变量是属于主调函数的局部变量。允许在不同的函数中使用相同的变量名。全局变量也称为外部变量，是在函数外部定义的变量。,4.1.5变量的存储方式,变量的存储方式按是否预先分配内存空间，可分为动态存储方式和静态存储方式。静态存储方式是指在程序运行期间分配固定的存储空间方式。动态存储方式是指在程序运行期间根据需要进行动态的分配存储空间方式。用户存储空间可以分为3个部分：程序区静态存储区动态存储区动态存储区存放以下数据：函数形式参数自动变量（未加static声明的局部变量）,4.1.5变量的存储方式,函数调用时的现场保护和返回地址对于以上这些数据，在函数开始调用时分配动态存储空间，函数结束时释放这些空间。有时用户希望函数中的局部变量的值在函数调用结束后仍保留原值，这时就需要指定局部变量为静态局部变量，使用用关键字static进行声明。,4.2整型数据,整型数据用以存储整型量，如2、60等。整型数据可以是整型常量，也可以是整型变量。,4.2.1整型常量,1十进制整型常量2八进制整型常量3十六进制整型常量,4.2.2整型变量,1整型变量的分类2整型变量的定义3整型数据的溢出,4.3实型数据,实型数据用以存储实型量。ActionScript3.0中实型数据类型只有一种：Number型。实型数据可以是实型常量，也可以是实型变量。,4.3.1实型常量的表示方法,1十进制形式2指数形式,4.3.2实型变量,1实型数据在内存中的存放形式2实型变量的定义3实型数据的舍入误差,4.4字符串数据,字符串数据存储字符串量，包括字符串常量和字符串变量。ActionScript3.0中字符串数据类型为：String型。,4.4.1字符串常量,字符串常量是指存储字符串的常量，由一对双引号或单引号封闭的字符串序列。,4.4.2转义字符,转义字符是一种特殊的字符常量，主要用来表示那些用一般字符不便于表示的控制代码。转义字符以反斜线开头，后跟一个或几个字符。,4.4.3字符串变量,字符串变量是指存储字符串的变量。,4.5各类型数据之间的转换,变量的数据类型是可以转换的。转换的方法有两种，一种是自动转换，一种是强制转换。,4.5.1自动类型转换,自动转换遵循以下规则：（1）若参与运算量的类型不同，则先转换成同一类型，然后进行运算。（2）转换按数据长度增加的方向进行，以保证精度不降低。（3）在赋值运算中，赋值号两边量的数据类型不同时，赋值号右边量的类型将转换为左边量的类型。,4.5.2强制类型转换,强制类型转换把表达式的运算结果强制转换成某种数据类型。在使用强制转换时应注意以下问题：（1）括号所处的位置要正确。（2）无论是强制转换或是自动转换，都只是为了本次运算的需要而对变量的数据长度进行的临时性转换，而不改变数据说明时对该变量定义的类型。,4.6小结,ActionScript3.0中的数据类型分为基本数据类型和复杂数据类型。本章详细介绍了整型、实型、字符串型。根据数据是否是变量或常量，基本数据又可分为整型常量、整型变量、实型常量、实型变量、字符串常量、字符串变量。各数据类型间可进行转换。转换的方式有自动转换和强制转换两种。自动转换由编译器自动完成，强制转换由用户确定转换的方向。,第5章运算符和表达式,ActionScript3.0语言中运算符和表达式很多。丰富的运算符和表达式使得ActionScript3.0语言功能强大。ActionScript3.0语言的运算符不仅具有不同的优先级，而且还有一个特点，就是它的结合性。在表达式中，各运算量参与运算的先后顺序不仅要遵守运算符优先级别的规定，还要受运算符结合性的制约：到底是自左向右进行运算还是自右向左进行运算。这种结合性增加了ActionScript3.0语言的复杂性。,5.1ActionScript3.0运算符简介,ActionScript3.0语言的运算符可分为以下几类：算术运算符用于各类数值运算，包括加“+”、减“-”、乘“*”、除“/”、求余“%”、自增“+”、自减“-”，共7种。关系运算符用于比较运算，包括大于“”、小于“=”、小于等于“”，共6种。,5.1ActionScript3.0运算符简介,特殊运算符，如括号“()”，下标“”，取XML属性“”等。赋值运算符用于赋值运算，分为简单赋值（=）、复合算术赋值（+=,-=,*=,/=,%=）和复合位运算赋值（phaFrom和alphaTo属性后可实现渐显或渐隐效果。按下Ctrl+F11键编译运行程序。,16.2.7交叉渐显组件CrossFade,与Fade组件不同的是，CrossFade组件在图片切换的时候，有一个很明显的交叉过度特效。,16.2.8Animate,在Flex4.0中，所有的新的特效组件类都是继承自Animate类的，也就是说，Animate类是其他特效类的父类。所以使用Animate类，可以实现其他特效类实现的效果。,16.2.9AnimateColor,AnimateColor组件是在Animate组件基础上，增加了颜色变换的特效。,16.2.10AnimateShaderTransition,AnimateShaderTransition组件是在Animate组件的基础上，添加了图形扭曲变形的过度转换特效。其中shaderCode属性表示扭曲变形的类型，一般是使用pbj格式定义。,16.3自定义组件界面,自定义组件界面的方法有直接使用组件属性、使用setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样式内容在后续章节中详细介绍。,16.3.1使用组件属性改变界面,自定义组件界面可直接使用组件属性。组件中有关样式的属性很多，也不尽相同，但方法是一致的。,16.3.2使用setStyle()方法改变界面,Flex组件中都有一个setStyle()方法，用以动态修改组件界面。例如，按下按钮后修改其他组件的界面。,16.4使用Filter滤镜类,滤镜是对矢量图的特殊效果处理，在PhotoShop等专业矢量图处理工具中经常使用。Flex3.0中提供少量的滤镜类，包含于“flash.filter.*”中。,16.5FXG图形格式（新增）,FXG定义了Flex的图形格式的描述规范。FXG产生的目的其实是为了不同平台之间的数据交换，以提供更好的工作流程。,16.5.1使用FXG,FlashXMLGraphics（FXG）是在构建Flex应用程序时，定义的一种图形格式。使用FXG，Flex可以同其他的Adobe工具，如FlashCatalyst、Illustrator等交换数据。这样可以大大简化整个设计和开发的工作流程。界面图形设计师可以使用通过其他平面设计工具。开发工程师就可以把FXG文件直接在Flex项目中应用。,16.5.2路径Path类,在矢量图形中，路径就是由一系列的点组成的，最后再由线汇集成一个图像。在Flex中，可以使用Path类，通过绘制线来定义一个矢量图形。其中，LineSegment，CubicBezierSegment，和QuadraticBezierSegment类，可以定义线的类型。在绘制线或者图形之前，需要使用MoveSegment类定义起始位置。标签是FXG中比较常用的，定义了图形边框样式，如颜色、粗细等。,16.5.3群组Group类,Group是所有容器组件中最基本的类，所有的容器组件都是继承Group类的。相当于Flex4之前版本的Canvas组件，但是新的Group要比Canvas更加的简洁、体积更加小。,16.5.4图形元素,在FXG中，所有的图形元素都是继承自IgraphicElement接口。FXG中定义的基本图形元素有矩形、椭圆形、线。矩形使用标签绘制，椭圆形使用标签绘制，线使用标签绘制。,16.5.5文字布局,在Flex4之前，官方已经推出了一个开源框架TextLayoutFramework，该框架意在处理复杂的文字排列方式，如横向排列。在Flex4中，已经集成了该框架的基本功能，而且在文字显示的相关组件中，也添加了新的属性，使得可以更加方便地使用。,16.5.6填充图形,使用标签，可以对图形进行颜色或者图像的填充。填充的类型有单色填充SolidColor、放射性填充RadialGradient、线性填充LinearGradient和图像填充BitmapFill。,16.5.7位图BitmapImage标签,可以使用标签把图像填充在一个规则的区域内。区域和图像的关系就如同系统的桌面和背景一样，可以重复平铺，可以适合区域的拉伸图像，也可以对图像剪裁。,16.5.8遮罩特性,FXG同样也支持遮罩的特性。遮罩简单来说就是使得组件元素以特定的方式部分呈现出来。FXG中提供了两种类型的遮罩呈现方式：clipping和alpha。clipping就是按照遮罩层的组件元素，区域呈现出来，而alpha则是呈现的透明度。,16.6小结,本章主要介绍了Fex4.0中如何自定义效果来美化界面。组件界面可直接使用样式属性，也可使用setStyle()方法。Flex4.0中有丰富的效果组件，用户可通过组合多种效果组件制定满足需要的效果。另外，Flex4.0中也提供了少量的滤镜类，用以支持更特殊的效果。在本章后面内容中，详细介绍了Flex4新的特性FXG在开发中如何使用。,第17章CSS美化界面,CSS标准最早应用于网页开发中，使得程序开发和界面开发分离。Flex也支持使用CSS。CSS由于其简单、方便的优点，逐渐成了Flex应用程序美化界面的最重要方法。本章将为读者介绍CSS的语法及Flex中如何使用CSS美化界面。,17.1CSS简介,CSS是一种层叠样式表，可以有效地对布局、字体、颜色、背景和其它效果进行精确的控制。属性名和属性值之间以“:”符分隔。不同属性名间以“;”符分隔。以下代码定义了两个样式“.myFontStyle”、“.myButton”。一个常见的CSS定义包括样式名、属性、属性值。对于特殊的需求，需要其他语法支持，如单位、规则等。下面将详细介绍CSS语法。,17.2样式名,样式名是CSS定义的第一个元素，指明此CSS定义的名称。其他程序调用CSS样式时以样式名为准，所以在同一CSS文件中不能有同名的样式名。样式名可分为默认样式名、自定义样式名、分组样式名。,17.2.1默认样式名,默认样式名是指此样式名与Flex组件的名称相同。例如，CSS文件中定义了一个名为“Button”的样式，此样式名与Flex中的按钮组件同名。默认样式名的主要特点是“一改全改”，即定义默认样式后，Flex组件中相关的组件都使用此样式。这样就能保证同一应用程序中组件的风格是统一的。,17.2.2自定义样式名,自定义样式名是指此样式是特殊的，用以定制一个或若干个组件界面。自定义样式以“.”符开头，指明此样式为自定义的样式，后接样式名称。自定义样式主要用于对某一个或某几个组件使用特殊的样式。,17.2.3分组样式名,若某几种样式的定义内容完全相同，可使用分组样式。这样可使得CSS代码更简洁。需要注意的是，分组样式中的不同样式都使用相同的定义。不同样式名之间以“,”分隔。,17.3属性,CSS中的属性非常丰富，按用途大致可分为字体、文本、背景等17类。本节将为读者详细介绍各种属性。,17.3.1字体（Font）,字体类属性主要用于定义字体样式。,17.3.2文本（Text）,文本类属性主要用于定义文本样式，是CSS属性中最复杂的部分。,17.3.3背景（Background）,背景类属性主要用于定义背景样式。,17.3.4定位（Positioning）,定位类属性主要用于定位。,17.3.5尺寸（Dimensions）,尺寸类属性主要用于定义尺寸。,17.3.6布局（Layout）,布局类属性主要用于定义布局。,17.3.7外补丁（Margins）,外补丁类属性主要用于定义外补丁。,17.3.8边框（Borders）,边框类属性主要用于定义边框样式。,17.3.9内补丁（Paddings）,内补丁类属性主要用于定义内补丁。,17.3.10列表（Lists）,列表类属性主要用于定义列表样式。,17.3.11表格（Table）,表格类属性主要用于定义表格样式。,17.3.12滚动条（Scrollbar）,滚动条类属性主要用于定义滚动条样式。,17.3.13打印（Printing）,打印类属性主要用于定义打印样式。,17.3.14声音（Aural）,声音类属性主要用于定义声音样式。,17.4单位,CSS语法中单位是最基础的元素。CSS中定义了长度、颜色、角度、时间、频率五大类计量单位。本小节将为读者介绍每类计量单位。,17.4.1长度（Length）,CSS标准中长度单位包括相对长度单位和绝对长度单位。,17.4.2颜色（Color）,1十六进制表示法2RGB模型表示法3英文名称表示法。,17.4.3角度（Angle）,CSS标准中角度单位有deg、grad、rad3种。117.4.4时间（Time）和频率（Frequency）CSS标准中时间单位有s（秒）、ms（毫秒）两种。1s=1000ms。CSS标准中频率单位有HZ（赫兹）、kHZ（千赫）两种。HZ和kHZ都是声波的基本单位。1kHz=1000Hz。,17.5规则,规则是CSS标准中为使用特殊设备而定义的方法。CSS中规则都以“”开头。本小节将为读者介绍常用的几种规则。,17.5.1导入外部样式表import,import规则用以指定导入的外部样式表及目标设备类型。此规则其后的分号是必需的。如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。“url(导入路径)”、设备类型都是可选的，但不能两者都默认。导入的外部样式表中的定义会被程序中的样式定义覆盖。,17.5.2指定字符集charset,charset规则用以指定该样式表使用的字符集。此规则无默认值。此规则只能定义在外部样式表文件内。只允许定义一次，且必须在样式表的最前面。,17.5.3导入外部字体font-face,font-face规则用以设置嵌入程序的外部字体。此规则无默认值。此规则可以使程序应用本地系统上没有的字体。,17.5.4指定设备media,media规则用以指定样式表应用的设备类型。,17.6静态滤镜,静态滤镜是指为对象添加特殊的静态效果，如模糊效果、发光效果、旋转效果等。静态滤镜效果是静态的，即经过滤镜处理后结果。本节将为读者介绍CSS标准中常用的几种静态滤镜效果。,17.6.1色彩层滤镜Gradient,Gradient滤镜在对象的背景和内容之间显示定制的色彩层。enabled参数为可选项，类型为布尔值（Boolean）。startColorStr参数为可选项，类型为字符串（String）。,17.6.2边界图片滤镜AlphaImageLoader,AlphaImageLoader滤镜在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。,17.6.3透明度滤镜Alpha,Alpha滤镜调整对象内容的透明度。enabled参数为可选项，类型为布尔值（Boolean）。style参数为可选项，类型为整数值（Integer）。opacity参数为可选项，类型为整数值（Integer）。finishOpacity参数为可选项，类型为整数值（Integer）。用于设置或检索透明渐变的结束透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。startX参数为可选项，类型为整数值（Integer）。startY参数为可选项，类型为整数值（Integer）。finishX参数为可选项，类型为整数值（Integer）。finishY参数为可选项，类型为整数值（Integer）。,17.6.4图片处理滤镜BasicImage,BasicImage滤镜用于色彩处理，图像旋转，或对象内容的透明度。,17.6.5模糊滤镜Blur,Blur滤镜制作对象内容的模糊效果。enabled参数为可选项，类型为布尔值（Boolean）。用于设置或检索滤镜是否激活。其值可为true、false。true（默认值）表示滤镜激活，false表示滤镜被禁止。makeShadow参数为可选项，类型为布尔值（Boolean）。pixelRadius参数为可选项，类型为浮点数（Float）。shadowOpacity参数为可选项，类型为浮点数（Float）。,17.6.6阴影滤镜DropShadow,DropShadow滤镜制作对象的阴影效果。enabled参数为可选项，类型为布尔值（Boolean）。color参数为可选项，类型为字符串（String）。offX参数为可选项，类型为整数值（Integer）。offY参数为可选项，类型为整数值（Integer）。positive参数为可选项，类型为布尔值（Boolean）。,17.6.7浮雕滤镜Emboss,Emboss滤镜用灰度值为对象内容制作浮雕纹理效果。enabled参数为可选项，类型为布尔值（Boolean）。Bias参数为可选项，类型为浮点数（Float）。,17.6.8发光滤镜Glow,Glow滤镜环绕对象内容边缘添加辉光制作发热效果。辉光将出现在对象边界内的内容的最外轮廓之外。,17.6.9矩阵遮罩Matrix,Matrix滤镜使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。使用此滤镜可以建立下列效果。左右反转。将M11和M12的值取负。上下反转。将M21和M22的值取负。改变尺寸。将M11和M12和M21和M22的值乘以相同的因数。enabled参数为可选项，类型为布尔值（Boolean）。SizingMethod参数为可选项，类型为字符串（String）。,17.6.9矩阵遮罩Matrix,FilterType参数为可选项，类型为字符串（String）。Dx参数为可选项，类型为浮点数（Float）。Dy参数为可选项，类型为浮点数（Float）。M11参数为可选项，类型为浮点数（Float）。M21参数为可选项，类型为浮点数（Float）。,17.6.10运动模糊滤镜MotionBlur,MotionBlur滤镜为对象内容制作运动模糊效果。,17.6.11波纹滤镜Wave,Wave滤镜为对象内容建立波纹扭曲效果。,17.6.12X光滤镜Xray,Xray滤镜以X光效果显示对象内容。,17.6.13反相滤镜Invert,Invert滤镜反相显示对象内容。,17.7转换滤镜,转换滤镜是指为对象添加特殊的转换效果，如百叶窗效果、大风车效果、滚动条效果等。CSS标准中定义了丰富的转换滤镜，基本能满足用户的要求。,17.7.1百叶窗效果滤镜Blinds,Blinds滤镜用百叶窗开关效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。bands参数为可选项，类型为整数值（Integer）。,17.7.2国际象棋棋盘效果滤镜CheckerBoard,CheckerBoard滤镜用类似国际象棋棋盘的网格推拉效果转换对象内容。,17.7.3渐隐效果滤镜Fade,Fade滤镜用渐隐效果转换对象内容。,17.7.4滚动渐隐效果滤镜GradientWipe,GradientWipe滤镜用滚动渐隐效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。gradientSize参数为可选项，类型为浮点数（Real）。motion参数为可选项，类型为字符串（String）。,17.7.5对角扩张效果滤镜Insert,Insert滤镜用对角扩张效果转换对象内容。,17.7.6放射状擦除效果滤镜RadialWipe,RadialWipe滤镜用放射状擦除效果转换对象内容，效果类似汽车挡风玻璃的刮雨刀。,17.7.7随机线条效果滤镜RandomBars,RandomBars滤镜用随机发生的线条转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。orientation参数为可读写，类型为字符串（String）。,17.7.8随机像素溶解效果滤镜RandomDissolve,RandomDissolve滤镜用随机像素溶解效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。,17.7.9拉伸（缩）变形效果滤镜Stretch,Stretch滤镜用拉伸（缩）变形效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。stretchStyle参数可读写，类型为字符串（String）。,17.7.10风车叶轮旋转效果滤镜Wheel,Wheel滤镜用风车叶轮旋转效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。spokes参数可读写，类型为整数值（Integer）。,17.7.11擦地板的效果滤镜Zigzag,Zigzag滤镜用类似擦地板的效果转换对象内容。enabled参数为可选项，类型为布尔值（Boolean）。duration参数为可选项，类型为浮点数（Real）。gridSizeX参数为可选项，类型为整数值（Integer）。gridSizeY参数为可选项，类型为整数值（Integer）。,17.8使用组件定义CSS,Flex4.0应用程序中的CSS样式都是使用组件定义的。定义的方式有两种：组件内部定义CSS，组件调用外部CSS。本小节将详细介绍如何使用组件定义CSS。,17.8.2组件调用外部CSS,外部CSS文件的后缀名为“.css”，可使用任何文本编辑器编写。,17.8.3两种CSS定义方式的比较,使用组件直接定义样式比较方便，且不需要其他文本工具。缺点是样式的有效范围只在该MXML文件。其他MXML文件若要应用相同的样式需重新定义。外部CSS文件调入的方法操作简单，且可重复使用。另外，外部定义的CSS样式可在运行时动态编译，减小了程序的大小。运行时加载样式将在下面章节中介绍。综上所述，推荐使用组件调用外部CSS的方法。使用该方法后，整个应用程序只需要定义一个外部CSS文件。重用性高，且将样式设计与程序设计有效地分离。,17.9Flex3StyleExplorer工具辅助设计CSS样式,Flex组件的样式属性有很多。用户使用时往往要查看组件帮助，以了解各种属性的作用。这种方式效率低且并不直观。这里推荐一个定制Flex组件CSS样式的有用工具Flex3StyleExplorer。在线版本的网址为“,17.10Flex组件应用CSS样式,前面介绍了如何定义CSS样式。定义CSS样式后需要指定Flex组件应用某种CSS样式。Flex3.0组件中都一个styleName属性，用以指定组件使用的样式。关于样式名称需要说明的是，“.”符指明此样式为自定义的样式，并不是样式名的一部分，所以styleName属性的值不应包含“.”符。,17.11运行时动态加载CSS样式,运行时动态加载CSS样式是指在程序运行时加载不同的CSS样式。这种的需求经常存在。例如，程序中有两个按钮，单击第一个按钮应用第一种主题样式，单击第二个按钮应用第二种主题样式。,17.11.1调用SWF样式文件。,调用SWF样式文件使用StyleManager类的loadStyleDeclarations()方法。StyleManager类包含于“mx.styles.StyleManager”中。,17.11.2撤消SWF样式文件,动态加载样式是通过StyleManager类控制，在应用另外的样式前需要撤消SWF样式文件。使用StyleManager类的unloadStyleDeclarations()方法可实现撤消样式。,17.11.3按钮控制应用样式,在MXML编辑器中编写组件。,17.11.4完成剩余代码。,程序剩余的代码包括定义菜单组件、设定应用程序的背景和手形图标、在程序始初化处理函数中加载“style1.swf”样式、鼠标移动到菜单项的处理函数、鼠标移出菜单项的处理函数等。,17.12小结,本章主要介绍了CSS样式的相关语法、Flex组件如何使用CSS美化界面、运行时动态加载CSS样式等内容。CSS定义时应特别注意其属性和属性值的意义。Flex组件美化界面前需要使用组件定义CSS样式。通过Flex2StyleExplorer工具能可视化地设计组件界面，同时生成相应的CSS代码。,第18章Flex美化应用,第17章中详细介绍了使用CSS美化界面的用法，本章将为读者介绍更多的美化应用，如