Flex3教程.ppt

1、Flex3介绍文稿,总览,ActionScript 3.0语法篇,实例篇,e-mail：,Flex3基础篇技术特点,了解Flex应用程序 产品线包含以下部分 Flex3 Software Developers Kit (SDK) Flex Builder 3 注：SDK是免费的，Flex Builder只能通过Adobe Systems购买许可才能获取。 Flex3 包含两种编程语言 ActionScript3 包含面向对象的语言的大部分元素：类定义语法、类包结构化、变量的强数据类型以及类继承。 MXML 纯粹是一种基于XML的标记语言，用于定义Flex应用程序及基大量组件。MXML中的大部分

2、元素都对应着ActionScript3类。 注：可以将MXML描述为ActionScript3 的一种“方便语言”，用它编写应用程序比完全用ActionScript3 编码更加简单和快速。,Flex3基础篇编译和发布,e-mail：,Flex Builder 用户界面 MXML 编辑器 ActionScript 编辑器 Flex Builder 视图 Flex Navigator 视图 Outline 视图 Problems 视图 Design 视图 调试视图,Flex3基础篇熟悉开发环境,e-mail：,获取帮助 探索帮助内容 搜索帮助术语 Flex Builder 界面中搜索 Help C

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

4、ML 和 ActionScript3。 Flex 应用程的编译和发布。 获取帮助方式介绍。 搜索代码方式介绍。 Flex Builder 3 所包含视图的介绍。,总览,ActionScript 3.0语法篇,实例篇,e-mail：,ActionScript 3.0语法篇,数据类型 基本数据类型包括：Boolean、int、Number、String、uint。 ActionScript 核心类还定义下列复杂数据类型：Object、Array、Date、Error、Function、RegExp、XML 和 XMLList。 基本数据类型,e-mail：,ActionScript 3.0语法篇,

5、运算符和表达式,e-mail：,ActionScript 3.0语法篇,运算符和表达式,总览,ActionScript 3.0语法篇,实例篇,组件实例化 使用MXML实例化组件 示例代码 使用ActionScript实例化组件 示例代码,e-mail：,MXML组件篇,import mx.controls.Label; var myLabel:Label = new Label(); myLabel.text = Hello World!; this.addChild(myLabel);, ,组件分类 可视化控件 容器是指可以含有其他对象的可视化组件。 控件是指显示信息或提供应用程序用户交互功

6、能的可视化组件。 示例代码 非可视组件 示例代码,e-mail：,MXML组件篇, ,e-mail：,MXML组件篇,常用控件： 文本控件 文本显示控件：Label和Text 文本输入控件：TextInput、TextArea 和 RichTextEdit Label文本控件属性(DemoText),e-mail：,MXML组件篇,按钮控件 Button 控件 LinkButton 控件 CheckBox 控件 RadioButton 控 Button水平标尺控件的属性(DemoButton),e-mail：,MXML组件篇,日期控件：DateChooser 和 DateField DateC

7、hooser控件的属性(DemoDate) 可以显示一个交互式日历，该日历中会显示年份和月份，操作如下： 一次向前或向后浏览一个月。 通过鼠标操作选择单个日期、多个日期或某个日期范围。,e-mail：,MXML组件篇,交互式控件 ScrollBar控件：VScrollBar 和 HScrollBar Slider控件：VSlider 和 HSlider HSlider控件的属性(DemoSlider),e-mail：,MXML组件篇,布局容器介绍 布局容器是含有其他可视化组件的矩形区域。包含以下几种： VBox：是一个矩形区域，使用该容器能够以单列的方式从上至下列出该容器中嵌套的子对象。 HB

8、ox：是一个矩形区域，使用该容器能够以单列行方式从左至右列出该容器中嵌套的子对象。 Canvas：是一个矩形区域，使用该容器可能将该容器中嵌套的子对象设置在相对于顶部/左侧锚点或基于约束的锚点的特定位置。 Panel：使用该容器可以创建一个类似于对话框的矩形区域。,e-mail：,MXML组件篇,Box容器样式表,e-mail：,MXML组件篇,层叠样式(CSS)介绍 Flex声明样式的方法如下： 行内样式：在对象的MXML 声明中声明为属性。 内样式表：在MXML 文件中的标记组中声明样式。 外部样式：创建为使用.css 文件扩展名的文本文件。 编译样式表：将样式创建为.swf 文件并且可以

9、在应用程序运行时加载它。 Flex实现的CSS拥有3种选择器： 类型选择器 样式名称选择器 全局选择器(global) ActionScript 控制样式： 设置和获取样式信息。setStyle 和 getStyle 运行时修改样式选择器 创建一个绑定到样式名称或样式选择器的CSSStyleDeclaration 实例。 创建一个不带有选择器的 CSSStyleDeclaration 实例，然后使用 StyleManager 类的setStyleDeclaration() 方法将样式绑定到选择器。,MXML组件篇,e-mail：,小结 主要介绍了Flex Builder 3 组件及容器的使用方

10、法： 组件的实例化：MXML声明、ActionScript声明。 组件的分类：可视化组件、非可视化组件。 常用控件的介绍：文本控件，按钮控件，日期控件，交互式控件。 布局容器的介绍。 层叠样式CSS声明，相关控制。,总览,ActionScript 3.0语法篇,实例篇,e-mail：,处理数据篇,数据绑定的介绍 概述： 数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便途径。 方法： 使用大括号()语法(DemoBind1) 数据绑定需要源属性，目标属性，触发事件。触发事件表名了合适需要从源向目标拷贝数据。,e-mail：,处理数据篇,使用在大括号中Acti

