Flex从入门到实践

Download Report

Transcript Flex从入门到实践 

第1章
Flex概述
Adobe公司的Flex产品是用于构建和维护在所有主要浏览器
、桌面和操作系统一致地部署的。同时它也是极具表现
力的、Web应用程序的、高效率的开放源码框架。作为
RIA应用程序的主要开发框架，Flex 3中已经包含了一套
强大的开发工具。本章包括以下内容：
 Flex与Flash的关系
 Flex使用的语言
 Flex与服务器通信
FLEX从入门到实践
1.1
Flex简介
Flex是一个基于组件的开发框架，可以生成一个由Flash
Player运行的富互联网应用程序。Flex将基于标准的语
言和各种可扩展用户界面及数据访问组件结合起来，使
得开发人员能够构建具有丰富数据演示、强大客户端逻
辑和集成多媒体的应用程序。
FLEX从入门到实践
1.1.1
Flex是什么
Flex是一种创建RIA（Rich Internet Applications）快速有
效的方法之一。RIA是一种可能代替传统HTML应用系统
的解决方案。RIA技术既可以像Web一样很简单的部署用
户客户端程序，同时交互性和表现力等方面也大大超过
了传统Web应用系统。如今，很多开发者或者公司已经
开始研究并构建了成熟的RIA系统。
FLEX从入门到实践
1.1.2
Flex 运行机制
Flex只是一种客户端技术，同时也属于Flash平台。Flex代
码最终被编译成SWF文件运行在Flash播放器（Flash
Player）中。SWF文件可以单独在用户终端运行，但是
必须要安装Flash Player。也可以在各种流行的浏览器中
运行，浏览器必须安装Flash Player插件。
SWF文件是一个压缩文件，可以通过Flash Player呈现出来
。由于SWF文件很小，所以有很快的网络下载速度。用
户要想运行一个Flex应用程序，只需要通过网络或者其
他途径获取SWF文件，就可以运行在装有Flash Player
插件的浏览器中。
FLEX从入门到实践
1.1.3
Flex产品组成
Flex是一个比较完整的开发框架，主要有三个部分组成。
1．Adobe Flex 3 SDK
2．Adobe Flex Builder 3
3．Adobe LiveCycle Enterprise Suite
FLEX从入门到实践
1.2
Flex和Flash的关系
Flex是早期Macromedia公司发布的Presentation Server
（展现服务），是Java Web Container或者.NET
Server的一个应用。Flex根据MXML文件（纯粹的XML
描述文件和ActionScript脚本语言）产生相应的SWF文
件，传送到客户端，由客户端的Flash Player或者
Shockwave Player解释执行，给用户以丰富的客户体验
。
Flash是强大的矢量动画编辑工具，在Flash被Adobe公司
收购之后，Flash一直在谋求Rich Internet Application
（富客户端）的霸主地位。最有影响的是，已经推出了
面向对象的编程脚本ActionScript 3.0，并且建立起类似
于Java Swing的类库和相应Component（组件）。
FLEX从入门到实践
1.3
Flex与其他技术比较
Flex是一种混合的技术，这种语言技术的设计借鉴了其他优
秀的现代标准语言，如XML、JAVA等。其中，MXML就
是基于XML构建的描述界面的语言，同时借鉴了HTML等
Web技术。而ActionScript也是大量的借鉴了
JavaScript脚本和Java语言的语法组成。
FLEX从入门到实践
1.3.1
HTML/JavaScript/Ajax
Flex技术是在Web技术发明之后开发出来的。Flex技术中的
MXML语言就是基于XML，并且借鉴了HTML描述语言。
所以，MXML和HTML的作用实质上是一样的，都是为了
更好的描述界面布局和组件样式。不同的是，MXML采
用了更加先进的设计模式，使得MXML代码更容易阅读
和编写。
Flex中的ActionScript是一种脚本语言，用来处理客户端的
逻辑运算。ActionScript的设计同样也参照了
JavaScript，与JavaScript作用一样。并且，
ActionScript和JavaScript两者的语法也极其相似，这
使得开发者学习新的ActionScript语言的门槛降低。
FLEX从入门到实践
1.3.2
Java/Java FX
Flex是一个类似于Java和Java Swing的平台。Flex中的脚
本语言ActionScript与Java上的语法和结构都极其相似
。它继承了Java中包的概念，在设计中，参照了Java的
大部分特性。
同Flex一样，Java也可以把应用程序部署到Web上运行。
但是编译之后的文件却远比Flex大，因为Java的运行环
境JRE和开发包JDK拥有比Flex多得多的类库，而且这
些类库在客户端可能不需要。所以，很多Java开发者开
始了解并学习Flex，计划把Flex和Java更好的结合起来
。
FLEX从入门到实践
1.3.3
Silverlight/XAML
Silverlight是微软公司的富网络应用程序的解决方案。
Silverlight的XAML描述语言同样也是基于XML设计的。
XAML就相当于Flex中的MXML，两者的功能一样，而且
语法也类似。Silverlight客户端所使用的逻辑语言更加广
泛，因为它是基于.NET框架设计的。这些语言包括C#、
JScript、VB等。
不过Silverlight技术刚刚推出不久，其中的很多功能有待完
善。而且，在客户端需要安装Silverlight控件。
FLEX从入门到实践
1.4
小结
本章主要讲解了什么是Flex以及Flex与其他语言的比较。本
章的重点是Flex的概念和框架组成。通过本章的学习，
读者应该可以更加清楚的了解到Flex的概念和基本框架
组成。下一章将向读者讲解Flex的开发环境，其中包括
编译工具和开发工具的使用。
FLEX从入门到实践
1.5
习题
1．什么是Flex，其运行机制是什么？
2．Flex与Flash有哪些不同？
3．Flex 3产品有哪些部分组成？
4．说说Flex与Silverlight相同和不同的地方？
FLEX从入门到实践
第2章
Flex的开发环境
Adobe Flex是一个免费的产品，可以使用任何一款编辑器
开发。在诸多编辑器中，Flex Builder是一个不可或缺的
、功能强大的编辑器，是基于Eclipse IDE开源项目构建
的，继承了很多优秀的功能。本章包括以下内容：
 Flex SDK的安装
 开发工具Flex Builder 3
 调试Flex应用程序
