Flex_4.0_RIA开发详解讲义.ppt

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增强的CSS 6增强的HTML模板 7增强的状态 8增强

4、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 Builder 4 Standalon

5、e 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）浏览器中输入“ Flex主页。 （2）单击“Flash Builder 4”图标或者文字链接，进入Flash Builder 4的下载页面。 （3）单击“Download the Flash Builder 4 beta

6、 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.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新增AS

8、Doc的支持 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”为第一个例子为读者详细说明如何建立第一个Flex 4程序，步骤如下。 （1）选

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

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

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

12、境（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 Perspectives（透视）,透视是一种布局风格，与任务、编辑器和视图相关联。一旦切

13、换透视，对应的任务、编辑器或视图就可能发生改变。Flash Builder 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

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

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

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

17、cript 项目工程主要用于开发ActionScript类库。Flex 库项目用于开发共享库，可以是自定义组件，也可以是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应用

18、程序。,2.4.2 ActionScript 项目,ActionScript 项目使用的是Flash API，而不是Flex框架。ActionScript 项目没有可视化的表现。也就是说ActionScript应用程序中没有设计模式这样的概念。ActionScript项目编译后也可运行于Flash Player中。,2.4.3 Flex 库项目,Flex库项目用以创建自定义的代码库。代码库可共享于应用程序或是其他开发人员。Flex库项目编译后生成SWC文件。SWC文件包含组件、各种资源和catalog.xml文件。SWC常被用于制作主题和制作应用程序的外观。一个SWC主题可以包括多个CSS文件

19、和全部的图片、动画资源。,2.5 Flash Builder 4常用快捷键,快捷键的作用是使得开发工作更加高效和简单。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运

21、行环境下的编程语言，是一种面向对象的语言。在Flex工程中，使用ActionScript 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中的编译器编译成二进制数据。这种

22、二进制数据被装入SWF文件中，然后运行于Flash Player运行环境中。,3.2 使用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的编辑器中输入标

23、签会自动封闭。例如，输入“”后，自动生成封闭区域“”。,3.2.2 在AS文件中编写ActionScript 3.0,ActionScript Class、ActionScript File和ActionScript Interface都属于AS文件。它们三者的文件格式都为AS格式，不同的只是其中的定义有所区别。Flex应用程序中最常使用的AS文件是ActionScript Class，也就类的定义。用户可使用ActionScript Class创建向导来完成创建。,3.2.3 MXML中引用AS文件,MXML文件中若要引用AS文件有两种方式：一种是引用使用标签中的“source”属性。 这种

24、方式可看成是将MXML文件和AS文件分离，从而减小MXML文件的代码，提高重用性。 另外一种方法是引用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代

25、码 5编译运行程序,3.4 小结,ActionScript 3.0是Flex应用程序中的编程语言，控制Flex应用程序的执行，完成应用程序的各项功能。在Flex工程中使用ActionScript 3.0有两种方法：一种是在MXML文件的标签下，一种是在AS文件中。对于大型应用程序来说，代码与模型的分离能使得程序更简洁。另外，将ActionScript 3.0代码写入AS文件也提高了代码的重用性。可以使用标签中的Source属性来指明引用的AS文件，也可以使用引用类的方法来使用AS类。,第4章 数据类型,程序中使用的各种变量都应预先加以定义，即先定义，后使用。对变量的定义可以包括三个方面：数据类

26、型，存储类型，作用域。 数据类型表示了变量的性质、表示形式、占据存储空间等。在ActionScript 3.0语言中，数据类型可分为：基本数据类型：其值不可以再分解为其他类型。 复杂数据类型：复杂数据类型根据已定义的一个或多个数据类型定义。,4.1 常量与变量,对于基本数据类型量，按其取值是否可改变又分为常量和变量两种。在程序执行过程中，其值不发生改变的量称为常量，其值可变的量称为变量。常量和变量可与数据类型结合起来，如整型常量、整型变量、实型常量、实型变量、字符串常量、字符串变量。在程序中常量是可以不经说明而直接引用的，而变量则必须先定义后使用。,4.1.1 直接常量和符号常量,1直接常量

