Flex从入门到实践.ppt

1、第1章 Flex概述,Adobe公司的Flex产品是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的。同时它也是极具表现力的、Web应用程序的、高效率的开放源码框架。作为RIA应用程序的主要开发框架，Flex 3中已经包含了一套强大的开发工具。本章包括以下内容： Flex与Flash的关系 Flex使用的语言 Flex与服务器通信 RIA产品主要有 Adobe Flex; Sun JavaFx; Microsoft Sliverlight,1.1 Flex简介,Flex是一个基于组件的开发框架，可以生成一个由Flash Player运行的富互联网应用程序。Flex将基于标准的语言和各

2、种可扩展用户界面及数据访问组件结合起来，使得开发人员能够构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。 FlashPlayer目前最新版本：10.2 未来FlashPlayer将支持3D、多线程、硬件加速,1.1.1 Flex是什么,Flex是一种创建RIA（Rich Internet Applications）快速有效的方法之一。RIA是一种可能代替传统HTML应用系统的解决方案。RIA技术既可以像Web一样很简单的部署用户客户端程序，同时交互性和表现力等方面也大大超过了传统Web应用系统。如今，很多开发者或者公司已经开始研究并构建了成熟的RIA系统。,1.1.2 Flex 运

3、行机制,Flex只是一种客户端技术，同时也属于Flash平台。Flex代码最终被编译成SWF文件运行在Flash播放器（Flash Player）中。SWF文件可以单独在用户终端运行，但是必须要安装Flash Player。也可以在各种流行的浏览器中运行，浏览器必须安装Flash Player插件。 SWF文件是一个压缩文件，可以通过Flash Player呈现出来。由于SWF文件很小，所以有很快的网络下载速度。用户要想运行一个Flex应用程序，只需要通过网络或者其他途径获取SWF文件，就可以运行在装有Flash Player插件的浏览器中。,1.1.3 Flex产品组成,Flex是一个比较完

4、整的开发框架，主要有三个部分组成。 1Adobe Flex 3 SDK 2Adobe Flex Builder 3 3Adobe LiveCycle Enterprise Suite FlexBuilder最新版本是FlashBuilder4 Flash Cs5作为面向设计人员的开发工具可与FlashBuilder联合使用 Flash Catalyst作为交互设计工具，使用它可以不用写代码，快速的创建应用程序接口，和交互内容,1.2 Flex和Flash的关系,Flex是早期Macromedia公司发布的Presentation Server（展现服务），是Java Web Container

5、或者.NET Server的一个应用。Flex根据MXML文件（纯粹的XML描述文件和ActionScript脚本语言）产生相应的SWF文件，传送到客户端，由客户端的Flash Player或者Shockwave Player解释执行，给用户以丰富的客户体验。 Flash是强大的矢量动画编辑工具，在Flash被Adobe公司收购之后，Flash一直在谋求Rich Internet Application（富客户端）的霸主地位。最有影响的是，已经推出了面向对象的编程脚本ActionScript 3.0，并且建立起类似于Java Swing的类库和相应Component（组件）。,1.3 Flex

6、与其他技术比较,Flex是一种混合的技术，这种语言技术的设计借鉴了其他优秀的现代标准语言，如XML、JAVA等。其中，MXML就是基于XML构建的描述界面的语言，同时借鉴了HTML等Web技术。而ActionScript也是大量的借鉴了JavaScript脚本和Java语言的语法组成。,1.3.1 HTML/JavaScript/Ajax,Flex技术是在Web技术发明之后开发出来的。Flex技术中的MXML语言就是基于XML，并且借鉴了HTML描述语言。所以，MXML和HTML的作用实质上是一样的，都是为了更好的描述界面布局和组件样式。不同的是，MXML采用了更加先进的设计模式，使得MXML

7、代码更容易阅读和编写。 Flex中的ActionScript是一种脚本语言，用来处理客户端的逻辑运算。ActionScript的设计同样也参照了JavaScript，与JavaScript作用一样。并且，ActionScript和JavaScript两者的语法也极其相似，这使得开发者学习新的ActionScript语言的门槛降低。,1.3.2 Java/Java FX,Flex是一个类似于Java和Java Swing的平台。Flex中的脚本语言ActionScript与Java上的语法和结构都极其相似。它继承了Java中包的概念，在设计中，参照了Java的大部分特性。 同Flex一样，Jav

8、a也可以把应用程序部署到Web上运行。但是编译之后的文件却远比Flex大，因为Java的运行环境JRE和开发包JDK拥有比Flex多得多的类库，而且这些类库在客户端可能不需要。所以，很多Java开发者开始了解并学习Flex，计划把Flex和Java更好的结合起来。,1.3.3 Silverlight/XAML,Silverlight是微软公司的富网络应用程序的解决方案。Silverlight的XAML描述语言同样也是基于XML设计的。XAML就相当于Flex中的MXML，两者的功能一样，而且语法也类似。Silverlight客户端所使用的逻辑语言更加广泛，因为它是基于.NET框架设计的。这些语

