Flex3教程.ppt

1、LOGOFlex3基础篇基础篇MXML组件篇组件篇 处理数据篇处理数据篇总览总览ActionScript 3.0语法篇语法篇实例实例篇篇e-mail：Flex3基础篇基础篇技术特点技术特点v 了解了解Flex应用程序应用程序 产品线包含以下部分产品线包含以下部分 Flex3 Software Developers Kit(SDK)Flex Builder 3注：注：SDK是免费的，是免费的，Flex Builder只能通过只能通过Adobe Systems购买许可才能获购买许可才能获取。取。Flex3 包含两种编程语言包含两种编程语言 ActionScript3包含面向对象的语言的大部分元素：

2、类定义语法、类包结构化、包含面向对象的语言的大部分元素：类定义语法、类包结构化、变量的强数据类型以及类继承。变量的强数据类型以及类继承。MXML纯粹是一种基于纯粹是一种基于XML的标记语言，用于定义的标记语言，用于定义Flex应用程序及基大应用程序及基大量组件。量组件。MXML中的大部分元素都对应着中的大部分元素都对应着ActionScript3类。类。注：可以将注：可以将MXML描述为描述为ActionScript3 的一种的一种“方便语言方便语言”，用它编写应用，用它编写应用程序比完全用程序比完全用ActionScript3 编码更加简单和快速。编码更加简单和快速。Flex3基础篇基础篇编

3、译和发布编译和发布e-mail：v Flex Builder 用户界面用户界面 MXML 编辑器编辑器 ActionScript 编辑器编辑器 Flex Builder 视图视图Flex Navigator 视图视图Outline 视图视图Problems 视图视图Design 视图视图调试视图调试视图Flex3基础篇基础篇熟悉开发环境熟悉开发环境e-mail：v 获取帮助获取帮助 探索帮助内容探索帮助内容 搜索帮助术语搜索帮助术语Flex Builder 界面中搜索界面中搜索Help Contents 窗口中搜索窗口中搜索 使用动态帮助使用动态帮助在在Eclipse编辑器中显示动态帮助编辑器

4、中显示动态帮助在独立的窗口中显示动态帮助（在独立的窗口中显示动态帮助（Shift+F2）Flex3基础篇基础篇熟悉开发环境熟悉开发环境e-mail：Flex3基础篇基础篇熟悉开发环境熟悉开发环境e-mail：v 搜索代码搜索代码 使用使用 Eclipse 搜索工具搜索工具使用使用Find/Replace使用使用Find in Files 使用使用 Flex Builder 代码模型搜索工具代码模型搜索工具搜索对象引用搜索对象引用搜索对象声明搜索对象声明重构代码重构代码Flex3基础篇基础篇e-mail：v 小结小结 主要介绍了主要介绍了Flex Builder 3 的一些性质和行为：的一些性质

5、和行为：了解了解Flex 的产品包含的产品包含SDK 和和 Flex Builder。Flex 语言包含：语言包含：MXML 和和 ActionScript3。Flex 应用程的编译和发布。应用程的编译和发布。获取帮助方式介绍。获取帮助方式介绍。搜索代码方式介绍。搜索代码方式介绍。Flex Builder 3 所包含视图的介绍。所包含视图的介绍。Flex3基础篇基础篇MXML组件篇组件篇 处理数据篇处理数据篇总览总览ActionScript 3.0语法篇语法篇实例实例篇篇e-mail：ActionScript 3.0语法篇语法篇v 数据类型数据类型 基本数据类型包括：基本数据类型包括：Bool

6、ean、int、Number、String、uint。ActionScript 核心类还定义下列复杂数据类型：核心类还定义下列复杂数据类型：Object、Array、Date、Error、Function、RegExp、XML 和和 XMLList。基本数据类型基本数据类型类型类型有效位数有效位数描述描述默认值默认值Boolean1true和和false0:falseint32位位表示带符号的整数。表示带符号的整数。0Number52位位可以表示整数、无符号整数和浮点数。可以表示整数、无符号整数和浮点数。uint32位位表示不带符号的整数。表示不带符号的整数。(非负整数非负整数)0String

