Flex3教程.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Company Logo,*,Click to edit Master title style,LOGO,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,Click to edit Master title style,*,Flex3,介绍文稿,wangg,q,Flex3,基础篇,MXML组件篇,处理数,据篇,总览,ActionScript,3.0,语法篇,实例,篇,e-mail,：,wangg,q,Flex3,基础篇技术特点,了解,Flex,应用程序,产品线包含以下部分,Flex3 Software Developers Kit(SDK),Flex Builder 3,注：,SDK,是免费的，,Flex Builder,只能通过,Adobe Systems,购买许可才能获取。,Flex3,包含两种编程语言,ActionScript3,包含面向对象的语言的大部分元素：类定义语法、类包结构化、变量的强数据类型以及类继承。,MXML,纯粹是一种基于,XML,的标记语言，用于定义,Flex,应用程序及基大量组件。,MXML,中的大部分元素都对应着,ActionScript3,类。,注：可以将,MXML,描述为,ActionScript3,的一种“方便语言”，用它编写应用程序比完全用,ActionScript3,编码更加简单和快速。,Flex3基础篇,编译和发布,e-mail,：,wanggq,Flex Builder 用户界面,MXML 编辑器,ActionScript 编辑器,Flex Builder 视图,Flex Navigator 视图,Outline 视图,Problems 视图,Design 视图,调试视图,Flex3,基础篇熟悉开发环境,e-mail,：,wangg,q,获取帮助,探索帮助内容,搜索帮助术语,Flex Builder 界面中搜索,Help Contents 窗口中搜索,使用动态帮助,在Eclipse编辑器中显示动态帮助,在独立的窗口中显示动态帮助（Shift+F2）,Flex3,基础篇熟悉开发环境,e-mail,：,wangg,q,Flex3基础篇熟悉开发环境,e-mail,：,wanggq,搜索代码,使用 Eclipse 搜索工具,使用Find/Replace,使用Find in Files,使用 Flex Builder 代码模型搜索工具,搜索对象引用,搜索对象声明,重构代码,Flex3基础篇,e-mail,：,wanggq,小结,主要介绍了Flex Builder 3 的一些性质和行为：,了解,Flex,的产品包含,SDK,和,Flex Builder,。,Flex,语言包含：,MXML,和,ActionScript3,。,Flex,应用程的编译和发布。,获取帮助方式介绍。,搜索代码方式介绍。,Flex Builder 3,所包含视图的介绍。,Flex3,基础篇,MXML组件篇,处理数,据篇,总览,ActionScript,3.0,语法篇,实例,篇,e-mail,：,wanggq,ActionScript 3.0语法篇,数据类型,基本数据类型包括：,Boolean,、,int,、,Number,、,String,、,uint,。,ActionScript,核心类还定义下列复杂数据类型：,Object,、,Array,、,Date,、,Error,、,Function,、,RegExp,、,XML,和,XMLList,。,基本数据类型,类型,有效位数,描述,默认值,Boolean,1,true,和,false,0:false,int,32,位,表示带符号的整数。,0,Number,52,位,可以表示整数、无符号整数和浮点数。,uint,32,位,表示不带符号的整数。,(,非负整数,),0,String,16,位,表示一个,16,位字符的序列。,null,e-mail,：,wanggq,ActionScript 3.0语法篇,运算符和表达式,名称,种类,表达式格式,算术运算符,+、-、*、/、%、+、-,标达式 算术运算符,关系运算符,、,=,、,、,=,、,=,、,=,、！,=,表达式 关系运算符 表达式,逻辑运算符,&,、,|,、,!,表达式 逻辑运算符 表达式,赋值运算符,简单赋值：,=,复合算术赋值：,+=,、,-=,、*,=,、,/=,、,%=,标识符,赋值运算符,表达式,逗号运算符,表达式,1,表达式,2,条件运算符,?:,表达式 条件运算符 值,1,值,2,Flex3,基础篇,MXML组件篇,处理数,据篇,总览,ActionScript,3.0,语法篇,实例,篇,组件实例化,使用MXML实例化组件,示例代码,使用ActionScript实例化组件,示例代码,e-mail,：,wanggq,MXML组件篇,import mx.controls.Label;,var myLabel:Label=new Label();,myLabel.text=Hello World!;,this.addChild(myLabel);,组件分类,可视化控件,容器是指可以含有其他对象的可视化组件。,控件是指显示信息或提供应用程序用户交互功能的可视化组件。,示例代码,非可视组件,示例代码,e-mail,：,wanggq,MXML组件篇,e-mail,：,wanggq,MXML组件篇,常用控件：,文本控件,文本显示控件：Label和Text,文本输入控件：TextInput、TextArea 和 RichTextEdit,Label,文本控件属性,(,DemoText,),属性,数据类型,描述,condenseWhite,Boolean,表时是否从文本中删除空白区域,(,空白字符、制表符和换行符,),。,RichTextEdit,不支持该属性,Text,String,不含有,HTML,标记的文本,truncateToFit,Boolean,该属性决定是否截去文本,selectable,Boolean,该属性控制文本是否可以被选中,htmlText,String,含有,HTML,标记的文本,e-mail,：wanggq,MXML组件篇,按钮控件,Button 控件,LinkButton 控件,CheckBox 控件,RadioButton 控,Button,水平标尺控件的属性,(Demo,Button,),属性,数据类型,描述,emphasized,Boolean,获取或设置一个布尔值，指示当按钮处于弹起状态时，,Button,组件周围是否绘有边框。,label,String,按扭上显示的文本。,icon,按扭上显示的图标,。如：,Embed(source,=“,icon.jpg,”),e-mail,：,wanggq,MXML组件篇,日期控件：DateChooser 和 DateField,DateChooser,控件的属性,(Demo,Date,),可以显示一个交互式日历，该日历中会显示年份和月份，操作如下：,一次向前或向后浏览一个月。,通过鼠标操作选择单个日期、多个日期或某个日期范围。,属性,数据类型,描述,selectedDate,Date,当前选中的日期,showToday,Boolean,决定是否突出显示当前日期。默认值：,true,minYear,Int,允许是最小年份。默认值：,1900,maxYear,Int,允许是最大年份。默认值：,2100,disabledDays,Array,由不能被选中的基于,0,的索引天数指明的整数数组。默认值：,dayNames,Array,一组用作日期名称标签的字符串值。默认值：,S,，,M,，,T,，,W,，,T,，,F,，,S,allowMultipleSelection,Boolean,决定是否可以选中多个日期。默认值：,false,allowDisjointSelection,Boolean,决定是否可以选中不连续的日期。默认值：,true,e-mail,：,wanggq,MXML组件篇,交互式控件,ScrollBar控件：VScrollBar 和 HScrollBar,Slider控件：VSlider 和 HSlider,HSlider,控件的属性,(,DemoSlider,),属性,数据类型,描述,value,Number,基于滑块的位置,Slider,控件当前所选中的值。默认值：,0,thumbCount,Number,显示的滑块数量。可能的值是,1,和,2,。默认值：,1,minimum,Number,Slider,的最小值。默认值：,0,maximum,Number,Slider,的最大值。默认值：,10,tickInterval,Number,用于计算刻度间隔的数值。默认值：,0,snapInterval,Number,强制滑块对齐到某一刻度。默认值：,0,tickValues,Array,该属性决定在滑块上显示刻度线。取值范围是,minmum,和,maxmum,之间,labels,Array,用作标签的字符串数组。,e-mail,：,wanggq,MXML组件篇,布局容器,介绍,布局容器是含有其他可视化组件的矩形区域。包含以下几种：,VBox,：是一个矩形区域，使用该容器能够以单列的方式从上至下列出该容器中嵌套的子对象。,HBox,：是一个矩形区域，使用该容器能够以单列行方式从左至右列出该容器中嵌套的子对象。,Canvas,：是一个矩形区域，使用该容器可能将该容器中嵌套的子对象设置在相对于顶部,/,左侧锚点或基于约束的锚点的特定位置。,Panel,：使用该容器可以创建一个类似于对话框的矩形区域。,e-mail,：,wanggq,MXML组件篇,Box,容器样式表,属性,可接受的值,/,数据类型,描述,verticalAlign,top,middle,bottom,将容器中所有对象都垂直对齐。默认值：,top,horizontalAlign,left,center,right,将容器中所有对象都水平对齐。默认值：,left,verticalGap,Number,对象之间的垂直距离。默认值：,6,horizontalAlign,Number,对象之间的水平距离。默认值：,6,paddingLeft,Number,从容器的左侧边缘到第一个嵌套对象之间的距离。默认值：,0,paddingRight,Number,从容器的右侧边缘到第一个嵌套对象之间的距离。默认值：,0,paddingTop,Number,从容器的顶部边缘到第一个嵌套对象之间的距离。默认值：,0,paddingBottom,Number,从容器的底部边缘到第一个嵌套对象之间的距离。默认值：,0,e-mail,：,wanggq,MXML组件篇,层叠样式(CSS),介绍,Flex声明样式的方法如下：,行内样式：在对象的MXML 声明中声明为属性。,内样式表：在MXML 文件中的标记组中声明样式。,外部样式：创建为使用.css 文件扩展名的文本文件。,编译样式表：将样式创建为.swf 文件并且可以在应用程序运行时加载它。,Flex实现的CSS拥有3种选择器：,类型选择器,样式名称选择器,全局选择器(global),ActionScript 控制样式：,设置和获取样式信息。setStyle 和 getStyle,运行时修改样式选择器,创建一个绑定到样式名称或样式选择器的CSSStyleDeclaration 实例。,创建一个不带有选择器的 CSSStyleDeclaration 实例，然后使用 StyleManager 类的setStyleDeclaration()方法将样式绑定到选择器。,MXML组件篇,e-mail,：,wanggq,小结,主要介绍了Flex Builder 3,组件及容器的使用方法,：,组件的实例化：,MXML,声明、,ActionScript,声明。,组件的分类：可视化组件、非可视化组件。,常用控件的介绍：文本控件，按钮控件，日期控件，交互式控件,。,布局容器的介绍。,层叠样式,CSS,声明，相关控制,。,Flex3,基础篇,MXML组件篇,处理数据篇,总览,ActionScript,3.0,语法篇,实例,篇,e-mail,：,wanggq,处理数据篇,数据绑定的,介绍,概述：,数据绑定是连接一个对象中数据到另一个对象的处理过程。它提供了在应用程序中传递数据的方便途径,。,方法：,使用大括号()语法,(,DemoBind1,),数据绑定需要源属性，目标属性，触发事件。触发事件表名了合适需要从源向目标拷贝数据。,e-mail,：,wanggq,处理数据篇,使用在大括号中ActionScript表达式,(,DemoBind2,),大括号中的绑定表达式能够被包含在,ActionScript,表达式中用来发回一个结果。,用于以下类型的绑定：,在大括号中一个单独的可绑定属性,在大括号中使用字符串串联，其中报站一个可绑定的属性,在大括号中基于可绑定属性的计算,在大括号中使用条件运算来判断一个可绑定属性,e-mail,：,wanggq,处理数据篇,在,MXML,中使用,标签,(,Demo,Bind3,),可以使用,标记作为大括号语法的大体方案。当你使用,标记时，你需要将源属性赋给,标记的,source,属性，并且目标属性赋给,detination,属性。这与使用大括号语法是等同的。,在ActionScript中使用绑定,(,Demo,Bind4,),一般在,MXML,中使用大括号,(),或,标记来定义数据绑定。你也可以在,ActionScript,中定义数据绑定，通 过使用,mx.binding.utils.BindingUtils,类来实现。这个类的静态方法,bindProperty,(),方法使你创建一个基于变量的 绑定，,bindSetter,(),方法显示一个基于,setter,方法的绑定。,e-mail,：,wanggq,处理数据篇,复杂数据存储,介绍,概述：,一个数据模型就是一个ActionScript对象，这个对象的属性用来存储应用程序之地你的数据。在向服务器发送数据之前，或者从服务器接收数据但还没有使用之前，数据模型提供一个在Flex应用程序中存储数据的途径。Adobe Flex应用程序与服务器之间的通信只发生在Flex应用程序需要检索的数据尚未可用，和使用Flex应用程序中的新数据更新服务器端 的数据源。,注：使用模型不是一定需要连接到服务器。例如，你可以使用MXML或ActionScript静态对象，或者从本地XML文件中获取。,方法：,使用标记,使用基于脚本的模型,使用基于类的模型,使用标记,e-mail,：,wanggq,处理数据篇,数据格式化,介绍,概述：,Adobe Flex formatters是将格式化为字符串的组件。Formatter执行单向的将原始数据格式化为字符串的转换。,它,们在显示文本字段之前触发。Flex包含标准格式器使你能够格式化货币，日期，数字，电话号码和邮政编码。,在Flex中所有的formatter（格式器）都是mx.fomatters.Formatter类的子类。一个Formatter类声明一个format()方法，这个方法需要一个值，返回一个字符串,常用格式化组件：,电话号码格式器组件：,日期格式器组件：,数字格式器组件：,邮编格式器组件：,e-mail,：,wanggq,处理数据篇,数据格式化,介绍,(,FormatDemo1,),常用格式化组件：,电话号码格式器组件日期格式器组件：,数字格式器组件：,邮编格式器组件：,e-mail,：,wanggq,处理数据篇,数据验证,常用的验证类,(,DemoValidator,),CurrencyValidator：检查是否符合有效的货币样式。,DateVlidator：检查是否符合有效的日期对象。,EmailVlidator：检查是否符合有效的电子邮件地址格式。,NumberVlidator：检查值是数字还是可以解析为数字的字符串。,RegExpValidator：检查是否符合正则表达式的格式。,StringValidator：检查字符串是否符合自定义标准，包括最大和最小长度。,Flex3,基础篇,MXML组件篇,处理数据篇,总览,ActionScript,3.0,语法篇,实例,篇,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),BlazeDS,的介绍,BlazeDS,是一个基于服务器的,Java,远程控制,(remoting),和,Web,消息传递,(messaging),技术，它能够使得后端的,Java,应用程序和运行在浏览器上的,Adobe Flex,应用程序相互通信。,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),BlazeDS,的结构图,(,这个图翻译自,Adobe,的,BlazeDS,官方文档,),email,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),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,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),Web.xml,的配置,在,web.xml,中添加,HttpFlexSession,和,Servlet,映射,。,HttpFlexSession,是,BlazeDS,提供的一个,Listener,，,负责监听,Flex,远程调用请求，并进行一些初始化设置：,flex.messaging.HttpFlexSession,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),Web.xml,的配置,MessageBrokerServlet,是真正处理,Flex,远程调用请求的,Servlet,，我们需要将其映射到指定的,URL,：,messageBroker,flex.messaging.MessageBrokerServlet,services.configuration.file,/WEB-INF/flex/services-config.xml,0,messageBroker,/messagebroker/*,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),定义,flexService,服务,(,remoting-config.xml,),由于,BlazeDS,需要将,Java,接口,FlexService,暴露给,Flex,前端，因此，我们在配置文件,remoting-config.xml,中将,FlexService,接口声明为一个服务：org.expressme.employee.mgmt.flex.FlexServiceImpl,application,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),通过,factory,定义,flexService,服务,(,remoting-config.xml,),定义,flexFactory,服务,(,services-,config.xml,),flexFactory,flexService,application,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Server,),FlexFactoryImpl,实现了,FlexFactory,接口，该接口完成两件事情：,创建,FactoryInstance,对象；,通过,FactoryInstance,对象查找我们需要的,FlexService,。,因此，需要一个,FactoryInstance,的实现类，我们编写一个,SpringFactoryInstance,，以便从,Spring,的容器中查找,FlexService,。,FlexFactoryImpl,负责实例化,SpringFactoryInstance,并通过,SpringFactoryInstance,的,lookup(),方法查找,FlexService,接口对象,。,e-mail,：wanggq,实例篇,(,EmployeeMgmt,-Server,),以下是,BlazeDS,查找,FlexService,接口的过程：,BlazeDS,将首先创建,FlexFactory,的实例,FlexFactoryImpl,；,当接收到,Flex,前端的远程调用请求时，,BlazeDS,通过,FlexFactory,创建,FactoryInstance,对象，并传入请求的,Service ID,。在这个应用程序中，被创建的,FactoryInstance,实际对象是,SpringFactoryInstance,；,FactoryInstance,的,lookup(),方法被调用，在,SpringFactoryInstance,中，首先查找,Spring,容器，然后通过,Bean,的,ID,查找,Bean,，最终，,FlexService,接口的实例被返回。,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Flex,),新建工程,(,第一步,),：,e-mail,：,wanggq,实例篇,(,EmployeeMgmt,-Flex,),新建工程,(,第二步,),：,指定,Server,端的配置文件地址,wanggq,Thank You!,