9、言包括C#、JScript、VB等。 不过Silverlight技术刚刚推出不久，其中的很多功能有待完善。而且，在客户端需要安装Silverlight控件。,1.4 小结,本章主要讲解了什么是Flex以及Flex与其他语言的比较。本章的重点是Flex的概念和框架组成。通过本章的学习，读者应该可以更加清楚的了解到Flex的概念和基本框架组成。下一章将向读者讲解Flex的开发环境，其中包括编译工具和开发工具的使用。,1.5 习题,1什么是Flex，其运行机制是什么？ 2Flex与Flash有哪些不同？ 3Flex 3产品有哪些部分组成？ 4说说Flex与Silverlight相同和不同的地方？,第

10、2章 Flex的开发环境,Adobe Flex是一个免费的产品，可以使用任何一款编辑器开发。在诸多编辑器中，Flex Builder是一个不可或缺的、功能强大的编辑器，是基于Eclipse IDE开源项目构建的，继承了很多优秀的功能。本章包括以下内容： Flex SDK的安装 开发工具Flex Builder 3 调试Flex应用程序,2.1 Flex SDK的安装,Adobe Flex SDK产品包含了Flex框架（即组件类库）和Flex编译器。通过使用Flex SDK 3，再结合编辑器，就可以自由的开发和部署Flex应用程序。,2.1.1 下载和安装Adobe Flex SDK,通过Ado

11、be官方网站 SDK开发工具。下载的Flex SDK 3开发包是一个ZIP压缩文件，解压缩到一个指定的目录中即可，如D:flex_sdk_3。下载Adobe Flex SDK 3的页面如图2.1所示，红色区域为下载地址。,2.1.2 编译代码,Flex SDK中包含两个编译器：mxmlc和compc。mxmlc编译器可以把MXML和ActionScript代码编译为SWF文件，compc编译器可以把组件和库编译为SWC文件。,2.2 开发工具Flex Builder 3,Flex Builder是一个建立在流行的、开源的Eclipse IDE基础上的。通过Flex Builder，可以快速方便

12、的构建Flex应用程序，使得开发时间缩短。使用Flex Builder，还可以设置代码的断点，调试程序。本节将重点介绍Flex Builder 3的安装和开发界面。,2.2.1 安装Flex Builder 3,Flex Builder 3有两种安装方式：独立安装和插件安装。独立安装包中已经包括了Eclipse。插件安装则是以Eclipse插件的形式安装，所以安装之前必须要确保已经安装了Eclipse开发工具。本节将会介绍使用独立安装包安装Flex Builder 3。,2.2.2 Flex Builder 3的界面,安装完Flex Builder 3后，通过双击快捷方式可以打开Flex Bu

13、ilder 3的开发环境。第一次使用会出现Flex Builder 3 Activation对话框，需要输入Flex Builder的序列号。Flex Builder 3 Activation对话框如图2.13所示。,2.3 构建第一个Flex应用程序,本节将介绍如何使用Flex Builder 3一步步地开发第一个Flex应用程序。该程序将会在浏览器中输出一个字符串。,2.3.1 创建Flex项目,Project（项目）是Flex Builder中的基础，一个Project是一组相互关联的文件。所以，创建一个Flex应用程序，就需要创建一个项目（project）。,2.3.2 创建组件和编写

14、代码,创建完项目后，系统自动会返回到Flex Builder 3的开发主界面，如图2.17所示。,2.3.3 编译和运行应用程序,Flex Builder 3中集成了Flex SDK，所以通过Flex SDK可以把示例2-1中编写的代码编译成SWF文件，并在浏览器中运行。,2.4 各种常见的文件类型,Flex中不仅可以创建基本的MXML文件，还可以创建单独的ActionScript文件、类以及接口等。本节将讲解Flex中可以创建的各种文件格式及其作用。创建完某一个项目后，右击其源代码目录，选择并展开New命令项，将会弹出右键菜单，如图2.22所示。,2.4.1 项目组件化,通过在右键源代码菜单

15、中，选择并创建一个MXML Component组件文件，可以把每个组件独立出来。这样做可以使项目源代码组件化，把不同功能的组件独立出来管理。,2.4.2 项目模块化,通过在右键源代码菜单中，可以选择并创建一个MXML Module模块文件。项目模块化实际上就是把相同功能的代码组织到一个模块中，通过多个模块的累积，从而形成一个完整的应用系统。,2.4.3 项目模式化,通过在右键源代码菜单中，可以选择并创建一个ActionScript文件、类或者接口。通常这类文件会在设计模式中被应用。设计模式是管理和组织大量代码更有效的方法之一，是面向对象思想最直接的体现。而ActionScript语言本身就是一