FLEX从入门到实践
2.1
Flex SDK的安装
Adobe Flex SDK产品包含了Flex框架（即组件类库）和
Flex编译器。通过使用Flex SDK 3，再结合编辑器，就
可以自由的开发和部署Flex应用程序。
FLEX从入门到实践
2.1.1
下载和安装Adobe Flex SDK
通过Adobe官方网站http://www.adobe.com/go/flex3_sdk
，就可以下载到Flex SDK开发工具。下载的Flex SDK 3
开发包是一个ZIP压缩文件，解压缩到一个指定的目录中
即可，如D:\flex_sdk_3。下载Adobe Flex SDK 3的页
面如图2.1所示，红色区域为下载地址。
FLEX从入门到实践
2.1.2
编译代码
Flex SDK中包含两个编译器：mxmlc和compc。mxmlc编
译器可以把MXML和ActionScript代码编译为SWF文件
，compc编译器可以把组件和库编译为SWC文件。
FLEX从入门到实践
2.2
开发工具Flex Builder 3
Flex Builder是一个建立在流行的、开源的Eclipse IDE基础
上的。通过Flex Builder，可以快速方便的构建Flex应用
程序，使得开发时间缩短。使用Flex Builder，还可以设
置代码的断点，调试程序。本节将重点介绍Flex Builder
3的安装和开发界面。
FLEX从入门到实践
2.2.1
安装Flex Builder 3
Flex Builder 3有两种安装方式：独立安装和插件安装。独
立安装包中已经包括了Eclipse。插件安装则是以
Eclipse插件的形式安装，所以安装之前必须要确保已经
安装了Eclipse开发工具。本节将会介绍使用独立安装包
安装Flex Builder 3。
FLEX从入门到实践
2.2.2
Flex Builder 3的界面
安装完Flex Builder 3后，通过双击快捷方式可以打开Flex
Builder 3的开发环境。第一次使用会出现Flex Builder 3
Activation对话框，需要输入Flex Builder的序列号。
Flex Builder 3 Activation对话框如图2.13所示。
FLEX从入门到实践
2.3
构建第一个Flex应用程序
本节将介绍如何使用Flex Builder 3一步步地开发第一个
Flex应用程序。该程序将会在浏览器中输出一个字符串
。
FLEX从入门到实践
2.3.1
创建Flex项目
Project（项目）是Flex Builder中的基础，一个Project是
一组相互关联的文件。所以，创建一个Flex应用程序，
就需要创建一个项目（project）。
FLEX从入门到实践
2.3.2
创建组件和编写代码
创建完项目后，系统自动会返回到Flex Builder 3的开发主
界面，如图2.17所示。
FLEX从入门到实践
2.3.3
编译和运行应用程序
Flex Builder 3中集成了Flex SDK，所以通过Flex SDK可
以把示例2-1中编写的代码编译成SWF文件，并在浏览器
中运行。
FLEX从入门到实践
2.4
各种常见的文件类型
Flex中不仅可以创建基本的MXML文件，还
可以创建单独的ActionScript文件、类以
及接口等。本节将讲解Flex中可以创建的
各种文件格式及其作用。创建完某一个项
目后，右击其源代码目录，选择并展开
New命令项，将会弹出右键菜单，如图
2.22所示。
FLEX从入门到实践
2.4.1
项目组件化
通过在右键源代码菜单中，选择并创建一个MXML
Component组件文件，可以把每个组件独立出来。这样
做可以使项目源代码组件化，把不同功能的组件独立出
来管理。
FLEX从入门到实践
2.4.2
项目模块化
通过在右键源代码菜单中，可以选择并创建一个MXML
Module模块文件。项目模块化实际上就是把相同功能的
代码组织到一个模块中，通过多个模块的累积，从而形
成一个完整的应用系统。
FLEX从入门到实践
2.4.3
项目模式化
通过在右键源代码菜单中，可以选择并创建一个
ActionScript文件、类或者接口。通常这类文件会在设
计模式中被应用。设计模式是管理和组织大量代码更有
效的方法之一，是面向对象思想最直接的体现。而
ActionScript语言本身就是一个面向对象的语言。
在本书的第25章PureMVC框架中，对设计模式尤其是MVC
模式，有更加深入的探讨。
FLEX从入门到实践
2.5
小结
本章主要讲解了Flex 3的开发环境。其中介绍了Flex SDK 3
的安装和使用，详细讲解了Flex Builder 3的安装和使用
。在本章的最后，使用Flex Builder 3构建了第一个Flex
应用程序，使读者可以快速的入门。下一章将会介绍构
建Flex应用系统界面的描述语言MXML。
FLEX从入门到实践
2.6
习题
1. Flex SDK 3包含哪两部分内容？
2. mxmlc编译器可以编译哪些类型的文件？
FLEX从入门到实践
第3章
MXML语法基础
MXML是一种基于XML设计的描述性标记语言，使用MXML
可以构建Flex应用程序中的用户界面组件。同时，
MXML也借鉴了HTML等Web技术。本章包括以下内容：
 MXML的构成
 解析MXML的标签
 命名空间
FLEX从入门到实践
3.1
MXML的构成
MXML是Flex架构中最核心的语言之一。因为MXML是在
XML基础上设计的，所以，它具有易读、易编写等优点
。
FLEX从入门到实践
3.1.1
结构原理
XML是一种可扩展的标记语言，其内容是一段结构性的文本
。在XML中，所有的标记都使用一对尖括号（“<”和
“>”）。如下面是一段典型的XML代码。
<book>
<author>
<name />
</author>
</book>
与HTML类似，MXML同样也是把某些特殊的单词指定了含
义。
FLEX从入门到实践
3.1.2
书写规则
MXML是XML的一种扩展行语言，所以MXML继承了XML的
书写规则。MXML的书写规则如下。
所有元素要有开始和结束标记。如果一个标记被打开，那么
在对应的地方应该被关闭。计算机的逻辑是很严谨的，
如果某个标记只有开始没有结束，系统就会发生错误。
区分大小写。XML是区分大小写的，所以MXML同样也是。
<book>和<Book>在XML中是不同的两个元素标记。
<mx:Panel>和<mx:panel>当然在MXML中也是不同的
。
需要声明。在XML文档的第一行通常都需要声明版本和编码
等信息。
FLEX从入门到实践
3.2
解析MXML的标签
MXML的标签（tag）和XML中的标签一样，只不过在
MXML中，这些标签（tag）具有特殊 。一个标签（tag
）通常所包含的信息可以通过两种方式实现：内容和属
性。
1．内容
2．属性
FLEX从入门到实践
3.3
命名空间
可能也注意到了，在上述的MXML例子中，标记的开头都出
现了类似mx的字样。这是XML的命名空间，说明Panel
和Label等组件都是属于命名空间mx中的。
一个XML命名空间是一个命名的汇集，它由URI引用确定，
在XML文件中做为元素类型和属性名使用。之所以要在
XML中引用命名空间的概念，主要是为了软件模块化，
使得创建的组件可以重复使用。为了避免命名上的冲突
，可以在标签（tags）名称的前面加上引用的空间名。
FLEX从入门到实践
3.4
小结
本章主要讲解了MXML语言的基础部分，其中包括了结构原
理和书写规则。而且通过示例详细解析了MXML代码的
标签构成，在最后，深入剖析了MXML命名空间的原理
。通过本章的学习，读者可以更加深入的了解到MXML
的设计思想。在下一章中将会介绍Flex平台的另外一种
比较重要的语言ActionScript。
FLEX从入门到实践
3.5
习题
1. MXML的书写规则有哪些？
2. 什么是XML的命名空间？
FLEX从入门到实践
第4章
ActionScript 3.0 语法基础
ActionScript 3.0是一种运行在Flash Player的编程语言，
是由ActionScript虚拟机（AVM）执行的。
ActionScript 3.0版本提供了更好的面向对象思想的设计
模型，使程序员更容易编写和设计复杂的代码。
ActionScript 3.0是Flex中主要的编程语言，是学习Flex
技术的基础。本章包括以下内容：
 变量和常量
 数据类型
 运算符
 语句
 函数