11、onScript表达式(DemoBind2) 大括号中的绑定表达式能够被包含在ActionScript表达式中用来发回一个结果。 用于以下类型的绑定： 在大括号中一个单独的可绑定属性 在大括号中使用字符串串联，其中报站一个可绑定的属性 在大括号中基于可绑定属性的计算 在大括号中使用条件运算来判断一个可绑定属性,e-mail：,处理数据篇,在MXML中使用标签 (DemoBind3) 可以使用标记作为大括号语法的大体方案。当你使用标记时，你需要将源属性赋给标记的source属性，并且目标属性赋给detination属性。这与使用大括号语法是等同的。 在ActionScript中使用绑定(Demo

12、Bind4) 一般在MXML中使用大括号()或标记来定义数据绑定。你也可以在ActionScript中定义数据绑定，通 过使用mx.binding.utils.BindingUtils类来实现。这个类的静态方法bindProperty()方法使你创建一个基于变量的 绑定，bindSetter()方法显示一个基于setter方法的绑定。,e-mail：,处理数据篇,复杂数据存储介绍 概述： 一个数据模型就是一个ActionScript对象，这个对象的属性用来存储应用程序之地你的数据。在向服务器发送数据之前，或者从服务器接收数据但还没有使用之前，数据模型提供一个在Flex应用程序中存储数据的途径。

13、Adobe Flex应用程序与服务器之间的通信只发生在Flex应用程序需要检索的数据尚未可用，和使用Flex应用程序中的新数据更新服务器端 的数据源。 注：使用模型不是一定需要连接到服务器。例如，你可以使用MXML或ActionScript静态对象，或者从本地XML文件中获取。 方法： 使用标记 使用基于脚本的模型 使用基于类的模型 使用标记,e-mail：,处理数据篇,数据格式化介绍 概述： Adobe Flex formatters是将格式化为字符串的组件。Formatter执行单向的将原始数据格式化为字符串的转换。它们在显示文本字段之前触发。Flex包含标准格式器使你能够格式化货币，日期

14、，数字，电话号码和邮政编码。 在Flex中所有的formatter（格式器）都是mx.fomatters.Formatter类的子类。一个Formatter类声明一个format()方法，这个方法需要一个值，返回一个字符串 常用格式化组件： 电话号码格式器组件： 日期格式器组件： 数字格式器组件： 邮编格式器组件：,e-mail：,处理数据篇,数据格式化介绍(FormatDemo1) 常用格式化组件： 电话号码格式器组件： 日期格式器组件： 数字格式器组件： 邮编格式器组件：,e-mail：,处理数据篇,数据验证 常用的验证类(DemoValidator) CurrencyValidator：

15、检查是否符合有效的货币样式。 DateVlidator：检查是否符合有效的日期对象。 EmailVlidator：检查是否符合有效的电子邮件地址格式。 NumberVlidator：检查值是数字还是可以解析为数字的字符串。 RegExpValidator：检查是否符合正则表达式的格式。 StringValidator：检查字符串是否符合自定义标准，包括最大和最小长度。,总览,ActionScript 3.0语法篇,实例篇,e-mail：,实例篇(EmployeeMgmt-Server),BlazeDS 的介绍 BlazeDS 是一个基于服务器的 Java 远程控制 (remoting)和 We

16、b 消息传递 (messaging) 技术，它能够使得后端的 Java 应用程序和运行在浏览器上的 Adobe Flex 应用程序相互通信。,e-mail：,实例篇(EmployeeMgmt-Server),BlazeDS 的结构图(这个图翻译自Adobe的BlazeDS官方文档 ),e-mail：,实例篇(EmployeeMgmt-Server),BlazeDS 依赖的 Jar backport-util-concurrent.jar commons-httpclient.jar commons-logging.jar flex-messaging-common.jar flex-messa

17、ging-core.jar flex-messaging-proxy.jar flex-messaging-remoting.jar,e-mail：,实例篇(EmployeeMgmt-Server),Web.xml的配置 在 web.xml 中添加 HttpFlexSession 和 Servlet 映射。HttpFlexSession 是 BlazeDS 提供的一个 Listener，负责监听 Flex 远程调用请求，并进行一些初始化设置：, flex.messaging.HttpFlexSession ,e-mail：,实例篇(EmployeeMgmt-Server),Web.xml的配置

18、 MessageBrokerServlet 是真正处理 Flex 远程调用请求的 Servlet，我们需要将其映射到指定的 URL：, messageBroker flex.messaging.MessageBrokerServlet services.configuration.file /WEB-INF/flex/services-config.xml 0 messageBroker /messagebroker/* ,e-mail：,实例篇(EmployeeMgmt-Server),定义flexService服务(remoting-config.xml) 由于 BlazeDS 需要将 Java 接口 FlexService 暴露给 Flex 前端，因此，我们在配置文件 remoting-config.xml 中将 FlexService 接口声明为一个服务：, org.expressme.employee.mgmt.flex.FlexServiceImpl application ,e-mail：,实例篇(EmployeeMgmt-Server),通过factory定义flexService服务(remoting-conf