16、个面向对象的语言。 在本书的第25章PureMVC框架中，对设计模式尤其是MVC模式，有更加深入的探讨。,2.5 小结,本章主要讲解了Flex 3的开发环境。其中介绍了Flex SDK 3的安装和使用，详细讲解了Flex Builder 3的安装和使用。在本章的最后，使用Flex Builder 3构建了第一个Flex应用程序，使读者可以快速的入门。下一章将会介绍构建Flex应用系统界面的描述语言MXML。,2.6 习题,1. Flex SDK 3包含哪两部分内容？ 2. mxmlc编译器可以编译哪些类型的文件？,第3章 MXML语法基础,MXML是一种基于XML设计的描述性标记语言，使用MX

17、ML可以构建Flex应用程序中的用户界面组件。同时，MXML也借鉴了HTML等Web技术。本章包括以下内容： MXML的构成 解析MXML的标签 命名空间,3.1 MXML的构成,MXML是Flex架构中最核心的语言之一。因为MXML是在XML基础上设计的，所以，它具有易读、易编写等优点。,3.1.1 结构原理,XML是一种可扩展的标记语言，其内容是一段结构性的文本。在XML中，所有的标记都使用一对尖括号（“”）。如下面是一段典型的XML代码。 与HTML类似，MXML同样也是把某些特殊的单词指定了含义。,3.1.2 书写规则,MXML是XML的一种扩展行语言，所以MXML继承了XML的书写规

18、则。MXML的书写规则如下。 所有元素要有开始和结束标记。如果一个标记被打开，那么在对应的地方应该被关闭。计算机的逻辑是很严谨的，如果某个标记只有开始没有结束，系统就会发生错误。 区分大小写。XML是区分大小写的，所以MXML同样也是。和在XML中是不同的两个元素标记。和当然在MXML中也是不同的。 需要声明。在XML文档的第一行通常都需要声明版本和编码等信息。,3.2 解析MXML的标签,MXML的标签（tag）和XML中的标签一样，只不过在MXML中，这些标签（tag）具有特殊 。一个标签（tag）通常所包含的信息可以通过两种方式实现：内容和属性。 1内容 2属性,3.3 命名空间,可能也

19、注意到了，在上述的MXML例子中，标记的开头都出现了类似mx的字样。这是XML的命名空间，说明Panel和Label等组件都是属于命名空间mx中的。 一个XML命名空间是一个命名的汇集，它由URI引用确定，在XML文件中做为元素类型和属性名使用。之所以要在XML中引用命名空间的概念，主要是为了软件模块化，使得创建的组件可以重复使用。为了避免命名上的冲突，可以在标签（tags）名称的前面加上引用的空间名。,3.4 小结,本章主要讲解了MXML语言的基础部分，其中包括了结构原理和书写规则。而且通过示例详细解析了MXML代码的标签构成，在最后，深入剖析了MXML命名空间的原理。通过本章的学习，读者可

20、以更加深入的了解到MXML的设计思想。在下一章中将会介绍Flex平台的另外一种比较重要的语言ActionScript。,3.5 习题,1. MXML的书写规则有哪些？ 2. 什么是XML的命名空间？,第4章 ActionScript 3.0 语法基础,ActionScript 3.0是一种运行在Flash Player的编程语言，是由ActionScript虚拟机（AVM）执行的。ActionScript 3.0版本提供了更好的面向对象思想的设计模型，使程序员更容易编写和设计复杂的代码。ActionScript 3.0是Flex中主要的编程语言，是学习Flex技术的基础。本章包括以下内容： 变

21、量和常量 数据类型 运算符 语句 函数,4.1 变量和常量,变量在每种语言中都是存在的，是最基本的概念。变量是用来存储程序在运行时的临时数据的。常量相对于变量而言的，是用来存储固定的数值的。下面几节就来详细的介绍关于变量和常量的使用。,4.1.1 变量的声明和赋值,在使用变量之前，需要对变量进行声明。如果不声明变量，就直接使用，编译器会出现错误。 在声明一个变量的时候，必须要在前面加上var，后面接着是变量的名称。声明变量的语法如下所示。 var 变量名:数据类型 其中，var是变量的关键字，表示声明的是一个变量；变量名是自定义的变量的名称，尽量取有意义的单词；数据类型是可以不必定义，但是为了

22、追求代码的严谨性，最好明确定义类型。,4.1.2 变量的作用域,在定义变量之前，要确定变量需要用在哪里，这个时候就要确定变量的作用域，即全局变量或者局部变量。全部变量是在整个类或是命名空间中都可以访问的变量，而局部变量是只有某个代码区段才可以访问的变量。全局变量通常定义在函数体的外部，而局部变量定义在函数体的内部。,4.1.3 声明常量,常量与变量不同的是，常量是有固定数值的。一旦声明了常量，并赋值，那么该常量就不能再次赋值。要声明一个常量，需使用关键字const，而不是var。 声明常量的语法格式如下所示。 const 常量名:数据类型 = 常量值 在声明常量的同时，必须赋值，如果不赋值，在

