Flex学习笔记_新手入门必读教程1.0
Flex学习笔记
2008年7月13日—2008年11月1日
by: https://www.360docs.net/doc/7d198333.html,
October 20, 2010
Change History
Date Author Remarks
2008-08-06 LiGL V1.0
2008-09-06 LiGL 增加BlazeDS,及Cairngrom
2008-09-12 LiGL 增加部分UI
2008-09-13 LiGL 修正部分错误
2008-11-01 LiGL 同步Blog中总结内容
更多信息
此笔记为08年初学Flex时的笔记, 可供新手入门之用. 很多信息可能已经更新, 查看更多内容请访问我的博客: https://www.360docs.net/doc/7d198333.html,或订阅我的Flex Feed: https://www.360docs.net/doc/7d198333.html,/category/flex/feed/
Table of Contents
Change History (ii)
Table of Contents (iii)
1.ActionSctipt 基础概念 (1)
1.1类和对象 Class and Object (1)
1.2包与命名空间 Package and NameSpace (1)
1.3接口 Interface (2)
1.4继承 Inheritance (3)
1.5构造方法Constructor (3)
1.6变量和常量 (4)
1.7实例方法,实例变量和静态方法,静态变量 (5)
1.8赋值 (5)
1.9 AS数据类型 (6)
1.10数据类型转换 (6)
2.ActionScript3.0常用类 (7)
2.1内容现实类 (7)
2.2String (7)
2.3Array类 (9)
2.4XML和E4X (10)
2.5事件处理 Event (13)
2.6 Bindable (15)
3.Flex组件 (16)
3.1布局设计 (16)
3.3 MXML Module模块应用 (18)
3.4 表单 (18)
3.5 对话框 (18)
3.6 列表 (19)
3.7弹出菜单 (21)
3.8复杂用户交互应用结构 (22)
3.8.1Tree高级应用 (22)
3.8.2DataGrid (24)
3.9导航容器,导航菜单 (24)
3.10 自定义组件 (26)
4.Flex美化应用 (26)
4.1使用组件样式-Using Styles (26)
4.2 动画效果Effect-Using Behaviors (29)
4.3使用皮肤-Creating Skin (30)
5.Flex通信 (32)
5.1 与HTTPService交互 (32)
a.与WEBService交互 (33)
5.2.1WebService简介 (33)
6 BlazeDS与服务端通信 (35)
6.1什么是BlazeDS (36)
6.2配置BlazeDS,并使之正常运作 (36)
6.3创建一个Java项目,用来充当Server (37)
6.4配置BlazeDS (37)
6.5 新建一个Flex应用程序,测试连接 (38)
6.6 实际应用 (39)
7 Cairngrom框架 (40)
8 实例:Simple Note Management (42)
8.1基本组件使用[Tree,datagrid,TitleWindow,ViewStack] (42)
8.2读写XML (42)
8.3读写ShareObject (42)
8.4 BlazeDS配置及使用 (42)
8.5 回溯 (42)
8.6 Event (42)
8.7 代码优化 (42)
8.8 Demo (42)
9. AIR (43)
10.Flex的日志及单元测试 (43)
11.生成文档 (43)
12. 算法及设计模式 (44)
13. 其他 (44)
1.ActionSctipt核心概念
1.1类和对象 Class and Object
类是对象的抽象,反过来也可以说对象是类的实例,一个类描述了一个对象的定义,包括属性和方法的定义.
?一个AS程序的运行时一组基于一个类的集合来配合动作的对象.AS对象在程序中描述了有形事物和无形概念.
?编写一个新程序的第一步为确定该程序所需的类, 每个类以代码的形式来描述一个特定类型的对象的特定和行为.
?按照约定, 类名字首字母应大写.
?定义一个类:类不可以跨越多个文件,它必须完整的编写在单个文件中.
类修饰符说明
Internal[默认] 仅在当前包内可见
Public 公开访问
Final 不可以被继承
Dynamic 可以在运行时动态添加删除属性
1.2包与命名空间 Package and NameSpace
?包是一组类设计的概念上的容器.每个包围一个程序划分出一个独立的实际区域,并给该区域一个名字.
?按照惯例,包名特定以小写字母开头,这有助于把包名和类名区分开来.并且包名应含有下列特定顺序:1.创建该程序的组织的颠倒域名. 2.句点 3.通用的包内容
?包和命名空间 [NameSpace]是相关联的定义,包允许将类的定义捆绑到一起,这样能够尽可能的实现代码共享和解决命名冲突的问题.
?命名空间允许控制一个可视化的标志符,如,在包的内部和外部都可以使用属性和方法的名字对垒的数据进行访问.包可以组织类文件,而名称空间独立管理属性和方法的可见性.
?在AS3.0中,包是命名空间的实现,当创建一个包的时候实际上也隐含的创建了一个命名空间.
?如果要使用包中的类必须要导入包. AS中类的导入方式是可选的.如importfirstpackage.* 与import firstpackage.Hello 都是可行的,但后者更好一些,因为前者有可能引起命名冲突.
1.3接口 Interface
?接口就是一组方法定义的集合,接口需要类来实现.接口的意义在于将方法的定义与方法的实现分离开来, 在接口中,完整的定义了方法的名称, 参数和返回值,而没有方法的实现过程. 在现实类中, 必须按照接口的定义方法实现. 这样使得相同的定义拥有了不同的实现. 在AS3.0中,接口使用interface关键字进行定义,在接口中声明方法, 但不声明方法体. 对接口的实现可以在既定的原则内对接口进行具体化的扩充, 从而实现对接口的复用, 更系统的进行开发.
?在AS3.0中,接口只有两种修饰符----Public[无访问限制]和internal[默认,只有包内可以访问]
?接口必须由类来实现, 实现类必须使用implements关键字
?在实现接口的类中,实现接口要求的方法必须满足以下要求1.使用Public修饰符修饰实现的方法; 2.使用与接口定义相同的方法名; 3.与接口定义方法相同的参数数量,必须匹配的参数类型,也就是说,实现类的方法的参数名可以不同,但
参数类型与数目及先后顺序必须形同; 4.使用与接口定义方法相同的返回值类型
?另外,除了实现类的参数名称可以与接口中声明的参数名称不同之外,还允许实现类改变参数的默认值
?按照惯例,接口应该用一个开头大写的字母来命名,以作为区别
?代码规范: 接口的名字应以大写字母”I”开头 + 名词或形容词, 如: ISqlEngine;
接口的访问控制符
Initernal[默认] 相同的包内可以放访问
Public 公开访问, 无限制
1.4继承 Inheritance
?继承[Inheritance]不仅意味着代码重用,继承既是一种技术工具,也是一种智能工具.
?通过继承可以使开发人员快速的基于一个已有的类编写新的类.通过继承可以实现大量已有代码重用,继承将超类[也叫做父类,基类]的属性和方法完整的移植到子类中
?在AS3.0中,通过extends关键字实现继承.
?子类可以说是基类的特殊化,它使用基类的特性作为建立的基础,增加它自己的或者甚至根据它的需要修改的版本扩展 .
?继承时可以在子类中覆盖父类实现的方法.这种继承方式拥有了很强的伸缩性,可以保留不需要改写的方法.使用覆盖时,需要使用关键字override修饰要覆盖的方法.
?在覆盖父类方法时应注意:1.父类的方法不能被final修饰符修饰.使用父类时,final修饰符修饰的方法不允许被子类覆盖; 2.父类的方法不能被private修饰符修饰.如果父类的方法被private修饰符修饰,说明该方法不会被子类继承; 3.
子类的方法必须保证与父类的方法具有一致的访问控制符; 4.子类的方法必须与父类的方法具有一致的参数数量和匹配的数据类型 5.子类的方法必须与父类的方法具有一致的返回值类型.
?在AS中,不允许覆盖变量和常量,在类内部中,使用var声明的变量和const关键字声明的常量是不允许被覆盖的,但可以使用get和set的方法达到覆盖变量
的目的.
?AS3.0中的类中,静态的属性是不允许被继承的.静态的属性不允许被类的实例访问,只能通过类的定义访问到.
?静态属性虽然不可以被继承,但是静态属性可以作用到所有子类,也就是说子类可以直接使用超类的静态变量.
1.5构造方法Constructor
?构造方法[Constructor Method], 或者称为构造器[Constructor]用于初始化一个类的实例, 不同于Java, 在AS3.0中, 构造方法必须为Public.
?他必须和类名完全匹配[区分大小写],构造方面后跟着一对括号,其中包含一个构造参数列别,然后是大括号,是一个块语句,就像包和类定义的块语句.构造方
法的块语句成为构造体.
?每当一个实例被创建,构造体内的命令就被执行,执行构造体内的命令称为构造器的执行.
?当一个类没有显式的定义构造函数时,系统自动提供默认的构造器.而没有对类的新实例进行初始化.但作为实际应用, 最好包含一个构造器, 即便它只是一个空的. 空构造器用于正式的表明类的设计不需要构造器,这种情况下需要明确
给出注释.
?与Java不同, AS所有的构造方法必须为Public, 并且被隐式的当做Public的, 但这并不妨碍实现AS的单例模式,.
1.6变量和常量
变量有四种:局部变量[Local Variable],实例变量[Instance Variable],动态实例变量[Dynamic Instance Variable]和静态变量[Static Variable].
?局部变量: 用于在构造方法,实例方法,静态方法或者函数的实际作用域内记录临时信息. 以关键字var开头, 以分号结尾. 当方法或函数定义结束执行时, 局部变量就期满终了, 且在程序中不能再继续使用
?实例变量: Instance Variable, 指类用来描述特定对象的特性和行为,特性是一个特殊的信息片[即值],用于描述对象的某个属性----如它的宽,速度或颜色,为了记录对象的特性,我们使用实例变量. 实例变量的访问控制修饰语:Public[所有均
可访问],Internal[相同的包内访问], Protected[同类或派生类中可访问], Private[类内部访问], 一般的说,给每个实例变量都显示的制定访问控制修饰语是一个好的形式.实例变量不应该定义为Public, 除非是类结构的特别需要.如果不确定
应该使用哪种访问修饰语, 就是用Private[在不明确该使用哪种访问控制符时,应尽量使用最严格的控制符, 这样留给日后程序修改或升级更大的自由]. 用
internal属性定义实例变量和完全没有访问控制修饰语是一样的, 因为变量的
默认修饰符是internal.
?静态变量: 与实例变量相同, 静态变脸挂在类定义中使用变量定义来创建, 但静态变量定义必须同时包含static 属性. 如下列的一般性代码所示:
public class TstClass {
private static var school_Name:String = “TEST SCHOOL”;
}
与实例变量相同, 静态变量也可以使用上述四种控制符.
静态变量用于记录逻辑上和整个类相关的信息, 与具体实例无关.
在定义某个类时, 按照惯例, 类的静态变量列于类的实例变量之前.
变量修饰符[访问控制符] 说明
Private 所在类内可以访问
Protected 所在类及其子类可以访问
Internal[默认] 同包内可以访问,
Public 可公开访问
如果使用默认修饰符, 但又没有显示的声明, 则会有警告信息, 不理会或补上”internal”;常量: 其值一旦被初始化, 将在程序的剩余部分保持固定不变, 定义常量时, 需要使用关键字const代替var, 按照命名惯例, 常量使用全大写英文字母命名.
1.7实例方法,实例变量和静态方法,静态变量
?静态方法:用以实现和给定对象相关的某项任务.定义了一个对象能做的事情?按照约定,在代码布局中有以下先后顺序:静态变量,实例变量,构造方法,实例方法.
?和实例变量一样,静态变量在类定义中使用变量定义来创建,但静态变量定义必须同时包含static属性.静态变量用于记录逻辑上和整个类相关的信息.
?类的静态方法属于类本身,直接通过类访问,不可以通过类的实例进行访问.
?AS3.0中,可以通过一组set和get的方法完成对私有属性的访问, 这样可以遵循面向对象编程的法则, 屏蔽掉类内部的信息
?静态方法有两个实例方法没有的限制: 1.类方法不能使用关键字this, 2. 静态方法不能访问在定义它的类的实例变量和实例方法[不像实例方法,除实例变量
和其他的实例方法之外,它可以访问静态变量和静态方法], 因为静态方法分不清楚需要调用那个实例变量或方法.
1.8赋值
给一个变量赋值的表达式称为赋值表达式,如https://www.360docs.net/doc/7d198333.html, = name.
在构造方法体内,被创建的对象成为当前对象(Current Objecet),为了引用该当前对象,我们使用关键字this
传值: 在一个赋值中,其中源变量的值是String,Boolean,Number,int,或uint实例,AS复制该值给目标变量, 赋值之后, 内存中存在两份独立的初值拷贝----初值本身和该值的拷贝. 源变量指向内存中的初值, 目标变量引用内存中的新值. 即为通常所说的传值.
传地址: 相对来说,如果源变量是上述提到的类型之外的内建类的实例,AS把第二个变量直接和源变量的值相关联,赋值之后,内存中只存在一份值拷贝,并且两个变量都引用他,这成为变量共享内存中单个对象的引用[Reference],结果是修改其中任何一个变量,另外一个也被修改.即通常所说的传地址.
1.9 AS数据类型
Int,Number,String,unit,Boolean,在AS3.0中,所有的数据类型都是对象.
?在AS中可以使用’is’来判断变量的类型.返回值为true或false
?‘as’操作符的返回值不是Boolean,如果符合判断的数据类型,返回的是对象的实例,否则返回一个null
1.10数据类型转换
Flex中的两种数据类型转换方式及对比
AS3.0中允许数据类型之间进行转换,这种数据转换分为显示转换和隐式转换
?显示的转换是指通过数据类型标志符进行强制转换.如:
Sample
Var quantityField : String = “3”;
Var quantity : int = quantityField; //错误,只有使用数据类型标志符才能完成转换Var quantity : int = int(quantityField); //完成转换
?隐式转换是指两种数据类型之间存在着继承关系,不需要通过数据类标志符就可以进行数据转换.
Sample
Class A{}
Class B extends A{}
Var objA:A = new A();
Var objB:b = new B();
objA = objB; //直接使用隐式转换,转换成功
objB = objA; //转换失败
2.ActionScript
3.0常用类
[千斤顶ODOC_001]Top Level: Arguments类学习
Flex中使用Alert提示用户选择 Use Alert in Flex
Flex中弹出菜单使用 Use PopUpButton In Flex
2.1内容现实类
在Flex体系,虽然不主张直接使用AS语言显示内容,但是AS可以独立的用于显示内同的编写和处理.
?显示架构:FlashPlayer整个显示核心是Stage(舞台).基于舞台是一个入口类.其他舞台上显示的内容,要么是显示对象,要么是显示对象的容器.从某种角度来
看,Stage也是一个特殊的容器,Stage是一个最基本的容器,每一个应用都有一
个Stage,对象用于显示内同.每一个SWF文件关联的AS语言被一个SWF的入口类识别.
?在AS3.0中,每一个能显示出的内容都是一个显示对象.flash.display包下有一个Display Object的类,所有的显示类都继承于这个类.
?容器是一种特殊的显示类.容器本身还可以包含其他的显示对象,容器的基类是DisplayObject Container,它是Display Object的一个子类,绝大多数容器都是可见的,也有一些是不可见的
?整个FlashPlayer的显示架构就是由容器和显示对象组成的
2.2 String
String是AS中文本的基础.一个字符串由零个或零个以上的字符组成.AS支持Unicode 和ASCII两种文本编码格式.String可以通过直接赋值和new关键字两种方式创建.由单引号或双引号表示,必要的时候应使用转义字符’/’.
Sample
//使用双引号赋值创建String
Var flexstr1 : String = “flexstr1”; //单引号也是可以的.
//使用new()创建
Var flexstr2 : String = new String(“flexstr2”);
//使用new关键字创建String,参数为另外一个String---flexstr1
Var flexstr3 : String = new (flexstr1)
//通过ASCII代码创建String
Var flexstr4 : String = new String(97, 100, 111, 98, 707); //即为Adobe //转义字符
Var flexstr5 : String = ‘创建一个\”字符串’
?字符串的长度: flexstr1.length [8] ;
?从字符串中取出字符:有两种方法,charAt和charCodeAt,不同之处在于前者取出字符,后者取出字符的ASCII码.flexstr1.charAt(index) flexstr1.charCodeAt(index);注意下标是从零开始的.
?字符串替换:replace方法替换如
Sample
Var flexstr6 : String = “Adobe Flex builder”;
flexstr6.replace(“3”,”Builder3”);
Trace(flexstr6); //输出 Adobe Flex Builder3;
?字符串的比较,对字符串的比较是对两个字符串从左到右进行字符的比较
Sample
Var flexstr7 : String = “abc”;
Var flexstr8 : String = “abb”;
Trace(flexstr7>flexstr8); //输出false 因为C的ASCII Code更大;
Var flexstr9 : String = “2”;
Var flexunit : unit = 2;
Trace(flexstr9==flexunit); //输出true 因为当数据类型不同时,会先强制转换为字符
?字符串的链接:操作String的时候,可以通过使用”+”重载符来直接连接两个String,也可以使用”+=”;
?字符串的查找:
Sample
Var flexstr : String = “Adobe Flex Builder3”;
Trace(flexstr.indexOf(“Flex”)); //out put 6
Trace(flexstr.indexOf(“e’,6)); //out put 8;
Trace(https://www.360docs.net/doc/7d198333.html,stIndexOf(“e”)); //out put 16;
Trace(https://www.360docs.net/doc/7d198333.html,stIndexOf(“e”,10)) //out put 8;
使用indexOf的时候,返回的整数值是指定字符串在当前字符串中第一次出现的位置.如果给出参数,则从指定位置开始查找.lastIndexOf是指从右至左查找.如果给出惨部署,则表明从给定参数的位置从右至左查找,第一次出现字符串的位置.
?字符串大小写转换:flexstr.toLowerCase(); flexstr.toUpperCase();
?其他对象转换为String.在默认情况下,所有的AS对象都可以转换为String类型.
每一个类都有一个toString方法.通过toString可以将对象转换为String.
2.3 Array类
?[千斤顶之ODOC002]Top Level: Array学习
?创建Array
Sample
flexArray : Array = new Array(“Adboe”,”Flex”,”AS”);
flexArray : Array = [“Adboe”,”Flex”,”AS”];
//创建一个长度为3的Arrray,但不赋值
Var flexArray3 : Arrary = new Array(3);
//flexArray[0~3] 都是undefined;
Array的访问,添加
Sample
/**把所有person从数组Parry种提出来，并转换为XML格式，
*/
public static function allPersonsToXml():XML {
var i:int;
var flexXML:XML =
for (i=0;i as flexXML=flexXML.appendChild((PArray[i] Person).toXml()); } return (flexXML); } //之前已有定义public static var PArray:Array; public static function loadAllPersons():Array{ //判断Array是否为空,如果为空则新建一个; if(PArray == null) { PArray = new Array(); } try { var novel:XML = readXML(); /**用for in遍历数组中的Student,并插入到Paryy中. */ for (var name:String in novel.child("Student")) { PArray.push( new Student(novel.child("Student")[name].Name, int(novel.child("Student")[name].Age) ) ); } // End: for each Student /**用for in遍历数组中的Teacher,并插入到Paryy中. */ for (var name1:String in novel.child("Teacher")) { PArray.push( new Teacher( novel.child("Teacher")[name1].Name, int(novel.child("Teacher")[name1].Age), novel.child("Teacher")[name1].Sub )//end of new Teacher )//end of Parry.push }//end of for }catch(e:Error) { trace(e); } return PArray; }//end of function 2.4 XML和E4X ECMAScript for XML （E4X）是一扩展了ECMAScript（JavaScript）的程式语言，它增加本地XML支持，为ECMAScript程序员提供了一种感觉直观的方式来访问XML文档。 用E4X创建XML片段 Sample //通过表达式直接创建XML对象 Var flexXML1 : XML = //通过XML对象的构造函数创建XML对象 Var flexXMLStr : String = “ +” + “ +” +”” +” +” +”” +”” Var flexXMl2 : XML = new XML(flexXMLStr); //通过Array中Object建立. /**把所有person从数组Parry种提出来，并转换为XML格式， */ public static function allPersonsToXml():XML { var i:int; var flexXML:XML = for (i=0;i as flexXML=flexXML.appendChild((PArray[i] Person).toXml()); } return (flexXML); } //通过加载外部XML文件 Var flexXML4 : XML; VAr flexLoader : URLLoader = new URLLoader(); Var flexRequest : URLRequest = new URLRequest(“flexxml.xml”); Function onComplete(event:Event):void{ Var flexLoader : URLLoader = event.target as URLLoader; If (flexLoader != null){ flexXML4 = new XML(flexLoader.data); trace(flexXML4.toXMLString); } Else{ Trace(“加载错误”); } } 通过XML对象构建XML内容 尾部添加节点flexXML.AppendChild(flexXML1); 头部添加节点flexXML.prependChild(flexXML1); InsertChildAfter/insertChildBefore 指定节点的插入位置 通过”.””@”操作XML 对象 还可以通过{}操作符引用其他的数据,通过这种方式可以快速的通过 已有数据构建XML 对象的内容 Sample public function toXml():XML{ var xml:XML= return xml; } 访问XML:数据 E4X 提供两种工具来访问一个XML 层次结构中的数据: XML 和XMLLIst 内容访问方法(attribute(),attribute()…等 具有点(.), 后裔(..), 和属性(@) 运算符的变量风格访问 在XML 文档中,有一部分数据是以节点方式存在的.在使用XML 对象过程中,除了使用 节点之外,对于XML 节点属性的访问也尤为重要.在AS3.0中,最基本属性访问方式就 是使用”@”操作符.可以通过@操作符加属性名称的方式直接访问节点的属性. Sample Var flexXML : XML = Sample Var flexXML : XML = flexXML.Flash = “Flash3”; flexXML.@name = “FlashPlayer”; trace(flexXML.toXmlString); // // // //通过@访问属性 Trace(flexXML.FlashPlayer.@version); //9 Trace(flexXML.FlashPlayer.Flash.@version); //9 Trace(flexXML.FlashPlayer.@*.toXMLString); //输出: //9 //Adobe //使用attribute访问, Trace(flexXML.FlashPlayer.attribute(“version”); Trace(flexXML.FlashPlayer.attribute(“*”); ?查找XML节 点.flexXML.FlashPlayer.Flash.(atribut(‘version’)>7));flexXML.FlashPlayer.(Ajax.google Ajax ==” google Ajax1.0” ?For in. Sample /**用for in遍历数组中的Student,并插入到Paryy中. */ for (var name:String in novel.child("Student")) { PArray.push( new Student(novel.child("Student")[name].Name, int(novel.child("Student")[name].Age) ) ); // End: for each Student } 2.5 事件处理 Event 监听Flex中TextArea的DoubleClick Event Flex中addEventListener失败原因总结 Flex中Event与Bindable AS3.0中会频繁的使用事件处理类.事件处理类为开发人员处理用户输入和系统的时间提供了方便,安全,高效的解决方案.在AS3.0中主要有3种时间模 型:EventFlow,EventObject,EventListeners. 在AS中响应一个实际的过程: 1.事件派发 Dispatching Flash.events.EventDispacher类提供了事件dispatch函数,如果需要dispatch事件,则应该考虑继承该类或其子类.如果不能继承该类,则应实现IEventDispatcher接口 2.监听事件 Listening to Events 在监听事件时应首先考虑是否要使用weak referenced.如果事件监听与派发与监听函数有共同的生命周期,则可以使用strong referenced,在其他的大部分情况下,则应使用weak referenced. 需要注意的是, 如果事件派发者属性为Public, 则在任何允许的地方都可以增加监听函数, 从而达到低内聚, 更易于操作. 下面的例子中自定义了一个事件, 实现派发, 监听, 从而完成整个Event的操作过程. Sample //定义一个事件 package com.xx { import flash.events.Event; public class EventEditComplete extends Event { public var p:Person; public static const EVENTEDITCOMPLETE:String = "editComplete"; public function EventEditComplete() { super(EVENTEDITCOMPLETE,false,false); } } } //新建一个事件e,类型为EventEditComplete,并传播e public function Dispatch(){ var e:EventEditComplete; new EventEditComplete(); = e dispatchEvent(e); } /** * 定义弹出窗口的属性,注册事件,在点击之后产生窗口 */ public function showEdit():void{ //注册对EVENTEDITCOMPLETE事件的相应 personEditor.addEventListener(EventEditComplete.EVENTEDITCOMPLETE,onEdit Complete); } //定义onEditComplete以响应事件 public function onEditComplete(event:EventEditComplete):void{ refresh();