27、整型常量：12、0、-3； 实型常量：4.6、-1.23； 字符串常量：“adf”、“b”。 2符号常量 符号常量是用标识符代表一个常量。标识符是用来标识变量名、符号常量名、函数名、数组名、类型名、文件名的有效字符序列。,4.1.2 变量,程序中其值可以改变的量称为变量。一个变量应该有一个名字，在内存中占据一定的存储单元。变量定义必须放在变量使用之前。变量名和变量值是两个不同的概念。变量名是指变量的名称，用以区别不同的变量。变量值是指变量中包含的值。,4.1.3 变量赋初值,变量赋初值是指变量定义时就赋值给变量，也称为变量初始化。,4.1.4 局部变量和全局变量,局部变量也称为内部变量，是在函

28、数内作定义说明的变量。其作用域仅限于函数内，离开该函数后再使用这种变量就是非法的。 主调函数中定义的变量也只能在主调函数中使用，不能在其他函数中使用。 形参变量是属于被调函数的局部变量，实参变量是属于主调函数的局部变量。 允许在不同的函数中使用相同的变量名。 全局变量也称为外部变量，是在函数外部定义的变量。,4.1.5 变量的存储方式,变量的存储方式按是否预先分配内存空间，可分为动态存储方式和静态存储方式。静态存储方式是指在程序运行期间分配固定的存储空间方式。动态存储方式是指在程序运行期间根据需要进行动态的分配存储空间方式。 用户存储空间可以分为3个部分： 程序区 静态存储区 动态存储区 动态

29、存储区存放以下数据： 函数形式参数 自动变量（未加static声明的局部变量）,4.1.5 变量的存储方式,函数调用时的现场保护和返回地址 对于以上这些数据，在函数开始调用时分配动态存储空间，函数结束时释放这些空间。 有时用户希望函数中的局部变量的值在函数调用结束后仍保留原值，这时就需要指定局部变量为静态局部变量，使用用关键字static进行声明。,4.2 整型数据,整型数据用以存储整型量，如2、60等。整型数据可以是整型常量，也可以是整型变量。,4.2.1 整型常量,1十进制整型常量 2八进制整型常量 3十六进制整型常量,4.2.2 整型变量,1整型变量的分类 2整型变量的定义 3整型数据的

30、溢出,4.3 实型数据,实型数据用以存储实型量。ActionScript 3.0中实型数据类型只有一种：Number型。实型数据可以是实型常量，也可以是实型变量。,4.3.1 实型常量的表示方法,1十进制形式 2指数形式,4.3.2 实型变量,1实型数据在内存中的存放形式 2实型变量的定义 3实型数据的舍入误差,4.4 字符串数据,字符串数据存储字符串量，包括字符串常量和字符串变量。ActionScript 3.0中字符串数据类型为：String型。,4.4.1 字符串常量,字符串常量是指存储字符串的常量，由一对双引号或单引号封闭的字符串序列。,4.4.2 转义字符,转义字符是一种特殊的字符常

31、量，主要用来表示那些用一般字符不便于表示的控制代码。转义字符以反斜线开头，后跟一个或几个字符。,4.4.3 字符串变量,字符串变量是指存储字符串的变量。,4.5 各类型数据之间的转换,变量的数据类型是可以转换的。转换的方法有两种，一种是自动转换，一种是强制转换。,4.5.1 自动类型转换,自动转换遵循以下规则： （1）若参与运算量的类型不同，则先转换成同一类型，然后进行运算。 （2）转换按数据长度增加的方向进行，以保证精度不降低。 （3）在赋值运算中，赋值号两边量的数据类型不同时，赋值号右边量的类型将转换为左边量的类型。,4.5.2 强制类型转换,强制类型转换把表达式的运算结果强制转换成某种数

32、据类型。 在使用强制转换时应注意以下问题： （1）括号所处的位置要正确。 （2）无论是强制转换或是自动转换，都只是为了本次运算的需要而对变量的数据长度进行的临时性转换，而不改变数据说明时对该变量定义的类型。,4.6 小结,ActionScript 3.0中的数据类型分为基本数据类型和复杂数据类型。本章详细介绍了整型、实型、字符串型。根据数据是否是变量或常量，基本数据又可分为整型常量、整型变量、实型常量、实型变量、字符串常量、字符串变量。 各数据类型间可进行转换。转换的方式有自动转换和强制转换两种。自动转换由编译器自动完成，强制转换由用户确定转换的方向。,第5章 运算符和表达式,ActionSc