7、16位位表示一个表示一个16位字符的序列。位字符的序列。nulle-mail：ActionScript 3.0语法篇语法篇v 运算符和表达式运算符和表达式名称名称种类种类表达式格式表达式格式算术运算符算术运算符+、-、*、/、%、+、-标达式标达式 算术运算符算术运算符 关系运算符关系运算符、=、=、=、=、！、！=表达式表达式 关系运算符关系运算符 表达式表达式逻辑运算符逻辑运算符&、|、!表达式表达式 逻辑运算符逻辑运算符 表达式表达式赋值运算符赋值运算符简单赋值：简单赋值：=复合算术赋值：复合算术赋值：+=、-=、*=、/=、%=标识符标识符 赋值运算符赋值运算符 表达式表达式逗号运算符

8、逗号运算符,表达式表达式1,表达式表达式2条件运算符条件运算符?:表达式表达式 条件运算符条件运算符 值值1,值值2Flex3基础篇基础篇MXML组件篇组件篇 处理数据篇处理数据篇总览总览ActionScript 3.0语法篇语法篇实例实例篇篇v 组件实例化组件实例化 使用使用MXML实例化组件实例化组件示例代码示例代码 使用使用ActionScript实例化组件实例化组件示例代码示例代码e-mail：MXML组件篇组件篇 import mx.controls.Label;var myLabel:Label=new Label();myLabel.text=Hello World!;this.

9、addChild(myLabel);v 组件分类组件分类 可视化控件可视化控件 容器是指可以含有其他对象的可视化组件。容器是指可以含有其他对象的可视化组件。控件是指显示信息或提供应用程序用户交互功能的可视化组件。控件是指显示信息或提供应用程序用户交互功能的可视化组件。示例代码示例代码 非可视组件非可视组件示例代码示例代码e-mail：MXML组件篇组件篇 e-mail：MXML组件篇组件篇 v 常用控件：常用控件：文本控件文本控件 文本显示控件：文本显示控件：Label和和Text 文本输入控件：文本输入控件：TextInput、TextArea 和和 RichTextEdit Label文本

10、控件属性文本控件属性(DemoText)属性属性数据类型数据类型描述描述condenseWhiteBoolean表时是否从文本中删除空白区域表时是否从文本中删除空白区域(空白字符、空白字符、制表符和换行符制表符和换行符)。RichTextEdit不支持不支持该属性该属性TextString不含有不含有HTML标记的文本标记的文本truncateToFitBoolean该属性决定是否截去文本该属性决定是否截去文本selectableBoolean该属性控制文本是否可以被选中该属性控制文本是否可以被选中htmlTextString含有含有HTML标记的文本标记的文本e-mail：MXML组件篇组件

11、篇 按钮控件按钮控件Button 控件控件LinkButton 控件控件CheckBox 控件控件RadioButton 控控 Button水平标尺控件的属性水平标尺控件的属性(DemoButton)属性属性数据类型数据类型描述描述emphasizedBoolean获取或设置一个布尔值，指示当按钮处于弹获取或设置一个布尔值，指示当按钮处于弹起状态时，起状态时，Button 组件周围是否绘有边框组件周围是否绘有边框。labelString按扭上显示的文本。按扭上显示的文本。icon按扭上显示的图标按扭上显示的图标。如：。如：Embed(source=“icon.jpg”)e-mail：MXML组

12、件篇组件篇 日期控件：日期控件：DateChooser 和和 DateFieldDateChooser控件的属性控件的属性(DemoDate)可以显示一个交互式日历，该日历中会显示年份和月份，操作如下：可以显示一个交互式日历，该日历中会显示年份和月份，操作如下：n 一次向前或向后浏览一个月。一次向前或向后浏览一个月。n 通过鼠标操作选择单个日期、多个日期或某个日期范围。通过鼠标操作选择单个日期、多个日期或某个日期范围。属性属性数据类型数据类型描述描述selectedDateDate当前选中的日期当前选中的日期showTodayBoolean决定是否突出显示当前日期。默认值：决定是否突出显示当前

13、日期。默认值：trueminYearInt允许是最小年份。默认值：允许是最小年份。默认值：1900maxYearInt允许是最大年份。默认值：允许是最大年份。默认值：2100disabledDaysArray由不能被选中的基于由不能被选中的基于0的索引天数指明的整数数组的索引天数指明的整数数组。默认值：。默认值：dayNamesArray一组用作日期名称标签的字符串值。默认值：一组用作日期名称标签的字符串值。默认值：S，M，T，W，T，F，SallowMultipleSelectionBoolean决定是否可以选中多个日期。默认值：决定是否可以选中多个日期。默认值：falseallowDisj

