Flex3 基础知识


1 Flex3 基础知识 菜花 目录 Flex3 基础知识 ................................................................................................................................. 1 介绍、编译: ........................................................................................................................... 1 第一部分:AS3 基本语法 ........................................................................................................ 3 基本数据类型 ................................................................................................................... 3 数组:复杂数据类型,有序的数据集合。 ................................................................... 3 String类型 ......................................................................................................................... 6 函数 ................................................................................................................................... 6 变量 ................................................................................................................................... 6 类 ....................................................................................................................................... 6 接口(与Java相似) ........................................................................................................ 7 继承(与Java相似) ........................................................................................................ 7 第二部分:事件 ....................................................................................................................... 7 事件机制 ........................................................................................................................... 7 第三部分:容器与组件 ......................................................................................................... 10 容器定位与布局: ......................................................................................................... 10 导航容器: ..................................................................................................................... 11 第四部分:数据绑定 ............................................................................................................. 11 第五部分:验证 ..................................................................................................................... 12 第六部分:控制管理 ............................................................................................................. 12 第七部分:外部数据交互 ..................................................................................................... 16 第八部分:Flash Player的安全机制 ...................................................................................... 17 第九部分:工具 ..................................................................................................................... 17 第十部分:数据模型 ............................................................................................................. 19 第十一部分:样式与皮肤 ..................................................................................................... 20 第十二部分:高级组件开发 ................................................................................................. 20 第十三部分:实例 ................................................................................................................. 20 介绍、编译: Flex=ActionScript+mxml; Mxml 基于 xml 之上的实现,与 jsp 和 servelt 相似,jsp 首先会被容器先转换成 servlet 文件;同样,mxml 文件也会先被转换成 ActionScript 文件,再进行加载。 2 Mxml 的方式与 html 相似。ActionScript 类似 Java,为面向对象语言,ActionScript 的核心底层遵循 ECMA-262 标准协议,与 javascript 一致。 Mxml 文件会被转换为两个文件: 一是 mxml 文件有部分转换成 ActionScript 脚本。 二是 mxml 文件按文件名被转换成对应名称的 AS 类。 Flex 工程 src 目录下的文件也会编译到 swf 文件中,还有 flex 的架包。 3 第一部分:AS3 基本语法 基本数据类型 1. Boolean 2. Int 3. Null:只有一个值 null,是 String 和复杂类型(包括 Object 类)的默认值。 4. Number:最大值 Number.MAX_VALUE 和最小值 Number.MIN_VALUE。 5. String:16 位字符序列,内部存储为 Unicode 字符,使用 UTF-16 格式。 6. Uint:无符号的 int 类型(既没有负号的 int) 数组:复杂数据类型,有序的数据集合。 1. 创建数组: var arr:Array=new Array(); var arr:Array=[‘a’,’b’,’c’]; var arr:Array=[“a”,23,”sdf”]; var arr:Array=new Array(“a”,”b”); 4 arr.push(“d”);//追加 d 到数组中 2. ArrayCollection ArrayCollection 实现了 ICollectionView 接口,在 Flex 的类定义内属 于[数据集],他提供更强大的检索、过滤、排序、分类、更新监控等功 能。类似的还有 XMLListCollection,这两者差别在于如果用 array 在作 为 data provider 绑定于控件上,就无法获得控件的更新,除非控件被 重新绘制或者 data provider 被重新指定,而 Collection 则是将 array 的副本存储于 Collection 类的某个对象之中,其特点是 Collection 类 本身就具备了确保数据同步的方法,例子如下(取自 adobe 内部工程师 training 示例,稍有改变) 总结: 当 Array 的数据发生变化的时候,用它作为数据源的控件不能感知这种 变化。例如:myArray.push("new"); 这时,如果一个 List 用它作为 dataProvider,List 的列表中不会增加新加入的这个值。如要改变,得 重新给控件赋值。 而当 ArrayCollection 的数据发生变化的时候,能够通知控件发生变化。 例如:myArrayCollection.addItem("new"); 这时,如果一个控件 List 用它作为 dataProvider,List 列表中会增加一列内容. 3. for in 循环(访问数组或者对象中的元素) for(var i:String in arr){ trace(arr[i]); } Var obj:Object={x:20,y:”32”}; for(var i :String in obj){ trace(obj[i]) } 4. for each in(循环访问集合中的项目:数组、对象属性、xml、xmlList), 与 for in 不同的是循环中迭代的变量只包含属性保存的值,而不保存属性 名称。 6 For each(var item in arr){ Trace(item); } Var xml:XML=zhangsanlisi; For each(var item in xml.name){ Trace(item); } String 类型 String 是基本数据类型最重要的一种,String 类是用来处理字符串文本的类。其中包含 很多处理字符串方法,详见 API。与 java 的 String 类似。 函数 1. 格式: 访问修饰符 function 函数名(参数列表):返回类型{ 函数体 } 修饰符:public、private、protected、internal public function hello(str:String):void{} 变量 1. 修饰符 var 变量名称:类型; 2. 修饰符:public、private、protected、internal var name:String=”zhangsan ”; 类 1. 格式: 访问修饰符 class 类名{ 属性; 方法; } 2. 类访问修饰符 1. dynamic 允许在运行时向实例添加新的属性 2. final 不能扩展,不能能继承 3. internal 对当前包可见 4. public 3. 静态 7 const(静态常量)public static const name:String=”zhangsan”; static(静态变量)public static var name:String=”zhangsan”;//不能被继承 4. 实例化 var car:Car=new Car(); 接口(与 Java 相似) 继承(与 Java 相似) 第二部分:事件 在 flex3 使用的 ActionScript3 中,每一个事件也是一个对象,事件对象都是 Event 或者其子 类的实例。事件对象不但存储有关事件的信息,还包含响应事件的方法。使用事件的基本方 式就是将事件注册到某个界面或者对象上,当被注册对象或者界面的属性发生变化时,注册 在该属性上的事件就会被触发,并可以调用事件处理函数,从而对界面或者对象的属性改变 作出响应。 事件机制:注册事件、触发事件、事件传递。原理与 JavaScript 一致。 事件注册是将事件处理函数指定给对象的一个事件,实际上是对该事件创建一个 侦听器。ActionScript 中使用 addEventListener 进行注册事件。 Btn.addEventListener(MouseEvent.Click,onClick); 1. 事件注册:分为两种方式,默认事件(mxml)和 AS 注册 。注册事件可以在 mxml 初始化完成 调用 creationComplete()中; 2. 事件触发:响应处理函数 触发事件分为:捕获事件、目标锁定、冒泡阶段。首先之上而下为捕获 阶段,找到目标位目标锁定阶段,与捕获相反为冒泡阶段。 事件信息: 8 Bubbles:布尔类型,显示给时间是否为冒泡事件。 Cancelable:布尔类型,显示是否可以阻止与事件相关联的行为。 CurrentTarget:与当前事件相关的对象,冒泡分为多个阶段,此代表当前 阶段的对象。 eventPhase:uint,当前事件的阶段。 Target:触发事件的对象。 Type:String,事件类型,如:clickclick 3. 事件传递与绑定 在创建自定义事件时,可以在事件派发后能够更新新程序中的某个属性, 可以通过设置[Bindable]元数据标签的 event。 9 可以采用 PropertyChangeEvent.createUpdateEvent() 方法创建 propertyChange 事件,然后派发事件。此方法属性: Source:Object 指定发生更改的对象。 Property:Object 指定已更改属性的名称 oldValue:Object 更改前属性的值。 newValue:Object 更改属性的值。 4. 自定义事件: AS 方式自定义事件: MyEvent.as import flash.events.Event; public class MyEvent extends Event { private var myInfo:String; public static const INFO:String="info";//静态常量 public function MyEvent(type:String) { super(type); this.myInfo=type; } } myEvent.mxml 10 Mxml 方式自定义事件: http://hi.baidu.com/xiaolincc26/blog/item/4b36f01e0de3327cf724e41f.html 第三部分:容器与组件 容器定位与布局: 1. Application 包含其他所有容器与组件,通过来创建 Application 对象。 2. Layout:该属性有三个值“horizontal”,“ vertical”,“ absolute”。 “horizontal”容器将子项布置在同一行。“vertical”容器将子项布置 在同一列,“absolute”采用 x,y 坐标来确定。 3. 使用 verticalGap 和 horizontalGap 属性设置容器内子项的间隔;当容 器内子项大小超过当前容器时,使用 horizontalScrollPlicy 和 verticalScrollPlicy 设置是否允许出现滚动条。 4. Hbox 和 Vbox、box,HBOx 代表横向排列,Vbox 代表纵向排列,box 通过 diriction 设置内部元素排列方向。 5. Canvas,始终通过绝对定位方式对内部元素进行定位。如果没有设置 绝对位置,那么多个元素出现叠加。 6. DivideBox、HdivideBox、VdivideBox。DivideBox 容器可以在其内部各 元素之间提供一个分割器,通过鼠标拖动这个分割器,可以改变内部 各元素所占区域的大小,通过 direction 改变元素的排列方向, HdivideBox、VdivideBox 与 Hbox、Vbox 类似。 7. Panel 和 TitleWindow。Panel 容器包含一个标题和内容显示区域,与 Application 类似,默认为垂直排列元素。TitleWindow 容器派生自 panel, 用来显示一个弹出窗口,与 panel 类似,提供关闭按钮,需要通过 PopUpManager 管理器创建。 8. Tile,可以将其内部元素以多行多列的方式排列在默认位置,当内部 无法在一行全部排列时会自动换行,可以通过 direction 改变排列方 向。 9. ControlBar 和 ApplicationBar。ControlBar 可以在 panel 和 titleWindow 的下边缘提供一个控制区域,可放置组件等。ApplicationBar 与 Application 配合使用,提供一个类似 ControlBar 组件的控制区域。 10. Form、FormHeading 和 FormItem。Form 容器用来呈现一种表单形式 的界面,可以方便地标记表单中默认按钮和必填字段等。FormHeading 用来标识多个字段的分组信息。Formitem组件用来定义各个表单项, 可以在内部添加一至多个组件,通过 lable 显示字段名。 11. Grid、GridItem 和 gridRow 组件。Grid 把内部元素按普通的表格来展 现,类似 html 的 table,可以通过 rowSpan 和 colSpan 合并单元格。 12. Hrul、Vrul 和 Spacer 组件。Hrul 和 Vrul 用来在各元素之间呈现一条横 11 向或者纵向的线。Spacer 组件用来在容器的各内部元素之间制造空间。 导航容器:用来切换页面中子容器 1. linkBar、TabBar、ButtonBar 和 ToggleButtonBar。它们都基于 dataProvider 属性自动创建内部按钮,通过 addItem()及 removeItem()方法处理 dataProvider,添加和移除子项。 LinkBar 用来定义一组 linkButton 组件将。 TabBar 用来创建导航菜单 ButtonBar 可以定义一组按压按钮,不记录状态。 ToggleButton 只能有一个按钮处于选中状态。 2. ViewStack 容器由一组子容器组成,一次只能显示其中一个,可以通过脚 本中设置 selectedIndex 或 selectedChild 属性确定当前显示那个子容器。 3. Accordion 容器与 ViewStack 容器相似,它会自动为子容器创建导航按钮, 并将子容器的 label 属性作为导航按钮的 label。 4. TabNavigator 容器相当于使用了 TabBar 的 ViewStack 容器,会自动创建一 个 Tabbar,可以为子容器设置图标通过 Icon 属性。 第四部分:数据绑定 数据绑定实际上是由事件驱动的,当作为数据来源的属性发生变化时,会触 发 propertychange 事件,flex 会将新的属性值复制给目标属性,从而使两个 属性同步更新。 1. [Bindable]元数据标签用来标识可绑定的变量、属性、方法、类,通过 ChangeWatcher 类观察数据源对象是否发生变化,以便调用相应的方法, 可以通过 ObjectProxy 侦听某个 Object 中属性的变化,来决定如何响应 这个改变。 [Bindable] Private var name:String;//绑定变量 [Bindable] Public function get name():String{//绑定 get/set Return name; } [Bindable] Public class car{}//绑定类 [Bindable(event=”myEvent”)]//绑定事件 2. “{}”,,BindingUtils 提供绑定 3. 双向绑定,在 mxml 通过”{}” 4. Source 为数据源,destination 为目标绑定对象,flex 会把这两个属性当做 ActionScript 表达式。可以通过 text=”{As 的表达式}”给 mxml 赋值( )。 12 第五部分:验证 1. 长度验证、类型验证、正则表达式。 maxChars 验证长 度。 第六部分:控制管理 1. 弹出窗口管理器 PopUpManageer First.mxml subWindow.mxml 13 2. 系统管理器 SystemManager 每个应用都会包含一个系统管理器,负责管理应用程序窗口。 SystemManager 是在应用程序中创建的第一个显示类,之后才是应用 Application 的实例。其最大的用处在于控制应用程序创建过程或者顶级对 象进行控制。 应用创建过程:SystemManager 包含两个 Frame(帧),第一个是 PerLoader, 第二个是 Application。 14 Flex 应用程序创建顺序:在一个 Application 创建并运行之前,FlashPlayer 要先载入一些基本的类库,这个动作发生在第一个 Frame,最先出场的 是 PerLoader,接着是 DownLoadProgressBar,同时一些支持当前应用程 序的核心类库也会被载入。接着进入第二个 Frame,才会加载 flex 的大 部分类库和当前 flex 应用程序内容。SystemManager 拥有一个 Application 的属性,在第二个 Frame 里,这个属性被加载,同时触发一下几个事件: 1. 首先是 Preinitalize,表示程序被初始化了,但没有创建任何子对象, 也就是 Application 内容。 2. 接着 initialze,表示程序已将子对象创建完毕,但是没有调整布局。 3. 接着 createComplete,表示已经完成初始化,并安排(布局)好所有 子对象。 4. 最后 applicationComplete,表示程序已经就绪,可以运行了。 修改加载进度条:MyProcessBar.as package com.hsit { import flash.events.ProgressEvent; import mx.preloaders.DownloadProgressBar; public class MyProcessBar extends DownloadProgressBar { public function MyProcessBar() { super(); downloadingLabel="下载中..."; initializingLabel="初始化中..."; MINIMUM_DISPLAY_TIME=2000; } override protected function showDisplayForDownloading(elapsedTime:int, event:ProgressEvent):Boolean{ return true; } override protected function showDisplayForInit(elapsedTime:int, count:int):Boolean{ return true; } } } 在主程序中添加: 15 3. 模块管理器 ModuleManager 为主应用程序减小容量大小,提高效率。用于管理一个应用对外部加载 或者卸载的工具。 主程序中: Module 文件: 16 第七部分:外部数据交互 1. HTTPService 采用 mxml 方式 代表创建一个 HttpService 实例,采用 send 方法发送请 求,与后台交互。 {tia.text} 2. HTTPService 采用 AS 方式 3. 获取页面数据 4. 与 Javascript 交互 5. Flex-Ajax 桥 6. WebService 7. Socket 17 第八部分:Flash Player 的安全机制 1. 安全沙箱 2. Security.sandboxType 3. 跨域策略文件 crossdomain.xml 4. 跨脚本访问 5. 设置管理器 第九部分:工具 1. Flex Builder3,FB3_WWEJ_Plugin.exe Eclipse 插件版本,安装需要指定 到 eclipse 目录下,与 configuration 同级。 Flex SDK 中包含源码, 18 2. TourDeFlex 在线帮助工具,包含实际例子、在线 api 等。下载 AdobeAIRInstaller.exe 和 TourDeFlex.exe,先安 装 AdobeAIRInstaller.exe 再安 装 TourDeFlex.exe。 3. 调试(debug)flex 程序,需要安装 debug 版本的 flashPlayer。trace 函数 只有在 debug 版本中才能输入调试信息。 http://www.adobe.com/support/flashplayer/downloads.html 19 4. Swf 反编译软件:闪客精灵,可以反编译 flex、flash 等生成的 swf 文件。 第十部分:数据模型 Flex 使用数据模型来存储程序中的相关数据。 1. Mxml 方式 可以将数据绑定到组件上: Flex Development 采用xml标签定义数据模型 Flex development 2. 使用外部 XML 文件作为数据源 20 3. 使用 ActionScript 创建数据模型 访问数据模型: 通过 local 引入外部类。 访问数据模型: 第十一部分:样式与皮肤 第十二部分:高级组件开发 第十三部分:实例
还剩19页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 8 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

2gaoxiufang

贡献于2013-01-23

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf