FLEX 从入门到实践


FLEX从入门到实践 第1章 Flex概述 Adobe公司的Flex产品是用于构建和维护在所有主要浏览器 、桌面和操作系统一致地部署的。同时它也是极具表现 力的、Web应用程序的、高效率的开放源码框架。作为 RIA应用程序的主要开发框架,Flex 3中已经包含了一套 强大的开发工具。本章包括以下内容: z Flex与Flash的关系 z Flex使用的语言 z 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开源项目构建 的,继承了很多优秀的功能。本章包括以下内容: z Flex SDK的安装 z 开发工具Flex Builder 3 z 调试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技术。本章包括以下内容: z MXML的构成 z 解析MXML的标签 z 命名空间 FLEX从入门到实践 3.1 MXML的构成 MXML是Flex架构中最核心的语言之一。因为MXML是在 XML基础上设计的,所以,它具有易读、易编写等优点 。 FLEX从入门到实践 3.1.1 结构原理 XML是一种可扩展的标记语言,其内容是一段结构性的文本 。在XML中,所有的标记都使用一对尖括号(“<”和“>” )。如下面是一段典型的XML代码。 与HTML类似,MXML同样也是把某些特殊的单词指定了含 义。 FLEX从入门到实践 3.1.2 书写规则 MXML是XML的一种扩展行语言,所以MXML继承了XML的 书写规则。MXML的书写规则如下。 所有元素要有开始和结束标记。如果一个标记被打开,那么 在对应的地方应该被关闭。计算机的逻辑是很严谨的, 如果某个标记只有开始没有结束,系统就会发生错误。 区分大小写。XML是区分大小写的,所以MXML同样也是。 在XML中是不同的两个元素标记。 当然在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 技术的基础。本章包括以下内容: z 变量和常量 z 数据类型 z 运算符 z 语句 z 函数 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中提供了一系列的文本控件,其功能是用来显示文本文 字以及让用户输入文本等等。本章将详细讲解如何应用 这些文本控件,进行交互式文本设计。本章包括以下内 容: z 简单文本设计 z 文本框的设计 z 文本域的设计 z 文本编辑器的设计 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中的按钮控件分为 几种,在本章中将会一一介绍这些按钮控件的使用。本 章包括以下内容: z 普通按钮的设计 z 按钮条的设计 z 单选框的设计 z 复选框的设计 z 弹出式按钮的设计 z 文本链接按钮的设计 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中就已经提供 了呈现多条数据的各种数据绑定控件,使用这些控件, 就可以设计出各种样式的数据列表。本章包括以下内容 : z 数据列表 z 横向数据列表 z 交叉数据列表 z 下拉列表 z 数据网格 z 树列表 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章 图表设计 对于普通用户来说,在图表中展示数据看起来更直观有效。 相比较使用简单的二维表格来说,图表中的数据可以是 各种形状和颜色。本章将会详细讲述如何设计数据图表 。本章包括以下内容: z 图表组件概述 z 图表类型 z 格式化图表 z 使用事件和效果 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 HighLowOpenClose HLOCChart HLOCSeries Line LineChart LineSeries Pie PieChart PieSeries Plot PlotChart PlotSeries 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章 其他交互设计 在交互设计控件中,除了文本控件、按钮控件和图表控件等 之外,还有其他一些比较实用的交互式控件,如数字选 择器、颜色选择器、警告框、进度条等等。本章将详细 讲解如何应用其他这些常用的控件,进行交互式设计。 本章包括以下内容: z 数字选择器 z 日期显示 z 加载外部swf文件 z 加载图像 z 颜色选择器 z 警告框的设计 z 进度条的设计 z 滚动条的设计 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控件可以在代码中使用 标记,也可以直接从工具面板中拖放 控件到主窗口中。 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的值,可以设置为中文显示。在标签属性中,有一 些特殊字符代表了特殊的含义。这些特殊字符表示的含 义如下所示。 z %1:已经加载的字节数。 z %2:字节总数。 z %3:加载的百分比。 z %%:百分比符号(%)。 FLEX从入门到实践 10.8 本章实例:日程管理 日程管理是大部分的办公系统中都有的功能。它是根据日期 来添加当天的日程或任务。 FLEX从入门到实践 10.9 小结 本章主要讲解了除了按钮、文本等设计之外的其他交互设计 。其中,涵盖了比较常用的设计,如日期显示、加载图 像、颜色选择器、警告框和进度条等。在深入了解了这 些功能之后,读者在实际开发中,可以设计出更加人性 化的表现层界面。下一章将讲解Flex界面的布局。 FLEX从入门到实践 10.10 习题 1.怎么样设置数据选择器输入的最大值和最小值? 2.在一个Flex程序中,怎么样加载另一个Flex程序,并访 问其成员变量? 3.怎么样自定义一个颜色选择器的颜色和标签? 4.如何捕获警告框的按钮单击事件? FLEX从入门到实践 第11章 定位和布局 布局是把界面中的元素(如按钮、下拉列表等控件)按照一 定的等级结构排列起来。布局的作用在于优化界面、设 计更好的更加人性的操作环境。本章包括以下内容: z Canvas容器 z Box容器 z DividedBox容器 z 表单布局 z 网格定位 z Tile布局 z 面板 z 弹出窗口 FLEX从入门到实践 11.1 Canvas容器 Canvas布局容器可以看作是具有和顶部容器Application相 同功能的子容器,其中可以嵌入各种Flex组件。Canvas 布局容器定义了一个矩形的区域,在区域中可以放置子 容器和控件。 FLEX从入门到实践 11.1.1 使用Canvas容器布局 在MXML代码块中,可以使用标记来创建 Canvas容器。在Canvas容器中,使用id属性可以标识 控件的唯一性,使用x和y坐标值可以很好的定位。 FLEX从入门到实践 11.2 使用Box布局容器 Box布局容器提供了一种横向或纵向的布局方式。默认情况 下,Box布局是纵向的。通过设置属性direction的值可 以改变布局的方式。 HBox和VBox布局容器是Box布局容器的一种简化形式,提 供了快速的横向和纵向的布局 FLEX从入门到实践 11.2.1 使用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容器 使用标识符 可以创建一个 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 使用网格定位 可以使用标记符创建网格布局容器,这个就相当 于HTML表格中的标签。表示网 格中的一行,相当于标签。表示单元 格,相当于
标签。 FLEX从入门到实践 11.5.2 网格容器之间的嵌套 在复杂的页面布局中,常常会使用到几个网格Grid布局容器 之间的嵌套。Grid网格的嵌套就像是HTML中Table的嵌 套一样。 FLEX从入门到实践 11.6 Tile布局 Tile布局可以任意排列子控件,与其他容器不同的是,Tile 布局容器是根据宽度来自动调整行和列数量的。 FLEX从入门到实践 11.6.1 使用Tile布局 使用标签可以定义一个Tile布局容器。 FLEX从入门到实践 11.6.2 设置Tile布局 通过设置tileWidth、paddingTop、verticalGap等属性, 可以调整容器中子控件之间的间隔、大小宽度等。 FLEX从入门到实践 11.7 使用面板 一个完整的面板容器包含了标题栏、标题、状态栏和主体内 容。面板通常是以功能块为单位分隔。 FLEX从入门到实践 11.7.1 创建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 参数说明: z parent:父对象。 z class:弹出窗体的类。 z 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从入门到实践 第12章 导航 导航的作用是在不同的子组件之间相互切换的时候,能够保 证顺利的操作运行和导向。在软件界面设计中,导航起 到了主导作用。更好的导航设计可以使用户体验更加人 性化。本章包括以下内容: z ViewStack导航 z Tab导航 z Accordion FLEX从入门到实践 12.1 ViewStack导航设计 ViewStack是一种可以灵活定义的导航,其各个子组件可以 是任意形式的。同时,ViewStack导航没有为用户提供 可以切换当前活动容器的导航组件,需要自行定义。 FLEX从入门到实践 12.1.1 创建ViewStack容器 在Flex中,已经预置了 ViewStack导航容器 。通过标签 可 以创建一个 ViewStack导航容器 。切换当前活动容器 的导航组件可以通过 使用诸如LinkBar、 TabBar、ButtonBar 、或者 ToggleButtonBar组 件完成。 FLEX从入门到实践 12.2.2 实现不同子容器之间的传值 在ViewStack导航中,最常用的功能就是当切换每个子容器 的时候,能够互相的传送参数。传送参数的一般的做法 是可以创建一个全局的静态类或者静态变量,把参数值 暂时存放起来。 FLEX从入门到实践 12.2 标签导航设计 标签导航又称选项卡导航,这种导航是通过管理若干个标签 页,来切换子容器的。标签导航容器是ViewStack导航 容器的子类,集成了ViewStack的诸多功能。 FLEX从入门到实践 12.2.1 使用TabNavigator导航容器 在Flex中,提供了TabNavigator标签导航容器。使用标签 可以创建一个TabNavigator导航容 器。 FLEX从入门到实践 12.2.2 动态添加TAB标签 在TabNavigator 导航容器的应 用中,动态添 加TAB标签是 最常用的了。 动态添加TAB 标签是根据用 户的操作,添 加指定数量的 TAB标签的数 量。 FLEX从入门到实践 12.3 折叠导航设计 表单是很多应用中最基本的组件 之一。当遇到多个关联表单, 使用者可能会遇到操作上的困 难。当表单很多,并且不能集 成在同一个页面时,用户需要 在多个表单之间前后移动切换 。折叠导航设计可以有效的解 决这个问题。在Flex中,使用 标签可以创 建一个Accordion导航容器。 FLEX从入门到实践 12.4 本章实例:名片管理系统 名片管理是日常应用中必备工具之一,可以轻松查找和添加 联系人的信息。 【实例12-1】本例制作一个简单的名片管理功能,添加的数 据项暂时保存在客户端的数组集合中。删除某一个数据 项时,给出提示信息。 FLEX从入门到实践 12.5 小结 本章主要讲解了导航组件的应用设计,其中包括了 ViewStack、TabNavigator以及Accordion。其中重点 讲解了在不同视图之间的切换。下一章将会讲解菜单的 设计。 FLEX从入门到实践 12.6 习题 1.如何使用ViewStack组件设计导航? 2.如何使用TabNavigator组件设计导航? 3.如何使用Accordion组件设计导航? FLEX从入门到实践 第13章 菜单设计 上一章介绍了导航的设计,在实际开发中,导航往往要结合 菜单的操作。菜单主要的作用就是功能模块的导航,通 过菜单,用户可以快速的切换到需要的功能。Flex中的 菜单大体有三种:上下文菜单、菜单条以及弹出式菜单 。本章将详细讲述Flex中菜单的设计。本章包括以下内 容: z 上下文菜单的设计 z 菜单条的设计 z 弹出式菜单的设计 FLEX从入门到实践 13.1 上下文菜单的设计 上下文菜单是菜单的基础形式,如常用的右键菜单。上下文 菜单定义比较灵活,可以在任意位置、任意组件上弹出 菜单。 FLEX从入门到实践 13.1.1 使用Menu控件创建菜单 在Flex中,上下文菜单的设计需要依靠Menu类来实现。在 Menu类的createMenu方法中,已经定义了创建菜单所 需要的基本要素,并以参数的形式设置。createMenu方 法的语法格式如下所示。 public static function createMenu(parent:DisplayObjectContainer, mdp:Object, showRoot:Boolean = true):Menu 参数说明: z parent:放置菜单控件的父容器。 z mdp:菜单控件显示的数据源。 z showRoot:在菜单上是否显示数据源的根节点。 FLEX从入门到实践 13.1.2 菜单事件 在菜单控件中,定义了几个常用的事件,包括单击菜单项、 更改当前选择菜单、菜单显示和隐藏等。这些事件类型 包含在MenuEvent类中,MenuEvent类的事件如表13.1 所示。 FLEX从入门到实践 13.2 菜单条的设计 菜单条是一个显示顶级菜单项的横向条目。单击每个顶级菜 单都会弹出一个子菜单。菜单条是继承了Menu类,所以 ,具有和Menu控件同样的事件。 FLEX从入门到实践 13.2.1 使用MenuBar控件创建菜单 菜单条的设计要依赖于MenuBar控件,这个是在Flex中已 经提供了。 FLEX从入门到实践 13.2.2 菜单事件 由于MenuBar控件是继承自Menu类的,所以具有Menu类 的所有事件特性。 FLEX从入门到实践 13.3 弹出式按钮菜单的设计 弹出式按钮菜单是一个以按钮的形式弹出的菜单。当用户单 击按钮时,会弹出一个顶级的菜单项。与菜单和菜单条 不同,弹出式按钮菜单只支持顶级菜单。 FLEX从入门到实践 13.3.1 使用PopUpMenuButton控件创建菜单 要设计一个弹出式按钮菜单,需要使用Flex中提供的 PopUpMenuButton控件。 FLEX从入门到实践 13.3.2 菜单事件 PopUpMenuButton是PopUpButton控件的子类,所以, PopUpMenuButton控件支持PopUpButton控件的所有 事件。 FLEX从入门到实践 13.4 本章实例:多窗口文档编辑器 多窗口文档编辑器是 文档类应用程序中 常用的表现形式, 多窗口文档有很多 好处,如占用资源 少,可以有效的组 织文档结构和类别 。 FLEX从入门到实践 13.5 小结 本章主要讲解了Flex的菜单设计,其中包括了右键菜单、菜 单条以及弹出式菜单等。本章重点讲解了菜单的创建、 绑定数据以及实现菜单项命令等。下一章将讲解行为和 特效。 FLEX从入门到实践 13.6 习题 1.如何实现一个右键菜单? 2.怎样创建一个菜单条? 3.如何创建一个弹出式菜单? FLEX从入门到实践 第14章 行为和特效 Flash是一个表现力非常强的平台,可以创造出一切想要的 特效效果。在Flex所提供的类库中,就包含了一些行为 和特效,可以实现表现力很强的动画效果。本章包括以 下内容: z 使用行为 z 拖放行为特效 z 使用ViewState z 过度特效 z 使用ToolTips FLEX从入门到实践 14.1 使用行为 行为可以添加一些效果和动作,以相应用户和程序的操作。 例如,使用行为,可以使一个窗体慢慢的淡入,直到完 全可见。本节将会详细介绍行为的使用。 FLEX从入门到实践 14.1.1 行为简介 在Flex中,提供了一些有关行为的组件,可以通过使用 MXML或者ActionScript定义这些行为。 FLEX从入门到实践 14.1.2 在ActionScript中使用行为 除了使用MXML代码创建行为 外,还可以使用 ActionScript代码。所有 的行为类都放在 mx.effects包中,所以在 使用行为类之前需要引入 此包。 FLEX从入门到实践 14.2 拖放行为特效 拖放操作可以把数据从一个地方拖到另外一个地方。在可视 化的应用系统中,这样的操作是非常便捷的。本节将介 绍在Flex中拖放效果的实现过程。 FLEX从入门到实践 14.2.1 容器之间移动数据 几乎每个数据容器组件都有 两个属性:dragEnabled 和dropEnabled。 dragEnabled属性表示允 许从组件中拖出数据,而 dropEnabled属性则表示 允许向组件中放置数据。 默认情况下,当移动数据的 时候,向目标对象中添加 数据,同时在源对象中就 会删除相应的数据。 FLEX从入门到实践 14.2.2 容器之间复制数据 在默认情况下,设置dragEnabled和dropEnabled属性的值 ,可以移动数据。但是有些情况下,需要复制数据。在 数据容器之间复制数据,需要设置dragDrop事件。 FLEX从入门到实践 14.2.3 手动添加拖放功能 数据控件中已经内置了拖放功能的支持,但是其他Flex组件 却不受支持。想要非数据控件也支持拖放功能,必须通 过相应的事件驱动来实现。 FLEX从入门到实践 14.3 使用View States 通过View States可以改变一个组件或是应用程序的外观, 以相应用户的操作。例如,Adobe Reader阅读器中,当 单击侧边栏相应按钮时,就会显示或隐藏书签和页面的 导航栏。 FLEX从入门到实践 14.3.1 使用View States改变局部视图 在Flex内置提供的View States组件中,可以向目标容器添 加任意组件,还可以使用SetProperty设置其任意属性的 值。通过这些特性,可以更新局部视图。 FLEX从入门到实践 14.3.2 View States之间的继承关系 为了更好地应付复杂的代码,在 View States组件中内置了继 承的功能。所谓的继承,就是 可以从其他的View States组 件中继承相同的功能,而不需 要再创建或设置一次。这样就 大大增强了代码的重用性,使 得开发更加快速,代码维护更 加容易。 FLEX从入门到实践 14.3.3 使用比较运算符 通过使用比较运算符,可以使得在同一个组件中,控制不同 的视图。 FLEX从入门到实践 14.4 过渡特效Transitions View States是用来改变一个组件或是应用程序的外观。 Transitions则是定义了在视图之间切换的动作行为。可 以通过使用effect类,来定义视图切换的动画效果。 FLEX从入门到实践 14.4.1 使用Transitions Transitions组件通过使用effect类,可以设置切换视图的不 同动画特效。 FLEX从入门到实践 14.5 使用ToolTips ToolTips用来向用户提供一些相关的帮助信息,这有助于 用户的操作。当用户把鼠标移动到可视化的控件中时, ToolTips就会引导用户进一步的操作程序。 FLEX从入门到实践 14.5.1 使用ToolTips属性 在很多应用程序中,ToolTips都是一个标准性的功能。在 Flex中也不例外,同样也提供了这样的属性。 FLEX从入门到实践 14.5.2 设置ToolTips样式 如果默认的ToolTips样式不理想,可以通过Style组件,自 己定义一个ToolTips样式。 FLEX从入门到实践 14.5.3 使用ToolTips管理器 在Flex中提供了一个ToolTipManager类,是用来设置 ToolTips相关特性的,如是否显示。ToolTipManager类 位于mx.managers包中。 FLEX从入门到实践 14.5.4 创建一个自定义的ToolTips 在ToolTipManager类中, 提供了两种方法来使用 ToolTips。一个是 createToolTip,用来创 建ToolTips。另一个是 destroyToolTip,用来销 毁ToolTips。使用这两个 方法,就可以在所有的组 件中定义ToolTips。 FLEX从入门到实践 14.6 本章实例:用户登录系统 用户登录系统是大部分的应用程序中都有的功能,是进入系 统的入口点。【实例14-1】本例制作一个简单的用户登 录系统。 FLEX从入门到实践 14.7 小结 本章主要讲解了Flex中行为和特效,其中重点讲解了几个常 用的行为特效,如拖放动作、过度特效以及ToolTip等。 下一章将讲述Flex的样式和主题。 FLEX从入门到实践 14.8 习题 1.什么是行为? 2.在两个组件或者容器之间创建一个拖放的特效? 3.如何使用ViewStates创建窗口特效? 4.如何创建一个提示ToolTip控件? FLEX从入门到实践 第15章 样式和主题 样式对于一个应用程序来说也是非常有用的,使用样式和主 题可以改变单个组件或者全部组件的外观,使他们看起 来更加舒服。本章包括以下内容: z 使用样式 z 使用字体 z 加载图像 z 创建皮肤 z 指针管理 FLEX从入门到实践 15.1 使用样式 通过样式属性可以更改Flex组件的外观,这些属性包含了文 字大小、背景颜色等定义。定义样式属性可以有几种方 法,包括内部定义、设置组件样式属性、通过外部样式 表文件等。 FLEX从入门到实践 15.1.1 使用Style组件定义样式 通过标记,可以定义CSS 2.0的语法。可以把定义的 这些样式应用到当前文档或者其子文档。使用标记 定义样式的格式如下所示。 selector_name { style_property: value; [...] } 其中,selector_name是样式名称,style_property是样式属性 ,value是属性的值。这些都是严格遵循CSS 2.0的语法。 FLEX从入门到实践 15.1.2 使用StyleManager类定义样式 在ActionScript中使用StyleManager类,可以使用类的选 择器设置样式。使用StyleManager类,还可以声明新的 CSS样式,并且应用到Flex程序中的控件。 FLEX从入门到实践 15.1.3 外部样式表 Flex同HTML一样,也支持外部的CSS样式表。使用 标记中的source属性,可以把外部的样式表 应用到当前文档或者其子文档中。 FLEX从入门到实践 15.2 使用字体 在应用程序中可以包含字体。包含的字体既可以是默认操作 系统内置的,还可以是其他的外部字体。如果使用非系 统默认的,那么就需要嵌入到应用程序中。 FLEX从入门到实践 15.2.1 使用系统字体 通过fontFamily属性,可以把 任何一个字体应用到程序中 。然而,并不是所有的系统 拥有所有的字体。系统字体 并不能以外部信息的形式导 出来,也不能嵌入在SWF文 件中一起发布。 FLEX从入门到实践 15.2.2 使用嵌入式字体 相比较使用系统字体,嵌入式字体的优势在于在程序运行时 ,指定的字体总是显示出来,不管系统中是否有这种字 体。开发时不用去考虑字体样式丢失的问题。 FLEX从入门到实践 15.3 指针管理器 在Flex中,使用指针管理器可以控制鼠标指针的图片。当程 序等待进程到完成的过程中,可以使用指针管理器提供 一个用户提示。这些图片类型可以包括JPEG、GIF、 PNG以及SVG等,还可以是一个Sprite对象,或者一个 SWF文件。 指针管理器是放在包mx.managers.CursorManager中的, 通过CursorManager类的静态属性和方法就可以控制鼠 标指针的样式。 FLEX从入门到实践 15.4 本章实例:使用Flex主题 通过使用Flex的样式功能,可 以自定义一个Flex的主题, 并可以打包成SWC文件,以 提供其他应用程序使用。 【实例15-1】本例使用一个创 建好的Flex主题皮肤,构建 了一个用户登录界面。 FLEX从入门到实践 15.5 小结 本章主要讲解了在Flex中如何创建样式和主题,并且在应用 在程序中。通过本章的介绍,读者应能自行创建样式和 主题,并在实际应用程序中使用。 FLEX从入门到实践 15.6 习题 1.如何创建一个外部的样式文件,并使用? 2.如何自定义一个指针? 3.如何使用嵌入式字体? 4.创建并应用一个自定义的主题? FLEX从入门到实践 第16章 HTTPService和Web Service 通过Flex数据访问组件,可以从Flex客户端程序发送数据到 服务器,与服务器端相互通信。Flex可以同大多流行的 服务器技术通信,如PHP、Adobe ColdFusion、微软的 ASP.NET以及JAVA等。本章包括以下内容: z 使用HTTPService z 使用Web Service FLEX从入门到实践 16.1 使用HTTPService 使用HTTPService组件可以与各种服务器技术的页面传递 数据,包括PHP、ColdFusion、JSP、ASP等。本节将 会重点讲述HTTPService组件的实现原理以及如何应用 这种组件。 FLEX从入门到实践 16.1.1 读取数据 通过设置HTTPService组件的 url属性的值,可以读取远程 服务器端的数据。远程服务 器端输出的结果集可以是多 种格式,如文本、XML、数 组等,在客户端可以通过 HTTPService组件的 resultFormat属性来设置输 出的格式。 FLEX从入门到实践 16.1.2 提交数据 使用HTTPService组件除了 可以读取远程服务器端数 据之外,还可以和传统 HTML页面中的表单Form 一样,使用POST或者GET 提交数据。要提交数据, 需要设置HTTPService组 件中的method属性。 FLEX从入门到实践 16.2 使用Web Service 通过使用WebService组件,Flex应用程序可以使用Web服 务来定义与远程服务器通信的接口。Web服务使用标准 的WSDL描述格式,所以不需要格式转换,就可以轻易 的做到数据交换。 FLEX从入门到实践 16.2.1 使用MXML代码访问Web服务 在Flex中也提供了相应的组件, 用以更好的访问WebService 。这个组件支持SOAP消息格 式,SOAP定义了基于XML格 式的数据交换类型。通过这个 组件,Flex可以与所有支持 SOAP消息格式的提供Web服 务的服务器端程序通信。 FLEX从入门到实践 16.2.2 使用ActionScript访问Web服务 除了使用WebService组件外,Flex中还提供了 WebService类。使用WebService类同样可以访问Web 服务。 FLEX从入门到实践 16.3 本章实例:在线翻译 【实例16-1】本示例使用Google API接口中的语言翻译服 务,创建一个语言翻译系统。 FLEX从入门到实践 16.4 小结 本章主要讲解了HTTPService和WebService两种组件访问 远程数据。下一章将要讲解Flex如何与Ajax实现通信。 FLEX从入门到实践 16.5 习题 1.如何通过HTTPService访问远程数据? 2.如何通过WebService访问远程数据? FLEX从入门到实践 第17章 Flex Ajax桥 Ajax程序已经成为很流行的技术,但是Flex的前景不容忽视 。在某些时候,为了追求更好的用户体验,常常会面对 一些问题,如何把Ajax应用程序与Flash资源更好的结合 。本章将会介绍一个Flex与Ajax交互最佳的解决方案, 即FABridge。本章包括以下内容: z Ajax简介 z 使用FABridge FLEX从入门到实践 17.1 Ajax简介 Ajax并不是一个新技术,只是利用了JavaScript脚本中某 些对象和方法,与远程服务器端通信。把更多的数据处 理转移到了客户端,从而实现了更好的用户体验。 FLEX从入门到实践 17.1.1 AJAX定义 Ajax不是一个技术,它实际上是几种技术,每种技术都有其 独特这处,合在一起就成了一个功能强大的新技术。 Ajax包括: z XHTML和CSS z 使用文档对象模型(Document Object Model)作动态显 示和交互 z 使用XML和XSLT做数据交互和操作 z 使用XMLHttpRequest进行异步数据接收 z 使用JavaScript将它们绑定在一起 FLEX从入门到实践 17.1.2 AJAX使用 通过在用户和服务器之间引入一个Ajax引擎,可以消除 Web的开始-停止-开始-停止这样的交互过程。就像 增加了一层机制到程序中,使它响应更灵敏,而它的确 做到了这一点。 不像加载一个页面一样,在会话的开始,浏览器加载了一个 Ajax引擎---采用JavaScript编写并且通常在一个隐藏 frame中。这个引擎负责绘制用户界面以及与服务器端通 讯。Ajax引擎允许用异步的方式实现用户与程序的交互 --不用等待服务器的通讯。所以用户再不不用打开一 个空白窗口,看到等待光标不断的转,等待服务器完成 后再响应。 FLEX从入门到实践 17.1.3 与传统的web应用比较 AJAX应用可以仅向服务器发送并取回必需的数据,它使用 SOAP或其它一些基于XML的web service接口,并在客 户端采用JavaScript处理来自服务器的响应。因为在服 务器和浏览器之间交换的数据大量减少,结果就能看到 响应更快的应用。同时很多的处理工作可以在发出请求 的客户端机器上完成,所以Web服务器的处理时间也减 少了。Ajax应用程序的优势在于: z 通过异步模式,提升了用户体验 z 优化了浏览器和服务器之间的传输,减少不必要的数据 往返,减少了带宽占用 z Ajax引擎在客户端运行,承担了一部分本来由服务器承 担的工作,从而减少了大用户量下的服务器负载。 FLEX从入门到实践 17.1.4 发展史 技术在1998年前后得到了应用。允许客户端脚本发送HTTP 请求(XMLHTTP)的第一个组件由Outlook Web Access 小组写成。该组件原属于微软Exchange Server,并且 迅速地成为了Internet Explorer 4.0[3]的一部分。部分观 察家认为,Outlook Web Access是第一个应用了Ajax 技术的成功的商业应用程序,并成为包括Oddpost的网 络邮件产品在内的许多产品的领头羊。但是,2005年初 ,许多事件使得Ajax被大众所接受。Google在它著名的 交互应用程序中使用了异步通讯,如Google讨论组、 Google地图、Google搜索建议、Gmail等。Ajax这个词 由《Ajax: A New Approach to Web Applications》一 文所创,该文的迅速流传提高了人们使用该项技术的意 识。另外,对Mozilla/Gecko的支持使得该技术走向成熟 ,变得更为易用。 FLEX从入门到实践 17.1.5 优点和缺点 使用Ajax的最大优点,就是能在不更新整个页面的前提下维 护数据。这使得Web应用程序更为迅捷地回应用户动作 ,并避免了在网络上发送那些没有改变过的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript 在浏览器上执行。就像DHTML应用程序那样,Ajax应用 程序必须在众多不同的浏览器和平台上经过严格的测试 。随着Ajax的成熟,一些简化Ajax使用方法的程序库也 相继问世。同样,也出现了另一种辅助程序设计的技术 ,为那些不支持 JavaScript的用户提供替代功能。 FLEX从入门到实践 17.1.6 Ajax的工作原理 Ajax的核心是JavaScript对象XmlHttpRequest。该对象在 Internet Explorer 5中首次引入,它是一种支持异步请求 的技术。简而言之,XmlHttpRequest使您可以使用 JavaScript向服务器提出请求并处理响应,而不阻塞用 户。在创建Web站点时,在客户端执行屏幕更新为用户 提供了很大的灵活性。 FLEX从入门到实践 17.2 使用FABridge FABridge类库实际上只是整合了ExternalInterface类,使 得在创建Flex与Ajax通信时更加容易。 FLEX从入门到实践 17.2.1 FABridge简介 Flex Ajax桥(FABridge)是一个小型的代码库,通过这个 接口,可以实现Flex与Ajax互相通信。FABridge类库在 以下的情况下可以被使用: 在Ajax应用程序中想要使用更加丰富的Flex组件,而不想编 写更多的Flex代码。 在一个小型的开发团队中,只有一两个人懂得Flex。使用 FABridge类库,可以更加有效的开发项目。 计划使用Ajax和Flex构建一个RIA程序。虽然可以使 ExternalInterface类来创建,但是发现使用FABridge会 更加的容易,并且提高效率。 FLEX从入门到实践 17.2.2 使用FABridge 从HTML页面传递数据到Flash中有很多种方法,包括使用 查询字符串和标记。但是这些方法只能将数据 传递到容器中。在ActionScript类库中,提供了更加强 大的技术,使用ExternalInterface类。 ExternalInterface类是一个应用程序编程接口,负责 ActionScript和JavaScript之间的通信。 FABridge类库整合了ExternalInterface类,其中主要包含 了两个文件,FABridge.as和FABridge.js。通过调用 FABridge.as中的FABridge类,就可以方法JavaScript 数据。通过使用FABridge.js中的FABridge函数就可以 访问ActionScript中的数据。通过这两个文件,可以达 到两者相互访问的目的。 FLEX从入门到实践 17.3 本章实例:相册 【实例17-1】本例制作一 个简单的相册功能,添 加四个选择相册按钮。 单击时切换并显示相应 的相册图片。 FLEX从入门到实践 17.4 小结 本章主要讲解了Flex如何与Ajax实现通信,同时也简单介绍 了Ajax技术。本章重点是使用FABridge框架,实现Flex 与Ajax通信。下一章开始将讲解Flex与服务器端技术的 通信。 FLEX从入门到实践 17.5 习题 1.如何实现Flex与Ajax通信? 2.什么是Ajax,有哪些优点? FLEX从入门到实践 第18章 ColdFusion ColdFusion是Adobe公司发布的服务器端技术。使用 ColdFusion可以创建动态的服务器端程序,并且可以与 客户端技术(如Flex等)无缝的通信。本章包括以下内 容: z ColdFusion简介 z 使用ColdFusion FLEX从入门到实践 18.1 ColdFusion简介 ColdFusion是动态的服务器端编程语言,使用标记语言 CFML编写代码。与其他的服务器编程技术相比,有很多 自身的特性。 FLEX从入门到实践 18.1.1 什么是ColdFusion ColdFusion和J2EE、.NET、PHP一样,都是服务器端语 言。ColdFusion可以通过以下几点的描述概括其特性。 ColdFusion是一个服务器端语言,可以创建动态的Web页 面或者Web服务,是一种后台服务器技术。 在服务器端发送到请求的客户端浏览器之前,ColdFusion 可以生成HTML代码 也可以使用ColdFusion语言在服务器端进行逻辑处理,然 后把结果传送到客户端。 FLEX从入门到实践 18.2 使用ColdFusion ColdFusion是服务器技术,通常会与客户端技术结合使用 。ColdFusion的服务可以与现有的服务器结合在一起( 如IIS、Apache等)启动,也可以单独运行。 FLEX从入门到实践 18.2.1 安装ColdFusion ColdFusion服务器安装程序可以从官方网站通过下载获取 。下载完安装文件后,开始安装ColdFusion服务器。 FLEX从入门到实践 18.2.2 创建第一个Flex和ColdFusion通信程 序 【示例18-1】本例子创建一个简单的Flex与ColdFusion通 信的应用程序,在客户端获取服务器的文本数据。 FLEX从入门到实践 18.3 本章实例:留言本(ColdFusion版) 【实例18-1】本示例通过使用ColdFusion项目,制作一个 简单的留言本。本示例实现了Flex与服务器端技术 ColdFusion的通信。 FLEX从入门到实践 18.4 小结 本章主要讲解了Flex与ColdFusion的通信,同时也简单介 绍了关于ColdFusion的知识。下一章将讲解Flex与PHP 通信问题。 FLEX从入门到实践 18.5 习题 1.什么是ColdFusion? 2.Flex如何与ColdFusion进行数据交换? FLEX从入门到实践 第19章 Flex与PHP PHP是一种开源的Web开发脚本语言。通常PHP应用程序使用 HTML和JavaScript客户端技术来提供用户界面。自从Flex 应用程序可以与PHP无缝通信之后,使用Flex作为PHP应用 程序的客户端技术,在表现力方面则更为出色。本章将会详 细介绍Flex与PHP的通信技术。本章包括以下内容: z PHP简介 z 使用AMFPHP FLEX从入门到实践 19.1 PHP简介 PHP是一种开源的、用于Web开发的脚本语言。PHP语言 其简单易用、快速开发等特性受到越来越多的Web开发 者的欢迎。如今已经成为流行的编程语言之一。 FLEX从入门到实践 19.1.1 PHP脚本语言 PHP是作为一个小开放源码,随着越来越多的人意识到它的 实用性从而逐渐发展起来。Rasmus Lerdorf在1994年发 布了PHP的第一个版本。从那时起它就飞速发展,并在 原始发行版上经过无数的改进和完善。 PHP是一种嵌入在HTML并由服务器解释的脚本语言。它可 以用于管理动态内容、支持数据库、处理会话跟踪,甚 至构建整个电子商务站点。它支持许多流行的数据库, 包括MySQL、PostgreSQL、Oracle、Sybase、 Informix和Microsoft SQL Server。 PHP是能生成动态网页的工具之一。PHP网页文件被当作一 般HTML网页文件来处理并且在编辑时可以用编辑HTML 的常规方法编写PHP。 FLEX从入门到实践 19.1.2 使用PHP PHP脚本语言通常是嵌入在HTML页面中的,也就是一个 PHP与HTML代码的混合文件。开始了解一个程序语言, 常常都会从最简单的“Hello World”开始。在PHP中,输 入一个字符串最简单有效的办法就是使用echo关键字。 代码如下。 01 02 How to say "Hello, World!" 03 04 05
06 一个简单的代码。 07 FLEX从入门到实践 19.2 使用AMFPHP 通过AMFPHP,Flex可以与PHP无缝通信。从而可以创建 客户端表现力更强的PHP应用程序。 FLEX从入门到实践 19.2.1 AMFPHP简介 Amfphp是PHP的RPC工具,它可以使PHP与下述技术无缝 通信: z Flash和Flex Remoting z JavaScript JSON 和Ajax JSON z XML 和XML-RPC 远端程序调用(RPC,Remote Procedure Call)是一种客 户端与服务器端交换数据方式。可以调用本地对象的带 有不同参数的方法,设置回调并接受调用结果。不用关 心发送和接收数据的实现细节。实现细节通常是抽象的 ,就像在调用本地方法一样。 FLEX从入门到实践 19.2.2 访问PHP应用程序 AMFPHP使用了NetConnection对象的call()方法,访问远 程服务器端的PHP程序。在AMF数据编码方式上有两种 :AMF0和AMF3。NetConnection对象采用了异步的方 式返回访问的结果。 FLEX从入门到实践 19.3 本章实例:留言本(PHP版) 【实例19-1】本示例通过使用AMFPHP开源项目,制作一 个简单的留言本。本示例实现了Flex与服务器端技术 PHP的通信。 FLEX从入门到实践 19.4 小结 本章主要讲解了Flex与PHP通信问题,同时也简单介绍了 PHP语言。本章重点讲解了使用AMF的通信格式,实现 Flex与PHP的通信。下一章将会讲解Flex与ASP.NET的 通信。 FLEX从入门到实践 19.5 习题 1.什么是PHP? 2.如何使用AMFPHP使得Flex与PHP通信? FLEX从入门到实践 第20章 Flex与.NET .NET是微软推出的开发基础框架。功能强大、集成度高、 多语言等优点吸引了很多开发者的青睐。对于.NET程序 员来讲,Flex和.NET也是一个很好的组合。本章包括以 下内容: z .NET简介 z 使用FluorineFx FLEX从入门到实践 20.1 .NET简介 .NET框架是一个功能强大的开发框架,包含了一套成熟的 开发工具Visual Studio.NET。使用.NET框架既可以开发 Windows应用程序,也可以开发Web应用程序。 FLEX从入门到实践 20.1.1 .NET框架 .NET框架可以用以下几点描述: z .NET框架是为微软新的.net 平台服务的基础结构。 z .NET框架是用于构建、开发以及运行Web Service和Web应用 程序的公共环境。 z .NET框架包含着公用的类库,如ADO.NET、ASP.NET以及 Windows窗体,提供可被整合到多种计算机系统的高级标准服 务。 z .NET 框架是对语言中立的。目前,它支持 C++、C#、Visual Basic、JScript (JavaScript 的微软版本)以及COBOL。第三 方语言,如Eiffel、PerlPython、Smalltalk 等等,也将可用于 构建未来的.NET 框架应用程序。 新的Visual Studio.NET是用于新的.NET框架的公共开发环境。 它提供多功能的应用程序执行环境、简化开发以及多种开发语 言之间简易的整合。 FLEX从入门到实践 20.1.2 ASP.NET ASP.NET是统一的Web应用程序平台,它提供了为建立和 部署企业级Web应用程序所必需的服务。ASP.NET为能 够面向任何浏览器或设备的更安全的、更强的可升级性 、更稳定的应用程序提供了新的编程模型和基础结构。 ASP.NET是Microsoft .NET Framework的一部分,是一种 可以在高度分布的Internet环境中简化应用程序开发的计 算环境。.NET Framework包含公共语言运行库,它提供 了各种核心服务,如内存管理、线程管理和代码安全。 它也包含.NET Framework类库,这是一个开发人员用于 创建应用程序的综合的、面向对象的类型集合。 FLEX从入门到实践 20.2 使用FluorineFX FluorineFX提供了一个Flex/Flash Remoting的接口,用于 访问.NET。使用FluorineFX可以轻易的实现Flex与.NET 之间的通信。 FLEX从入门到实践 20.2.1 安装FluorineFx 从官方网站http://www.fluorinefx.com/可以获取免费 FluorineFX的程序文件。下载后,就可以安装。 FLEX从入门到实践 20.2.2 使用FluorineFx创建应用程序 【示例20-1】该示例使用FluorineFx创建一个Flex访问 ASP.NET的应用程序。 FLEX从入门到实践 20.3 本章实例:留言本(.NET版) 【实例20-1】本示例通过使用FluorineFX开源项目,制作 一个简单的留言本。本示例实现了Flex与服务器端技术 ASP.NET的通信。 FLEX从入门到实践 20.4 小结 本章主要讲解了Flex与.NET通信的问题,同时还简单介绍 了.NET框架以及ASP.NET。本章重点讲解使用 FluorineFX项目实现Flex与.NET通信。下一章将讲解 Flex与Java的通信技术。 FLEX从入门到实践 20.5 习题 1.什么是.NET? 2.如何使用FluorineFX实现Flex与.NET通信? FLEX从入门到实践 第21章 Flex与Java Java语言是全世界最流行的语言之一,使用者最多,具有 跨平台、高性能等特点。丰富的Java开源项目,使得 Flex和Java的成为了最佳组合之一。本章包括以下内容 : z Java简介 z 开源项目BlazeDS FLEX从入门到实践 21.1 Java简介 Java语言自诞生之日起,就备受开发者青睐。其具有健壮 、可移植性、安全、结构中立等特点。Java拥有大量丰 富的开源项目,也大大促进了其发展。 FLEX从入门到实践 21.1.1 Java语言 Java是Sun公司推出的新的一代面向对象程序设计语言,特 别适合于Internet应用程序开发,它的平台无关性直接威 胁到Wintel的垄断地位。一时间,“连Internet,用Java 编程”,成为技术人员的一种时尚。虽然新闻界的报导有 言过其实,但Java作为软件开发的一种革命性的技术, 其地位已被确立。 FLEX从入门到实践 21.1.2 Java语言的特点 Java到底是一种什么样的语言呢?Java是一种简单的面象 对象的分布式的解释的健壮的安全的结构中立的可移植 的性能很优异的多线程的动态的语言。 1.简单 2.面向对象 3.分布式 4.健壮 5.结构中立 6.安全 7.可移植的 FLEX从入门到实践 21.2 开源项目BlazeDS BlazeDS作为Adobe新推出的开源项目,目的是使得Flex客 户端程序更好的与远程Java程序通信。BlazeDS主要包 含了两种技术:高性能远程控制和短消息技术。 FLEX从入门到实践 21.2.1 安装和配置BlazeDS BlazeDS是一个开源的项目,是一个基于服务器的Java远 程控制(remoting)和Web消息传递(messaging)技 术,它能够使得后端的Java应用程序和运行在浏览器上 的Adobe Flex应用程序相互通信。 FLEX从入门到实践 21.2.2 使用BlazeDS 【示例21-1】本示例使用BlazeDS实现Flex与Java互相通 信。 FLEX从入门到实践 21.3 本章实例:留言本(Java版) 【实例21-1】本示例通过使用BlazeDS开源项目,制作一个 简单的留言本。本示例实现了Flex与服务器端技术Java 的通信。 FLEX从入门到实践 21.4 小结 本章主要讲解了Flex和Java通信技术,同时也简单介绍了 Java相关知识。本章重点讲解了使用BlazeDS项目实现 Flex与Java之间的通信。从下一章开始将讲解有关Flex 高级设计知识。 FLEX从入门到实践 21.5 习题 1.什么是Java? 2.如何使用BlazeDS实现Flex与Java的通信? FLEX从入门到实践 第22章 PureMVC框架 PureMVC是一个定位于高性能RIA客户端的基于模式的框架,所 使用的模式,可以在《设计模式:可复用面向对象软件的基础 》一书中找到。现在PureMVC已经被移植到大多数流行的开 发平台,包括Flash/Flex、PHP、JAVA、C#等。本章将详细 讲述在Flex平台中,如何使用PureMVC框架设计高性能的 RIA客户端应用程序。本章包括以下内容: z PureMVC框架简介 z 控制中心——Facade类 z 通信机制 z 逻辑命令处理——Command类 z 视图控制——Mediator类 z 数据模型代理——Proxy类 FLEX从入门到实践 22.1 PureMVC模式简介 MVC模式的通常被分为经典的低耦合三层:Model、View 和Controller。在PureMVC中,这三部分由三个单例模 式来管理,三者合称为核心层或者核心角色。 FLEX从入门到实践 22.1.1 MVC模式 MVC模式的全称是Model-View-Controller,即“模型-视图- 控制器”。MVC模型的框架图如图22.1所示。从图22.1中 可以看出整个MVC模式的设计原理。 FLEX从入门到实践 22.1.2 PureMVC结构 在PureMVC中,整个 框架都是有三个单例 模式来管理。除了这 三个核心层之外,还 有另外一个单例模式 类——Facade。 Facade类提供了与 核心层通信的唯一接 口,以简化开发的复 杂度。图22.2显示了 PureMVC的整体框 架结构。 FLEX从入门到实践 22.2 控制中心——Facade类 Facade类是个单例类,负责对三个核心层的初始化,并访 问它们的公共方法。Facade类的作用主要是简化程序开 发,提供编程效率。 FLEX从入门到实践 22.2.1 Facade类 Facade类位于包org.puremvc.as3.patterns.Facade中。 在PureMVC中,Facade类主要负责以下几项任务: z 初始化Model、View和Controller的单例。 z 提供所有由IModel、IView和IController接口定义的方法 。 z 提供Model、View和Controller单例的重载方法。 z 提供一个唯一的接口,以便注册Command类和通知观察 者。 Facade类可以看作是Model、View和Controller三者的“经 纪人”,在实际编写代码时,不需要应用这三者的类文件 ,或者实例化。Facade类已经在构造方法中包含了对这 三者的单例的构造。 FLEX从入门到实践 22.2.2 创建Facade子类 通常情况下,应用程序都会有一个Facade子类。这个子类 就负责初始化控制器(Controller),以及建立 Command和Notification之间的映射,并执行一个注册 所有Model和View的Command类。 FLEX从入门到实践 22.3 通信机制 在PureMVC中使用了观察者模式。通过这种模式,各层之 间得以相互通信。 FLEX从入门到实践 22.3.1 通信机制概述 PureMVC使用了观察者模式,所以各层之间能以一种松耦 合的方式通信,并且与平台无关。ActionScript语言本 身没有提供flash.events包中的事件模型。况且 PureMVC框架并不是只针对AS语言,它被移植到其他的 一些平台像C#、J2ME,所以它不会使用这些只有在 Flash平台上才有的类,它采用自己的通信机制(即 Notification)。 Notification(通知)机制并不仅仅是Event(事件)机制 的替代品,它们的工作方式有本质上的不同。但这两者 相互协作可以提高视图组件的可重用性,甚至,如果设 计得当,视图组件可以和PureMVC“脱耦”。 FLEX从入门到实践 22.3.2 事件(Event)处理 Event是由实现IeventDispatcher接口的Flash显示对象广 播的,Event会在整个显示对象层中“冒泡”,这样可以让 父级(或父级的父级,等)对象处理事件。Event机制是 一个“责任链”的形式:除了那些可以直接引用事件发起 者(dispatcher)并侦听它事件的对象,只有和 dispatcher是父子关系的对象才会接收到事件,并对事 件做出响应动作。 Facade和Proxy只能发送Notification,Mediators既可以 发送也可以接收Notification,Notification被映射到 Command,同时Command也可以发送Notification。 这是一种“发布/订阅”机制,所有的观察者都可以收到相 同的通知。例如多个书刊订阅者可以订阅同一份杂志, 当杂志有新刊出版时,所有的订阅者都会被通知。 FLEX从入门到实践 22.4 逻辑命令处理——Command类 Command中包含了两个类:SimpleCommand和 MacroCommand。SimpleCommand类只有一个 execute方法,而通过MacroCommand类的 addSubCommand可以添加子Command。 FLEX从入门到实践 22.4.1 Command类 ApplicationFacade需要在启动时初始化Controller,建立 Notification与Command的映射。 FLEX从入门到实践 22.4.2 创建Command子类 通常情况下,Command子类只是继承SimpleCommand类 就可以了。除非业务逻辑相对复杂,这时需要继承 MacroCommand类,把多个SimpleCommand子类按 照指定的顺序执行。 FLEX从入门到实践 22.5 视图控制——Mediator类 Mediator是视图组件与系统其他部分交互的中介器。使用 Mediator类可以做到视图显示与视图控制的分离。 FLEX从入门到实践 22.5.1 Mediator类 Mediator是视图组件(View Component,例如Flex的 DataGrid或Flash的MovieClip)与系统其他部分交互的 中介器。 在基于Flex的应用程序中,Mediator侦听View Component来处理用户动作和Component的数据请求 。Mediator通过发送和接收Notification来与程序其他部 分通信。Mediator的主要职责是处理View Component 派发的事件和系统其他部分发出来的Notification(通知 )。 因为Mediator也会经常和Proxy交互,所以经常在Mediator 的构造方法中取得Proxy实例的引用并保存在Mediator 的属性中,这样避免频繁的获取Proxy实例。 FLEX从入门到实践 22.5.2 创建Mediator子类 Mediator子类控制着相应的视图组件(View Component ),和相应相应的事件,并发送通知。 FLEX从入门到实践 22.6 数据模型代理——Proxy类 Proxy类用来控制和访问数据模型,通过Proxy代理类,可 以更新数据模型,并获取数据。 FLEX从入门到实践 22.6.1 Proxy类 一般来说,Proxy Pattern(代理模式)被用来为控制、访问对象 提供一个代理。在基于PureMVC的应用程序,Proxy类被设计 用来管理程序数据模型。一个Proxy有可能管理对本地创建的 数据结构的访问。它是Proxy的数据对象。 在这种情况下,通常会以同步的方式取得或设置数据。Proxy可 能会提供访问Data Object部分属性或方法的API,也可能直接 提供Data Object的引用。如果提供了更新Data Object的方法 ,那么在数据被修改时可能会发送一个Notifidation通知系统 的其它部分。 Remote Proxy被用来封装与远程服务的数据访问。Proxy维护那 些与Remote service(远程服务)通信的对象,并控制对这些 数据的访问。 在这种情况下,调用Proxy获取数据的方法,然后等待Proxy在收 到远程服务的数据后发出异步Notification。 FLEX从入门到实践 22.6.2 创建Proxy子类 Proxy封装了数据模型,管理Data Object及对Data Object 的访问,不管数据来自哪里,什么类型。在PureMVC中 ,Proxy是个被Model注册的简单的数据持有者。虽然 Proxy类已经是完全可用的了,但是通常对于具体的应用 应该编写Proxy的子类,增加操作方法。 FLEX从入门到实践 22.7 本章实例:用户角色管理 用户角色管理是用户管理中的重 要的一个部分,在角色管理 中,可以把用户分派多个角 色。按照角色用户可以拥有 不同的操作权限。 【实例22-1】本例制作一个用户 角色管理功能,其中包含两 部分功能,一个是用户的添 加,另一个是角色的添加。 FLEX从入门到实践 22.8 小结 本章主要讲解了PureMVC框架。PureMVC框架核心就是采 用了广播式的通信机制,接收者只要注册标识与广播消 息的标识一致,就会接收消息。由于这种通信机制比较 通用,所以PureMVC框架又适合是他语言。 FLEX从入门到实践 22.9 习题 1.什么是PureMVC框架? 2.PureMVC框架的通信机制是什么? 3.PureMVC框架包含多少个设计模式? FLEX从入门到实践 第23章 创建AIR程序 AIR平台是富互联网技术(RIA)应用之一。AIR允许把已 经存在的WEB程序构建并部署成RIA桌面应用程序,以 提高用户体验。Flex就是其中一个可以部署到AIR运行时 的技术。本章包括以下内容: z AIR简介 z 窗体 z 菜单 z 本地SQL数据库 FLEX从入门到实践 23.1 AIR简介 Adobe公司的AIR是一个跨平台的系统运行时,通过AIR技 术平台可以把已经存在的Web程序包装成一个桌面程序 。 FLEX从入门到实践 23.1.1 AIR平台概述 使用AIR平台构建的应用程序,就像是在使用本地桌面程序 一样,有很好的操作体验。AIR运行时只需要在用户的电 脑上安装一次,就可以体验不同的AIR应用了。AIR运行 时平台的优点可以归结为一下几点: 一次开发,随处运行。因为AIR是一个跨操作系统的平台, 同时支持Windows、Linux以及Mac OS等流行的操作系 统。 可以快速的构建程序。AIR利用原有的技术构建应用程序, 这些技术包括HTML、Flex、Flash、PDF、JavaScript 、CSS和Ajax等。所以开发者不必再学习其他新的技术 。 AIR提供了诸多接口和框架。通过这些接口和框架,开发者 可以轻易的访问本地系统、文件、甚至是数据库。 FLEX从入门到实践 23.1.2 使用Flex创建第一个AIR程序 在Adobe Flex Builder 3中已经提供了创建AIR工程的工具 ,这个工程带有Flex的AIR组件以及调试器和打包程序。 【示例23-1】本例子使用Flex创建一个简单的AIR程序,通 过此例读者可以了解到如何使用Flex创建AIR程序。 FLEX从入门到实践 23.2 窗体 窗体(Windows)是AIR程序的基础部分。无论一个AIR程 序多么简单,但还是需要有窗体,否则就不能够运行起 来。本章将会介绍AIR中窗体的创建。 FLEX从入门到实践 23.2.1 窗体简介 在使用Flex创建AIR工程时,系统会自动的创建一个窗体组 件WindowedApplication。所有的容器和组件都会包含 在这个窗体中。在创建AIR程序的同时,系统还会创建一 个XML配置文件,如main-app.xml。在这个配置文件中 ,记录了窗体的属性、图标和外观样式等。其中比较常 用的属性有如下几项: z filename:应用程序的名称。 z version:版本号,其值的形式如v1、2.5或者Alpha 1等 。 z copyright:版权信息。 z systemChrome:程序边框样式,可选值为standard或 者none。standard为带有系统边框的窗体,none则为 自定义边框。 FLEX从入门到实践 23.2.2 窗体事件 通过设置窗体边框属性systemChrome的值,可以创建一 个不规则的窗体。不规则窗体默认情况下是没有最大化 、最小化和关闭等按钮的,需要自己创建并实现其功能 。 FLEX从入门到实践 23.3 菜单 AIR程序可以创建各种不同的菜单,如顶部菜单、右键上下 文菜单、系统托盘菜单等。在本节中,将会详细讲解如 何在AIR程序中创建不同的类型菜单。 FLEX从入门到实践 23.3.1 系统菜单 系统顶部菜单通常起到导航的作用。AIR程序的所有菜单类 都包含在flash.display.NativeMenu包中。通过构建一 个新的NativeMenu对象,就可以创建一个菜单,构造参 数没有任何的参数。 【示例23-3】本例子创建一个系统顶部菜单,并且在顶级菜 单的下面又使用NativeMenuItem对象创建了二级菜单。 FLEX从入门到实践 23.3.2 右键菜单 在基于Flex技术的AIR程序中,可以在任何地方显示一个单 击右键的上下文菜单。要创建一个上下文菜单,需要创 建一个ContextMenu对象,并把该对象分派到 contextMenu属性中。 FLEX从入门到实践 23.3.3 托盘菜单 AIR程序默认在windows系统中支持系统托盘图标,并可以 创建一个系统托盘的菜单。 FLEX从入门到实践 23.4 本地SQL数据库 在AIR程序中默认已经包含了一个本地的SQL数据库。这个 SQL数据库使用了开源的SQLite数据库系统,支持大多 数标准的SQL特性。通过操作本地的SQL数据库,可以 完成很多创造性的功能。例如,可以通过把数据暂时保 存在本地,实现离线操作的功能。 FLEX从入门到实践 23.4.1 创建和打开数据库 要创建一个数据库,首先要创建一个SQLConnection对象 。使用open()方法可以以同步的方式打开数据库,或者 使用openAsync()方法以异步的方式打开。使用两种方 式都会有一个File类型的参数,在创建参数的同时,会在 本地创建一个以db为扩展名的数据库文件。 FLEX从入门到实践 23.4.2 创建数据表 在数据库中创建数据表,可以通过执行SQL语句的方法实现 。创建数据表的SQL语句语法参见如下形式。 CREATE TABLE tableName (column[, column, ...]) 在打开数据库之后,可以使用SQLStatement对象来执行某 个SQL语句。 FLEX从入门到实践 23.4.3 插入数据 数据是保存在数据表中的,在创建了数据表之后,下一步就 要向数据表中添加数据。插入数据可以使用SQL语言中 的INSERT命令。该命令的语法结构如下所示。 INSERT INTO tableName (column[, column, …]) VALUES (value[, value, …]) FLEX从入门到实践 23.4.4 读取数据 读取数据同样使用了SQL语句,通过SQLStatement对象的 execute()方法获取数据的结果集。 FLEX从入门到实践 23.5 本章实例:RSS阅读器 RSS阅读器是一种信 息聚合的技术,是 为了提供一种更为 方便、高效的互联 网信息的发布和共 享,用更少的时间 分享更多的信息。 FLEX从入门到实践 23.6 小结 本章主要讲解了如何创建AIR程序,其中包括了窗体、菜单 以及本地数据库操作等。下一章将会讲解使用如何Flex 开发一套完整的应用系统。 FLEX从入门到实践 23.7 习题 1.什么是AIR平台? 2.如何创建一个不规则窗体? 3.如何创建一个菜单? 4.如何在AIR平台中操作本地数据库? FLEX从入门到实践 第24章 使用Flex创建MP3播放器 使用Flex平台不仅可以创建交互式的管理系统,还可以创建 多媒体应用程序,如MP3播放器、FLV流媒体播放器等 。本章将以一个完整功能的MP3播放器为例,详细讲述 如何使用Flex创建一个多媒体程序。本章包括以下内容 : z MP3播放器的界面设计 z 歌曲列表功能设计 z 基本播放功能设计 z 显示进度功能设计 z 音量控制功能设计 FLEX从入门到实践 24.1 总体和界面设计 在创建一个应用程序之前,往往是需要对整体的功能有一个 规划和设计。在这个MP3播放器中,可以看见最常用的 功能,包括播放、暂停、停止、音量控制、播放进度显 示等。本节将会对这个MP3播放器有一个整体功能和界 面的设计。 FLEX从入门到实践 24.1.1 总体功能设计 MP3播放器通常最核心的功能就 是播放、暂停和停止。除了这 些还可以有歌曲列表、音量控 制和现实播放进度等。本章所 讲述的MP3播放器就包含了上 述这些功能。最终,希望MP3 播放器的界面效果可以类似于 图24.1所示。 FLEX从入门到实践 24.1.2 总体框架设计 总体设计还是使用PureMVC框架。 其目录结构可以参考如图24.2所示 。 FLEX从入门到实践 24.1.3 播放进度设计 显示播放进度可以使用Flex中提供的ProgressBar控件。该 控件提供了实时显示一个任务的完成情况,使用最多的 是加载数据。使用ProgressBar控件可以很容易的实现 显示播放进度的功能。代码如下。 01 02 03 04 05 FLEX从入门到实践 24.1.4 播放控制界面设计 播放器最核心的功能就是播放控制了。播放控制通常包括播 放、暂停和停止功能。要实现这些功能,通常首先想到 的应该是通过触发按钮控件的单击事件。 除了使用按钮控件外,还可以使用图像Image控件来设计。 使用图像Image控件来设计此功能主要是考虑到与美工设 计的分离,使用美工设计的按钮图标,可以获得更加专 业的视觉体验。 除了这几个核心的功能之外,还增加了一个音量控制功能。 在这里,通过使用HSlider控件的change事件改变数值 来实现音量的控制。 FLEX从入门到实践 24.1.5 歌曲列表设计 在连续播放多个音乐或者专辑的时候,播放列表是非常有用 的。一般来说,在Flex平台中,数据列表都会使用诸如 List、DataGrid等数据控件。这个列表因为是由三个字 段,所以选择DataGrid数据控件来显示歌曲列表。 FLEX从入门到实践 24.2 歌曲列表功能设计 歌曲列表功能相对简单,只是从外部XML文件中读取相关数 据,并显示在DataGrid控件中。在这里使用的是XML格 式的数据,在实际开发中可能会使用各种数据库(如 MySQL、MS SQLSERVER等),其原理都是一样的。 FLEX从入门到实践 24.2.1 创建数据和对象模型 在编写代码之前首要的工作就是创建一个XML文件,并填充 一些数据,作为示例数据。使用记事本或者其他的文本 工具创建一个XML文件。 FLEX从入门到实践 24.2.2 读取歌曲列表 通过使用URLRequest和URLLoader对象,可以加载并读 取外部的XML对象。在读取数据之后,需要把这些数据 统一的保存到一个数组集合的对象中,这样便于管理, 并且可以使得数据控件容易绑定。 FLEX从入门到实践 24.2.3 显示歌曲列表 要在DataGrid控件中显示歌曲列表,还需要设置DataGrid 控件的dataProvider属性,并创建一个数组集合类型的 变量songs。 FLEX从入门到实践 24.3 播放控制功能设计 播放控制功能是播放器程序中最核心的应用。播放控制功能 主要包括播放、暂停和停止。除此之外还可以有音量控 制、歌曲切换播放以及播放进度快进和后退等。 FLEX从入门到实践 24.3.1 播放控制 当用户单击播放按钮的时候,系统将会响应操作并调用事件 函数。 FLEX从入门到实践 24.3.2 暂停控制 在ControlBoard中的暂停按钮中添加一个单击click事件。 该事件指向controlHandle方法,并传递参数PAUSE的 值作为消息的标识。 FLEX从入门到实践 24.3.3 停止控制 停止控制功能与上述两个功能类似。首先修改 ControlBoard代码。创建一个静态常量用作事件发送的 标识。 FLEX从入门到实践 24.3.4 歌曲切换 为了达到更好的用户体验,当单击歌曲列表中的任意歌曲时 ,就会自动播放选中的歌曲。首先来看一下 SongListBoard中的实现。 SongListBoard是歌曲列表的视图,在其中的DataGrid控 件中,添加一个单击click事件。在单击事件的同时,需 要获取选中项的值。 FLEX从入门到实践 24.4 显示进度功能设计 显示进度功能在播放器也是很常见的。显示播放进度的方法 有很多,如根据当前位置和总时间绘制动画图形。本节 为了主要说明此功能的实现,就直接使用ProgressBar 控件。 FLEX从入门到实践 24.4.1 显示播放进度 在前面24.1.3中,已经介绍了显示进度的设计界面。本节将 会在这个基础上实现实时显示进度的功能。 创建一个ProgressMediator类。在此类中首先要侦听播放 动作的消息广播,然后使用ENTER_FRAME事件,根据 当前位置和音频的总长度来实时显示播放进度。 FLEX从入门到实践 24.5 音量控制功能设计 音量控制功能的实现主要是依靠SoundTranform类。其中 使用SoundTranform类的volume属性可以设置音频流 的音量大小。 FLEX从入门到实践 24.5.1 音量控制 修改ControlBoard.mxml文件的Hslider控件,添加 change事件。 FLEX从入门到实践 24.5.2 静音控制 有了音量控制的基础后,静音控制就相对简单了。只要把 SoundTransform对象的属性volume的值设置成0即可 。 FLEX从入门到实践 24.4 小结 本章主要讲解了如何使用Flex创建一个完整的MP3播放器应 用系统。本章的播放器程序采用了PureMVC的框架设计 ,实现了大部分常用的功能。通过本章的学习,读者可 以深入了解到Flex在实际开发项目中的作用,可以举一 反三,对读者在实际项目的开发中有着指导作用。 FLEX从入门到实践
还剩416页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

zoulu1234

贡献于2013-11-01

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!