FLEX从入门到实践
4.1
变量和常量
变量在每种语言中都是存在的，是最基本的概念。变量是用
来存储程序在运行时的临时数据的。常量相对于变量而
言的，是用来存储固定的数值的。下面几节就来详细的
介绍关于变量和常量的使用。
FLEX从入门到实践
4.1.1
变量的声明和赋值
在使用变量之前，需要对变量进行声明。如果不声明变量，
就直接使用，编译器会出现错误。
在声明一个变量的时候，必须要在前面加上var，后面接着
是变量的名称。声明变量的语法如下所示。
var 变量名[:数据类型]
其中，var是变量的关键字，表示声明的是一个变量；变量
名是自定义的变量的名称，尽量取有意义的单词；数据
类型是可以不必定义，但是为了追求代码的严谨性，最
好明确定义类型。
FLEX从入门到实践
4.1.2
变量的作用域
在定义变量之前，要确定变量需要用在哪里，这个时候就要
确定变量的作用域，即全局变量或者局部变量。全部变
量是在整个类或是命名空间中都可以访问的变量，而局
部变量是只有某个代码区段才可以访问的变量。全局变
量通常定义在函数体的外部，而局部变量定义在函数体
的内部。
FLEX从入门到实践
4.1.3
声明常量
常量与变量不同的是，常量是有固定数值的。一旦声明了常
量，并赋值，那么该常量就不能再次赋值。要声明一个
常量，需使用关键字const，而不是var。
声明常量的语法格式如下所示。
const 常量名[:数据类型] = 常量值
在声明常量的同时，必须赋值，如果不赋值，在编译代码的
时候，就会出现常量没有初始化的警告。
FLEX从入门到实践
4.2
数据类型
变量是存储在计算机内存上的，那么这些变量的值的位是如
何存在内存中的就是由数据类型决定的。数据类型分为
基本数据类型和复合数据类型两种。
FLEX从入门到实践
4.2.1
基本数据类型
基本的数据类型包括字符串（String）、数字（Number）
和布尔（Boolean）。
1．字符串类型
2．数字类型
3．布尔类型
FLEX从入门到实践
4.2.2
复合数据类型
复合数据类型包括对象（Object）、影片剪辑（Sprite）和
数组（Array）。下面将依次讲解这三种数据类型。
1．对象类型
2．影片剪辑类型
3．数组类型
FLEX从入门到实践
4.2.3
数据类型检查
数据类型定义了变量以何种方式存储在计算机的内存中，如果数
据类型与变量值不匹配，系统就会出现错误。为了避免数据类
型与变量值不匹配的情况发生，往往在编译器或者解释器中就
包含了数据类型检查的功能。通过数据类型检查，可以在编译
代码的时候提早发现问题，避免在程序运惺背鱿治侍狻
数据类型检查分为编译时类型检查和运行时类型检查。
ActionScript 3.0是一种脚本语言，是在运行时进行数据类型检查
的。但是同时也支持在严格模式（注：严格模式是编译器的编
译模式之一，默认为严格模式。）下执行编译时类型检查。在
严格模式下，两种类型检查都支持。在标准模式下，只支持运
行时类型检查。
在大型项目开发是，通常都是使用编译型类型检查。因为编译型
项目检查可以更及时迅速的捕获错误，并方便的定位错误。
FLEX从入门到实践
4.2.4
is运算符
is运算符是ActionScript 3.0新增的运算符。利用is运算符
可以判断变量间的类型是否一致，返回的结果为布尔类
型。
FLEX从入门到实践
4.2.5
as运算符
as运算符也是ActionScript 3.0中新增的运算符。利用as运
算符也可以比较变量类型是否一致，但是与is运算符返回
值不同，is运算符返回的值是布尔类型的，而as运算符
返回的值是变量或表达式。
FLEX从入门到实践
4.3
语句
语句，也可以称作结构，因为它定义了程序不同的计算逻辑
结构。常用的语句有判断语句、条件语句以及循环语句
等。本节将会分别讲解这些语句。
FLEX从入门到实践
4.3.1
if…else 语句
if…else语句是用来判断一个测试条件，如果条件为真，则执行一个代码
块，否则就执行另外一个代码块。其语法结构如下所示：
if(逻辑表达式)
{
//逻辑表达式结果为真，执行代码块1，然后跳出if语句
代码块1
}
else
{
//逻辑表达式结果为假，执行代码块2，然后跳出if语句
代码块2
}
FLEX从入门到实践
4.3.2
if…else if 语句
if…else if语句是用来判断两个测试条件，如果其中的一个条件为真，则执行一个代码块，另
一个条件为真，则执行另外一个代码块，否则就执行最后的一个代码块。其语法结构如下
所示：
if(逻辑表达式1)
{
//逻辑表达式1结果为真，执行代码块1，然后跳出if…else if语句
代码块1
}
else if(逻辑表达式2)
{
//逻辑表达式2结果为真，执行代码块2，然后跳出if…else if语句
代码块2
}
else
{
//逻辑表达式1和逻辑表达式2的结果都同时为真时，执行代码块3
代码块3
}
FLEX从入门到实践
4.3.3
switch语句
switch语句是用来判断多个测试条件，当其中的一个条件为真，则执行相应的代码块，
否则就执行默认的一个代码块。其语法结构如下所示：
switch(表达式)
{
//当表达式的值为1时，执行代码块1，然后跳出switch语句
case 值1:
代码块1
break;
//当表达式的值为1时，执行代码块1，然后跳出switch语句
case 值2:
代码块2
break;
//当表达式的值为1时，执行代码块1，然后跳出switch语句
case 值3:
代码块3
break;
……
//当表达式的值不为1，2，3……时，执行代码块，然后跳出switch语句
default:
代码块
break;
FLEX从入门到实践
}
4.3.4
for语句
for语句是根据某个变量来获取循环的次数，然后反复的执
行里面的代码。for语句的表达式有三个：一个是变量初
始化，一个是逻辑表达式，还有一个是更改变量的表达
式。当逻辑表达式结果为真时，执行代码块。for语句的
语法结构如下所示：
for(变量初始化;逻辑表达式;变量更新)
{
代码块
}
FLEX从入门到实践
4.3.5
for…in语句
for…in语句的应用通常是循环某个对象或者数组。其语法
结构如下所示：
for(变量 in 集合)
{
代码块
}
for…in语句的流程图与for语句的一样，可以参考图4.4所示
。
FLEX从入门到实践
4.3.6
for each…in语句
与for…in不同的是，for…in获取的是循环对象或者数组的
次数，而for each…in语句是循环对象或者数组，但获取
的是其内部的所有元素。其语法结构如下所示：
for each(变量 in 变量集合)
{
代码段
}
FLEX从入门到实践
4.3.7
while语句
while语句是根据逻辑表达式判断，如果为真，就反复执行
里面特定的代码。其语法结构如下所示：
while(逻辑表达式)
{
代码段
}
FLEX从入门到实践
4.3.8
do…while语句
do…while语句与while语句类似，只是在判断表达式之前
，执行了一次代码块。其语法结构如下所示：
do
{
代码块
}
while(逻辑表达式)
FLEX从入门到实践
4.4
函数
函数是封装的一段特定的代码块，目的是为了更好的重用代
码，更容易维护。函数通常是写在类中的，用大括号把
一段代码封装起来。
FLEX从入门到实践
4.4.1
定义函数
函数是由几个部分组成的：开头是function关键字，然后是
函数名，接着是用小括号扩起来的参数，每个参数用逗
号隔开，还有就是用冒号标记的函数返回类型，最后就
是用大括号扩起来的代码块。其语法结构如下所示：
作用域 function 函数名(参数1, 参数2, ……):返回类型
{
函数体
}
FLEX从入门到实践
4.4.2
函数的返回值
函数的返回值是函数完成功能之后，返回的结果值。返回值
用关键字return标示，返回的类型在函数的头部，放在冒
号的后面。
FLEX从入门到实践
4.4.3
函数的作用域
不是在任何地方都可以调用任何函数的，函数也是有权限的
，这个权限就是函数的作用域。函数的作用域通常有两
种：公有和私有。公有的用public关键字标识，私有的
用private关键字标识。公有的可以在任意位置都访问到
，而私有的只能在类之中访问。
FLEX从入门到实践
4.4.4
值参数
值参数就是平时最常见到的那种参数。值参数传进函数体之
后，复制一个副本在函数内使用，不会影响外部变量的
值。
FLEX从入门到实践
4.4.5
引用参数
引用参数与值参数不同，引用参数传进函数体之后，不是产
生一个副本，而是传递一个参数的引用。所以，在函数
内所做的更改会影响到外部引用变量的值。
FLEX从入门到实践
4.4.6
默认参数
默认参数是ActionScript 3.0中新增的参数，定义了默认参
数后，传值时可以省略。但是默认参数必须要放在非默
认参数的后面，否则就会产生编译错误。
FLEX从入门到实践
4.5.7
arguments对象参数
arguments对象是一个数组，其中保存着所有传递过来的参
数的信息。可以应用arguments对象获取所有参数信息
，arguments.length 属性可以获取参数的个数。
FLEX从入门到实践
4.4.8
...(rest) 参数
...(rest) 参数也是actionscript3中新增的参数，这个参数可
以接受多个以逗号分隔的参数。
FLEX从入门到实践
4.5
小结
本章主要讲解了ActionScript 3.0的语法基础，包括了变量
、数据类型、语句以及函数等。在讲解中使用了一些简
单易懂的代码，力求读者更好的理解其语法特性。下一
章将会讲解Flex中的事件机制，深入探讨事件的触发原
理。
FLEX从入门到实践
4.6
习题
1. 如何声明一个变量并赋值？
2. 数据类型都有哪些？
3. 编写一个简单的含有判断语句的代码？
4. 如何定义函数及其参数？
FLEX从入门到实践
第5章
事件和事件机制
事件是在程序运行中，触发的一个响应。在ActionScript
3.0中，事件的处理得到了统一并且更符合标准，统一用
单一的事件处理模型，废弃了之前版本的众多的事件处
理机制。本章将会详细介绍ActionScript 3.0中的新的单
一的事件处理机制。
FLEX从入门到实践
5.1
事件的概述
事件是系统与用户之间直接的交互方式。当用户向系统发出
指令，就相应的产生了一个事件，通过事件，用户就可
以与系统对话。例如，当用户单击鼠标的时候，就会产
生一个鼠标单击的事件，系统就会根据用户单击的对象
，来判断用户发出的指令。对象是保存数据的按钮，那
么，用户单击之后，程序就会执行保存数据的事件函数
。
FLEX从入门到实践
5.1.1
事件的侦听
在ActionScript 3.0中，注册事件的侦听函数是通过
addEventListener()方法的。通过这个方法，对象可以
随时侦听事件的发生，然后触发并执行函数。
addEventListener()方法的格式如下所示：
public override function addEventListener(type:String,
listener:Function, useCapture:Boolean = false,
priority:int = 0, useWeakReference:Boolean =
false):void
FLEX从入门到实践
5.1.2
Event类
Event类是所有Event对象的基类。对于大部分的事件，使
用Event类就足够了，但是，有些事件需要更加精细的操
作。例如鼠标的单击事件，使用的是MouseEvent类。这
些类都是Event类基础上的扩展。
FLEX从入门到实践
5.2
定义事件
在Flex中，可以在两个地方定义事件，一个是在MXML组件
中，事件是放在相应的属性中。另一个是在
ActionScript代码中，使用事件类定义。
FLEX从入门到实践
5.2.1
在MXML中定义事件
在使用MXML创建组件的同时，也可以在其属性中设置事件
。
FLEX从入门到实践
5.2.2
在ActionScript中定义事件
很多时候不方便在MXML创建的组件中定义事件，如组件是
根据动态数据动态创建的。这些时候就需要使用
ActionScript代码来动态的定义事件。
FLEX从入门到实践
5.3
事件的类型
事件的类型有几种，其中常见的包括鼠标事件、键盘事件、
文本事件、加载进度事件等等。本节主要讲解了三个常
用的事件：鼠标事件、键盘事件和时间事件。下面对这
三个事件作详细介绍。
FLEX从入门到实践
5.3.1
鼠标事件
当鼠标的事件发生的时候，都会产生一个MouseEvent对象
。在鼠标事件中包括包括了鼠标单击、双击、滚轮、弹
起、按下、经过等事件。
FLEX从入门到实践
5.3.2
键盘事件
当用户按下键盘的时候，就会产生一个KeyboardEvent对
象。KeyboardEvent对象中包含键盘按下和弹起的事件
。
FLEX从入门到实践
5.3.3
时间事件
时间事件实际上相当于一个定时器，当达到指定的时间间隔
的时候，就会触发事件函数。
FLEX从入门到实践
5.4
小结
本章详细讲解了Flex事件的机制，并讲述了如何定义事件以
及事件的使用。通过本章的学习，读者应能了解事件的
机制，可以根据实际情况自定义事件。从下一章开始，
将讲述Flex组件的应用。
FLEX从入门到实践
5.5
习题
1．在MXML中如何定义一个事件？
2．如何使用ActionScript定义一个事件？
FLEX从入门到实践
第6章
文本设计
在大多数应用程序中。文本是不可或缺的元素之一。在Flex
3中提供了一系列的文本控件，其功能是用来显示文本文
字以及让用户输入文本等等。本章将详细讲解如何应用
这些文本控件，进行交互式文本设计。本章包括以下内
容：
 简单文本设计
 文本框的设计
 文本域的设计
 文本编辑器的设计