14、ointSelectionBoolean决定是否可以选中不连续的日期。默认值：决定是否可以选中不连续的日期。默认值：truee-mail：MXML组件篇组件篇 交互式控件交互式控件n ScrollBar控件：控件：VScrollBar 和和 HScrollBarn Slider控件：控件：VSlider 和和 HSlider HSlider控件的属性控件的属性(DemoSlider)属性属性数据类型数据类型描述描述valueNumber基于滑块的位置基于滑块的位置Slider控件当前所选中的值。控件当前所选中的值。默认值：默认值：0thumbCountNumber显示的滑块数量。可能的值是显示

15、的滑块数量。可能的值是1和和2。默认值：。默认值：1minimumNumberSlider的最小值。默认值：的最小值。默认值：0maximumNumberSlider的最大值。默认值：的最大值。默认值：10tickIntervalNumber用于计算刻度间隔的数值。默认值：用于计算刻度间隔的数值。默认值：0snapIntervalNumber强制滑块对齐到某一刻度。默认值：强制滑块对齐到某一刻度。默认值：0tickValuesArray该属性决定在滑块上显示刻度线。取值范围是该属性决定在滑块上显示刻度线。取值范围是minmum和和maxmum之间之间labelsArray用作标签的字符串数组。

16、用作标签的字符串数组。e-mail：MXML组件篇组件篇 v 布局容器布局容器介绍介绍 布局容器是含有其他可视化组件的矩形区域。包含以下几种：布局容器是含有其他可视化组件的矩形区域。包含以下几种：n VBox：是一个矩形区域，使用该容器能够以单列的方式从上至下列出该容器中：是一个矩形区域，使用该容器能够以单列的方式从上至下列出该容器中嵌套的子对象。嵌套的子对象。n HBox：是一个矩形区域，使用该容器能够以单列行方式从左至右列出该容器中：是一个矩形区域，使用该容器能够以单列行方式从左至右列出该容器中嵌套的子对象。嵌套的子对象。n Canvas：是一个矩形区域，使用该容器可能将该容器中嵌套的子对

17、象设置在相：是一个矩形区域，使用该容器可能将该容器中嵌套的子对象设置在相对于顶部对于顶部/左侧锚点或基于约束的锚点的特定位置。左侧锚点或基于约束的锚点的特定位置。n Panel：使用该容器可以创建一个类似于对话框的矩形区域。：使用该容器可以创建一个类似于对话框的矩形区域。e-mail：MXML组件篇组件篇 v Box容器样式表容器样式表属性属性可接受的值可接受的值/数据类型数据类型描述描述verticalAligntop,middle,bottom将容器中所有对象都垂直对齐。默认值：将容器中所有对象都垂直对齐。默认值：tophorizontalAlignleft,center,right将容器

18、中所有对象都水平对齐。默认值：将容器中所有对象都水平对齐。默认值：leftverticalGapNumber对象之间的垂直距离。默认值：对象之间的垂直距离。默认值：6horizontalAlignNumber对象之间的水平距离。默认值：对象之间的水平距离。默认值：6paddingLeftNumber从容器的左侧边缘到第一个嵌套对象之间从容器的左侧边缘到第一个嵌套对象之间的距离。默认值：的距离。默认值：0paddingRightNumber从容器的右侧边缘到第一个嵌套对象之间从容器的右侧边缘到第一个嵌套对象之间的距离。默认值：的距离。默认值：0paddingTopNumber从容器的顶部边缘到第

19、一个嵌套对象之间从容器的顶部边缘到第一个嵌套对象之间的距离。默认值：的距离。默认值：0paddingBottomNumber从容器的底部边缘到第一个嵌套对象之间从容器的底部边缘到第一个嵌套对象之间的距离。默认值：的距离。默认值：0e-mail：MXML组件篇组件篇 v 层叠样式层叠样式(CSS)介绍介绍 Flex声明样式的方法如下：声明样式的方法如下：n 行内样式：在对象的行内样式：在对象的MXML 声明中声明为属性。声明中声明为属性。n 内样式表：在内样式表：在MXML 文件中的文件中的标记组中声明样式。标记组中声明样式。n 外部样式：创建为使用外部样式：创建为使用.css 文件扩展名的文本