23、编译代码的时候，就会出现常量没有初始化的警告。,4.2 数据类型,变量是存储在计算机内存上的，那么这些变量的值的位是如何存在内存中的就是由数据类型决定的。数据类型分为基本数据类型和复合数据类型两种。,4.2.1 基本数据类型,基本的数据类型包括字符串（String）、数字（Number）和布尔（Boolean）。 1字符串类型 2数字类型 3布尔类型,4.2.2 复合数据类型,复合数据类型包括对象（Object）、影片剪辑（Sprite）和数组（Array）。下面将依次讲解这三种数据类型。 1对象类型 2影片剪辑类型 3数组类型,4.2.3 数据类型检查,数据类型定义了变量以何种方式存储在计算

24、机的内存中，如果数据类型与变量值不匹配，系统就会出现错误。为了避免数据类型与变量值不匹配的情况发生，往往在编译器或者解释器中就包含了数据类型检查的功能。通过数据类型检查，可以在编译代码的时候提早发现问题，避免在程序运惺背鱿治侍狻 数据类型检查分为编译时类型检查和运行时类型检查。 ActionScript 3.0是一种脚本语言，是在运行时进行数据类型检查的。但是同时也支持在严格模式（注：严格模式是编译器的编译模式之一，默认为严格模式。）下执行编译时类型检查。在严格模式下，两种类型检查都支持。在标准模式下，只支持运行时类型检查。 在大型项目开发是，通常都是使用编译型类型检查。因为编译型项目检查可以

25、更及时迅速的捕获错误，并方便的定位错误。,4.2.4 is运算符,is运算符是ActionScript 3.0新增的运算符。利用is运算符可以判断变量间的类型是否一致，返回的结果为布尔类型。,4.2.5 as运算符,as运算符也是ActionScript 3.0中新增的运算符。利用as运算符也可以比较变量类型是否一致，但是与is运算符返回值不同，is运算符返回的值是布尔类型的，而as运算符返回的值是变量或表达式。,=与=运算符,=与=都是判断两个对象是否相等 不同的是对基础类型=运算的时候会进行类型转换，=不进行类型转换（int,uint,Number类型除外） 例 var a:int = 5

26、; var b:String = 5; trace(a=b);/输出true trace(a=b);/输出false,typeof运算符,是用字符串的形式返回类型,4.3 语句,语句，也可以称作结构，因为它定义了程序不同的计算逻辑结构。常用的语句有判断语句、条件语句以及循环语句等。本节将会分别讲解这些语句。,4.3.1 ifelse 语句,ifelse语句是用来判断一个测试条件，如果条件为真，则执行一个代码块，否则就执行另外一个代码块。其语法结构如下所示： if(逻辑表达式) /逻辑表达式结果为真，执行代码块1，然后跳出if语句 代码块1 else /逻辑表达式结果为假，执行代码块2，然后跳出

27、if语句 代码块2 ,4.3.2 ifelse if 语句,ifelse if语句是用来判断两个测试条件，如果其中的一个条件为真，则执行一个代码块，另一个条件为真，则执行另外一个代码块，否则就执行最后的一个代码块。其语法结构如下所示： if(逻辑表达式1) /逻辑表达式1结果为真，执行代码块1，然后跳出ifelse if语句 代码块1 else if(逻辑表达式2) /逻辑表达式2结果为真，执行代码块2，然后跳出ifelse if语句 代码块2 else /逻辑表达式1和逻辑表达式2的结果都同时为真时，执行代码块3 代码块3 ,4.3.3 switch语句,switch语句是用来判断多个测试条

28、件，当其中的一个条件为真，则执行相应的代码块，否则就执行默认的一个代码块。其语法结构如下所示： switch(表达式) /当表达式的值为1时，执行代码块1，然后跳出switch语句 case 值1: 代码块1 break; /当表达式的值为1时，执行代码块1，然后跳出switch语句 case 值2: 代码块2 break; /当表达式的值不为1，2，3时，执行代码块，然后跳出switch语句 default: 代码块 break; 与java不同 as3的switch表达式中可以是任何类型 javac+只能是整形，c#中可以为基本类型、string和枚举类型,4.3.4 for语句,for语

29、句是根据某个变量来获取循环的次数，然后反复的执行里面的代码。for语句的表达式有三个：一个是变量初始化，一个是逻辑表达式，还有一个是更改变量的表达式。当逻辑表达式结果为真时，执行代码块。for语句的语法结构如下所示： for(变量初始化;逻辑表达式;变量更新) 代码块 ,4.3.5 forin语句,forin语句的应用通常是循环某个对象或者数组。其语法结构如下所示： for(变量 in 集合) 代码块 forin语句的流程图与for语句的一样，可以参考图4.4所示。,4.3.6 for eachin语句,与forin不同的是，forin获取的是循环对象或者数组的次数，而for eachin语句