33、ript 3.0语言中运算符和表达式很多。丰富的运算符和表达式使得ActionScript 3.0语言功能强大。ActionScript 3.0语言的运算符不仅具有不同的优先级，而且还有一个特点，就是它的结合性。在表达式中，各运算量参与运算的先后顺序不仅要遵守运算符优先级别的规定，还要受运算符结合性的制约：到底是自左向右进行运算还是自右向左进行运算。这种结合性增加了ActionScript 3.0语言的复杂性。,5.1 ActionScript 3.0运算符简介,ActionScript 3.0语言的运算符可分为以下几类： 算术运算符用于各类数值运算，包括加“+”、减“-”、乘“*”、除“/”

34、、求余“%”、自增“+”、自减“-”，共7种。 关系运算符用于比较运算，包括大于“”、小于“=”、小于等于“”，共6种。,5.1 ActionScript 3.0运算符简介,特殊运算符，如括号“()”，下标“”，取XML属性“”等。 赋值运算符用于赋值运算，分为简单赋值（=）、复合算术赋值（+=,-=,*=,/=,%=）和复合位运算赋值（phaFrom和alphaTo属性后可实现渐显或渐隐效果。 按下Ctrl+F11键编译运行程序。,16.2.7 交叉渐显组件CrossFade,与Fade组件不同的是，CrossFade组件在图片切换的时候，有一个很明显的交叉过度特效。,16.2.8 Anim

35、ate,在Flex 4.0中，所有的新的特效组件类都是继承自Animate类的，也就是说，Animate类是其他特效类的父类。所以使用Animate类，可以实现其他特效类实现的效果。,16.2.9 AnimateColor,AnimateColor组件是在Animate组件基础上，增加了颜色变换的特效。,16.2.10 AnimateShaderTransition,AnimateShaderTransition组件是在Animate组件的基础上，添加了图形扭曲变形的过度转换特效。其中shaderCode属性表示扭曲变形的类型，一般是使用pbj格式定义。,16.3 自定义组件界面,自定义组件界

36、面的方法有直接使用组件属性、使用setStyle()方法、使用CSS样式3种。本节介绍前两种，CSS样式内容在后续章节中详细介绍。,16.3.1 使用组件属性改变界面,自定义组件界面可直接使用组件属性。组件中有关样式的属性很多，也不尽相同，但方法是一致的。,16.3.2 使用setStyle()方法改变界面,Flex组件中都有一个setStyle()方法，用以动态修改组件界面。例如，按下按钮后修改其他组件的界面。,16.4 使用Filter滤镜类,滤镜是对矢量图的特殊效果处理，在PhotoShop等专业矢量图处理工具中经常使用。Flex 3.0中提供少量的滤镜类，包含于“flash.filte

37、r.*”中。,16.5 FXG图形格式（新增）,FXG定义了Flex的图形格式的描述规范。FXG产生的目的其实是为了不同平台之间的数据交换，以提供更好的工作流程。,16.5.1 使用FXG,Flash XML Graphics（FXG）是在构建Flex应用程序时，定义的一种图形格式。使用FXG，Flex可以同其他的Adobe工具，如FlashCatalyst、Illustrator等交换数据。这样可以大大简化整个设计和开发的工作流程。界面图形设计师可以使用通过其他平面设计工具。开发工程师就可以把FXG文件直接在Flex项目中应用。,16.5.2 路径Path类,在矢量图形中，路径就是由一系列的

38、点组成的，最后再由线汇集成一个图像。 在Flex中，可以使用Path类，通过绘制线来定义一个矢量图形。其中，LineSegment，CubicBezierSegment，和QuadraticBezierSegment类，可以定义线的类型。在绘制线或者图形之前，需要使用MoveSegment类定义起始位置。 标签是FXG中比较常用的，定义了图形边框样式，如颜色、粗细等。,16.5.3 群组Group类,Group是所有容器组件中最基本的类，所有的容器组件都是继承Group类的。相当于Flex 4之前版本的Canvas组件，但是新的Group要比Canvas更加的简洁、体积更加小。,16.5.4

