Flex2开发者指南
原著:Adobe公司
《Flex2 Developer’s Guide》翻译小组 译
目录
第一章 关于Flex文档................................................................................. 1 本手册的使用 ......................................................................................... 1 访问Flex文档 .......................................................................................... 1 排版约定.................................................................................................. 2 第二章 使用MXML开发应用程序 ........................................................... 2 关于MXML ............................................................................................. 2 开发应用程序 ......................................................................................... 4 第三章 MXML语法 ............................................................................... 18 MXML基本语法 ................................................................................... 18 设置组件属性 ....................................................................................... 19 第四章 使用ActionScript ....................................................................... 30 在Flex应用程序中使用ActionScript .................................................... 30 使用Flex组件 ........................................................................................ 34
(未完待续)
Flex2开发者指南
第一章 关于Flex文档
《Flex2开发者指南》提供了使用Adobe® FlexTM 2开发Internet应用所需的知识。这本书主要供正在学习Flex或希望扩充Flex编程知识的应用程序员使用。它为使用Flex进行应用程序开发提供了可靠的知识基础。
本手册的使用
本手册可以帮助任何正在开发Flex应用程序开发的人。然而,本手册对于初步使用过Flex或者已经阅读过《Getting Started with Flex2》的人最为有用。《Getting Started with Flex2》提供了对Flex的介绍,并帮助读者掌握了使用Flex的基础知识,从而能够更轻松地使用本手册。
《Flex2开发者指南》分为以下几个部分: 部分
第1部分,使用Flex编程语言
第2部分,构造Flex应用的用户界面 第3部分,定制用户界面 第4部分,Flex编程高级话题 第5部分,Flex数据特性 第6部分,数据访问与连接 第7部分,图表组件
描述
描述如何使用MXML和ActionScript
描述如何使用Flex组件为应用创建用户界面描述如何通过向应用中添加附加功能来改善用户体验
描述一些可以使应用具备良好交互能力和表现能力的高级编程技术。
描述如何使用Flex数据代理和数据外观组件。
描述Flex使用外部数据的特性。包括Adobe Flex Data Services的特性。 描述怎样使用图表组件。
访问Flex文档
Flex文档面向所有使用者提供支持。
文档集
Flex文档集包含下列文档: 文档名称
Flex2开发者指南
Getting Started With Flex2
Building and Deploying Flex2 Applications Creating and Extending Flex2 Components Migrating Applications to Flex2 Using Flex Builder 2
描述
描述怎样开发动态web应用。
包含了对Flex特性和应用开发过程的概览。描述如何建立和发布Flex应用。 描述如何创建和扩展Flex组件。
提供了迁移过程的概览,并详细描述了Flex和ActionScript的变化。
包含了全面的有关Adobe Flex Builder 2 所有特性的信息,适合任何水平的Flex Builder用户。
提供Flex API的描述、语法、用法、代码示例。
Adobe Flex2 Language Reference
-1-
Flex2开发者指南
阅读在线文档
所有Flex文档的在线HTML和PDF文件都可在Adobe的网站获得。在Adobe® FlexTM BuilderTM的帮助菜单中也可获得。
排版约定
在本书中使用了一下排版约定:
斜体字代表一个可以被替换的值(例如一个文件夹的路径) Code font 代表代码
Code font斜体 代表参数 黑体 代表要点条目。
第二章 使用MXML开发应用程序
MXML是一种XML语言,用来布局Adobe Flex应用程序的用户界面组件。也可以用MXML声明式地定义一个应用程序的非可视化方面内容,如访问服务器端数据源以及用户界面组件与服务器端数据源之间的数据绑定。本章主要讲述MXML和如何使用MXML进行Flex应用程序开发。
有关MXML语法的内容,参见第三章《MXML语法》(MXML Syntax)。
关于MXML
编写一个简单的应用
因为MXML文件就是普通的XML文件,因此开发环境的可选范围是十分广泛的。可以在简单的文本编辑器、专用的XML编辑器,或者一个支持文本编辑的集成开发环境(IDE)中编写MXML代码。Flex提供了一个被称为Adobe Flex Builder的专用IDE,可以用来开发Flex应用程序。
后面的例子展示了一个简单的“Hello World”应用程序,它仅仅包含了一个 保存这段代码到名为hello.mxml的文件中,文件名必须以小写的.mxml后缀结尾。 “Hello World”应用程序在浏览器窗口中显示如下图所示: -2- Flex2开发者指南 关于XML编码 文档的第一行指定了XML版本的可选的声明。在这一行中包含MXML的编码信息是良好的习惯。很多编辑器会让你从一些文件编码选项中选择编码。在北美的操作系统中,ISO-8859-1是主要编码格式,而且大部分程序默认使用这种格式。你可以使用UTF-8编码格式来保证最大限度的跨平台能力。UTF-8为文件中的每一个字符规定了一个唯一的数字编码,而且它是独立于平台、程序和语言的。如果指定了一种编码格式,它就必须于文件实际采用的编码方式相匹配。指定UTF-8编码的XML声明标签如下所示: 关于 除了作为Flex应用程序的根标签以外, 关于MXML标签属性 MXML标签的属性,如 将MXML编译成SWF文件 你可以将你的应用程序发布为已编译的SWF文件,或者,如果你有Adobe Flex Data Services,你可以将你的应用程序发布为一组MXML和AS文件。 如果你正在使用Flex Builder,你可以从Flex Builder中编译和运行SWF文件。 在你的应用程序正确执行以后,你需要将生成的SWF文件拷贝到你的web server或application server上的一个目录中来完成发布。然后,用户就可以通过以下形式的HTTP请求来访问被发布的SWF文件了:http://hostname/path/filename.swf Flex还提供了一个命令行MXML编译器:mxmlc,允许你编译MXML文件。你可以在命令行中使用mxmlc来编译hello.mxml,如下面例子所示: cd flexInstalDir/bin 在这个例子中,flexInstallDir是Flex的安装目录,appDir是包含了hello.mxml的目录。 -3- mxmlc ‐‐show‐actionscript‐warings=true ‐‐strict=true c:/appDir/hello.mxml Flex2开发者指南 编译产生的SWF文件hello.swf,被输出到与hello.mxml文件的相同目录中。 更多的mxmlc相关信息,请参见第九章《建立和发布Flex3应用程序》中的《使用Flex编译器》(\"Using the Flex Compilers,\" in Building and Deploying Flex 3 Applications)。更多关于Flash Player调试版本的内容,请参见第11章《建立和发布Flex3应用程序》中的《日志》(\"logging\")。 MXML标签与ActionScript类的关系 Adobe是把Flex作为一个ActionScript类库来实现的。类库中包含组件(容器 MXML标签相当于ActionScript类或者类的属性。Flex解析MXML标签并编译成包含了相应ActionScript对象的SWF文件。例如,Flex提供ActionScript Button类来定义Flex按钮控件。在MXML中,你可以通过后面的MXML语句来创建一个按钮控件: 当你使用MXML标签声明一个控件时,创建了相应类的一个实例对象。这个MXML语句创建一个按钮对象,并且将Button对象的label属性初始化为“Submit”字符串。 一个MXML标签相当于一个ActionScript类,其命名管理与ActionScript类相同。类名以一个大写字母开头,并且以大写字母分隔类名中的单词。每个MXML标签属性都对应ActionScript对象的一个属性、一个应用于这个对象的样式,或者一个事件监听器。Flex类库和MXML标签语法的完整描述,请参看《Adobe Flex2语言手册》(Adobe Flex2 Language Reference)。 理解Flex应用程序结构 你能够在单独或者多个文件中编写一个MXML应用程序。你有代表性地定义一个包含 通常的编程习惯是把你的Flex应用划分到功能单元或者执行独立任务模块中。在Flex中,你可以划分你的应用到单独的MXML文件和ActionScript文件中,其中每个文件相当于一个不同的模块。分离应用到不同模块中有以下好处: 开发的灵活性 不同的开发者和开发组能够开发和测试不同的模块而不依赖其他开发者或开发组。 复用性 你可以在不同的应用中重用模块从而避免重复劳动。 可维护性 与你把应用开发为一个独立文件相比,你可以更快速隔离和调试错误。 在Flex中,一个模块就是一个用MXML或用ActionScript实现的自定义组件。这些自定义组件可以引用其他自定义组件。Flex没有约束组件引用嵌套的层数。按照你的应用程序的需要来定义组件即可。 开发应用程序 MXML开发基于同其他类型web application文件相同的相同的迭代过程,如HTML、JavaServer Pages(JSP)、Active Server Pages(ASP)和ColdFusion Markup Language(CFML) 。 -4- Flex2开发者指南 开发一个有用的Flex应用程序正是如此简单:打开你喜爱的文本编辑器,敲出一些XML标签,保存这个文件,在浏览器中请求这个文件的URL地址,然后重复这一过程。 Flex还提供了用于代码调试的工具;更多内容请参见第12章《建立和发布Flex2应用程序》中的《使用命令行调试器》(“Using the Command-Line Debugger”)。 使用容器进行用户界面布局 在Flex的模型-视图设计模式中,UI组件扮演了视图的角色。MXML语言支持两种类型的UI组件:控件(control)和容器(cantainer)。控件是表单(form)元素,如按钮(button)、文本框(text field)以及列表框(list boxes)。容器是屏幕上包含控件和其他容器的矩形区域。 使用容器组件对UI进行布局,并在真个应用中控制用户导航。布局容器的例子包括,用于水平布局的HBox容器,用于垂直布局的VBox,和用于行列布局的Grid容器。导航容器的例子有,用于创建选项卡面板的TabNavigator容器,用 于创建可折叠面板的Accordion导航容器,和用于排布面板上下层次次序的ViewStack导航容器。 Container类是所有Flex容器类的基类。容器通过扩展Container类来添加对子级组件进行布局的特有功能。容器标签典型的属性包括id、width和height。更多关于标准Flex容器的内容,请参看第13章《容器介绍》(“Inroducing Containers”)。 下面的图片展示了一个Flex应用例子程序,用户界面的左侧有一个List控件,在右侧有一个TabNavigator组件。两个组件都一个Panel容器中: Panel容器 | | | List 控件 TabNavigator控件 下面的代码实现了这个应用: -5- Flex2开发者指南 List控件和TabNavigator容器是被并排排布的,因为它们在一个HBox容器内。TabNavigator容器中的控件是从上到下排布的,因为它们在一个VBox容器中。 更多关于UI组件布局的内容,请参看第六章《使用Flex可视化组件》“(Using Flex Visual Components“)。 添加UI控件 Flex包含了大量的UI组件,如按钮(Button)、文本框(TextInput)和下拉框(ComboBox)控件。使用容器组件定义了应用的布局和导航之后,就该向其中添加UI控件了。 后面的例子中包含了一个带有两个子控件的HBox(水平框)容器,其中子控件为一个文本框(TextInput)和一个按钮(Button)控件。HBox容器水平地排布它的子控件。 -6- Flex2开发者指南 利用MXML标签的id属性 除少数例外(参见《MXML标签规则》),一个MXML标签都会有一个可选的id属 性,这个属性在整个MXML文件内必须唯一。如果一个标签有id属性,你就可以在ActionScript中引用相应的对象。 在后面的例子中,从web服务请求得到的结果在writhToLog函数中被跟踪记录: 这段代码使MXML编译器自动产生一个名为myText的公共变量,它包含了一个对TextInput实例的引用。这个变量允许你在ActionScript中访问被引用组件的实例。你可以在任何ActionScript类或脚本块中,通过它的id实例引用变量来明确地引用TextInput控件实例。通过对组件的实例引用,可以修改它的属性以及调用它的方法。 因为在一个MXML文件中的每一个id值是唯一的,所以一个MXML文件中的所有对象都属于相同的命名空间。你并不会仅局限于一个对象,还可以通过使用点标记来引用它的父对象,就如myVBox.myText.text一样。 更多内容,请参看第四章中的《引用Flex组件(“Referring to Flex components”)》一节。 -7- Flex2开发者指南 使用XML命名空间 在XML文档中,标签是与命名空间相关联的。XML命名空间允许你在同一个XML文档中使用多组不同的XML标签。xmlns属性在MXML标签中起着描述XML命名空间的作用。使用默认命名空间时,无需指定前缀。使用附加标签时,则需要指定标签前缀和命名空间。例如,在后面代码中 当使用SWC文件中包含的组件时,其包名与命名空间必须匹配,即使SWC文件与使用它的MXML文件位于相同的目录。SWC是Flex组件的归档文件。SWC文件使得组件很容易在Flex开发者之间传递。仅仅传递一个单独文件,自然要比传递MXML或ActionScript文件、图片和其他资源文件要好得多。此外,SWC文件中的SWF文件是经过编译的,即代码是不可见的。更多关于SWC文件的内容,请参看第九章,《建立和发布Flex2应用》中的《使用Felx编译器(“Using the Flex Compilers”)》。 使用MXML触发运行时代码 Felx应用是由运行时事件驱动的,比如当用户选择一个Button控件时。你可以在MXML标签的事件(event)属性中,指定由处理运行时事件的代码组成的事件监听器(event listeners)。例如, 后面的例子展示了一个包含一个Button控件和一个TextAear控件的应用。Button控件 -8- Flex2开发者指南 的click属性包含一个简单的事件监听器,它能够将TextArea控件的text属性设置为文本“Hello World”。 后面的例子展示了前面那个应用的另外一个版本的代码,在这个版本中事件监听器被包含在 -9- Flex2开发者指南 在组件之间绑定数据 Flex为组件之间属性的绑定提供了简单的语法。在后面的例子中,大括号({})内的值将TextArea控件的text属性绑定到了TextInput控件的text属性。当应用初始化时,两个控件都会显示文本“Hello”。当用户点击Button控件时,两个控件又都显示文本“Goodbye”。 用户点击Submit按钮后应用在web浏览器窗口的显示如下图所示: 作为大括号({})语法的另一种选择,可以使用 使用RPC服务 远程过程调用(RPC)服务允许你的应用集成远程服务器来为你的应用提供数据,或者从你的应用发送数据到服务器。Flex被设计为与多种类型的RPC服务集成,支持访问本地和远程服务器端逻辑。例如,一个Flex应用能够连接一个使用了简单对象存取协议(SOAP)的web服务、使用AMF且与Flex在相同的应用服务器上的Java对象,或者一个返回XML的HTTP URL。AMF是使用在Flash Remoting MX中的协议。 提供远程数据存取功能的MXML组件被称为PRC组件。MXML包括一下类型的RPC组件: WebService 提供对基于SOAP的web服务的访问支持。 HTTPService 提供对返回数据的HTTP URL的访问支持。 RemoteObject 提供对使用AMF协议(仅限Flex Data Services)的Java对象的访 问支持。 下面例子所示的应用,调用了一个提供天气信息,并显示给定的ZIP邮政代码的当前 -10- Flex2开发者指南 温度的web服务。这个应用将用户在TextInput控件中输入的ZIP邮政代码绑定到一个web服务参数上。它将包含在web服务返回结果中的当前温度值绑定到了一个TextArea控件上。 -11- Flex2开发者指南 关于RPC服务的更多内容,参见第44章《理解RPC组件(“Understanding RPC Components”)》。 在数据模型中存储数据 在Flex应用中可以使用数据模型(data model)来存储特定于应用的数据。一个数据模型就是一个ActionScript对象,它提供了用于存储数据的属性,并可以任意地包含方法来增加功能特性。数据模型为Flex应用提交数据到服务器之前的数据存储,或者在应用中使用服务器反馈回来的数据之前的数据存储提供了一种途径。 可以定义一个简单的数据模型,在 Flex2开发者指南 数据校验 在Flex中可以使用校验器(validator)组件来校验存储在数据模型(data model)或 者Flex UI组件中的数据。Flex包含了一组标准校验器组件。用户也可以创建自定义校验器组件。 在后面的例子中,使用校验器组件来校验被输入到TextInput组件中的数据的预期类型。校验在用户编辑一个TextInput控件时被自动地触发。如果校验失败,用户会立即收到反馈。 Flex2开发者指南 有关使用数据模型的更多内容,参见第三十九章《存储数据》。关于校验器的更多内容,参见第四十章《数据校验》。 数据格式化 格式器(Formater)组件是能够将原始数据单向转换为格式化字符串的ActionScript 组件。该组件在数据即将被显示在文本框中之前被触发。Flex包含了一组标准格式器。用户还可以自定义格式器。在后面例子所展示的应用中,使用了一个标准ZipCodeFormatter组件来格式化变量的值: Flex2开发者指南 有关格式器组件的更多内容,参见第四十一章《数据格式化(“Formatting Data”)》。 使用级联样式表(CSS) 在Flex中可以使用基于级联样式表(CSS)标准的样式表来给Flex组件声明样式。可以在MXML的 后面的例子在 -15- Flex2开发者指南 前面的例子中,将样式应用于Button控件来将字体颜色设置为红色。 类型选择器将一个样式应用与指定类型的组件的所有实例上。在前面的例子中的类型选择器,将所有Button控件的字体大小设置为18点。 前面的应用在web浏览器窗口中显示如下图所示: 有关使用级联样式表的更多内容,参看第十八章《使用样式和主题》。 使用皮肤 皮肤机制是通过修改或替换组件的图形元素来改变组件外观的处理过程。这些图形元素可以由图片或者绘图API方法的输出结果组成。它们被称为符号(symbols)。可以为Flex组件重新设计皮肤而无需改变其功能。在Flex应用中包含了皮肤的文件被称为主题(theme)。 在Flex中有两种类型的皮肤:图形化(graphical)皮肤和程序化(programmatic)皮肤。图形化皮肤是可以在Macromedia® Flash® Professional 8中直接改变的Adobe Flash符号。绘制程序化皮肤要使用ActionScript表达式,在类文件中定义这些皮肤。有些时候采用图形化皮肤为组件重新设计外观更为便利,而在一些情况下使用程序化皮肤则更为直观。但是不可以在同一个主题文件中同时采用图形化皮肤和程序化皮肤。 有关使用皮肤的更多内容,参见第二十章《使用皮肤(“Using Skins”)》。 使用特效 特效(effect)就是使组件在很短的一段时间内发生变化。例如淡入淡出(fading)、大小重置(resizeing)和移动(moving)组件的特效。一个带有一个触发器(trigger),就如鼠标点击组件、组件获得焦点、或者组件变为可见,所表现出行为。在MXML中,可以把特效作为一个控件或容器的属性来应用。Flex以默认属性提供了一组内置特效。 接下来的例子所展示的应用中,包含了一个Button控件,它的rollOverEffect属性设置了当用户移动鼠标经过它时触发WipeLeft特效。 Flex2开发者指南 关于特效的更多内容,参见第十七章《使用行为(“Using Behaviors”)》。 声明自定义MXML组件 MXML自定义组件,就是创建并在其他MXML文件中作为MXML自定义标签来使用的MXML文件。它们封装并扩展已有的Flex组件的功能。就像MXML应用文件,MXML组件文件中可以同时包含MXML标签和ActionScript代码。MXML文件的名称就是在其他MXML文件中使用这个组件所需要用到的类名。 注意不可以在web浏览器中使用URL直接访问自定义MXML组件。 后面的例子展示了一个被预装了列表元素(list itme)的自定义ComboBox控件。 -17- Flex2开发者指南 有关MXML组件的更多内容,参见第七章《创建和扩展已有的Flex2组件》中《创建简单的MXML组件》一节。 也可以使用ActionScript创建自定义Flex组件。更多内容,参见第九章《创建和扩展已有的Flex2组件》中的《使用ActionScript创建简单的可视化组件》。 第三章 MXML语法 MXML是一种XML语言,用于Adobe Flex应用的用户界面布局。本章介绍的MXML基本语法。 MXML基本语法 大多数MXML标签都等同于ActionScript3.0中使用的类或者类的属性。Flex解析MXML标签并编译为SWF文件,该文件中包含等效的ActionScript对象。ActionScript3.0采用基于ECMAScript4草案中规定的的语法。ActionScript3.0中包含如下特性: 规范的类定义语法 规范的包结构 变量、参数和返回值类型检查(仅编译时) 使用get和set关键字的隐式getter和setter 继承 公共(public)和私有(private)成员 静态(static)成员 类型转换操作符 有关ActionScript 3.0的更多内容,参见第七章《使用ActionScript》。 MXML文件命名 MXML文件必须遵循以下命名约定: 文件名必须是有效的ActionScript标识符,即文件名必须以字母或者下划线(_) 开头,且其后只能包含字母、数字和下划线。 文件名不能与ActionScript类名、组件id值,或者单词application相同(译注: MXML文件编译生成的类是继承Application类的,因此不能使用单词“Application”作为MXML文件名)。不要使用与mx命名空间中的MXML标签名相似的文件名。 文件名必须使用小写形式的.mxml扩展名结尾。 -18- Flex2开发者指南 使用代表ActionScript类的标签 一个MXML标签对应于一个ActionScript类,它使用了与ActionScript类相同的命名规则。类名以一个大写字母开头,并且以大写字母分隔类名中的单词。例如,如果一个标签对应于一个ActionScript类,那么它的属性则对应于该类的属性和事件。 设置组件属性 在MXML中,每个组件属性所使用的命名规则与其对应ActionScript属性相同。属性名以小写字母开头,并且以大写字母分隔属性名中的单词。 可以通过标签属性设置组件的大部分属性,形如: 使用子标签设置属性的限制是,子标签的命名空间前缀,即前一个例子中的mx:,必须与组件标签的命名空间前缀相匹配。 每个组件属性都是以下类型中的一种: 标量属性,如数字或字符串 标量值数组,如数字数组或者字符串数组 ActionScript对象 ActionScript对象数组 ActionScript属性 XML数据 Adobe推荐使用标签属性为标量值属性赋值,而使用子标签为类似ActionScript对象 -19- Flex2开发者指南 这样的复合类型属性赋值。 设置标量属性 通常以组件标签的属性来指定标量属性的值,如下面的例子所示: 使用常量设置属性 许多组件属性的有效值被定义为静态常量,这些静态常量被定义在ActionScript类中。在MXML中,可以使用静态常量或者静态常量值来设置属性值,如下面例子所示: 在第一个例子中,使用了ScrollPolicy类中定义的名为OFF的静态常量来设置 horizontalScrollPolicy属性。在MXML中,在将属性值设置为静态常量时必须采用数据绑定语法。采用这种方法的优点是Flex编译器能够识别错误的属性值,并在编译期产生错误信息。 作为另外一种选择,可以使用静态常量值来设置 horizontalScrollPolicy属性的值。OFF的静态常量值是“off”。当使用静态常量值来设置属性值时,即使使用了不合法的值,Flex编译器也无法做出识别。假如错误地设置了属性,那么将只能通过运行时错误来发现了。 在ActionScript中,应该尽量使用静态常量来设置属性值,如下面的例子所示: var myHBox:HBox = new HBox(); myHBox.horizontalScrollPolicy=ScrollPolicy.OFF; 设置默认属性 很多Flex组件都会有一个默认属性。如果没有显式地为MXML标签指定一个属性,那么默认属性就会成为这个标签的属性,被隐式地包含在这个标签之内。例如,下面的MXML标签定义: Flex2开发者指南 假如这个标签定义了一个名为default_property的属性,那么上述标签定义将等价于如下代码: Flex允许创建自定义组件时定义默认属性。更多内容,参见第五章《在自定义组件中使用元数据标签》中《创建和扩展Flex2组件》一节。 使用转义字符 在MXML中设置属性值时,可以通过给保留字符添加反斜杠前缀,即“\\”,来将其转 -21- Flex2开发者指南 义为相应的普通字符,如下面的例子所示: 使用反斜杠设置字符串属性 在MXML中,一旦反斜杠出现在字符串类型的属性中,MXML编译器就会自动对其进行转义。因此,必须将“\\”替换为“\\\\”; 这样做是必须的,因为ActionScript编译器会将“\\\\”识别为文本字符“\\”,并在初始化属性值时除去第一个反斜杠。 注意不要在应用资源路径中使用反斜杠(\\)作为分隔符。而应该使用斜杠。 在字符串中加入换行符 可以通过两种方式向字符串类型属性插入换行符: 在MXML中,通过将代码“
”插入到字符串中 在ActionScript中,通过将“\\n”插入到用于初始化MXML属性的字符串变量中 在MXML中,为了使用代码“
”来插入一个换行符,需要在属性值中包含这个代码,如下面的例子所示: 注意本例在属性声明前包含一个[Bindable]的元数据标签。该元数据标签表示myText可以作为数据绑定表达式的源来被使用。在运行时,当source属性的值改变,数据绑定就 -22- Flex2开发者指南 会自动地将这个对象的source性值拷贝到另外一个对象的目标属性中。 如果省略这个元数据标签,编译器会报出一个警告信息指出该属性无法作为数据绑定的源来使用。更多内容,参见第三十八章《绑定数据》。 设置标量数组 如果一个类中有一个接受数组作为属性值的属性,那么可以在MXML中使用子标签来标识该属性。在下面例子中的组件,有一个dataProvider属性包含了一个数字数组: 组件开发者可能已经在组件声明的内部指定了一些附加信息,来定义数组元素的数据类型。例如,如果开发者指定了dataProvider属性仅支持String类型的元素,那么这个例子将会产生一个编译器错误,因为指定了数字作为该属性的数组元素。 设置对象属性 如果一个组件有一个接受对象作为属性值的属性,那么可以在MXML中使用带有标签属性的子标签来标识该属性,如下面的例子所示: Flex2开发者指南 下面例子所示的Address类,在下一个例子中,它的实例对象被当作PurchaseOrder组件的一个属性来使用。 class Address { public var name:String; public var street:String; public var city:String; public var state:String; public var zip:Number; } 下面例子所示的PurchaseOrder组件类,有一个Address类型的属性: import example.Address; class PurchaseOrder { public var shippingAddress:Address; public var quantity:Number; ... } 在MXML中,定义PurchaseOrder组件如下面的例子所示: 如果属性是像下面例子中的属性值那样被显式地将类型定义为Object,那么就可以使用 class ObjectHolder { public var value:Object } 下面的例子展示了怎样指定一个匿名对象作为value属性的值: -24- Flex2开发者指南 使用数组组装对象 如果一个组件有一个接受数组作为属性值的Object类型属性,那么就可以在MXML中使用子标签来标识这个属性,如下面的例子所示: 正如在本章《设定标量数组》一节中所描述的,数组元素外层的 object=[element] // 对象中包含一个单元素数组 如果希望创建一个单元素数组,那么就必须在数组元素外层嵌套 object=element // 对象等于某值 -25- Flex2开发者指南 组装对象数组 如果一个组件有一个接受对象数组作为属性值的属性,那么就可以在MXML中使用子标签来标识该属性,如下面的例子所示: Flex2开发者指南 如《设定标量数组》一节中所述,数组元素外层的 设置包含XML数据的属性 如果一个组件包含一个接受XML数据的属性,那么属性值就是能够在一个命名空间中使用的XML代码段。在下面的例子中,MyComponent对象的value属性是XML数据: 在MXML中设置样式和特效属性 与其他属性不同的,MXML标签中的样式或特效属性对应于ActionScript的样式或者特效,而不是ActionScript类。在ActionScript中使用方法setStyle(styleName,value)设置这些属性,而不是使用赋值符号object.property=value。 可以在ActionScript类中使用元数据标签[Style]或者[Effect]来定义样式和特效属性,而不是将它们定义为ActionScript变量或者使用setter/getter方法。更多内容,参见第5章《创建和扩展Flex2组件》中的《在自定义组件中使用元数据标签》一节。 例如,可以在MXML中设置样式属性fontFamily,如下面的代码所示: myText.setStyle(\"fontFamily\ \"Tahoma\"); -27- Flex2开发者指南 在MXML中设置事件属性 MXML标签的事件属性用于为事件指定事件监听器。该属性等同于在ActionScript中使用addEventListener()方法。 可以在ActionScript类中使用元数据标签[Event]定义event属性,而不是将它们定义为ActionScript变量和setter/getter方法。更多内容,参见第5章《创建和扩展Flex2组件》中的《在自定义组件中使用元数据标签》一节。 例如,可以在MXML中设定creationComplete事件属性,如下面的代码所示: myText.addEventListener(\"creationComplete\ creationCompleteHandler); URL值的指定 一些MXML标签,如 要在 RegExp值的指定 对于类型为RegExp的属性,可以在MXML中使用如下的格式指定其值: \"/pattern/flags\" pattern 在两个斜杠“/”内指定正则表达式。两个斜杠都是必须的。 flags (可选)为正则表达式指定一些标记。 -28- Flex2开发者指南 例如,MXML组件中的regExpression属性就是RegExp类型的。 因此,可以像下面例子所示的方式设值其值: 使用编译器标签(Compiler Tag) 编译器标签(Complier tag)是不直接对应于ActionScript对象或属性的标签。以下编译器 标签的名称是首字母大写的: 以下编译器标签是全部字母小写的: MXML标签规则 MXML有以下语法要求: id属性在任何标签中都不是必须的。 id属性不允许出现在根标签中。 布尔型的属性只能接受true和false两个值。 包含这两者。 含这两者。 -29- Flex2开发者指南 包含这两者。 第四章 使用ActionScript Flex开发人员可以使用ActionScript来扩展他们的Adobe Flex应用程序的功能。ActionScript提供了在MXML没有的流控制和对象处理特性。本章讲述如何在一个MXML应用程序中使用ActionScript。ActionScript的完整介绍和这个语言的使用参考,参见《Programming ActionScript3.0》和《ActionScript 3.0 Language Reference》。 内容 在Flex应用程序中使用ActionScript Working with Flex 组件 包含和导入ActionScript代码的比较 把ActionSctipt代码从MXML分离的技巧 创建ActionSctipt组件 使用对象反射 在Flex应用程序中使用ActionScript Flex开发人员在他们的Flex应用程序中使用ActionScript来实现自定义行为。首先使用MXML标签来定义像容器、控件、特效、格式器、校验器,以及应用程序所需要的web 服务,并对用户界面布局。这些组件都提供了默认的标准行为。例如,一个按钮会在鼠标经过时自动高亮显示,而无需编写任何ActionScript。但是MXML这类声明式语言并不适合用来编写类似当用户点击按钮时要触发的行为。因此,需要使用像ActionScript这样提供了可执行方法、丰富的变量类型,以及条件语句和循环语句等流控制机制的过程语言。在一般意义上来讲,MXML实现了应用程序的静态层面,而ActionScript则实现了其动态层面。 ActionScript是一个面向对象过程语言,它基于ECMAScript(ECMA-262)第四版语言规范草案。可以使用以下多种方法来混合ActionScript和MXML代码: 在MXML的event属性中使用ActionScript来定义事件监听器。 使用 引入(include)外部ActionScript文件。 导入(import)ActionScript类。 创建ActionScript组件。 ActionScript的编译 虽然一个简单的Flex应用程序可以在一个单独的MXML文件或者ActionScript(AS)文件中编写,但是多数应用程序会分解成多个文件。例如,通常会把一个 -30- Flex2开发者指南 文件。一个应用程序通常也会导入自定义的MXML和ActionScript组件。这些MXML和ActionScript组件必须在其他的文件中定义,且MXML组件可以把它们的 可以在MXML文件中许多地方使用ActionScript代码片段。Flex编译器把主MXML文件和引入的其他文件转换为一个单独的ActionScript类。因此,不可以在MXML文件中和引入的ActionScript文件中的函数外部定义类或者使用语句。 可以从MXML应用文件中引用被导入的ActionScript类。而且这些类会被添加到最终的SWF文件中。当MXML文件向ActionScript文件的转换完成时,Flex会在最终的SWF文件链接所有ActionScript组件并包含这些类。 关于生成的ActionScript 当编写一个MXML文件并将其编译时,Flex编译器会创建一个新类并生成这个类所使用的ActionScript脚本。后面所列内容描述了MXML标签和ActionScript脚本通过这个新类被使用的情形。理解这一节的内容对于使用Flex并不是必须的,但它有助于理解Flex开发人员可以直观掌握的机制背后究竟发生着什么。 一个MXML应用(一个以 子类的名字是这个文件的名字。基类则是顶级标签所代表的类。 一个MXML应用程序实际上是定义了: class MyApp extends Application 如果MyButton.mxml以 class MyButton extends Button 在 事件属性,转化为子类中自动产生的事件监听器的方法体。例如: private function __myButton_click(event:MouseEvent):void { foo = 1; doSomething() } 事件属性转化成了方法体,所以它们可以访问子类中其它的属性和方法。 MXML文件中的所有ActionScript脚本,无论是在 -31- Flex2开发者指南 只要通过“点操作符连接”方式(例如,myCheckoutAccordion.myAddressForm. firstNameTextInput.text),或者用parentDocument、parentApplication或Application.application来指定属性或方法所在组件,类的公有属性和方法就可以在其他组件中通过ActionScript脚本代码来访问。 在MXML事件处理器中使用ActionScript 在Flex应用中使用ActionScript脚本的一个途径是在MXML标签的事件处理器内部包含它。如下面的例子所示: public function __myButton_click(event:MouseEvent):void { textarea1.text='Hello World'; } 当用户点击这个按钮时,这段代码把TextArea控件的text属性值设置为字符串“Hello World”。在大多数情况下并不需要查看生成的代码,但是它对于理解内嵌事件处理器的工作原理是不无裨益的。 若要查看生成的代码,将编译参数keep-generated-actionscript的值设置为true即可。编译器就会把*.as文件存储在/generated目录中,它是SWF文件所在目录的一个子目录。 有关事件的更多内容,参见第五章《使用事件》。更多关于使用命令行编译器内容,参见第九章《创建和部署Flex2应用》中的《使用Flex编译器》一节。 在MXML文件中使用ActionScript脚本块 在MXML文件中可以使用 语句和表达式只允许在函数内部使用。另外,不可以在 当Flex编译应用时,代码块中的所有ActionScript脚本都会被添加到生成的中间过程文件的类里面。下面的例子在一个函数中声明了一个变量并设置了这个变量的值: -32- Flex2开发者指南 ■ import ■ var ■ include ■ const ■ namespace ■ use namespace 在使用 public var n:Number; public function doSomething():void { n = 42; m = 40; label1.text = String(n > m); }]]> 获取ActionScript文档 ActionScript3.0编程语言可以在多个开发环境中使用,包括Flash Professional 和 Adobe Flex Builder。 Flex文档包括了《ActionScript3.0编程(Programming ActionScript 3.0)》,描述了ActionScript语言。ActionScript API参考被包含在《Adobe Flex2语言参考(Adobe Flex2 Language Reference)》中作为它的一个部分。 使用Flex组件 在Flex应用中使用ActionScript的最大用途大概就是在应用中使用可视化控件和容器了。本节讲述了相关的技巧,包括如何在ActionScript中引用Flex控件以及如何在控件和容器实例中处理属性。 Flex组件的引用 在ActionScript中使用组件,通常是在MXML标签中为组件定义一个id属性。例如,后面代码将按钮控件的id属性设置为字符串“myButton”: 例如,下面的ActionScript块在用户点击按钮时改变了该Button控件的label属性值: -34- Flex2开发者指南 如果一个Flex组件没有id属性,则可以通过使用该组件的容器的方法,如getChildAt()和getChildByName()方法。 可以使用this关键字引用到当前文档或当前对象。当有一个与命名匹配的字符串时也可以取得一个组件的引用。若要访问应用中的对象,可以使用this关键字紧跟一个内含字符串的方括号。结果将是一个指向命名与该字符串匹配的对象的引用。 下面的例子通过使用字符串组合获取对象引用来修改每个Button控件的style属性: 下面的例子使用ActionScript在application作用域内声明了两个的Label控件。在初始化过程中,这些标签(Label)被实例化而且它们的text属性被设置。在这个例子中,当用户点击这个Button控件时,通过把传进来的变量附加到字符串上来获取Label控件的引用。 -35- Flex2开发者指南 调用组件方法 可以在Flex应用程序中以点号(.)来调用一个组件实例的公有方法: componentInstance.method([parameters]); 在下面的例子中,当用户点击按钮时,调用adjustThumb()方法,这个方法调用了HSlider控件的的公有方法setThumbValueAt(): -36- Flex2开发者指南 在ActionScript中创建可视化Flex组件 可以在ActionScript中使用new操作符,以程序控制方式创建可视化Flex组件,用同样的途径可以创建任何ActionScript类的实例。被创建组件包含了具有默认值的属性,但是还没有任何的父节点和子节点(包括任何类型的内置DisplayObject对象),而且它尚未加入到Flash Player的显示列表中,所以无法看到它。在创建组件之后,应该使用标准的赋值语句来设置任何不恰当的默认值。最后,必须通过使用容器的AddChild()或者addChildAt()方法来把这个新组件添加到容器中,这样它便成为Flex应用可视化层次的一部分。第一次把组件添加到容器时,组件的子节点就会被创建。子节点是在该组件生命周期的后期被创建的,因此可以设置属性来影响子节点实际被创建的样子。 在创建可视组件时,必须导入所需要的包。多数情况是mx.controls包,但是你可以参考《Adobe Flex 2语言手册(Adobe Flex 2 Language Reference)》。 下面的例子在HBox中创建了一个Button控件: -37- Flex2开发者指南 要通过编程删除一个控件,可以使用remveChild()或者removeChildAt()方法。也可以使用removeAllChildren()方法从一个容器中删除所有的子节点。调用这些方法并没有真正删除这些对象。如果没有任何其他到这个子节点的引用,Flash Player会在未来的某个时刻对它进行垃圾回收。但是如果你保存了到这个子节点的引用到某个对象上,那么这个子节点就不会从内存中被删除。 在一些情况下,用MXML标签声明式地定义组件。可以把这个组件容器的createPolicy属性设置为none来推迟这个容器中控件的创建。然后,使用createComponentFromDescriptor() 和createComponentsFromDescriptors()方法,来创建一个已用标签声明但是还没有实例化的组件。这些方法是通过编程创建一个组件而非声明式。有关使用createPilicy属性的更多内容,参阅第六章《创建和部署Flex2应用(Building and Deploying Flex 2 Applications)》中的《改善启动性能(Improving Startup Performance)》一节。 唯一可以传递给addChild()方法的组件是一个UIComponent对象。换句话说,如果创建了一个非mx.core.UIComponent子类的对象,则必须在把它添加到容器之前把它包装在一个UIComponent里。后面的例子中创建了一个非UIComponent子类的Sprite对象,并在将其添加到Panel容器之前把它添加为UIComponent对象的子节点: -38- Flex2开发者指南 关于作用域 ActionScript中的作用域主要用于描述this关键字在特定点的引用。在应用的核心MXML文件中,可以利用this关键字访问到Application对象。在一个MXML组件定义文件中,this引用着当前组件的实例。 在ActionScript类的文件中,this关键字引用着这个类的实例。在下面的例子中,this关键字引用着myClass类的一个实例。因为this是被暗含的,所以并非一定要写出它,但它还是被写出来以表明其含义。 class myClass { var _x:Number = 3; function get x():Number { return this._x; } function set x(y:Number):void { if (y > 0) { this._x = y; } else { this._x = 0; } } } 然而,在自定义ActionScript和MXML组件或者外部ActionScript类文件中,Flex在 -39- Flex2开发者指南 这些对象和类的上下文中执行,this关键引用到当前的作用域而不是Application对象作用域。 Flex包含了一个Application.application属性可以用来访问根application。也可以用parentDocument属性来访问Flex应用文档链的下一级,或者当一个应用程序使用SWFLoader组件来加载另外的Application对象时使用parentApplication属性来访问application链的下一级。 如果你在一个组件的事件监听器中编写ActionScript,作用域不是当前组件而是这个应用程序。例如,下面的代码在按钮被按下时把Button控件的label属性改为“Clicked”: 当事件监听器执行时这段代码并没有工作,this关键字没有引用到Button实例;它是这个Application或者其他的顶级组件实例。第二个例子试图设置Application对象的label属性,而不是Button的label属性。 被定义在一个函数中的变量是局部地作用于这个函数的。这些变量可以与外部作用域的变量共享相同命名,而且它们并不会影响到外部作用域的变量。如果一个变量只是被一个方法临时使用,就把它作为这个方法的局部变量,而不是一个实例变量。保存实例状态时才使用实例变量,因为每个实例变量在实例的整个生命周期中都会占用内存。可以通过“this.”前缀来引用外部作用域的变量。 -40- 因篇幅问题不能全部显示,请点此查看更多更全内容