30、是循环对象或者数组，但获取的是其内部的所有元素。其语法结构如下所示： for each(变量 in 变量集合) 代码段 ,4.3.7 while语句,while语句是根据逻辑表达式判断，如果为真，就反复执行里面特定的代码。其语法结构如下所示： while(逻辑表达式) 代码段 ,4.3.8 dowhile语句,dowhile语句与while语句类似，只是在判断表达式之前，执行了一次代码块。其语法结构如下所示： do 代码块 while(逻辑表达式),4.4 函数,函数是封装的一段特定的代码块，目的是为了更好的重用代码，更容易维护。函数通常是写在类中的，用大括号把一段代码封装起来。,4.4.1

31、定义函数,函数是由几个部分组成的：开头是function关键字，然后是函数名，接着是用小括号扩起来的参数，每个参数用逗号隔开，还有就是用冒号标记的函数返回类型，最后就是用大括号扩起来的代码块。其语法结构如下所示： 作用域 function 函数名(参数1, 参数2, ):返回类型 函数体 ,4.4.2 函数的返回值,函数的返回值是函数完成功能之后，返回的结果值。返回值用关键字return标示，返回的类型在函数的头部，放在冒号的后面。,4.4.3 函数的作用域,不是在任何地方都可以调用任何函数的，函数也是有权限的，这个权限就是函数的作用域。函数的作用域通常有两种：公有和私有。公有的用public

32、关键字标识，私有的用private关键字标识。公有的可以在任意位置都访问到，而私有的只能在类之中访问。,4.4.4 值参数,值参数就是平时最常见到的那种参数。值参数传进函数体之后，复制一个副本在函数内使用，不会影响外部变量的值。,4.4.5 引用参数,引用参数与值参数不同，引用参数传进函数体之后，不是产生一个副本，而是传递一个参数的引用。所以，在函数内所做的更改会影响到外部引用变量的值。,4.4.6 默认参数,默认参数是ActionScript 3.0中新增的参数，定义了默认参数后，传值时可以省略。但是默认参数必须要放在非默认参数的后面，否则就会产生编译错误。,4.5.7 arguments对

33、象参数,arguments对象是一个数组，其中保存着所有传递过来的参数的信息。可以应用arguments对象获取所有参数信息，arguments.length 属性可以获取参数的个数。,4.4.8 .(rest) 参数,.(rest) 参数也是actionscript3中新增的参数，这个参数可以接受多个以逗号分隔的参数。 例如： function print(.params) for each(var o:Object in params) trace(o); actionscript3不支持函数重载，所以可以用.(rest)来判断执行模拟函数重载,一个简单的类,package import

34、flash.display.Sprite; public class Example extends Sprite private var _uname:String; public function Example() init(); private function init():void/初始化操作 public function set uname(value:String):void _uname = value;trace(_uname); public function get uname():String return _uname; ,命名空间(namespace),Acti

35、onScript3引入了命名空间的概念，事实上访问控符public、private、interal、protected都是命名空间 打开命名空间：use namespace xxx,4.5 小结,本章主要讲解了ActionScript 3.0的语法基础，包括了变量、数据类型、语句以及函数等。在讲解中使用了一些简单易懂的代码，力求读者更好的理解其语法特性。下一章将会讲解Flex中的事件机制，深入探讨事件的触发原理。,4.6 习题,1. 如何声明一个变量并赋值？ 2. 数据类型都有哪些？ 3. 编写一个简单的含有判断语句的代码？ 4. 如何定义函数及其参数？,第5章 事件和事件机制,事件是在程序运

36、行中，触发的一个响应。在ActionScript 3.0中，事件的处理得到了统一并且更符合标准，统一用单一的事件处理模型，废弃了之前版本的众多的事件处理机制。本章将会详细介绍ActionScript 3.0中的新的单一的事件处理机制。,5.1 事件的概述,事件是系统与用户之间直接的交互方式。当用户向系统发出指令，就相应的产生了一个事件，通过事件，用户就可以与系统对话。例如，当用户单击鼠标的时候，就会产生一个鼠标单击的事件，系统就会根据用户单击的对象，来判断用户发出的指令。对象是保存数据的按钮，那么，用户单击之后，程序就会执行保存数据的事件函数。 FP本身是多线程的，只不过目前未对开发者开放AP

37、I 。在FP内部，有一个线程专门用于处理事件，事件的处理总是在桢周期的前期进行，并且不会受到其它线程的影响。,5.1.1 事件的侦听,在ActionScript 3.0中，注册事件的侦听函数是通过addEventListener()方法的。通过这个方法，对象可以随时侦听事件的发生，然后触发并执行函数。addEventListener()方法的格式如下所示： public override function addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0,

38、useWeakReference:Boolean = false):void 参数说明：type:事件的类型；listener：事件触发函数；useCapture:监听器运行阶段，true为捕获阶段，false为目标或者冒泡阶段，用这个参数搭配stopPropagation()/stopImmediatePropagation()；priority:优先级，值越高优先级越高；useWeakReference:强引用还是弱引用，默认强引用,5.1.2 Event类,Event类是所有Event对象的基类。对于大部分的事件，使用Event类就足够了，但是，有些事件需要更加精细的操作。例如鼠标的单击