39、图形元素,在FXG中，所有的图形元素都是继承自IgraphicElement接口。FXG中定义的基本图形元素有矩形、椭圆形、线。矩形使用标签绘制，椭圆形使用标签绘制，线使用标签绘制。,16.5.5 文字布局,在Flex 4之前，官方已经推出了一个开源框架Text Layout Framework，该框架意在处理复杂的文字排列方式，如横向排列。 在Flex 4中，已经集成了该框架的基本功能，而且在文字显示的相关组件中，也添加了新的属性，使得可以更加方便地使用。,16.5.6 填充图形,使用标签，可以对图形进行颜色或者图像的填充。填充的类型有单色填充SolidColor、放射性填充RadialGr

40、adient、线性填充LinearGradient和图像填充BitmapFill。,16.5.7 位图BitmapImage标签,可以使用标签把图像填充在一个规则的区域内。区域和图像的关系就如同系统的桌面和背景一样，可以重复平铺，可以适合区域的拉伸图像，也可以对图像剪裁。,16.5.8 遮罩特性,FXG同样也支持遮罩的特性。遮罩简单来说就是使得组件元素以特定的方式部分呈现出来。FXG中提供了两种类型的遮罩呈现方式：clipping和alpha。clipping就是按照遮罩层的组件元素，区域呈现出来，而alpha则是呈现的透明度。,16.6 小结,本章主要介绍了Fex 4.0中如何自定义效果来美

41、化界面。组件界面可直接使用样式属性，也可使用setStyle()方法。Flex 4.0中有丰富的效果组件，用户可通过组合多种效果组件制定满足需要的效果。另外，Flex 4.0中也提供了少量的滤镜类，用以支持更特殊的效果。在本章后面内容中，详细介绍了Flex 4新的特性FXG在开发中如何使用。,第17章 CSS美化界面,CSS标准最早应用于网页开发中，使得程序开发和界面开发分离。Flex也支持使用CSS。CSS由于其简单、方便的优点，逐渐成了Flex应用程序美化界面的最重要方法。本章将为读者介绍CSS的语法及Flex中如何使用CSS美化界面。,17.1 CSS简介,CSS是一种层叠样式表，可以有

42、效地对布局、字体、颜色、背景和其它效果进行精确的控制。 属性名和属性值之间以“:”符分隔。不同属性名间以“;”符分隔。以下代码定义了两个样式“.myFontStyle”、“.myButton”。 一个常见的CSS定义包括样式名、属性、属性值。对于特殊的需求，需要其他语法支持，如单位、规则等。下面将详细介绍CSS语法。,17.2 样式名,样式名是CSS定义的第一个元素，指明此CSS定义的名称。其他程序调用CSS样式时以样式名为准，所以在同一CSS文件中不能有同名的样式名。样式名可分为默认样式名、自定义样式名、分组样式名。,17.2.1 默认样式名,默认样式名是指此样式名与Flex组件的名称相同。

43、例如，CSS文件中定义了一个名为“Button”的样式，此样式名与Flex中的按钮组件同名。 默认样式名的主要特点是“一改全改”，即定义默认样式后，Flex组件中相关的组件都使用此样式。这样就能保证同一应用程序中组件的风格是统一的。,17.2.2 自定义样式名,自定义样式名是指此样式是特殊的，用以定制一个或若干个组件界面。 自定义样式以“.”符开头，指明此样式为自定义的样式，后接样式名称。 自定义样式主要用于对某一个或某几个组件使用特殊的样式。,17.2.3 分组样式名,若某几种样式的定义内容完全相同，可使用分组样式。这样可使得CSS代码更简洁。 需要注意的是，分组样式中的不同样式都使用相同的

44、定义。不同样式名之间以“,”分隔。,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）,布局类属性主要用于定义布局。,

45、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