20、文件。文件扩展名的文本文件。n 编译样式表：将样式创建为编译样式表：将样式创建为.swf 文件并且可以在应用程序运行时加载它。文件并且可以在应用程序运行时加载它。Flex实现的实现的CSS拥有拥有3种选择器：种选择器：n 类型选择器类型选择器n 样式名称选择器样式名称选择器n 全局选择器全局选择器(global)ActionScript 控制样式：控制样式：n 设置和获取样式信息。设置和获取样式信息。setStyle 和和 getStylen 运行时修改样式选择器运行时修改样式选择器 创建一个绑定到样式名称或样式选择器的创建一个绑定到样式名称或样式选择器的CSSStyleDeclaration

21、 实例。实例。创建一个不带有选择器的创建一个不带有选择器的 CSSStyleDeclaration 实例，然后使用实例，然后使用 StyleManager 类的类的setStyleDeclaration()方法将样式绑定到选择器。方法将样式绑定到选择器。MXML组件篇组件篇e-mail：v 小结小结主要介绍了主要介绍了Flex Builder 3 组件及容器的使用方法组件及容器的使用方法：组件的实例化：组件的实例化：MXML声明、声明、ActionScript声明。声明。组件的分类：可视化组件、非可视化组件。组件的分类：可视化组件、非可视化组件。常用控件的介绍：文本控件，按钮控件，日期控件，交

22、互式控件常用控件的介绍：文本控件，按钮控件，日期控件，交互式控件。布局容器的介绍。布局容器的介绍。层叠样式层叠样式CSS声明，相关控制声明，相关控制。Flex3基础篇基础篇MXML组件篇组件篇 处理数据篇处理数据篇总览总览ActionScript 3.0语法篇语法篇实例实例篇篇e-mail：处理数据篇处理数据篇 v 数据绑定的数据绑定的介绍介绍 概述：概述：数据绑定是连接一个对象中数据到另一个对象的处理过程。它提数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便途径供了在应用程序中传递数据的方便途径。方法：方法：n 使用大括号使用大括号()语法语法(Demo

23、Bind1)数据绑定需要源属性，目标属性，触发事件。触发事件表名了数据绑定需要源属性，目标属性，触发事件。触发事件表名了合适需要从源向目标拷贝数据。合适需要从源向目标拷贝数据。e-mail：处理数据篇处理数据篇 n 使用在大括号中使用在大括号中ActionScript表达式表达式(DemoBind2)大括号中的绑定表达式能够被包含在大括号中的绑定表达式能够被包含在ActionScript表达式中用来表达式中用来发回一个结果。发回一个结果。用于以下类型的绑定：用于以下类型的绑定：在大括号中一个单独的可绑定属性在大括号中一个单独的可绑定属性在大括号中使用字符串串联，其中报站一个可绑定的属性在大括号

24、中使用字符串串联，其中报站一个可绑定的属性在大括号中基于可绑定属性的计算在大括号中基于可绑定属性的计算在大括号中使用条件运算来判断一个可绑定属性在大括号中使用条件运算来判断一个可绑定属性 e-mail：处理数据篇处理数据篇 n 在在MXML中使用中使用标签标签(DemoBind3)可以使用可以使用标记作为大括号语法的大体方案。当你使标记作为大括号语法的大体方案。当你使用用标记时，你需要将源属性赋给标记时，你需要将源属性赋给标标记的记的source属性，并且目标属性赋给属性，并且目标属性赋给detination属性。这与使用属性。这与使用大括号语法是等同的。大括号语法是等同的。n 在在Actio

25、nScript中使用绑定中使用绑定(DemoBind4)一般在一般在MXML中使用大括号中使用大括号()或或标记来定义数据标记来定义数据绑定。你也可以在绑定。你也可以在ActionScript中定义数据绑定，通中定义数据绑定，通 过使用过使用mx.binding.utils.BindingUtils类来实现。这个类的静态方法类来实现。这个类的静态方法bindProperty()方法使你创建一个基于变量的方法使你创建一个基于变量的 绑定，绑定，bindSetter()方法显示一个基于方法显示一个基于setter方法的绑定。方法的绑定。e-mail：处理数据篇处理数据篇 v 复杂数据存储复杂数据存