39、事件，使用的是MouseEvent类。这些类都是Event类基础上的扩展。 Event(type:String,bubbles:Boolean=false, cancelable:Boolean=false) 参数说明：type：类型；bubbles:是否冒泡；cancelable:是否停止事件的默认行为（例如，如果用户在文本字段中键入一个字符，则默认行为就是在文本字段中显示该字符。由于可以取消 TextEvent.TEXT_INPUT 事件的默认行为，因此您可以使用 event.preventDefault() 方法来防止显示该字符）,5.2 定义事件,在Flex中，可以在两个地方定义事件，

40、一个是在MXML组件中，事件是放在相应的属性中。另一个是在ActionScript代码中，使用事件类定义。,5.2.1 在MXML中定义事件,在使用MXML创建组件的同时，也可以在其属性中设置事件。 例： 或者 ,5.2.2 在ActionScript中定义事件,很多时候不方便在MXML创建的组件中定义事件，如组件是根据动态数据动态创建的。这些时候就需要使用ActionScript代码来动态的定义事件。 例：var button:Button = new Button(); button.addEventListener(MouseEvent.CLICK, onClick); function

41、 onClick(event:MouseEvent):void trace(点击了按钮，event.target); ,MXML与ActionScript注册事件的不同,在MXML中注册的事件不能够通过removeEventListener移除 在ActionScript中可以移除注册的事件,5.3 事件的类型,事件的类型有几种，其中常见的包括鼠标事件、键盘事件、文本事件、加载进度事件等等。本节主要讲解了三个常用的事件：鼠标事件、键盘事件和时间事件。下面对这三个事件作详细介绍。,5.3.1 鼠标事件,当鼠标的事件发生的时候，都会产生一个MouseEvent对象。在鼠标事件中包括包括了鼠标单击、

42、双击、滚轮、弹起、按下、经过等事件。 MouseEvent.CLICK MouseEvent.DOUBLE_CLICK MouseEvent.MOUSE_WHEEL MouseEvent.MOUSE_UP MouseEvent.MOUSE_DOWN MouseEvent.MOUSE_OVER MouseEvent.ROLL_OUT MouseEvent.ROLL_OVER,5.3.2 键盘事件,当用户按下键盘的时候，就会产生一个KeyboardEvent对象。KeyboardEvent对象中包含键盘按下和弹起的事件。 KeyboardEvent.KEY_DOWN KeyboardEvent.K

