• 1. 第1章 Flex概述Adobe公司的Flex产品是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的。同时它也是极具表现力的、Web应用程序的、高效率的开放源码框架。作为RIA应用程序的主要开发框架,Flex 3中已经包含了一套强大的开发工具。本章包括以下内容: Flex与Flash的关系 Flex使用的语言 Flex与服务器通信
  • 2. 1.1 Flex简介Flex是一个基于组件的开发框架,可以生成一个由Flash Player运行的富互联网应用程序。Flex将基于标准的语言和各种可扩展用户界面及数据访问组件结合起来,使得开发人员能够构建具有丰富数据演示、强大客户端逻辑和集成多媒体的应用程序。
  • 3. 1.1.1 Flex是什么Flex是一种创建RIA(Rich Internet Applications)快速有效的方法之一。RIA是一种可能代替传统HTML应用系统的解决方案。RIA技术既可以像Web一样很简单的部署用户客户端程序,同时交互性和表现力等方面也大大超过了传统Web应用系统。如今,很多开发者或者公司已经开始研究并构建了成熟的RIA系统。
  • 4. 1.1.2 Flex 运行机制Flex只是一种客户端技术,同时也属于Flash平台。Flex代码最终被编译成SWF文件运行在Flash播放器(Flash Player)中。SWF文件可以单独在用户终端运行,但是必须要安装Flash Player。也可以在各种流行的浏览器中运行,浏览器必须安装Flash Player插件。 SWF文件是一个压缩文件,可以通过Flash Player呈现出来。由于SWF文件很小,所以有很快的网络下载速度。用户要想运行一个Flex应用程序,只需要通过网络或者其他途径获取SWF文件,就可以运行在装有Flash Player插件的浏览器中。
  • 5. 1.1.3 Flex产品组成Flex是一个比较完整的开发框架,主要有三个部分组成。 1.Adobe Flex 3 SDK 2.Adobe Flex Builder 3 3.Adobe LiveCycle Enterprise Suite
  • 6. 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(组件)。
  • 7. 1.3 Flex与其他技术比较Flex是一种混合的技术,这种语言技术的设计借鉴了其他优秀的现代标准语言,如XML、JAVA等。其中,MXML就是基于XML构建的描述界面的语言,同时借鉴了HTML等Web技术。而ActionScript也是大量的借鉴了JavaScript脚本和Java语言的语法组成。
  • 8. 1.3.1 HTML/JavaScript/AjaxFlex技术是在Web技术发明之后开发出来的。Flex技术中的MXML语言就是基于XML,并且借鉴了HTML描述语言。所以,MXML和HTML的作用实质上是一样的,都是为了更好的描述界面布局和组件样式。不同的是,MXML采用了更加先进的设计模式,使得MXML代码更容易阅读和编写。 Flex中的ActionScript是一种脚本语言,用来处理客户端的逻辑运算。ActionScript的设计同样也参照了JavaScript,与JavaScript作用一样。并且,ActionScript和JavaScript两者的语法也极其相似,这使得开发者学习新的ActionScript语言的门槛降低。
  • 9. 1.3.2 Java/Java FXFlex是一个类似于Java和Java Swing的平台。Flex中的脚本语言ActionScript与Java上的语法和结构都极其相似。它继承了Java中包的概念,在设计中,参照了Java的大部分特性。 同Flex一样,Java也可以把应用程序部署到Web上运行。但是编译之后的文件却远比Flex大,因为Java的运行环境JRE和开发包JDK拥有比Flex多得多的类库,而且这些类库在客户端可能不需要。所以,很多Java开发者开始了解并学习Flex,计划把Flex和Java更好的结合起来。
  • 10. 1.3.3 Silverlight/XAMLSilverlight是微软公司的富网络应用程序的解决方案。Silverlight的XAML描述语言同样也是基于XML设计的。XAML就相当于Flex中的MXML,两者的功能一样,而且语法也类似。Silverlight客户端所使用的逻辑语言更加广泛,因为它是基于.NET框架设计的。这些语言包括C#、JScript、VB等。 不过Silverlight技术刚刚推出不久,其中的很多功能有待完善。而且,在客户端需要安装Silverlight控件。
  • 11. 1.4 小结本章主要讲解了什么是Flex以及Flex与其他语言的比较。本章的重点是Flex的概念和框架组成。通过本章的学习,读者应该可以更加清楚的了解到Flex的概念和基本框架组成。下一章将向读者讲解Flex的开发环境,其中包括编译工具和开发工具的使用。
  • 12. 1.5 习题1.什么是Flex,其运行机制是什么? 2.Flex与Flash有哪些不同? 3.Flex 3产品有哪些部分组成? 4.说说Flex与Silverlight相同和不同的地方?
  • 13. 第2章 Flex的开发环境Adobe Flex是一个免费的产品,可以使用任何一款编辑器开发。在诸多编辑器中,Flex Builder是一个不可或缺的、功能强大的编辑器,是基于Eclipse IDE开源项目构建的,继承了很多优秀的功能。本章包括以下内容: Flex SDK的安装 开发工具Flex Builder 3 调试Flex应用程序
  • 14. 2.1 Flex SDK的安装Adobe Flex SDK产品包含了Flex框架(即组件类库)和Flex编译器。通过使用Flex SDK 3,再结合编辑器,就可以自由的开发和部署Flex应用程序。
  • 15. 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所示,红色区域为下载地址。
  • 16. 2.1.2 编译代码Flex SDK中包含两个编译器:mxmlc和compc。mxmlc编译器可以把MXML和ActionScript代码编译为SWF文件,compc编译器可以把组件和库编译为SWC文件。
  • 17. 2.2 开发工具Flex Builder 3Flex Builder是一个建立在流行的、开源的Eclipse IDE基础上的。通过Flex Builder,可以快速方便的构建Flex应用程序,使得开发时间缩短。使用Flex Builder,还可以设置代码的断点,调试程序。本节将重点介绍Flex Builder 3的安装和开发界面。
  • 18. 2.2.1 安装Flex Builder 3Flex Builder 3有两种安装方式:独立安装和插件安装。独立安装包中已经包括了Eclipse。插件安装则是以Eclipse插件的形式安装,所以安装之前必须要确保已经安装了Eclipse开发工具。本节将会介绍使用独立安装包安装Flex Builder 3。
  • 19. 2.2.2 Flex Builder 3的界面安装完Flex Builder 3后,通过双击快捷方式可以打开Flex Builder 3的开发环境。第一次使用会出现Flex Builder 3 Activation对话框,需要输入Flex Builder的序列号。Flex Builder 3 Activation对话框如图2.13所示。
  • 20. 2.3 构建第一个Flex应用程序本节将介绍如何使用Flex Builder 3一步步地开发第一个Flex应用程序。该程序将会在浏览器中输出一个字符串。
  • 21. 2.3.1 创建Flex项目Project(项目)是Flex Builder中的基础,一个Project是一组相互关联的文件。所以,创建一个Flex应用程序,就需要创建一个项目(project)。
  • 22. 2.3.2 创建组件和编写代码创建完项目后,系统自动会返回到Flex Builder 3的开发主界面,如图2.17所示。
  • 23. 2.3.3 编译和运行应用程序Flex Builder 3中集成了Flex SDK,所以通过Flex SDK可以把示例2-1中编写的代码编译成SWF文件,并在浏览器中运行。
  • 24. 2.4 各种常见的文件类型Flex中不仅可以创建基本的MXML文件,还可以创建单独的ActionScript文件、类以及接口等。本节将讲解Flex中可以创建的各种文件格式及其作用。创建完某一个项目后,右击其源代码目录,选择并展开New命令项,将会弹出右键菜单,如图2.22所示。
  • 25. 2.4.1 项目组件化通过在右键源代码菜单中,选择并创建一个MXML Component组件文件,可以把每个组件独立出来。这样做可以使项目源代码组件化,把不同功能的组件独立出来管理。
  • 26. 2.4.2 项目模块化通过在右键源代码菜单中,可以选择并创建一个MXML Module模块文件。项目模块化实际上就是把相同功能的代码组织到一个模块中,通过多个模块的累积,从而形成一个完整的应用系统。
  • 27. 2.4.3 项目模式化通过在右键源代码菜单中,可以选择并创建一个ActionScript文件、类或者接口。通常这类文件会在设计模式中被应用。设计模式是管理和组织大量代码更有效的方法之一,是面向对象思想最直接的体现。而ActionScript语言本身就是一个面向对象的语言。 在本书的第25章PureMVC框架中,对设计模式尤其是MVC模式,有更加深入的探讨。
  • 28. 2.5 小结本章主要讲解了Flex 3的开发环境。其中介绍了Flex SDK 3的安装和使用,详细讲解了Flex Builder 3的安装和使用。在本章的最后,使用Flex Builder 3构建了第一个Flex应用程序,使读者可以快速的入门。下一章将会介绍构建Flex应用系统界面的描述语言MXML。
  • 29. 2.6 习题1. Flex SDK 3包含哪两部分内容? 2. mxmlc编译器可以编译哪些类型的文件?
  • 30. 第3章 MXML语法基础MXML是一种基于XML设计的描述性标记语言,使用MXML可以构建Flex应用程序中的用户界面组件。同时,MXML也借鉴了HTML等Web技术。本章包括以下内容: MXML的构成 解析MXML的标签 命名空间
  • 31. 3.1 MXML的构成MXML是Flex架构中最核心的语言之一。因为MXML是在XML基础上设计的,所以,它具有易读、易编写等优点。
  • 32. 3.1.1 结构原理XML是一种可扩展的标记语言,其内容是一段结构性的文本。在XML中,所有的标记都使用一对尖括号(“<”和“>”)。如下面是一段典型的XML代码。 与HTML类似,MXML同样也是把某些特殊的单词指定了含义。
  • 33. 3.1.2 书写规则MXML是XML的一种扩展行语言,所以MXML继承了XML的书写规则。MXML的书写规则如下。 所有元素要有开始和结束标记。如果一个标记被打开,那么在对应的地方应该被关闭。计算机的逻辑是很严谨的,如果某个标记只有开始没有结束,系统就会发生错误。 区分大小写。XML是区分大小写的,所以MXML同样也是。在XML中是不同的两个元素标记。当然在MXML中也是不同的。 需要声明。在XML文档的第一行通常都需要声明版本和编码等信息。
  • 34. 3.2 解析MXML的标签MXML的标签(tag)和XML中的标签一样,只不过在MXML中,这些标签(tag)具有特殊 。一个标签(tag)通常所包含的信息可以通过两种方式实现:内容和属性。 1.内容 2.属性
  • 35. 3.3 命名空间可能也注意到了,在上述的MXML例子中,标记的开头都出现了类似mx的字样。这是XML的命名空间,说明Panel和Label等组件都是属于命名空间mx中的。 一个XML命名空间是一个命名的汇集,它由URI引用确定,在XML文件中做为元素类型和属性名使用。之所以要在XML中引用命名空间的概念,主要是为了软件模块化,使得创建的组件可以重复使用。为了避免命名上的冲突,可以在标签(tags)名称的前面加上引用的空间名。
  • 36. 3.4 小结本章主要讲解了MXML语言的基础部分,其中包括了结构原理和书写规则。而且通过示例详细解析了MXML代码的标签构成,在最后,深入剖析了MXML命名空间的原理。通过本章的学习,读者可以更加深入的了解到MXML的设计思想。在下一章中将会介绍Flex平台的另外一种比较重要的语言ActionScript。
  • 37. 3.5 习题1. MXML的书写规则有哪些? 2. 什么是XML的命名空间?
  • 38. 第4章 ActionScript 3.0 语法基础ActionScript 3.0是一种运行在Flash Player的编程语言,是由ActionScript虚拟机(AVM)执行的。ActionScript 3.0版本提供了更好的面向对象思想的设计模型,使程序员更容易编写和设计复杂的代码。ActionScript 3.0是Flex中主要的编程语言,是学习Flex技术的基础。本章包括以下内容: 变量和常量 数据类型 运算符 语句 函数
  • 39. 4.1 变量和常量变量在每种语言中都是存在的,是最基本的概念。变量是用来存储程序在运行时的临时数据的。常量相对于变量而言的,是用来存储固定的数值的。下面几节就来详细的介绍关于变量和常量的使用。
  • 40. 4.1.1 变量的声明和赋值在使用变量之前,需要对变量进行声明。如果不声明变量,就直接使用,编译器会出现错误。 在声明一个变量的时候,必须要在前面加上var,后面接着是变量的名称。声明变量的语法如下所示。 var 变量名[:数据类型] 其中,var是变量的关键字,表示声明的是一个变量;变量名是自定义的变量的名称,尽量取有意义的单词;数据类型是可以不必定义,但是为了追求代码的严谨性,最好明确定义类型。
  • 41. 4.1.2 变量的作用域在定义变量之前,要确定变量需要用在哪里,这个时候就要确定变量的作用域,即全局变量或者局部变量。全部变量是在整个类或是命名空间中都可以访问的变量,而局部变量是只有某个代码区段才可以访问的变量。全局变量通常定义在函数体的外部,而局部变量定义在函数体的内部。
  • 42. 4.1.3 声明常量常量与变量不同的是,常量是有固定数值的。一旦声明了常量,并赋值,那么该常量就不能再次赋值。要声明一个常量,需使用关键字const,而不是var。 声明常量的语法格式如下所示。 const 常量名[:数据类型] = 常量值 在声明常量的同时,必须赋值,如果不赋值,在编译代码的时候,就会出现常量没有初始化的警告。
  • 43. 4.2 数据类型变量是存储在计算机内存上的,那么这些变量的值的位是如何存在内存中的就是由数据类型决定的。数据类型分为基本数据类型和复合数据类型两种。
  • 44. 4.2.1 基本数据类型基本的数据类型包括字符串(String)、数字(Number)和布尔(Boolean)。 1.字符串类型 2.数字类型 3.布尔类型
  • 45. 4.2.2 复合数据类型复合数据类型包括对象(Object)、影片剪辑(Sprite)和数组(Array)。下面将依次讲解这三种数据类型。 1.对象类型 2.影片剪辑类型 3.数组类型
  • 46. 4.2.3 数据类型检查数据类型定义了变量以何种方式存储在计算机的内存中,如果数据类型与变量值不匹配,系统就会出现错误。为了避免数据类型与变量值不匹配的情况发生,往往在编译器或者解释器中就包含了数据类型检查的功能。通过数据类型检查,可以在编译代码的时候提早发现问题,避免在程序运惺背鱿治侍狻 数据类型检查分为编译时类型检查和运行时类型检查。 ActionScript 3.0是一种脚本语言,是在运行时进行数据类型检查的。但是同时也支持在严格模式(注:严格模式是编译器的编译模式之一,默认为严格模式。)下执行编译时类型检查。在严格模式下,两种类型检查都支持。在标准模式下,只支持运行时类型检查。 在大型项目开发时,通常都是使用编译型类型检查。因为编译型项目检查可以更及时迅速的捕获错误,并方便的定位错误。
  • 47. 4.2.4 is运算符is运算符是ActionScript 3.0新增的运算符。利用is运算符可以判断变量间的类型是否一致,返回的结果为布尔类型。
  • 48. 4.2.5 as运算符as运算符也是ActionScript 3.0中新增的运算符。利用as运算符也可以比较变量类型是否一致,但是与is运算符返回值不同,is运算符返回的值是布尔类型的,而as运算符返回的值是变量或表达式。
  • 49. 4.3 语句语句,也可以称作结构,因为它定义了程序不同的计算逻辑结构。常用的语句有判断语句、条件语句以及循环语句等。本节将会分别讲解这些语句。
  • 50. 4.3.1 if…else 语句if…else语句是用来判断一个测试条件,如果条件为真,则执行一个代码块,否则就执行另外一个代码块。其语法结构如下所示: if(逻辑表达式) { //逻辑表达式结果为真,执行代码块1,然后跳出if语句 代码块1 } else { //逻辑表达式结果为假,执行代码块2,然后跳出if语句 代码块2 }
  • 51. 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 }
  • 52. 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; }
  • 53. 4.3.4 for语句for语句是根据某个变量来获取循环的次数,然后反复的执行里面的代码。for语句的表达式有三个:一个是变量初始化,一个是逻辑表达式,还有一个是更改变量的表达式。当逻辑表达式结果为真时,执行代码块。for语句的语法结构如下所示: for(变量初始化;逻辑表达式;变量更新) { 代码块 }
  • 54. 4.3.5 for…in语句for…in语句的应用通常是循环某个对象或者数组。其语法结构如下所示: for(变量 in 集合) { 代码块 } for…in语句的流程图与for语句的一样,可以参考图4.4所示。
  • 55. 4.3.6 for each…in语句与for…in不同的是,for…in获取的是循环对象或者数组的次数,而for each…in语句是循环对象或者数组,但获取的是其内部的所有元素。其语法结构如下所示: for each(变量 in 变量集合) { 代码段 }
  • 56. 4.3.7 while语句while语句是根据逻辑表达式判断,如果为真,就反复执行里面特定的代码。其语法结构如下所示: while(逻辑表达式) { 代码段 }
  • 57. 4.3.8 do…while语句do…while语句与while语句类似,只是在判断表达式之前,执行了一次代码块。其语法结构如下所示: do { 代码块 } while(逻辑表达式)
  • 58. 4.4 函数函数是封装的一段特定的代码块,目的是为了更好的重用代码,更容易维护。函数通常是写在类中的,用大括号把一段代码封装起来。
  • 59. 4.4.1 定义函数函数是由几个部分组成的:开头是function关键字,然后是函数名,接着是用小括号扩起来的参数,每个参数用逗号隔开,还有就是用冒号标记的函数返回类型,最后就是用大括号扩起来的代码块。其语法结构如下所示: 作用域 function 函数名(参数1, 参数2, ……):返回类型 { 函数体 }
  • 60. 4.4.2 函数的返回值函数的返回值是函数完成功能之后,返回的结果值。返回值用关键字return标示,返回的类型在函数的头部,放在冒号的后面。
  • 61. 4.4.3 函数的作用域不是在任何地方都可以调用任何函数的,函数也是有权限的,这个权限就是函数的作用域。函数的作用域通常有两种:公有和私有。公有的用public关键字标识,私有的用private关键字标识。公有的可以在任意位置都访问到,而私有的只能在类之中访问。
  • 62. 4.4.4 值参数值参数就是平时最常见到的那种参数。值参数传进函数体之后,复制一个副本在函数内使用,不会影响外部变量的值。
  • 63. 4.4.5 引用参数引用参数与值参数不同,引用参数传进函数体之后,不是产生一个副本,而是传递一个参数的引用。所以,在函数内所做的更改会影响到外部引用变量的值。
  • 64. 4.4.6 默认参数默认参数是ActionScript 3.0中新增的参数,定义了默认参数后,传值时可以省略。但是默认参数必须要放在非默认参数的后面,否则就会产生编译错误。
  • 65. 4.5.7 arguments对象参数arguments对象是一个数组,其中保存着所有传递过来的参数的信息。可以应用arguments对象获取所有参数信息,arguments.length 属性可以获取参数的个数。
  • 66. 4.4.8 ...(rest) 参数...(rest) 参数也是actionscript3中新增的参数,这个参数可以接受多个以逗号分隔的参数。
  • 67. 4.5 小结本章主要讲解了ActionScript 3.0的语法基础,包括了变量、数据类型、语句以及函数等。在讲解中使用了一些简单易懂的代码,力求读者更好的理解其语法特性。下一章将会讲解Flex中的事件机制,深入探讨事件的触发原理。
  • 68. 4.6 习题1. 如何声明一个变量并赋值? 2. 数据类型都有哪些? 3. 编写一个简单的含有判断语句的代码? 4. 如何定义函数及其参数?
  • 69. 第5章 事件和事件机制事件是在程序运行中,触发的一个响应。在ActionScript 3.0中,事件的处理得到了统一并且更符合标准,统一用单一的事件处理模型,废弃了之前版本的众多的事件处理机制。本章将会详细介绍ActionScript 3.0中的新的单一的事件处理机制。
  • 70. 5.1 事件的概述事件是系统与用户之间直接的交互方式。当用户向系统发出指令,就相应的产生了一个事件,通过事件,用户就可以与系统对话。例如,当用户单击鼠标的时候,就会产生一个鼠标单击的事件,系统就会根据用户单击的对象,来判断用户发出的指令。对象是保存数据的按钮,那么,用户单击之后,程序就会执行保存数据的事件函数。
  • 71. 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
  • 72. 5.1.2 Event类Event类是所有Event对象的基类。对于大部分的事件,使用Event类就足够了,但是,有些事件需要更加精细的操作。例如鼠标的单击事件,使用的是MouseEvent类。这些类都是Event类基础上的扩展。
  • 73. 5.2 定义事件在Flex中,可以在两个地方定义事件,一个是在MXML组件中,事件是放在相应的属性中。另一个是在ActionScript代码中,使用事件类定义。
  • 74. 5.2.1 在MXML中定义事件在使用MXML创建组件的同时,也可以在其属性中设置事件。
  • 75. 5.2.2 在ActionScript中定义事件很多时候不方便在MXML创建的组件中定义事件,如组件是根据动态数据动态创建的。这些时候就需要使用ActionScript代码来动态的定义事件。
  • 76. 5.3 事件的类型事件的类型有几种,其中常见的包括鼠标事件、键盘事件、文本事件、加载进度事件等等。本节主要讲解了三个常用的事件:鼠标事件、键盘事件和时间事件。下面对这三个事件作详细介绍。
  • 77. 5.3.1 鼠标事件当鼠标的事件发生的时候,都会产生一个MouseEvent对象。在鼠标事件中包括包括了鼠标单击、双击、滚轮、弹起、按下、经过等事件。
  • 78. 5.3.2 键盘事件当用户按下键盘的时候,就会产生一个KeyboardEvent对象。KeyboardEvent对象中包含键盘按下和弹起的事件。
  • 79. 5.3.3 时间事件时间事件实际上相当于一个定时器,当达到指定的时间间隔的时候,就会触发事件函数。
  • 80. 5.4 小结本章详细讲解了Flex事件的机制,并讲述了如何定义事件以及事件的使用。通过本章的学习,读者应能了解事件的机制,可以根据实际情况自定义事件。从下一章开始,将讲述Flex组件的应用。
  • 81. 5.5 习题1.在MXML中如何定义一个事件? 2.如何使用ActionScript定义一个事件?
  • 82. 第6章 文本设计在大多数应用程序中。文本是不可或缺的元素之一。在Flex 3中提供了一系列的文本控件,其功能是用来显示文本文字以及让用户输入文本等等。本章将详细讲解如何应用这些文本控件,进行交互式文本设计。本章包括以下内容: 简单文本设计 文本框的设计 文本域的设计 文本编辑器的设计
  • 83. 6.1 文本的显示在Flex中,提供了可以用来显示文本的控件Lable和Text。Lable控件可以显示纯文本,而Text控件既可以显示纯文本,也可以显示HTML格式的文本。
  • 84. 6.1.1 使用Label控件显示文本创建一个文本显示Lable控件有两种方式:一种是直接拖放控件到设计视图中;另一种是编写代码。第一种方式拖放控件到设计视图中相对直观,不用编写代码。在开发小型的应用程序的时候,可以提高开发效率。
  • 85. 6.1.2 使用Text控件的text属性显示文本通过设置Text控件的text属性,可以显示纯文本。
  • 86. 6.1.3 使用Text控件的htmlText属性显示文本使用Text控件,除了可以创建纯文本显示外,还可以通过设置htmlText属性显示HTML格式的超文本,如字体的颜色、大小、超链接、粗细等等。
  • 87. 6.2 单行文本框的设计文本框是系统与用户交互最基本的控件。在Flex中也提供了一个可以输入单行文本的文本框。使用TextInput控件可以创建一个单行的文本框。本节会详细讲述如何使用TextInput控件设计单行文本框。
  • 88. 6.2.1 使用TextInput控件设计文本框TextInput控件是Flex提供的,用来输入单行文本的控件。使用时,可以直接在设计视图中拖放到设计窗口中,也可以在代码视图中编写代码。
  • 89. 6.2.2 动态定义文本框的内容使用ActionScript代码可以动态的定义文本框的内容。通过定义Text控件的text属性的值,可以动态的改变文本框的内容。 很多实际应用开发中经常会遇到这种情况,如在用户填写某些表单之前,会根据该表单的填写习惯或者其他信息,预先赋值,之后用户再根据实际情况修改。
  • 90. 6.2.3 动态创建文本框动态创建文本框很简单,只要遍历地创建一个文本框,设置属性,并添加到页面中即可。
  • 91. 6.3 多行文本的设计除了单行文本框外,Flex中还提供了多行文本的控件,用作多行文本的设计。使用多行文本不仅可以显示纯文本内容,还可以显示HTML格式的超文本内容。本节将详细讲述多行文本框的设计。
  • 92. 6.3.1 使用TextArea控件显示多行文本在Flex中提供了一个多行文本输入控件TextArea。使用这个控件可以使用户输入多行的文本。
  • 93. 6.3.2 在多行文本框中显示HTML文本在多行文本框中,除了可以显示纯文本内容之外,还可以显示HTML格式的内容文本。要显示HTML格式的文本,需要在htmlText属性里面设置内容。
  • 94. 6.4 文本编辑器的设计多行文本框在显示HTML格式内容的时候,是通过htmlText属性的HTML代码实现的。普通用户是不懂得HTML代码的,如果普通用户要自己设置HTML格式文本,就需要有个所见即所得的编辑器。在Flex中,就提供了这样的HTML文本编辑器。本节将详细讲解使用RichTextEditor控件设计文本编辑器。
  • 95. 6.4.1 使用RichTextEditor控件创建一个文本编辑器在Flex中,可以使用RichTextEditor控件设计一个所见即所得的文本编辑器。在编辑器中,用户可以设置字体、字体大小和颜色、对齐方式、粗细等。
  • 96. 6.4.2 添加和移除文本编辑器的工具栏内容默认情况下RichTextEditor编辑器的工具栏中,只有几个工具按钮。通过toolbar属性的addChild()方法可以自定义添加和移除工具栏的内容,使得编辑器的功能得以扩展。
  • 97. 6.5 获取选择的文本为了增加用户的交互性,提供更加友好的界面和操作,需要获取文本框中选择的文本。实际应用的例子很多,如查找和替换文本的部分内容等。在Flex中,同样也提供了方法可以方便的获取选择的文本。
  • 98. 6.5.1 获取文本框中选择的文本获取文本框中选择文本的方式是通过TextRange类,被选择的文本则保存在TextRange类的text属性的值中。
  • 99. 6.5.2 获取文本编辑器中选择的文本同样的,使用TextRange类也可以获取文本编辑器中选择的文本。不同的是,要获取HTML格式的文本,需要使用htmlText属性。
  • 100. 6.6 本章实例:HTML文本编辑器在目前最流行的Blog网站中,也提供了编写Blog日志内容的编辑器。大部分编辑器既为普通用户提供了所见即所得的视图界面,同时也为高级用户提供了HTML代码页面,可以手动编写HTML代码。这种两种视图之间切换的功能使用Flex也同样可以轻松的实现。 【实例6-1】本例仿照Blog系统中的文本编辑器,实现设计界面和视图界面互相切换的效果和功能。
  • 101. 6.7 小结本章主要讲解了如何在Flex中进行文本设计,其中详细的讲解了基本文本的显示、单行和多行文本框的设计以及文本编辑器的设计。在常用的表单中,单行和多行文本框是应用最多的,需要重点掌握。同时,在学习了文本编辑器的设计之后,读者也能够结合其他知识,独立设计一个功能强大的文本编辑器。下一章将讲述按钮的设计。
  • 102. 6.8 习题1. 如何在界面中显示一段HTML格式的文本? 2. 如何动态的创建文本框? 3. 怎么样在多行文本框中显示HTML格式的文本? 4. 如何获取文本框选择的内容?
  • 103. 第7章 按钮设计按钮是设计中最常用到的界面元素之一,大部分与用户交互的设计都是通过按钮来实现的。Flex中的按钮控件分为几种,在本章中将会一一介绍这些按钮控件的使用。本章包括以下内容: 普通按钮的设计 按钮条的设计 单选框的设计 复选框的设计 弹出式按钮的设计 文本链接按钮的设计
  • 104. 7.1 普通按钮的设计普通按钮在大部分应用程序中都会出现,使用的频率非常高。按钮是最简单直接的来与用户交互的方式之一,在Flex中也提供了按钮Button控件,该控件如图7.1所示。
  • 105. 7.1.1 使用Button控件设计按钮在Flex中提供了按钮Button控件,用来设计按钮。按钮的设计相对简单,只需从工具面板中将其拖放到设计窗口即可。重点看的是生成按钮Button控件之后的MXML代码。
  • 106. 7.1.2 按钮中嵌入图片在设计按钮样式时,除了可以更改按钮的文字外,还可以在按钮中嵌入图片资源。
  • 107. 7.1.3 设置按钮样式在设计按钮的样式中,不只能只显示一种图片,还可以根据不同的按钮状态显示不同的按钮样式。如当鼠标经过、按下、释放等状态时,都会有各自状态的图片显示。
  • 108. 7.1.4 按钮事件在按钮设计中,除了通过设置相应属性改变标签描述和样式外,应用最多的还是按钮事件,尤其是按钮的单击事件。
  • 109. 7.2 单选框的设计在用表单调查表中,可以使用选择框来减少用户的操作。单选框是在一组选择框中只能选取一个选项,在限制选项选择时最为有用。
  • 110. 7.2.1 使用RadioButton控件设计单选框在Flex中,提供了单选框RadioButton控件,使用此控件可以设计单选框按钮。
  • 111. 7.2.2  使用单选框组单选框是可以以分组的形式组合在一起的,这样就可以同时有多个最别的单选框可供选择。
  • 112. 7.2.3 一个简单的加减法计算器计算器是平时最常用的工具,本节将会使用单选框组件,创建一个简单的加减法计算器。
  • 113. 7.3 复选框的设计除了单选之外,多选也是平时用的最多的。在Flex中同样也提供了相应的复选框的控件,以提供选择多个内容的表单方式。
  • 114. 7.3.1 使用CheckBox控件设计复选框创建一个按钮CheckBox控件有两种方式:一种是直接拖放控件到设计视图中;另一种是编写代码。第一种方式拖放控件到设计视图中相对直观,不用编写代码。在开发小型的应用程序的时候,可以提高开发效率。
  • 115. 7.3.2 使用ActionScript控制复选框在实际开发中,通常会遇到使用ActionScript脚本语言来获取或设置复选框的内容的情况。本节将会讨论如何使用ActionScript脚本语言获取多个复选框的内容。
  • 116. 7.3.3 动态创建复选框很多情况下,都需要动态的创建复选框。动态创建复选框就会使用到ActionScript语言,动态的创建,动态的设置其属性和事件。本节将会讲述如何动态的创建复选框,并动态的设置属性和事件。
  • 117. 7.4 弹出式按钮的设计弹出式按钮是有两个横向排列的按钮组成的,一个是主体按钮,另一个是一个小的弹出式按钮。当使用鼠标单击这个弹出式按钮的时候,就会弹出一个菜单。本节将会详细讲述弹出式按钮的设计。
  • 118. 7.4.1 创建PopUpButton控件在Flex中,已经提供了设计弹出式按钮的控件。使用PopUpButton控件,可以很容易的设计出一个弹出式按钮。
  • 119. 7.4.2 获取弹出式按钮菜单的内容上节讲述了如何创建一个弹出式菜单内容,本节将会讨论如何获取弹出菜单的数据项内容。
  • 120. 7.5 链接按钮的设计链接按钮是一个以文本链接形式的按钮,使用链接按钮可以在浏览器中打开一个链接。本节将会详细讲述如何设计一个链接按钮。
  • 121. 7.5.1 创建LinkButton控件在Flex中提供了设计链接按钮的控件,使用LinkButton控件就很容易设计出一个链接按钮。
  • 122. 7.5.2 设置样式如果链接按钮的默认样式不能满足需求,还可以自定义按钮的样式。
  • 123. 7.6 本章实例:简易计算器计算器是日常生活中最常见也是最常用到的计算工具,本章将会制作一个简易计算器,并详细讲解其设计思路和相关算法。
  • 124. 7.7 小结本章主要讲解了按钮的设计,其中包括普通按钮、单选框、复选框、弹出式按钮以及链接按钮。通过本章的学习,读者应能对按钮的设计和相应的事件有比较深刻的理解和认识,在实际开发中,对按钮的设计应用自如。下一章将介绍数据绑定控件的使用。
  • 125. 7.8 习题1. 如何在Button控件中嵌入图片资源? 2. 如何创建一个单选按钮组? 3. 如何创建一个弹出式按钮? 4. 使用链接如何链接到外部信息?
  • 126. 第8章 数据绑定在呈现单个数据的时候,可以使用文本控件。那么在呈现多条数据的时候,如何表现出来呢?在Flex中就已经提供了呈现多条数据的各种数据绑定控件,使用这些控件,就可以设计出各种样式的数据列表。本章包括以下内容: 数据列表 横向数据列表 交叉数据列表 下拉列表 数据网格 树列表
  • 127. 8.1 数据列表在呈现一个一维数据集合的时候,使用数据列表是最直观方便的。默认情况下,数据列表是一列多行的形式,即纵向的呈现数据。本节将会详细介绍如何设计一个数据列表。
  • 128. 8.1.1 使用List控件创建数据列表在Flex中,已经提供了一个数据列表List控件。将数据列表List控件与相关的数据集绑定,便可以在数据列表中呈现需要的数据。
  • 129. 8.1.2 使用ActionScript在List控件中绑定数据除了在List控件的内部直接填充数据外,还可以使用ActionScript脚本语言在外部定义数据。通过使用ActionScript语言定义的数据集与控件List绑定,也可以呈现出来,并且比之前在内部定义的方法更灵活和有效。
  • 130. 8.1.3 获取List控件的数据能够获取到List控件中项的数据,是与用户交互的直接手段。获取List控件中已选择的数据项通常使用selectedItem方法。
  • 131. 8.1.4 在数据中嵌入图片除了在数据列表List控件中填充数据外,还可以在数据中嵌入图片资源。嵌入资源后的数据列表List控件,表现会更加丰富。
  • 132. 8.2 横向数据列表多条数据除了以纵向的方式呈现外,还可以用横向的方式呈现。本节将会讲解如何在Flex中设计一个横向的数据列表。
  • 133. 8.2.1 使用HorizontalList控件在Flex中,提供了一个横向列表的控件HorizontalList,使用HorizontalList可以设计一个横向列表的多条数据呈现。
  • 134. 8.2.2 自定义ItemRenderer属性在上一节中,通过ItemRenderer属性定义了子数据项的类型Image。除了可以定义一个系统集成的数据类型外,还可以自定义一个ItemRenderer属性的值。
  • 135. 8.3 二维数据列表除了纵向或横向的呈现数据外,还可以自定义的以二维的形式呈现数据。这种方式更加灵活,开发者可以根据实际情况,设置行数和列数。本节将会详细讲述如何设计一个二维数据列表。
  • 136. 8.3.1 使用TileList控件在Flex中,已经提供了可以设计二维数据列表的控件TileList。通过设置此控件的相关属性,就可以定制列数和行数。
  • 137. 8.3.2 获取TileList控件中的数据获取TileList控件中的数据是与用户交互的最主要的应用。要获取TileList控件中的某条数据项,需要通过设置其单击事件。本节将讲解如何获取TileList控件中的某条数据项内容。
  • 138. 8.4 下拉列表相比较与数据列表,下拉列表则有节省空间等优点。本节将详细讲述如何设计一个下拉列表。
  • 139. 8.4.1 使用ComBox控件在Flex中,提供了下拉列表ComBox控件。下拉列表ComBox控件的数据源可以有两种方式,一种是Object类型,另一种是String。其中Object类型可以同时存储相关数据的属性,如编号等。
  • 140. 8.4.2 获取下拉列表中的数据通过单击事件,就可以获取下拉列表中选择的数据项。
  • 141. 8.5 数据网格数据网格是最常用的数据呈现方式之一,对某些较为复杂的数据只能用数据网格的方式表现。本节将详细讲述数据网格的设计。
  • 142. 8.5.1 使用DataGrid控件在Flex中已经提供了数据网格DataGrid控件,使用这个控件可以实现二维数据列表的呈现。本节将会讲述如何使用数据网格DataGrid控件,并填充数据集。
  • 143. 8.5.2 定义DataGrid控件的列默认情况下,DataGrid控件列的标题为字段名称。通过设置DataGridColumn属性可以自定义列的标题。
  • 144. 8.5.3 获取DataGrid控件的数据想要获取DataGrid控件中指定单元格的数据,需要通过单击事件,使用selectedItem属性得到。
  • 145. 8.5.4 DataGrid控件的排序在查看网格数据的时候,用户常常需要按照一定的循序查找数据,以最快捷的方式找到需要的数据。排序功能可以做到上述要求,使用户按照自己的方式查找数据。本节将会讲述如何设计一个带有排序功能的网格数据控件。
  • 146. 8.6 树形式的呈现方式树是以节点为基础向下延伸的呈现数据的方式。通常树被用作数据导航,但同时,树也需要外部或内部的数据加以绑定。本节将会讲解如何设计树的数据呈现方式。
  • 147. 8.6.1 使用Tree控件在Flex中提供了树Tree控件,使用该控件,可以使数据以树的形式表现出来。通常绑定在Tree控件的数据是XML格式的对象。
  • 148. 8.6.2 获取Tree控件的数据项获取Tree控件的数据项的方法是通过change事件,selectedItem属性中记录了选取数据项的内容。
  • 149. 8.7 本章实例:商品列表【实例8-1】本例制作一个在线商店中一个比较重要的功能——商品列表,这个列表使用了TileList控件。
  • 150. 8.8 小结本章主要讲解了数据绑定控件,包括数据列表、下拉列表、数据网格、树等控件。通过这些控件可以很好的把数据结果呈现出来。本章的重点是创建数据源并与数据控件绑定。下一章将会讲解有关图标的设计。
  • 151. 8.9 习题1.如何把数据绑定到数据列表控件中,并显示出来? 2.读取XML数据,并在DataGrid中显示出来? 3.如何在下拉列表中填充数据? 4.如何将数据在树控件中显示出来,并获取选中的数据项?
  • 152. 第9章 图表设计对于普通用户来说,在图表中展示数据看起来更直观有效。相比较使用简单的二维表格来说,图表中的数据可以是各种形状和颜色。本章将会详细讲述如何设计数据图表。本章包括以下内容: 图表组件概述 图表类型 格式化图表 使用事件和效果
  • 153. 9.1 图表组件概述图表主要就是由一个或几个数据序列构成。在Flex中提供了丰富的图表组件,通过这些组件可以创建各种二维的数据序列图表。
  • 154. 9.1.1 关于数据图表数据图表的形式可以使得数据和数据关系很容易以图形的方式呈现出来。图表是一个使用二维关系数据的呈现类型。在Flex中,提供了很多常用的二维数据关系图表形式的组件,如条型、圆柱型、圆饼等,使用这些组件可以方便的创建一个二维图表。 一个简单的图表就是一个数据序列,序列就是一组关联的数据点。如一个数据序列可以是某个公司的月销售情况或者是一段时间某个股票的价格情况等,这些都可以看作一个一个数据序列。图9.1就是一个图表,该图表是一个某公司前三个月利润和费用的数据序列。
  • 155. 9.1.2 使用图表控件Flex中提供的图表控件可以创建大部分日常需要的图表类型,也可以根据需要自定义图表。图表控件位于包import mx.charts.*内,这些图表类型的具体应用会在9.2节中详细介绍。 一个图表类型对应一个图表控件类和一个图表序列类。其对应关系见表9.1所示。图表类型图表控件类图表序列类AreaAreaChartAreaSeriesBarBarChartBarSeriesBubbleBubbleChartBubbleSeriesCandlestickCandlestickChartCandlestickSeriesColumnColumnChartColumnSeriesHighLowOpenCloseHLOCChartHLOCSeriesLineLineChartLineSeriesPiePieChartPieSeriesPlotPlotChartPlotSeries
  • 156. 9.1.3 定义数据源在图表设计中,数据的表现主要依靠数据源,所以定义数据源是最重要的工作。在Flex提供的图表组件中,都定义了一个有关数据源的属性dataProvider。通过设置dataProvider属性,可以把图表组件的数据与数据源关联。 本节按照数据源的种类,讲解如何定义一个数据源,并在图表中表现出来。按照数据源提供的方式,可以分为两种:内部数据源和外部数据源。 1.内部数据源 2.外部数据源
  • 157. 9.2 图表类型为了方便的创建各种类型的图表,在Flex中提供了很多不同类型图表控件。本章将会详细介绍如何使用这些控件来创建不同类型的图表。
  • 158. 9.2.1 区域型图表通过一个连接数据值的线,在线的下面绘成一个有颜色的数据区域,这种图表就是区域型图表。可以通过图标或者符号来表现在线上的每个数据点。通过在Flex中提供的区域型图表AreaChart控件,可以很放方便的创建一个带有数据的区域型图表。
  • 159. 9.2.2 条型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件BarChart,使用BarChart可以创建一个条型图表。
  • 160. 9.2.3 泡沫型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件BubbleChart,使用BubbleChart可以创建一个条型图表。
  • 161. 9.2.4 烛台型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件CandlestickChart,使用CandlestickChart可以创建一个条型图表。
  • 162. 9.2.5 线型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件LineChart,使用LineChart可以创建一个条型图表。
  • 163. 9.2.6 圆饼型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件PieChart,使用PieChart可以创建一个条型图表。
  • 164. 9.2.7 混合型图表通过条型图表可以表现一个横向或纵向序列的数据。在Flex中同样也提供了这样的组件ColumnChart,使用ColumnChart可以创建一个条型图表。
  • 165. 9.3 格式化图表在创建图表中,可以格式化图表中的元素,如标签字体、图例等。通过使用CSS样式设置样式属性,还可以改变图表的外观。本章将会详细讲解如何格式化图表的样式。
  • 166. 9.3.1 创建样式通过CSS样式可以改变图表的外观。
  • 167. 9.3.2 设置间隔大小除了设置标签的字体外,还可以设置图表序列的样式,如间隔、颜色等。
  • 168. 9.4 本章实例:股票分析系统【实例9-1】本例制作一个简单的股票分析系统。该系统通过网络上提供的Web服务获取数据源,并在图表控件中呈现出来。
  • 169. 9.5 小结本章主要讲解了图表系列组件的应用,其中包括了大部分常用的图表类型。重点讲解了如何使用数据源与图表绑定,设置图表中的显示样式等。下一章将要讲解其他一些常用的交互式控件。
  • 170. 9.6 习题1.创建一个区域型图表,绑定数据源并显示出来? 2.如何创建一个混合型图表? 3.如何改变图表的样式? 4.怎么样可以格式化图表?
  • 171. 第10章 其他交互设计在交互设计控件中,除了文本控件、按钮控件和图表控件等之外,还有其他一些比较实用的交互式控件,如数字选择器、颜色选择器、警告框、进度条等等。本章将详细讲解如何应用其他这些常用的控件,进行交互式设计。本章包括以下内容: 数字选择器 日期显示 加载外部swf文件 加载图像 颜色选择器 警告框的设计 进度条的设计 滚动条的设计
  • 172. 10.1 数字选择器数字选择器NumericStepper控件的主要是用来选择数字的,是由一个文本域和两个上下箭头的按钮组成。除了使用两个上下箭头的按钮选择数字之外,还可以通过键盘的上下方向键选择。在很多方面的应用都会使用到数字选择器NumericStepper控件,如日期的年月日、时间的时分秒等。数字选择器NumericStepper控件如图10.1所示。
  • 173. 10.1.1 创建NumericStepper控件创建一个数字选择器NumericStepper控件有两种方式:一种是直接拖放控件到设计视图中;另一种是编写代码。第一种方式拖放控件到设计视图中相对直观,不用编写代码。在开发小型的应用程序的时候,可以提高开发效率。
  • 174. 10.1.2 设置NumericStepper控件数字选择器NumericStepper控件有两个很重要的属性:Minimum和Maximum。Mnimum表示选择数字的最小值。Maximum表示选择数字的最大值。
  • 175. 10.1.3 构建一个复合型的日期控件在很多的应用程序中,都会涉及到日期的添加,如出生年月、入职时间、离职时间等等。本节将会应用NumericStepper构建一个复合型的日期控件。在日期控件的组成中,除了NumericStepper控件之外,还有Label控件。Label控件用来显示文字说明,如年、月、日等。
  • 176. 10.2 日期显示日期可以通过两种控件来显示,一个是DateChooser控件,另一个是DateField控件。DateChooser控件是以日历的形式显示的,而DateField控件则是以文本的形式显示的。
  • 177. 10.2.1 使用DateChooser控件实现日期选择DateChooser控件是一个日历形式的控件,在头部显示了年份和月份的名称,主体部分则是以网格的显示排列了当前年份和月份的所有的天。用户可以从中选择任意的一天。
  • 178. 10.2.2 使用DateField控件实现日期选择DateField控件是一个以文本形式显示的日期控件。在文本框的右侧是一个日历的小图标,当用户单击图表的时候,会弹出一个包含DateChooser控件的窗口。用户选择了一个日期之后,选择的日期会填充到文本框中,同时,此窗口会自动关闭。DateField控件的主要应用在表单等的操作上。
  • 179. 10.2.3 使用日期类日期类中包含了一些常用的关于日期的方法,使用这些方法,可以很方便的获取日期信息。
  • 180. 10.2.4 设置DateField控件的日期格式在实际开发过程中,经常会需要自定义某些特殊的日期格式,以满足需要。使用formatString属性就可以设定DateField控件的日期格式。formatString属性的值可以设定为诸如MM、DD、YY和YYYY等字符的组合。
  • 181. 10.2.5 设置DateChooser控件的中文显示默认情况下,DateChooser控件是显示英文的月份和周的。
  • 182. 10.3 加载外部SWF文件如果在一个Flex应用程序中,把另一个Flex应用程序作为SWF文件加载进来,就需要使用SWFLoader控件。
  • 183. 10.3.1 创建SWFLoader控件SWFLoader控件的主要用途就是加载外部的SWF文件,这个文件可以Flash CS3编译生成的,也可以是Flex Builder 3编译生成的。 默认情况下SWF文件的内容可以自适应SWFLoader控件的大小。SWFLoader控件除了加载SWF文件格式外,也可以加载其他的文件格式到Flex应用程序中,如GIF、JPEG、PNG、SVG等。 定义一个SWFLoader控件可以在代码中使用标记,也可以直接从工具面板中拖放控件到主窗口中。
  • 184. 10.3.2 与已加载的SWF文件交互把SWF文件加载到Flex程序中后,首要的问题就是怎么样能与这个SWF文件交互,即访问这个SWF文件的相关内容。首先看一下怎么样使用SWFLoader控件,在一个Flex程序中加载另一个Flex程序。 1.访问已加载的SWF文件中的控件 2.访问已加载的SWF文件中的变量 3.访问已加载的SWF文件的方法
  • 185. 10.4 加载图像在Flex应用程序中,也可以实现加载图像的功能。Flex支持绝大部分主流的图片格式,包括GIF、JPEG、PNG、SVG等等。
  • 186. 10.4.1 创建Image控件在Flex中,加载图像的常用方法之一就是使用Image控件。
  • 187. 10.4.2 加载图像除了设置Image控件的Source属性直接加载图像外,还可以使用代码来控制图像的加载。加载图像主要使用Image控件的load()方法。
  • 188. 10.5 颜色选择器颜色选择器允许用户从一个下拉式的颜色面板中,选择适合的颜色值。颜色选择器主要应用于文本编辑器,更换控件样式颜色等。
  • 189. 10.5.1 创建ColorPicker控件在Flex中,已经提供了ColorPicker控件来创建颜色选择器。
  • 190. 10.5.2 自定义面板显示的颜色默认情况下,颜色面板会列出系统所有的颜色。当然,通过代码还可以自定义面板中列出的颜色。自定义颜色通过ColorPicker控件的dataProvider属性,与数组绑定,然后可以在数组中定义要列出的颜色的值。
  • 191. 10.5.3 自定义面板显示的标签除了可以自定义颜色的值外,还可以定义颜色标签的描述。其方法与10.5.2节类似,也是通过绑定数组。不同的是,需要定义一个数组集合,其中定义了颜色标签、颜色值和描述。
  • 192. 10.6 警告框的设计警告框是在实际开发中使用最多的功能。在Flex中,提供了一个Alert类来实现警告框,其中定义了一个全局的静态方法show()。
  • 193. 10.6.1 创建警告框所有的Flex组件都可以调用Alert类中的静态方法show(),弹出一个带有消息的模式警告框。
  • 194. 10.6.2 警告框的事件默认情况下,弹出的警告框只有OK按钮。使用Alert类还可以设置其他的按钮和显示数量,并且还可以侦听到警告框中按钮的事件。
  • 195. 10.6.3 自定义警告框的按钮标签默认情况下,警告框的按钮标签是英文的。通过Alert类,可以设置其按钮标签,使其成为中文。
  • 196. 10.6.4 设置提示框的文本大小从10.6.3节中的示例可以看出,在警告框设置成中文后,文字较小而且模糊不清。要解决这个问题,就需要通过样式来设置按钮标签文本的大小。使用Alert类,还可以设置警告框的宽度和高度。
  • 197. 10.6.5 设置提示框的图标默认情况下,警告框是没有任何图标的。但是,可以通过Alert类的参数,自定义一个警告框的图标。
  • 198. 10.7 进度条的设计进度条可以用来显示某个任务执行的进度,如文件下载、播放位置等。进度条可以使程序操作界面更加人性化、更加直观。本章将详细讲述Flex中进度条的设计。
  • 199. 10.7.1 创建ProgressBar控件创建一个ProgressBar控件是相当容易的,只需要把控件拖放到设计窗口,并设置其属性Source即可。
  • 200. 10.7.2 设置进度条的标签默认情况下,进度条的标签显示的是英文描述。通过其属性Label的值,可以设置为中文显示。在标签属性中,有一些特殊字符代表了特殊的含义。这些特殊字符表示的含义如下所示。 %1:已经加载的字节数。 %2:字节总数。 %3:加载的百分比。 %%:百分比符号(%)。
  • 201. 10.8 本章实例:日程管理日程管理是大部分的办公系统中都有的功能。它是根据日期来添加当天的日程或任务。
  • 202. 10.9 小结本章主要讲解了除了按钮、文本等设计之外的其他交互设计。其中,涵盖了比较常用的设计,如日期显示、加载图像、颜色选择器、警告框和进度条等。在深入了解了这些功能之后,读者在实际开发中,可以设计出更加人性化的表现层界面。下一章将讲解Flex界面的布局。
  • 203. 10.10 习题1.怎么样设置数据选择器输入的最大值和最小值? 2.在一个Flex程序中,怎么样加载另一个Flex程序,并访问其成员变量? 3.怎么样自定义一个颜色选择器的颜色和标签? 4.如何捕获警告框的按钮单击事件?
  • 204. 第11章 定位和布局布局是把界面中的元素(如按钮、下拉列表等控件)按照一定的等级结构排列起来。布局的作用在于优化界面、设计更好的更加人性的操作环境。本章包括以下内容: Canvas容器 Box容器 DividedBox容器 表单布局 网格定位 Tile布局 面板 弹出窗口
  • 205. 11.1 Canvas容器Canvas布局容器可以看作是具有和顶部容器Application相同功能的子容器,其中可以嵌入各种Flex组件。Canvas布局容器定义了一个矩形的区域,在区域中可以放置子容器和控件。
  • 206. 11.1.1 使用Canvas容器布局在MXML代码块中,可以使用标记来创建Canvas容器。在Canvas容器中,使用id属性可以标识控件的唯一性,使用x和y坐标值可以很好的定位。
  • 207. 11.2 使用Box布局容器Box布局容器提供了一种横向或纵向的布局方式。默认情况下,Box布局是纵向的。通过设置属性direction的值可以改变布局的方式。 HBox和VBox布局容器是Box布局容器的一种简化形式,提供了快速的横向和纵向的布局
  • 208. 11.2.1 使用Box容器使用标识符可以创建一个Box布局容器。通过属性direction可以设置布局方式是横向的(horizontal)还是纵向的(vertical)。
  • 209. 11.2.2 使用HBox和VBox容器实现横向或纵向的布局HBox和VBox布局容器就相当于Box布局容器设置属性direction之后的效果。HBox布局是横向排列子组件,而VBox是纵向的。
  • 210. 11.3 使用DividedBox容器布局DividedBox布局容器也提供了横向或纵向排列的形式。与Box布局容器不同的是,在每一个子容器之间都放置了一个可调节的间隔条。通过鼠标单击这个间隔条,可以调节每个子容器的区域大小。
  • 211. 11.3.1 创建DividedBox容器使用标识符可以创建一个DividedBox布局容器。通过属性direction可以设置布局的排列方式。默认情况下,DividedBox布局容器中的子控件是纵向排列的。
  • 212. 11.3.2 使用HDividedBox和VDividedBox容器实现可调控的布局HDividedBox和VDividedBox布局容器提供了与DividedBox类似的布局方式。实质上,这两个布局容器是DividedBox布局容器的特殊形式,与设置了属性direction的值起到同样的效果。
  • 213. 11.4 表单布局在Web应用程序中,表单是搜集用户信息的常用方式。表单常常被用来搜集注册、购买或其他数据信息等。
  • 214. 11.4.1 创建表单在Flex中,支持使用Form容器来创建一个表单。通过使用FormHeading还可以设置表单的头部信息。
  • 215. 11.4.2 设置间隔表单内容之间的间隔可以通过verticalGap和indicatorGap来调节。
  • 216. 11.4.3 表单验证在表单提交之前,往往需要验证表单内容的正确性。
  • 217. 11.5 网格定位在Flex中提供了网格布局的支持,使得可以像HTML中表格那样布局。网格组件的使用非常类似于HTML中的Table。
  • 218. 11.5.1 使用网格定位可以使用标记符创建网格布局容器,这个就相当于HTML表格中的标签。表示网格中的一行,相当于标签。表示单元格,相当于
    标签。
  • 219. 11.5.2 网格容器之间的嵌套在复杂的页面布局中,常常会使用到几个网格Grid布局容器之间的嵌套。Grid网格的嵌套就像是HTML中Table的嵌套一样。
  • 220. 11.6 Tile布局Tile布局可以任意排列子控件,与其他容器不同的是,Tile布局容器是根据宽度来自动调整行和列数量的。
  • 221. 11.6.1 使用Tile布局使用标签可以定义一个Tile布局容器。
  • 222. 11.6.2 设置Tile布局通过设置tileWidth、paddingTop、verticalGap等属性,可以调整容器中子控件之间的间隔、大小宽度等。
  • 223. 11.7 使用面板一个完整的面板容器包含了标题栏、标题、状态栏和主体内容。面板通常是以功能块为单位分隔。
  • 224. 11.7.1 创建Panel容器可以使用标签来定义一个面板容器。在面板中可以放置其他类型的组件、容器等。
  • 225. 11.7.2 添加ControlBar控件使用ControlBar控件可以设置面板的状态栏区域。ControlBar控件通常被创建在面板Panel容器内。
  • 226. 11.8 弹出窗口TitleWindow布局容器实际上是一个弹出窗口的面板容器。与面板Panel布局容器不同的是,TitleWindow有一个关闭按钮,用户还可以拖动这个窗口。这个弹出可以是模态的,也可以是非模态的。
  • 227. 11.8.1 创建TitleWindow容器要创建一个弹出窗体,需要用到PopUpManager类。在此类中createPopUp()方法可以创建一个弹出窗体。其语法格式为: public static createPopUp(parent:DisplayObject, class:Class, modal:Boolean = false):IFlexDisplayObject 参数说明: parent:父对象。 class:弹出窗体的类。 modal:是否为模态窗体。
  • 228. 11.8.2 向弹出的窗口传递数据通过PopUpManager类创建弹出窗体的对象,可以获取弹出窗体的数值。
  • 229. 11.9 本章实例:通讯录通讯录是日常应用中必备工具之一,使用通讯录可以轻松查找和添加联系人的信息。 【实例11-1】本例制作一个简单的通讯录功能,添加的数据项暂时保存在客户端的数组集合中。删除某一个数据项时,给出提示信息。
  • 230. 11.10 小结本章主要讲解了Flex中定位和布局。每种布局容器应用的场合有所不同,表单容器应用于表单信息添加。网格布局容器是最灵活的,类似于HTML中的表格。面板容器可以使得每个功能模块分开。
  • 231. 11.11 习题1.如何使用表单控件创建一个表单? 2.如何创建一个面板,并向其中添加子组件? 3.如何定义一个弹出窗体? 4.是否可以嵌套多个定位布局组件,如何实现?
  • 232. (本页无文本内容)