26、储介绍介绍 概述：概述：一个数据模型就是一个一个数据模型就是一个ActionScript对象，这个对象的属性用来对象，这个对象的属性用来存储应用程序之地你的数据。在向服务器发送数据之前，或者从存储应用程序之地你的数据。在向服务器发送数据之前，或者从服务器接收数据但还没有使用之前，数据模型提供一个在服务器接收数据但还没有使用之前，数据模型提供一个在Flex应应用程序中存储数据的途径。用程序中存储数据的途径。Adobe Flex应用程序与服务器之间的应用程序与服务器之间的通信只发生在通信只发生在Flex应用程序需要检索的数据尚未可用，和使用应用程序需要检索的数据尚未可用，和使用Flex应用程序中的

27、新数据更新服务器端应用程序中的新数据更新服务器端 的数据源。的数据源。注：使用模型不是一定需要连接到服务器。例如，你可以使用注：使用模型不是一定需要连接到服务器。例如，你可以使用MXML或或ActionScript静态对象，或者从本地静态对象，或者从本地XML文件中获取。文件中获取。方法：方法：n 使用使用标记标记n 使用基于脚本的模型使用基于脚本的模型n 使用基于类的模型使用基于类的模型n 使用使用标记标记e-mail：处理数据篇处理数据篇 v 数据格式化数据格式化介绍介绍 概述：概述：Adobe Flex formatters是将格式化为字符串的组件。是将格式化为字符串的组件。Format

28、ter执行单向的将原始数据格式化为字符串的转换。执行单向的将原始数据格式化为字符串的转换。它它们在显示文本们在显示文本字段之前触发。字段之前触发。Flex包含标准格式器使你能够格式化货币，日期，包含标准格式器使你能够格式化货币，日期，数字，电话号码和邮政编码。数字，电话号码和邮政编码。在在Flex中所有的中所有的formatter（格式器）都是（格式器）都是mx.fomatters.Formatter类的子类。一个类的子类。一个Formatter类声明一个类声明一个format()方法，这个方法需要一个值，返回一个字符串方法，这个方法需要一个值，返回一个字符串 常用格式化组件：常用格式化组件：

29、n 电话号码格式器组件：电话号码格式器组件：n 日期格式器组件：日期格式器组件：n 数字格式器组件：数字格式器组件：n 邮编格式器组件：邮编格式器组件：e-mail：处理数据篇处理数据篇 v 数据格式化数据格式化介绍介绍(FormatDemo1)常用格式化组件：常用格式化组件：n 电话号码格式器组件：电话号码格式器组件：n 日期格式器组件：日期格式器组件：n 数字格式器组件：数字格式器组件：n 邮编格式器组件：邮编格式器组件：e-mail：处理数据篇处理数据篇 v 数据验证数据验证 常用的验证类常用的验证类(DemoValidator)n CurrencyValidator：检查是否符合有效的

30、货币样式。：检查是否符合有效的货币样式。n DateVlidator：检查是否符合有效的日期对象。：检查是否符合有效的日期对象。n EmailVlidator：检查是否符合有效的电子邮件地址格式。：检查是否符合有效的电子邮件地址格式。n NumberVlidator：检查值是数字还是可以解析为数字的字符串。：检查值是数字还是可以解析为数字的字符串。n RegExpValidator：检查是否符合正则表达式的格式。：检查是否符合正则表达式的格式。n StringValidator：检查字符串是否符合自定义标准，包括最大和最小长度。：检查字符串是否符合自定义标准，包括最大和最小长度。Flex3基础