43、EY_UP,5.3.3 时间事件,时间事件实际上相当于一个定时器，当达到指定的时间间隔的时候，就会触发事件函数。 例： var timer:Timer = new Timer(1000, 2); timer.addEventListener(TimerEvent.TIMER, onTimer); timer.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete); timer.start();/开始执行 function onTimer(e:TimerEvent):void trace(调用onTimer）； function

44、onTimerComplete(e:TimerEvent):void trace(定时完毕); ,自定义事件,除了Flex提供的一些事件外，用户还可以自定义事件用来传递消息。 例： public class LoginEvent extends Event public static const EXAMPLE:String = example; public var name:String = , pwd:String = ; public LoginEvent (type:String, bubbles:Boolean = false) super(type, bubbles); 使用：

45、var e:LoginEvent = new LoginEvent (ExampleEvent.EXAMPLE); = username; e.pwd = password; dispatchEvent(e);,5.4 小结,本章详细讲解了Flex事件的机制，并讲述了如何定义事件以及事件的使用。通过本章的学习，读者应能了解事件的机制，可以根据实际情况自定义事件。从下一章开始，将讲述Flex组件的应用。,5.5 习题,1在MXML中如何定义一个事件？ 2如何使用ActionScript定义一个事件？,第6章 文本设计,在大多数应用程序中。文本是不可或缺的元素之一。在Flex 3中提

46、供了一系列的文本控件，其功能是用来显示文本文字以及让用户输入文本等等。本章将详细讲解如何应用这些文本控件，进行交互式文本设计。本章包括以下内容： 简单文本设计 文本框的设计 文本域的设计 文本编辑器的设计,6.1 文本的显示,在Flex中，提供了可以用来显示文本的控件Lable和Text。Lable控件可以显示纯文本，而Text控件既可以显示纯文本，也可以显示HTML格式的文本。,6.1.1 使用Label控件显示文本,创建一个文本显示Lable控件有两种方式：一种是直接拖放控件到设计视图中；另一种是编写代码。第一种方式拖放控件到设计视图中相对直观，不用编写代码。在开发小型的应用程序的时候，可

47、以提高开发效率。,6.1.2 使用Text控件的text属性显示文本,通过设置Text控件的text属性，可以显示纯文本。,6.1.3 使用Text控件的htmlText属性显示文本,使用Text控件，除了可以创建纯文本显示外，还可以通过设置htmlText属性显示HTML格式的超文本，如字体的颜色、大小、超链接、粗细等等。,6.2 单行文本框的设计,文本框是系统与用户交互最基本的控件。在Flex中也提供了一个可以输入单行文本的文本框。使用TextInput控件可以创建一个单行的文本框。本节会详细讲述如何使用TextInput控件设计单行文本框。,6.2.1 使用TextInput控件设计文本

48、框,TextInput控件是Flex提供的，用来输入单行文本的控件。使用时，可以直接在设计视图中拖放到设计窗口中，也可以在代码视图中编写代码。,6.2.2 动态定义文本框的内容,使用ActionScript代码可以动态的定义文本框的内容。通过定义Text控件的text属性的值，可以动态的改变文本框的内容。 很多实际应用开发中经常会遇到这种情况，如在用户填写某些表单之前，会根据该表单的填写习惯或者其他信息，预先赋值，之后用户再根据实际情况修改。,6.2.3 动态创建文本框,动态创建文本框很简单，只要遍历地创建一个文本框，设置属性，并添加到页面中即可。,6.3 多行文本的设计,除了单行文本框外，F

49、lex中还提供了多行文本的控件，用作多行文本的设计。使用多行文本不仅可以显示纯文本内容，还可以显示HTML格式的超文本内容。本节将详细讲述多行文本框的设计。,6.3.1 使用TextArea控件显示多行文本,在Flex中提供了一个多行文本输入控件TextArea。使用这个控件可以使用户输入多行的文本。,6.3.2 在多行文本框中显示HTML文本,在多行文本框中，除了可以显示纯文本内容之外，还可以显示HTML格式的内容文本。要显示HTML格式的文本，需要在htmlText属性里面设置内容。,6.4 文本编辑器的设计,多行文本框在显示HTML格式内容的时候，是通过htmlText属性的HTML代码

50、实现的。普通用户是不懂得HTML代码的，如果普通用户要自己设置HTML格式文本，就需要有个所见即所得的编辑器。在Flex中，就提供了这样的HTML文本编辑器。本节将详细讲解使用RichTextEditor控件设计文本编辑器。,6.4.1 使用RichTextEditor控件创建一个文本编辑器,在Flex中，可以使用RichTextEditor控件设计一个所见即所得的文本编辑器。在编辑器中，用户可以设置字体、字体大小和颜色、对齐方式、粗细等。,6.4.2 添加和移除文本编辑器的工具栏内容,默认情况下RichTextEditor编辑器的工具栏中，只有几个工具按钮。通过toolbar属性的addCh

51、ild()方法可以自定义添加和移除工具栏的内容，使得编辑器的功能得以扩展。,6.5 获取选择的文本,为了增加用户的交互性，提供更加友好的界面和操作，需要获取文本框中选择的文本。实际应用的例子很多，如查找和替换文本的部分内容等。在Flex中，同样也提供了方法可以方便的获取选择的文本。,6.5.1 获取文本框中选择的文本,获取文本框中选择文本的方式是通过TextRange类，被选择的文本则保存在TextRange类的text属性的值中。,6.5.2 获取文本编辑器中选择的文本,同样的，使用TextRange类也可以获取文本编辑器中选择的文本。不同的是，要获取HTML格式的文本，需要使用htmlTe

52、xt属性。,6.6 本章实例：HTML文本编辑器,在目前最流行的Blog网站中，也提供了编写Blog日志内容的编辑器。大部分编辑器既为普通用户提供了所见即所得的视图界面，同时也为高级用户提供了HTML代码页面，可以手动编写HTML代码。这种两种视图之间切换的功能使用Flex也同样可以轻松的实现。 【实例6-1】本例仿照Blog系统中的文本编辑器，实现设计界面和视图界面互相切换的效果和功能。,6.7 小结,本章主要讲解了如何在Flex中进行文本设计，其中详细的讲解了基本文本的显示、单行和多行文本框的设计以及文本编辑器的设计。在常用的表单中，单行和多行文本框是应用最多的，需要重点掌握。同时，在学习

53、了文本编辑器的设计之后，读者也能够结合其他知识，独立设计一个功能强大的文本编辑器。下一章将讲述按钮的设计。,6.8 习题,1. 如何在界面中显示一段HTML格式的文本？ 2. 如何动态的创建文本框？ 3. 怎么样在多行文本框中显示HTML格式的文本？ 4. 如何获取文本框选择的内容？,第7章 按钮设计,按钮是设计中最常用到的界面元素之一，大部分与用户交互的设计都是通过按钮来实现的。Flex中的按钮控件分为几种，在本章中将会一一介绍这些按钮控件的使用。本章包括以下内容： 普通按钮的设计 按钮条的设计 单选框的设计 复选框的设计 弹出式按钮的设计 文本链接按钮的设计,7.1 普通按钮的设计,普通按

54、钮在大部分应用程序中都会出现，使用的频率非常高。按钮是最简单直接的来与用户交互的方式之一，在Flex中也提供了按钮Button控件，该控件如图7.1所示。,7.1.1 使用Button控件设计按钮,在Flex中提供了按钮Button控件，用来设计按钮。按钮的设计相对简单，只需从工具面板中将其拖放到设计窗口即可。重点看的是生成按钮Button控件之后的MXML代码。,7.1.2 按钮中嵌入图片,在设计按钮样式时，除了可以更改按钮的文字外，还可以在按钮中嵌入图片资源。,7.1.3 设置按钮样式,在设计按钮的样式中，不只能只显示一种图片，还可以根据不同的按钮状态显示不同的按钮样式。如当鼠标经过、按下

55、、释放等状态时，都会有各自状态的图片显示。,7.1.4 按钮事件,在按钮设计中，除了通过设置相应属性改变标签描述和样式外，应用最多的还是按钮事件，尤其是按钮的单击事件。,7.2 单选框的设计,在用表单调查表中，可以使用选择框来减少用户的操作。单选框是在一组选择框中只能选取一个选项，在限制选项选择时最为有用。,7.2.1 使用RadioButton控件设计单选框,在Flex中，提供了单选框RadioButton控件，使用此控件可以设计单选框按钮。,7.2.2 使用单选框组,单选框是可以以分组的形式组合在一起的，这样就可以同时有多个最别的单选框可供选择。,7.2.3 一个简单的加减法计算器,计算器

56、是平时最常用的工具，本节将会使用单选框组件，创建一个简单的加减法计算器。,7.3 复选框的设计,除了单选之外，多选也是平时用的最多的。在Flex中同样也提供了相应的复选框的控件，以提供选择多个内容的表单方式。,7.3.1 使用CheckBox控件设计复选框,创建一个按钮CheckBox控件有两种方式：一种是直接拖放控件到设计视图中；另一种是编写代码。第一种方式拖放控件到设计视图中相对直观，不用编写代码。在开发小型的应用程序的时候，可以提高开发效率。,7.3.2 使用ActionScript控制复选框,在实际开发中，通常会遇到使用ActionScript脚本语言来获取或设置复选框的内容的情况。本

57、节将会讨论如何使用ActionScript脚本语言获取多个复选框的内容。,7.3.3 动态创建复选框,很多情况下，都需要动态的创建复选框。动态创建复选框就会使用到ActionScript语言，动态的创建，动态的设置其属性和事件。本节将会讲述如何动态的创建复选框，并动态的设置属性和事件。,7.4 弹出式按钮的设计,弹出式按钮是有两个横向排列的按钮组成的，一个是主体按钮，另一个是一个小的弹出式按钮。当使用鼠标单击这个弹出式按钮的时候，就会弹出一个菜单。本节将会详细讲述弹出式按钮的设计。,7.4.1 创建PopUpButton控件,在Flex中，已经提供了设计弹出式按钮的控件。使用PopUpButt

58、on控件，可以很容易的设计出一个弹出式按钮。,7.4.2 获取弹出式按钮菜单的内容,上节讲述了如何创建一个弹出式菜单内容，本节将会讨论如何获取弹出菜单的数据项内容。,7.5 链接按钮的设计,链接按钮是一个以文本链接形式的按钮，使用链接按钮可以在浏览器中打开一个链接。本节将会详细讲述如何设计一个链接按钮。,7.5.1 创建LinkButton控件,在Flex中提供了设计链接按钮的控件，使用LinkButton控件就很容易设计出一个链接按钮。,7.5.2 设置样式,如果链接按钮的默认样式不能满足需求，还可以自定义按钮的样式。,7.6 本章实例：简易计算器,计算器是日常生活中最常见也是最常用到的计算

59、工具，本章将会制作一个简易计算器，并详细讲解其设计思路和相关算法。,7.7 小结,本章主要讲解了按钮的设计，其中包括普通按钮、单选框、复选框、弹出式按钮以及链接按钮。通过本章的学习，读者应能对按钮的设计和相应的事件有比较深刻的理解和认识，在实际开发中，对按钮的设计应用自如。下一章将介绍数据绑定控件的使用。,7.8 习题,1. 如何在Button控件中嵌入图片资源？ 2. 如何创建一个单选按钮组？ 3. 如何创建一个弹出式按钮？ 4. 使用链接如何链接到外部信息？,第8章 数据绑定,在呈现单个数据的时候，可以使用文本控件。那么在呈现多条数据的时候，如何表现出来呢？在Flex中就已经提供了呈现多条数据的各种数据绑定控件，使用这些控件，就可以设计出各种样式的数据列表。本章包括以下内容： 数据列表 横向数据列表 交叉数据列表 下拉列表 数据网格 树列表,数据绑定示例,/使用标签Bindable进行绑定 Bindable var username:String = username； 当name的值变化时那么lable显示也会同时变化 /使用进行绑定 var _name:String = ; 当输入的时候，