FLEX从入门到实践
6.1
文本的显示
在Flex中，提供了可以用来显示文本的控件Lable和Text。
Lable控件可以显示纯文本，而Text控件既可以显示纯文
本，也可以显示HTML格式的文本。
FLEX从入门到实践
6.1.1
使用Label控件显示文本
创建一个文本显示Lable控件有两种方式：一种是直接拖放
控件到设计视图中；另一种是编写代码。第一种方式拖
放控件到设计视图中相对直观，不用编写代码。在开发
小型的应用程序的时候，可以提高开发效率。
FLEX从入门到实践
6.1.2
使用Text控件的text属性显示文本
通过设置Text控件的text属性，可以显示纯文本。
FLEX从入门到实践
6.1.3
使用Text控件的htmlText属性显示文
本
使用Text控件，除了可以创建纯文本显示外，还可以通过设
置htmlText属性显示HTML格式的超文本，如字体的颜色
、大小、超链接、粗细等等。
FLEX从入门到实践
6.2
单行文本框的设计
文本框是系统与用户交互最基本的控件。在Flex中也提供了
一个可以输入单行文本的文本框。使用TextInput控件可
以创建一个单行的文本框。本节会详细讲述如何使用
TextInput控件设计单行文本框。
FLEX从入门到实践
6.2.1
使用TextInput控件设计文本框
TextInput控件是Flex提供的，用来输入单行文本的控件。
使用时，可以直接在设计视图中拖放到设计窗口中，也
可以在代码视图中编写代码。
FLEX从入门到实践
6.2.2
动态定义文本框的内容
使用ActionScript代码可以动态的定义文本框的内容。通过
定义Text控件的text属性的值，可以动态的改变文本框的
内容。
很多实际应用开发中经常会遇到这种情况，如在用户填写某
些表单之前，会根据该表单的填写习惯或者其他信息，
预先赋值，之后用户再根据实际情况修改。
FLEX从入门到实践
6.2.3
动态创建文本框
动态创建文本框很简单，只要遍历地创建一
个文本框，设置属性，并添加到页面中
即可。
FLEX从入门到实践
6.3
多行文本的设计
除了单行文本框外，Flex中还提供了多行文本的控件，用作
多行文本的设计。使用多行文本不仅可以显示纯文本内
容，还可以显示HTML格式的超文本内容。本节将详细讲
述多行文本框的设计。
FLEX从入门到实践
6.3.1
使用TextArea控件显示多行文本
在Flex中提供了一个多行文本输入控件TextArea。使用这
个控件可以使用户输入多行的文本。
FLEX从入门到实践
6.3.2
在多行文本框中显示HTML文本
在多行文本框中，除了可以显示纯文本内容之外，还可以显
示HTML格式的内容文本。要显示HTML格式的文本，需
要在htmlText属性里面设置内容。
FLEX从入门到实践
6.4
文本编辑器的设计
多行文本框在显示HTML格式内容的时候，是通过htmlText
属性的HTML代码实现的。普通用户是不懂得HTML代码
的，如果普通用户要自己设置HTML格式文本，就需要有
个所见即所得的编辑器。在Flex中，就提供了这样的
HTML文本编辑器。本节将详细讲解使用RichTextEditor
控件设计文本编辑器。
FLEX从入门到实践
6.4.1
使用RichTextEditor控件创建一个文
本编辑器
在Flex中，可以使用
RichTextEditor控件设计一个
所见即所得的文本编辑器。在
编辑器中，用户可以设置字体
、字体大小和颜色、对齐方式
、粗细等。
FLEX从入门到实践
6.4.2
添加和移除文本编辑器的工具栏内容
默认情况下
RichTextEditor编辑
器的工具栏中，只有
几个工具按钮。通过
toolbar属性的
addChild()方法可以
自定义添加和移除工
具栏的内容，使得编
辑器的功能得以扩展
。
FLEX从入门到实践
6.5
获取选择的文本
为了增加用户的交互性，提供更加友好的界面和操作，需要
获取文本框中选择的文本。实际应用的例子很多，如查
找和替换文本的部分内容等。在Flex中，同样也提供了
方法可以方便的获取选择的文本。
FLEX从入门到实践
6.5.1
获取文本框中选择的文本
获取文本框中选择文本的方式是
通过TextRange类，被选择的
文本则保存在TextRange类的
text属性的值中。
FLEX从入门到实践
6.5.2
获取文本编辑器中选择的文本
同样的，使用TextRange类也可以
获取文本编辑器中选择的文本
。不同的是，要获取HTML格式
的文本，需要使用htmlText属
性。
FLEX从入门到实践
6.6
本章实例：HTML文本编辑器
在目前最流行的Blog网站中，也提供了编写Blog日志内容
的编辑器。大部分编辑器既为普通用户提供了所见即所
得的视图界面，同时也为高级用户提供了HTML代码页面
，可以手动编写HTML代码。这种两种视图之间切换的功
能使用Flex也同样可以轻松的实现。
【实例6-1】本例仿照Blog系统中的文本编辑器，实现设计
界面和视图界面互相切换的效果和功能。
FLEX从入门到实践
6.7
小结
本章主要讲解了如何在Flex中进行文本设计，其中详细的讲
解了基本文本的显示、单行和多行文本框的设计以及文
本编辑器的设计。在常用的表单中，单行和多行文本框
是应用最多的，需要重点掌握。同时，在学习了文本编
辑器的设计之后，读者也能够结合其他知识，独立设计
一个功能强大的文本编辑器。下一章将讲述按钮的设计
。
FLEX从入门到实践
6.8
习题
1. 如何在界面中显示一段HTML格式的文本？
2. 如何动态的创建文本框？
3. 怎么样在多行文本框中显示HTML格式的文本？
4. 如何获取文本框选择的内容？
FLEX从入门到实践
第7章
按钮设计
按钮是设计中最常用到的界面元素之一，大部分与用户交互
的设计都是通过按钮来实现的。Flex中的按钮控件分为
几种，在本章中将会一一介绍这些按钮控件的使用。本
章包括以下内容：
 普通按钮的设计
 按钮条的设计
 单选框的设计
 复选框的设计
 弹出式按钮的设计
 文本链接按钮的设计