46、 单位,CSS语法中单位是最基础的元素。CSS中定义了长度、颜色、角度、时间、频率五大类计量单位。本小节将为读者介绍每类计量单位。,17.4.1 长度（Length）,CSS标准中长度单位包括相对长度单位和绝对长度单位。,17.4.2 颜色（Color）,1十六进制表示法 2RGB模型表示法 3英文名称表示法。,17.4.3 角度（Angle）,CSS标准中角度单位有deg、grad、rad 3种。 117.4.4 时间（Time）和频率（Frequency） CSS标准中时间单位有s（秒）、ms（毫秒）两种。1s=1000ms。CSS标准中频率单位有HZ（赫兹）、kHZ（千赫）两种。HZ和k

47、HZ都是声波的基本单位。1kHz=1000Hz。,17.5 规则,规则是CSS标准中为使用特殊设备而定义的方法。CSS中规则都以“”开头。本小节将为读者介绍常用的几种规则。,17.5.1 导入外部样式表import,import规则用以指定导入的外部样式表及目标设备类型。 此规则其后的分号是必需的。如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。 “url(导入路径)”、设备类型都是可选的，但不能两者都默认。 导入的外部样式表中的定义会被程序中的样式定义覆盖。,17.5.2 指定字符集charset,charset规则用以指定该样式表使用的字符集。 此规则无默认值。 此规则只能定

48、义在外部样式表文件内。只允许定义一次，且必须在样式表的最前面。,17.5.3 导入外部字体font-face,font-face规则用以设置嵌入程序的外部字体。 此规则无默认值。 此规则可以使程序应用本地系统上没有的字体。,17.5.4 指定设备media,media规则用以指定样式表应用的设备类型。,17.6 静态滤镜,静态滤镜是指为对象添加特殊的静态效果，如模糊效果、发光效果、旋转效果等。静态滤镜效果是静态的，即经过滤镜处理后结果。本节将为读者介绍CSS标准中常用的几种静态滤镜效果。,17.6.1 色彩层滤镜Gradient,Gradient滤镜在对象的背景和内容之间显示定制的色彩层。 e

49、nabled参数为可选项，类型为布尔值（Boolean）。 startColorStr参数为可选项，类型为字符串（String）。,17.6.2 边界图片滤镜AlphaImageLoader,AlphaImageLoader滤镜在对象容器边界内，在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG格式，则0%-100%的透明度也被提供。,17.6.3 透明度滤镜Alpha,Alpha滤镜调整对象内容的透明度。 enabled参数为可选项，类型为布尔值（Boolean）。 style参数为可选项，类型为整数值（Integer）。 opacity参数为可选项

50、，类型为整数值（Integer）。 finishOpacity参数为可选项，类型为整数值（Integer）。用于设置或检索透明渐变的结束透明度。取值范围为0-100。默认值为0，即完全透明。100为完全不透明。 startX参数为可选项，类型为整数值（Integer）。 startY参数为可选项，类型为整数值（Integer）。 finishX参数为可选项，类型为整数值（Integer）。 finishY参数为可选项，类型为整数值（Integer）。,17.6.4 图片处理滤镜BasicImage,BasicImage滤镜用于色彩处理，图像旋转，或对象内容的透明度。,17.6.5 模糊滤镜Bl

51、ur,Blur滤镜制作对象内容的模糊效果。 enabled参数为可选项，类型为布尔值（Boolean）。用于设置或检索滤镜是否激活。其值可为true、false。true（默认值）表示滤镜激活，false表示滤镜被禁止。 makeShadow参数为可选项，类型为布尔值（Boolean）。 pixelRadius参数为可选项，类型为浮点数（Float）。 shadowOpacity参数为可选项，类型为浮点数（Float）。,17.6.6 阴影滤镜DropShadow,DropShadow滤镜制作对象的阴影效果。 enabled参数为可选项，类型为布尔值（Boolean）。 color参数为可选项

52、，类型为字符串（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滤镜使用矩

53、阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。使用此滤镜可以建立下列效果。 左右反转。将M11和M12的值取负。 上下反转。将M21和M22的值取负。 改变尺寸。将M11和M12和M21和M22的值乘以相同的因数。 enabled参数为可选项，类型为布尔值（Boolean）。 SizingMethod参数为可选项，类型为字符串（String）。,17.6.9 矩阵遮罩Matrix,FilterType参数为可选项，类型为字符串（String）。 Dx参数为可选项，类型为浮点数（Float）。 Dy参数为可选项，类型为浮点数（Float）。 M11参数为可选项，类型为浮点数（Float）。