31、篇基础篇MXML组件篇组件篇 处理数据篇处理数据篇总览总览ActionScript 3.0语法篇语法篇实例实例篇篇e-mail：实例篇实例篇(EmployeeMgmt-Server)v BlazeDS 的介绍的介绍BlazeDS 是一个基于服务器的是一个基于服务器的 Java 远程控制远程控制(remoting)和和 Web 消息传递消息传递(messaging)技术，它能技术，它能够使得后端的够使得后端的 Java 应用程序和运行在浏览器上的应用程序和运行在浏览器上的 Adobe Flex 应用程序相互通信。应用程序相互通信。e-mail：实例篇实例篇(EmployeeMgmt-Server

32、)v BlazeDS 的结构图的结构图(这个图翻译自这个图翻译自Adobe的的BlazeDS官方官方文档文档)e-mail：实例篇实例篇(EmployeeMgmt-Server)v BlazeDS 依赖的依赖的 Jar backport-util-concurrent.jar commons-httpclient.jar commons-logging.jar flex-messaging-common.jar flex-messaging-core.jar flex-messaging-proxy.jar flex-messaging-remoting.jar e-mail：实例篇实例篇(E

33、mployeeMgmt-Server)v Web.xml的配置的配置在在 web.xml 中添加中添加 HttpFlexSession 和和 Servlet 映射映射。HttpFlexSession 是是 BlazeDS 提供的一个提供的一个 Listener，负责监听负责监听 Flex 远程调用请求，并进行一些初始远程调用请求，并进行一些初始化设置：化设置：flex.messaging.HttpFlexSession e-mail：实例篇实例篇(EmployeeMgmt-Server)v Web.xml的配置的配置MessageBrokerServlet 是真正处理是真正处理 Flex 远程

34、调用请求远程调用请求的的 Servlet，我们需要将其映射到指定的，我们需要将其映射到指定的 URL：messageBroker flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 0 messageBroker /messagebroker/*e-mail：实例篇实例篇(EmployeeMgmt-Server)v 定义定义flexService服务服务(remoting-config.xml)由于由于 BlazeDS 需要将需要将 Java 接口接口

35、 FlexService 暴露给暴露给 Flex 前端，因此，我们在配置文件前端，因此，我们在配置文件 remoting-config.xml 中将中将 FlexService 接口声明为一个服务：接口声明为一个服务：org.expressme.employee.mgmt.flex.FlexServiceImpl application e-mail：实例篇实例篇(EmployeeMgmt-Server)v 通过通过factory定义定义flexService服务服务(remoting-config.xml)v 定义定义flexFactory服务服务(services-config.xml)f

36、lexFactory flexService application e-mail：实例篇实例篇(EmployeeMgmt-Server)v FlexFactoryImpl 实现了实现了 FlexFactory 接口，该接口完接口，该接口完成两件事情：成两件事情：创建创建 FactoryInstance 对象；对象；通过通过 FactoryInstance 对象查找我们需要的对象查找我们需要的 FlexService。因此，需要一个因此，需要一个 FactoryInstance 的实现类，我们编写一的实现类，我们编写一个个 SpringFactoryInstance，以便从，以便从 Sprin

37、g 的容器中查找的容器中查找 FlexService。FlexFactoryImpl 负责实例化负责实例化 SpringFactoryInstance 并并通过通过 SpringFactoryInstance 的的 lookup()方法查找方法查找 FlexService 接口对象接口对象。e-mail：实例篇实例篇(EmployeeMgmt-Server)v以下是以下是 BlazeDS 查找查找 FlexService 接口的过程：接口的过程：1.BlazeDS 将首先创建将首先创建 FlexFactory 的实例的实例 FlexFactoryImpl；2.当接收到当接收到 Flex 前端的

38、远程调用请求时，前端的远程调用请求时，BlazeDS 通过通过 FlexFactory 创建创建 FactoryInstance 对象，并传入请求的对象，并传入请求的 Service ID。在这个应用程序中，被创建的。在这个应用程序中，被创建的 FactoryInstance 实际对象是实际对象是 SpringFactoryInstance；3.FactoryInstance 的的 lookup()方法被调用，在方法被调用，在 SpringFactoryInstance 中，首先查找中，首先查找 Spring 容器，然后容器，然后通过通过 Bean 的的 ID 查找查找 Bean，最终，最终，FlexService 接口的实接口的实例被返回。例被返回。e-mail：实例篇实例篇(EmployeeMgmt-Flex)v新建工程新建工程(第一步第一步)：e-mail：实例篇实例篇(EmployeeMgmt-Flex)v新建工程新建工程(第二步第二步)：指定指定 Server 端的配置文件地址端的配置文件地址LOGO