FLEX从入门到实践
7.1
普通按钮的设计
普通按钮在大部分应用程序中都会出现，使用的频率非常高
。按钮是最简单直接的来与用户交互的方式之一，在
Flex中也提供了按钮Button控件，该控件如图7.1所示。
FLEX从入门到实践
7.1.1
使用Button控件设计按钮
在Flex中提供了按钮Button控件，用来设计按钮。按钮的
设计相对简单，只需从工具面板中将其拖放到设计窗口
即可。重点看的是生成按钮Button控件之后的MXML代
码。
FLEX从入门到实践
7.1.2
按钮中嵌入图片
在设计按钮样式时，除了可以更改按钮的文字外，还可以在
按钮中嵌入图片资源。
FLEX从入门到实践
7.1.3
设置按钮样式
在设计按钮的样式中，不只能只显示一种图片，还可以根据
不同的按钮状态显示不同的按钮样式。如当鼠标经过、
按下、释放等状态时，都会有各自状态的图片显示。
FLEX从入门到实践
7.1.4
按钮事件
在按钮设计中，除了通过设置相应属性改变标签描述和样式
外，应用最多的还是按钮事件，尤其是按钮的单击事件
。
FLEX从入门到实践
7.2
单选框的设计
在用表单调查表中，可以使用选择框来减少用户的操作。单
选框是在一组选择框中只能选取一个选项，在限制选项
选择时最为有用。
FLEX从入门到实践
7.2.1
使用RadioButton控件设计单选框
在Flex中，提供了单选框RadioButton控件，使用此控件可
以设计单选框按钮。
FLEX从入门到实践
7.2.2
使用单选框组
单选框是可以以分组的形式组合在一起的，这样就可以同时
有多个最别的单选框可供选择。
FLEX从入门到实践
7.2.3
一个简单的加减法计算器
计算器是平时最常用的工具，本节将会使用单选框组件，创
建一个简单的加减法计算器。
FLEX从入门到实践
7.3
复选框的设计
除了单选之外，多选也是平时用的最多的。在Flex中同样也
提供了相应的复选框的控件，以提供选择多个内容的表
单方式。
FLEX从入门到实践
7.3.1
使用CheckBox控件设计复选框
创建一个按钮CheckBox控件有两种方式：一种是直接拖放
控件到设计视图中；另一种是编写代码。第一种方式拖
放控件到设计视图中相对直观，不用编写代码。在开发
小型的应用程序的时候，可以提高开发效率。
FLEX从入门到实践
7.3.2
使用ActionScript控制复选框
在实际开发中，通常会遇到使用ActionScript脚本语言来获
取或设置复选框的内容的情况。本节将会讨论如何使用
ActionScript脚本语言获取多个复选框的内容。
FLEX从入门到实践
7.3.3
动态创建复选框
很多情况下，都需要动态的创建复选框。动态创建复选框就
会使用到ActionScript语言，动态的创建，动态的设置
其属性和事件。本节将会讲述如何动态的创建复选框，
并动态的设置属性和事件。
FLEX从入门到实践
7.4
弹出式按钮的设计
弹出式按钮是有两个横向排列的按钮组成的，一个是主体按
钮，另一个是一个小的弹出式按钮。当使用鼠标单击这
个弹出式按钮的时候，就会弹出一个菜单。本节将会详
细讲述弹出式按钮的设计。
FLEX从入门到实践
7.4.1
创建PopUpButton控件
在Flex中，已经提供了设计弹出式按钮的控件。使用
PopUpButton控件，可以很容易的设计出一个弹出式按
钮。
FLEX从入门到实践
7.4.2
获取弹出式按钮菜单的内容
上节讲述了如何创建一个弹出式菜单内容，本节将会讨论如
何获取弹出菜单的数据项内容。
FLEX从入门到实践
7.5
链接按钮的设计
链接按钮是一个以文本链接形式的按钮，使用链接按钮可以
在浏览器中打开一个链接。本节将会详细讲述如何设计
一个链接按钮。
FLEX从入门到实践
7.5.1
创建LinkButton控件
在Flex中提供了设计链
接按钮的控件，使用
LinkButton控件就
很容易设计出一个链
接按钮。
FLEX从入门到实践
7.5.2
设置样式
如果链接按钮的默认样式不能满足需求，还可以自定义按钮
的样式。
FLEX从入门到实践
7.6
本章实例：简易计算器
计算器是日常生活中最常见也是最常用到的计算工具，本章
将会制作一个简易计算器，并详细讲解其设计思路和相
关算法。
FLEX从入门到实践
7.7
小结
本章主要讲解了按钮的设计，其中包括普通按钮、单选框、
复选框、弹出式按钮以及链接按钮。通过本章的学习，
读者应能对按钮的设计和相应的事件有比较深刻的理解
和认识，在实际开发中，对按钮的设计应用自如。下一
章将介绍数据绑定控件的使用。
FLEX从入门到实践
7.8
习题
1. 如何在Button控件中嵌入图片资源？
2. 如何创建一个单选按钮组？
3. 如何创建一个弹出式按钮？
4. 使用链接如何链接到外部信息？
FLEX从入门到实践
第8章
数据绑定
在呈现单个数据的时候，可以使用文本控件。那么在呈现多
条数据的时候，如何表现出来呢？在Flex中就已经提供
了呈现多条数据的各种数据绑定控件，使用这些控件，
就可以设计出各种样式的数据列表。本章包括以下内容
：
 数据列表
 横向数据列表
 交叉数据列表
 下拉列表
 数据网格
 树列表