54、 M21参数为可选项，类型为浮点数（Float）。,17.6.10 运动模糊滤镜MotionBlur,MotionBlur滤镜为对象内容制作运动模糊效果。,17.6.11 波纹滤镜Wave,Wave滤镜为对象内容建立波纹扭曲效果。,17.6.12 X光滤镜Xray,Xray滤镜以X光效果显示对象内容。,17.6.13 反相滤镜Invert,Invert滤镜反相显示对象内容。,17.7 转换滤镜,转换滤镜是指为对象添加特殊的转换效果，如百叶窗效果、大风车效果、滚动条效果等。CSS标准中定义了丰富的转换滤镜，基本能满足用户的要求。,17.7.1 百叶窗效果滤镜Blinds,Blinds滤镜用百叶窗

55、开关效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 bands参数为可选项，类型为整数值（Integer）。,17.7.2 国际象棋棋盘效果滤镜CheckerBoard,CheckerBoard滤镜用类似国际象棋棋盘的网格推拉效果转换对象内容。,17.7.3 渐隐效果滤镜Fade,Fade滤镜用渐隐效果转换对象内容。,17.7.4 滚动渐隐效果滤镜GradientWipe,GradientWipe滤镜用滚动渐隐效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 durati

56、on参数为可选项，类型为浮点数（Real）。 gradientSize参数为可选项，类型为浮点数（Real）。 motion参数为可选项，类型为字符串（String）。,17.7.5 对角扩张效果滤镜Insert,Insert滤镜用对角扩张效果转换对象内容。,17.7.6 放射状擦除效果滤镜RadialWipe,RadialWipe滤镜用放射状擦除效果转换对象内容，效果类似汽车挡风玻璃的刮雨刀。,17.7.7 随机线条效果滤镜RandomBars,RandomBars滤镜用随机发生的线条转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，

57、类型为浮点数（Real）。 orientation参数为可读写，类型为字符串（String）。,17.7.8 随机像素溶解效果滤镜RandomDissolve,RandomDissolve滤镜用随机像素溶解效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。,17.7.9 拉伸（缩）变形效果滤镜Stretch,Stretch滤镜用拉伸（缩）变形效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 stretchStyle参数

58、可读写，类型为字符串（String）。,17.7.10 风车叶轮旋转效果滤镜Wheel,Wheel滤镜用风车叶轮旋转效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 spokes参数可读写，类型为整数值（Integer）。,17.7.11 擦地板的效果滤镜Zigzag,Zigzag滤镜用类似擦地板的效果转换对象内容。 enabled参数为可选项，类型为布尔值（Boolean）。 duration参数为可选项，类型为浮点数（Real）。 gridSizeX参数为可选项，类型为整数值（Integer）。 gr

59、idSizeY参数为可选项，类型为整数值（Integer）。,17.8 使用组件定义CSS,Flex 4.0应用程序中的CSS样式都是使用组件定义的。定义的方式有两种：组件内部定义CSS，组件调用外部CSS。本小节将详细介绍如何使用组件定义CSS。,17.8.2 组件调用外部CSS,外部CSS文件的后缀名为“.css”，可使用任何文本编辑器编写。,17.8.3 两种CSS定义方式的比较,使用组件直接定义样式比较方便，且不需要其他文本工具。缺点是样式的有效范围只在该MXML文件。其他MXML文件若要应用相同的样式需重新定义。 外部CSS文件调入的方法操作简单，且可重复使用。另外，外部定义的CSS样式可在运行时动态编译，减小了程序的大小。运行时加载样式将在下面章节中介绍。 综上所述，推荐使用组件调用外部CSS的方法。使用该方法后，整个应用程序只需要定义一个外部CSS文件。重用性高，且将样式设计与程序设计有效地分离。,17.9 Flex3StyleExplorer工具辅助设计CSS样式,Flex组件的样式属性有很多。用户使用时往往要查看组件帮助，以了解各种属性的作用。这种方式效率低且并不直观。这里推荐一个定制Flex组件CSS样式的有用工具Flex3StyleExplorer。在线版本的网址为“ 3.0版本的，但是由于在CSS特性方面差别不大，所有同样也具有极大的参考价值。,17.10