FLEX从入门到实践
8.1
数据列表
在呈现一个一维数据集合的时候，使用数据列表是最直观方
便的。默认情况下，数据列表是一列多行的形式，即纵
向的呈现数据。本节将会详细介绍如何设计一个数据列
表。
FLEX从入门到实践
8.1.1
使用List控件创建数据列表
在Flex中，已经提供了一个数据列表List控件。将数据列表
List控件与相关的数据集绑定，便可以在数据列表中呈现
需要的数据。
FLEX从入门到实践
8.1.2
使用ActionScript在List控件中绑定
数据
除了在List控件的内部直接填充数据外，还
可以使用ActionScript脚本语言在外部
定义数据。通过使用ActionScript语言
定义的数据集与控件List绑定，也可以呈
现出来，并且比之前在内部定义的方法
更灵活和有效。
FLEX从入门到实践
8.1.3
获取List控件的数据
能够获取到List控件中项的数据，是与用户交互的直接手段
。获取List控件中已选择的数据项通常使用selectedItem
方法。
FLEX从入门到实践
8.1.4
在数据中嵌入图片
除了在数据列表List控件中填充数据
外，还可以在数据中嵌入图片资
源。嵌入资源后的数据列表List控
件，表现会更加丰富。
FLEX从入门到实践
8.2
横向数据列表
多条数据除了以纵向的方式呈现外，还可以用横向的方式呈
现。本节将会讲解如何在Flex中设计一个横向的数据列
表。
FLEX从入门到实践
8.2.1
使用HorizontalList控件
在Flex中，提供了一个横向列表的控件HorizontalList，使
用HorizontalList可以设计一个横向列表的多条数据呈现
。
FLEX从入门到实践
8.2.2
自定义ItemRenderer属性
在上一节中，通过ItemRenderer属性定义了子数据项的类
型Image。除了可以定义一个系统集成的数据类型外，还
可以自定义一个ItemRenderer属性的值。
FLEX从入门到实践
8.3
二维数据列表
除了纵向或横向的呈现数据外，还可以自定义的以二维的形
式呈现数据。这种方式更加灵活，开发者可以根据实际
情况，设置行数和列数。本节将会详细讲述如何设计一
个二维数据列表。
FLEX从入门到实践
8.3.1
使用TileList控件
在Flex中，已经提供了可
以设计二维数据列表
的控件TileList。通过
设置此控件的相关属
性，就可以定制列数
和行数。
FLEX从入门到实践
8.3.2
获取TileList控件中的数据
获取TileList控件中的数据
是与用户交互的最主要
的应用。要获取TileList
控件中的某条数据项，
需要通过设置其单击事
件。本节将讲解如何获
取TileList控件中的某条
数据项内容。
FLEX从入门到实践
8.4
下拉列表
相比较与数据列表，下拉列表则有节省空间等优点。本节将
详细讲述如何设计一个下拉列表。
FLEX从入门到实践
8.4.1
使用ComBox控件
在Flex中，提供了下拉列表ComBox控件。下拉列表
ComBox控件的数据源可以有两种方式，一种是Object
类型，另一种是String。其中Object类型可以同时存储
相关数据的属性，如编号等。
FLEX从入门到实践
8.4.2
获取下拉列表中的数据
通过单击事件，就可以获取
下拉列表中选择的数据项
。
FLEX从入门到实践
8.5
数据网格
数据网格是最常用的数据呈现方式之一，对某些较为复杂的
数据只能用数据网格的方式表现。本节将详细讲述数据
网格的设计。
FLEX从入门到实践
8.5.1
使用DataGrid控件
在Flex中已经提供了数据网格DataGrid控件，使用这个控
件可以实现二维数据列表的呈现。本节将会讲述如何使
用数据网格DataGrid控件，并填充数据集。
FLEX从入门到实践
8.5.2
定义DataGrid控件的列
默认情况下，DataGrid控件列的标题为字段名称。通过设
置DataGridColumn属性可以自定义列的标题。
FLEX从入门到实践
8.5.3
获取DataGrid控件的数据
想要获取DataGrid控件中指定
单元格的数据，需要通过单
击事件，使用selectedItem
属性得到。
FLEX从入门到实践
8.5.4
DataGrid控件的排序
在查看网格数据的时候，用户常
常需要按照一定的循序查找数
据，以最快捷的方式找到需要
的数据。排序功能可以做到上
述要求，使用户按照自己的方
式查找数据。本节将会讲述如
何设计一个带有排序功能的网
格数据控件。
FLEX从入门到实践
8.6
树形式的呈现方式
树是以节点为基础向下延伸的呈现数据的方式。通常树被用
作数据导航，但同时，树也需要外部或内部的数据加以
绑定。本节将会讲解如何设计树的数据呈现方式。
FLEX从入门到实践
8.6.1
使用Tree控件
在Flex中提供了树Tree控
件，使用该控件，可以
使数据以树的形式表现
出来。通常绑定在Tree
控件的数据是XML格式
的对象。
FLEX从入门到实践
8.6.2
获取Tree控件的数据项
获取Tree控件的数据项的方
法是通过change事件，
selectedItem属性中记录
了选取数据项的内容。
FLEX从入门到实践
8.7
本章实例：商品列表
【实例8-1】本例制
作一个在线商店
中一个比较重要
的功能——商品
列表，这个列表
使用了TileList控
件。
FLEX从入门到实践
8.8
小结
本章主要讲解了数据绑定控件，包括数据列表、下拉列表、
数据网格、树等控件。通过这些控件可以很好的把数据
结果呈现出来。本章的重点是创建数据源并与数据控件
绑定。下一章将会讲解有关图标的设计。
FLEX从入门到实践
8.9
习题
1．如何把数据绑定到数据列表控件中，并显示出来？
2．读取XML数据，并在DataGrid中显示出来？
3．如何在下拉列表中填充数据？
4．如何将数据在树控件中显示出来，并获取选中的数据项
？
FLEX从入门到实践
第9章
图表设计
对于普通用户来说，在图表中展示数据看起来更直观有效。
相比较使用简单的二维表格来说，图表中的数据可以是
各种形状和颜色。本章将会详细讲述如何设计数据图表
。本章包括以下内容：
 图表组件概述
 图表类型
 格式化图表
 使用事件和效果
FLEX从入门到实践
9.1
图表组件概述
图表主要就是由一个或几个数据序列构成。在Flex中提供了
丰富的图表组件，通过这些组件可以创建各种二维的数
据序列图表。
FLEX从入门到实践
9.1.1
关于数据图表
数据图表的形式可以使得数据和数据
关系很容易以图形的方式呈现出来
。图表是一个使用二维关系数据的
呈现类型。在Flex中，提供了很多
常用的二维数据关系图表形式的组
件，如条型、圆柱型、圆饼等，使
用这些组件可以方便的创建一个二
维图表。
一个简单的图表就是一个数据序列，
序列就是一组关联的数据点。如一
个数据序列可以是某个公司的月销
售情况或者是一段时间某个股票的
价格情况等，这些都可以看作一个
一个数据序列。图9.1就是一个图
表，该图表是一个某公司前三个月
利润和费用的数据序列。
FLEX从入门到实践
9.1.2
使用图表控件
Flex中提供的图表控件可以创建大部分日常需要的图表类型，也可
以根据需要自定义图表。图表控件位于包import mx.charts.*内，
这些图表类型的具体应用会在9.2节中详细介绍。
一个图表类型对应一个图表控件类和一个图表序列类。其对应关系
见表9.1所示。
图表类型
图表控件类
图表序列类
Area
AreaChart
AreaSeries
Bar
BarChart
BarSeries
Bubble
BubbleChart
BubbleSeries
Candlestick
CandlestickChart
CandlestickSeries
Column
ColumnChart
ColumnSeries
HLOCChart
HLOCSeries
Line
LineChart
LineSeries
Pie
PieChart
PieSeries
Plot
PlotChart
PlotSeries
HighLowOpenClose
FLEX从入门到实践
9.1.3
定义数据源
在图表设计中，数据的表现主要依靠数据源，所以定义数据
源是最重要的工作。在Flex提供的图表组件中，都定义
了一个有关数据源的属性dataProvider。通过设置
dataProvider属性，可以把图表组件的数据与数据源关
联。
本节按照数据源的种类，讲解如何定义一个数据源，并在图
表中表现出来。按照数据源提供的方式，可以分为两种
：内部数据源和外部数据源。
1．内部数据源
2．外部数据源
FLEX从入门到实践
9.2
图表类型
为了方便的创建各种类型的图表，在Flex中提供了很多不同
类型图表控件。本章将会详细介绍如何使用这些控件来
创建不同类型的图表。
FLEX从入门到实践
9.2.1
区域型图表
通过一个连接数据值的线，在线的
下面绘成一个有颜色的数据区域
，这种图表就是区域型图表。可
以通过图标或者符号来表现在线
上的每个数据点。通过在Flex中
提供的区域型图表AreaChart控
件，可以很放方便的创建一个带
有数据的区域型图表。
FLEX从入门到实践
9.2.2
条型图表
通过条型图表可以表现一个横向
或纵向序列的数据。在Flex中
同样也提供了这样的组件
BarChart，使用BarChart可
以创建一个条型图表。
FLEX从入门到实践
9.2.3
泡沫型图表
通过条型图表可以表现一个横向
或纵向序列的数据。在Flex
中同样也提供了这样的组件
BubbleChart，使用
BubbleChart可以创建一个
条型图表。
FLEX从入门到实践
9.2.4
烛台型图表
通过条型图表可以表现一
个横向或纵向序列的
数据。在Flex中同样
也提供了这样的组件
CandlestickChart，
使用
CandlestickChart可
以创建一个条型图表
。
FLEX从入门到实践
9.2.5
线型图表
通过条型图表可以表现一个横向
或纵向序列的数据。在Flex中
同样也提供了这样的组件
LineChart，使用LineChart可
以创建一个条型图表。
FLEX从入门到实践
9.2.6
圆饼型图表
通过条型图表可以表现一个横向或纵
向序列的数据。在Flex中同样也提
供了这样的组件PieChart，使用
PieChart可以创建一个条型图表。
FLEX从入门到实践
9.2.7
混合型图表
通过条型图表可以表现一个
横向或纵向序列的数据。
在Flex中同样也提供了这
样的组件ColumnChart，
使用ColumnChart可以创
建一个条型图表。
FLEX从入门到实践
9.3
格式化图表
在创建图表中，可以格式化图表中的元素，如标签字体、图
例等。通过使用CSS样式设置样式属性，还可以改变图
表的外观。本章将会详细讲解如何格式化图表的样式。
FLEX从入门到实践
9.3.1
创建样式
通过CSS样式可以改变图表的
外观。
FLEX从入门到实践
9.3.2
设置间隔大小
除了设置标签的字体外，还可以
设置图表序列的样式，如间
隔、颜色等。
FLEX从入门到实践
9.4
本章实例：股票分析系统
【实例9-1】本例
制作一个简单的
股票分析系统。
该系统通过网络
上提供的Web
服务获取数据源
，并在图表控件
中呈现出来。
FLEX从入门到实践
9.5
小结
本章主要讲解了图表系列组件的应用，其中包括了大部分常
用的图表类型。重点讲解了如何使用数据源与图表绑定
，设置图表中的显示样式等。下一章将要讲解其他一些
常用的交互式控件。
FLEX从入门到实践
9.6
习题
1．创建一个区域型图表，绑定数据源并显示出来？
2．如何创建一个混合型图表？
3．如何改变图表的样式？
4．怎么样可以格式化图表？
FLEX从入门到实践
第10章
其他交互设计
在交互设计控件中，除了文本控件、按钮控件和图表控件等
之外，还有其他一些比较实用的交互式控件，如数字选
择器、颜色选择器、警告框、进度条等等。本章将详细
讲解如何应用其他这些常用的控件，进行交互式设计。
本章包括以下内容：
 数字选择器
 日期显示
 加载外部swf文件
 加载图像
 颜色选择器
 警告框的设计
 进度条的设计
 滚动条的设计
FLEX从入门到实践
10.1
数字选择器
数字选择器NumericStepper控件的主要是用来选择数字的
，是由一个文本域和两个上下箭头的按钮组成。除了使
用两个上下箭头的按钮选择数字之外，还可以通过键盘
的上下方向键选择。在很多方面的应用都会使用到数字
选择器NumericStepper控件，如日期的年月日、时间的
时分秒等。数字选择器NumericStepper控件如图10.1所
示。
FLEX从入门到实践
10.1.1
创建NumericStepper控件
创建一个数字选择器NumericStepper控件有两种方式：一
种是直接拖放控件到设计视图中；另一种是编写代码。
第一种方式拖放控件到设计视图中相对直观，不用编写
代码。在开发小型的应用程序的时候，可以提高开发效
率。
FLEX从入门到实践
10.1.2
设置NumericStepper控件
数字选择器NumericStepper控件有两个很重要的属性：
Minimum和Maximum。Mnimum表示选择数字的最小
值。Maximum表示选择数字的最大值。
FLEX从入门到实践
10.1.3
构建一个复合型的日期控件
在很多的应用程序中，都会涉及到日期的添加，如出生年月
、入职时间、离职时间等等。本节将会应用
NumericStepper构建一个复合型的日期控件。在日期控
件的组成中，除了NumericStepper控件之外，还有
Label控件。Label控件用来显示文字说明，如年、月、
日等。
FLEX从入门到实践
10.2
日期显示
日期可以通过两种控件来显示，一个是DateChooser控件
，另一个是DateField控件。DateChooser控件是以日历
的形式显示的，而DateField控件则是以文本的形式显示
的。
FLEX从入门到实践
10.2.1
使用DateChooser控件实现日期选择
DateChooser控件是一个日历形式的
控件，在头部显示了年份和月份的
名称，主体部分则是以网格的显示
排列了当前年份和月份的所有的天
。用户可以从中选择任意的一天。
FLEX从入门到实践
10.2.2
使用DateField控件实现日期选择
DateField控件是一个以文本形
式显示的日期控件。在文本
框的右侧是一个日历的小图
标，当用户单击图表的时候
，会弹出一个包含
DateChooser控件的窗口。
用户选择了一个日期之后，
选择的日期会填充到文本框
中，同时，此窗口会自动关
闭。DateField控件的主要应
用在表单等的操作上。
FLEX从入门到实践
10.2.3
使用日期类
日期类中包含了一些常用的关
于日期的方法，使用这些
方法，可以很方便的获取
日期信息。
FLEX从入门到实践
10.2.4
设置DateField控件的日期格式
在实际开发过程中，
经常会需要自定义
某些特殊的日期格
式，以满足需要。
使用formatString
属性就可以设定
DateField控件的
日期格式。
formatString属性
的值可以设定为诸
如MM、DD、YY
和YYYY等字符的
组合。
FLEX从入门到实践
10.2.5
设置DateChooser控件的中文显示
默认情况下，
DateChooser控
件是显示英文的
月份和周的。
FLEX从入门到实践
10.3
加载外部SWF文件
如果在一个Flex应用程序中，把另一个Flex应用程序作为
SWF文件加载进来，就需要使用SWFLoader控件。
FLEX从入门到实践
10.3.1
创建SWFLoader控件
SWFLoader控件的主要用途就是加载外部的SWF文件，这
个文件可以Flash CS3编译生成的，也可以是Flex
Builder 3编译生成的。
默认情况下SWF文件的内容可以自适应SWFLoader控件的
大小。SWFLoader控件除了加载SWF文件格式外，也可
以加载其他的文件格式到Flex应用程序中，如GIF、
JPEG、PNG、SVG等。
定义一个SWFLoader控件可以在代码中使用
<mx:SWFLoader>标记，也可以直接从工具面板中拖放
控件到主窗口中。
FLEX从入门到实践
10.3.2
与已加载的SWF文件交互
把SWF文件加载到Flex程序中后，首要的问题就是怎么样
能与这个SWF文件交互，即访问这个SWF文件的相关内
容。首先看一下怎么样使用SWFLoader控件，在一个
Flex程序中加载另一个Flex程序。
1．访问已加载的SWF文件中的控件
2．访问已加载的SWF文件中的变量
3．访问已加载的SWF文件的方法
FLEX从入门到实践
10.4
加载图像
在Flex应用程序中，也可以实现加载图像的功能。Flex支持
绝大部分主流的图片格式，包括GIF、JPEG、PNG、
SVG等等。
FLEX从入门到实践
10.4.1
创建Image控件
在Flex中，加载图像的常用方法之一就是使用Image控件。
FLEX从入门到实践
10.4.2
加载图像
除了设置Image控件的Source属性直接加载图像外，还可
以使用代码来控制图像的加载。加载图像主要使用Image
控件的load()方法。
FLEX从入门到实践
10.5
颜色选择器
颜色选择器允许用户从一个下拉式的颜色面板中，选择适合
的颜色值。颜色选择器主要应用于文本编辑器，更换控
件样式颜色等。
FLEX从入门到实践
10.5.1
创建ColorPicker控件
在Flex中，已经提供了ColorPicker控件来创建颜色选择器
。
FLEX从入门到实践
10.5.2
自定义面板显示的颜色
默认情况下，颜色面板会列出系统所有的颜色。当然，通过
代码还可以自定义面板中列出的颜色。自定义颜色通过
ColorPicker控件的dataProvider属性，与数组绑定，然
后可以在数组中定义要列出的颜色的值。
FLEX从入门到实践
10.5.3
自定义面板显示的标签
除了可以自定义颜色的值外，还可以定义颜色标签的描述。
其方法与10.5.2节类似，也是通过绑定数组。不同的是，
需要定义一个数组集合，其中定义了颜色标签、颜色值
和描述。
FLEX从入门到实践
10.6
警告框的设计
警告框是在实际开发中使用最多的功能。在Flex中，提供了
一个Alert类来实现警告框，其中定义了一个全局的静态
方法show()。
FLEX从入门到实践
10.6.1
创建警告框
所有的Flex组件都可以调用Alert类中的静态方法show()，
弹出一个带有消息的模式警告框。
FLEX从入门到实践
10.6.2
警告框的事件
默认情况下，弹出的警告框只有OK按钮。使用Alert类还可
以设置其他的按钮和显示数量，并且还可以侦听到警告
框中按钮的事件。
FLEX从入门到实践
10.6.3
自定义警告框的按钮标签
默认情况下，警告框的按钮标签是英文的。通过Alert类，
可以设置其按钮标签，使其成为中文。
FLEX从入门到实践
10.6.4
设置提示框的文本大小
从10.6.3节中的示例可以看
出，在警告框设置成中文
后，文字较小而且模糊不
清。要解决这个问题，就
需要通过样式来设置按钮
标签文本的大小。使用
Alert类，还可以设置警
告框的宽度和高度。
FLEX从入门到实践
10.6.5
设置提示框的图标
默认情况下，警告框是没有任何图标的。但是，可以通过
Alert类的参数，自定义一个警告框的图标。
FLEX从入门到实践
10.7
进度条的设计
进度条可以用来显示某个任务执行的进度，如文件下载、播
放位置等。进度条可以使程序操作界面更加人性化、更
加直观。本章将详细讲述Flex中进度条的设计。
FLEX从入门到实践
10.7.1
创建ProgressBar控件
创建一个
ProgressBar控件
是相当容易的，只
需要把控件拖放到
设计窗口，并设置
其属性Source即
可。
FLEX从入门到实践
10.7.2
设置进度条的标签
默认情况下，进度条的标签显示的是英文描述。通过其属性
Label的值，可以设置为中文显示。在标签属性中，有一
些特殊字符代表了特殊的含义。这些特殊字符表示的含
义如下所示。
 %1：已经加载的字节数。
 %2：字节总数。
 %3：加载的百分比。
 %%：百分比符号（%）。
FLEX从入门到实践
10.8
本章实例：日程管理
日程管理是大部分的办公系统中都有的功能。它是根据日期
来添加当天的日程或任务。
FLEX从入门到实践
10.9
小结
本章主要讲解了除了按钮、文本等设计之外的其他交互设计
。其中，涵盖了比较常用的设计，如日期显示、加载图
像、颜色选择器、警告框和进度条等。在深入了解了这
些功能之后，读者在实际开发中，可以设计出更加人性
化的表现层界面。下一章将讲解Flex界面的布局。
FLEX从入门到实践
10.10
习题
1．怎么样设置数据选择器输入的最大值和最小值？
2．在一个Flex程序中，怎么样加载另一个Flex程序，并访
问其成员变量？
3．怎么样自定义一个颜色选择器的颜色和标签？
4．如何捕获警告框的按钮单击事件？
FLEX从入门到实践
第11章
定位和布局
布局是把界面中的元素（如按钮、下拉列表等控件）按照一
定的等级结构排列起来。布局的作用在于优化界面、设
计更好的更加人性的操作环境。本章包括以下内容：
 Canvas容器
 Box容器
 DividedBox容器
 表单布局
 网格定位
 Tile布局
 面板
 弹出窗口
FLEX从入门到实践
11.1
Canvas容器
Canvas布局容器可以看作是具有和顶部容器Application相
同功能的子容器，其中可以嵌入各种Flex组件。Canvas
布局容器定义了一个矩形的区域，在区域中可以放置子
容器和控件。
FLEX从入门到实践
11.1.1
使用Canvas容器布局
在MXML代码块中，可以使用标记<mx:Canvas>来创建
Canvas容器。在Canvas容器中，使用id属性可以标识
控件的唯一性，使用x和y坐标值可以很好的定位。
FLEX从入门到实践
11.2
使用Box布局容器
Box布局容器提供了一种横向或纵向的布局方式。默认情况
下，Box布局是纵向的。通过设置属性direction的值可
以改变布局的方式。
HBox和VBox布局容器是Box布局容器的一种简化形式，提
供了快速的横向和纵向的布局
FLEX从入门到实践
11.2.1
使用Box容器
使用标识符<mx:Box>可以创建一个Box布局容器。通过属
性direction可以设置布局方式是横向的（horizontal）
还是纵向的（vertical）。
FLEX从入门到实践
11.2.2
使用HBox和VBox容器实现横向或纵向
的布局
HBox和VBox布局容器就相当于Box布局容器设置属性
direction之后的效果。HBox布局是横向排列子组件，而
VBox是纵向的。
FLEX从入门到实践
11.3
使用DividedBox容器布局
DividedBox布局容器也提供了横向或纵向排列的形式。
与Box布局容器不同的是，在每一个子容器之间都放置
了一个可调节的间隔条。通过鼠标单击这个间隔条，
可以调节每个子容器的区域大小。
FLEX从入门到实践
11.3.1
创建DividedBox容器
使用标识符
<mx:DividedBox
>可以创建一个
DividedBox布局
容器。通过属性
direction可以设置
布局的排列方式。
默认情况下，
DividedBox布局
容器中的子控件是
纵向排列的。
FLEX从入门到实践
11.3.2
使用HDividedBox和VDividedBox容器
实现可调控的布局
HDividedBox和VDividedBox布局容器提供了与
DividedBox类似的布局方式。实质上，这两个布局容器
是DividedBox布局容器的特殊形式，与设置了属性
direction的值起到同样的效果。
FLEX从入门到实践
11.4
表单布局
在Web应用程序中，表单是搜集用户信息的常用方式。表单
常常被用来搜集注册、购买或其他数据信息等。
FLEX从入门到实践
11.4.1
创建表单
在Flex中，支持使用Form容器来创建一个表单。通过使用
FormHeading还可以设置表单的头部信息。
FLEX从入门到实践
11.4.2
设置间隔
表单内容之间的间隔可以通过verticalGap和indicatorGap
来调节。
FLEX从入门到实践
11.4.3
表单验证
在表单提交之前，往往需要验证表单内容的正确性。
FLEX从入门到实践
11.5
网格定位
在Flex中提供了网格布局的支持，使得可以像HTML中表格
那样布局。网格组件的使用非常类似于HTML中的Table
。
FLEX从入门到实践
11.5.1
使用网格定位
可以使用标记符<mx:Grid>创建网格布局容器，这个就相当
于HTML表格中的<Table>标签。<mx:GridRow>表示网
格中的一行，相当于<tr>标签。<mx:GridItem>表示单元
格，相当于<td>标签。
FLEX从入门到实践
11.5.2
网格容器之间的嵌套
在复杂的页面布局中，常常会使用到几个网格Grid布局容器
之间的嵌套。Grid网格的嵌套就像是HTML中Table的嵌
套一样。
FLEX从入门到实践
11.6
Tile布局
Tile布局可以任意排列子控件，与其他容器不同的是，Tile
布局容器是根据宽度来自动调整行和列数量的。
FLEX从入门到实践
11.6.1
使用Tile布局
使用<mx:Tile>标签可以定义一个Tile布局容器。
FLEX从入门到实践
11.6.2
设置Tile布局
通过设置tileWidth、paddingTop、verticalGap等属性，
可以调整容器中子控件之间的间隔、大小宽度等。
FLEX从入门到实践
11.7
使用面板
一个完整的面板容器包含了标题栏、标题、状态栏和主体内
容。面板通常是以功能块为单位分隔。
FLEX从入门到实践
11.7.1
创建Panel容器
可以使用<mx:Panel>标签来定义一个面板容器。在面板中
可以放置其他类型的组件、容器等。
FLEX从入门到实践
11.7.2
添加ControlBar控件
使用ControlBar控件可以设置面板的状态栏区域。
ControlBar控件通常被创建在面板Panel容器内。
FLEX从入门到实践
11.8
弹出窗口
TitleWindow布局容器实际上是一个弹出窗口的面板容器。
与面板Panel布局容器不同的是，TitleWindow有一个关
闭按钮，用户还可以拖动这个窗口。这个弹出可以是模
态的，也可以是非模态的。
FLEX从入门到实践
11.8.1
创建TitleWindow容器
要创建一个弹出窗体，需要用到PopUpManager类。在此
类中createPopUp()方法可以创建一个弹出窗体。其语法
格式为：
public static createPopUp(parent:DisplayObject,
class:Class, modal:Boolean =
false):IFlexDisplayObject
参数说明：
 parent：父对象。
 class：弹出窗体的类。
 modal：是否为模态窗体。
FLEX从入门到实践
11.8.2
向弹出的窗口传递数据
通过PopUpManager类创建弹出窗体的对象，可以获取弹
出窗体的数值。
FLEX从入门到实践
11.9
本章实例：通讯录
通讯录是日常应用中必备工具之一，使用通讯录可以轻松查
找和添加联系人的信息。
【实例11-1】本例制作一个简单的通讯录功能，添加的数据
项暂时保存在客户端的数组集合中。删除某一个数据项
时，给出提示信息。
FLEX从入门到实践
11.10
小结
本章主要讲解了Flex中定位和布局。每种布局容器应用的场
合有所不同，表单容器应用于表单信息添加。网格布局
容器是最灵活的，类似于HTML中的表格。面板容器可以
使得每个功能模块分开。
FLEX从入门到实践
11.11
习题
1．如何使用表单控件创建一个表单？
2．如何创建一个面板，并向其中添加子组件？
3．如何定义一个弹出窗体？
4．是否可以嵌套多个定位布局组件，如何实现？
FLEX从入门到实践
FLEX从入门到实践