本文和大家重点讨论一下Flex3 的一些基本知识,首先看一下Flex3的概念,Flex3是Adobe出品的开发RIA(RichInternetApplications)的工具,希望本文的介绍能让你有所收获。
Flex3 学习(简单教程)
1.什么是Flex3
Flex3是Adobe出品的开发RIA(RichInternetApplications)的工具,包括:
Flex3SDK(软件开发包)
-Compiler(编译器)
-Framework(Flex类库)
-Debuggingtools(调试工具)
FlexBuilder3
-整合和开发环境
-基于eclipse
和Flex整合的服务器产品
-LiveCycleDataServices2.51
-ColdFusion8
2.什么是FlexApplication
用FLASH.swf文件格式封装的发布在HTML网页中的应用程序
需要在客户端安装FlashPlayer9
开发者可以完全访问Flash绘画API
应用程序使用ActionScript3
兼容FlashCS3和ActionScript3编写的文档
3.如何创建Flex3应用程序
步骤如下:
◆选取预定义的可视化组件
◆在用户界面上添加组件
◆使用styles和skins自定义应用程序界面
◆增加事件处理和脚本处理代码,控制应用程序行为
◆连接数据和通讯服务
◆Build和Run应用程序
4.Flex3的相关资源
http://examples.adobe.com/flex3/componentexplorer/explorer.html
http://www.adobe.com/devnet/flex/
http://flex.org/
5.ActionScript3语言基础
<mx:script>…</mx:script>
trace()函数
<![CDATA[…..]]>
package
import
publicprotectedprivateinternal
static
function定义
const #p#
6.ActionScript3语言基础
extends
interface
字符串
数字计算
数组
类型转换
7.ActionScript3语言基础
if
switch
for
for..in
foreach…in
while
do…while
beakcontinue
8.观察者模式(Observer)
什么是观察者模式?
生活中的观察者模式(好莱坞原则、订阅报纸、房产中介…)
AS3中事件例子:
button.addEventListener(“click”,onClick);
internalfunctiononClick(evt:MouseEvent):void{
txt.text=“clickabutton!”;
}
9.Flex3事件流
1).捕获事件(从根节点到子节点,检测对象是否注册了监听器,是则调用监听函数)
2).目标阶段(调用目标对象本身注册的监听程序)
3).冒泡阶段(从目标节点到根节点,检测对象是否注册了监听器,是则调用监听函数)
注:事件发生后,每个节点可以有2个机会(2选1)响应事件,默认关闭捕获阶段。
10.IEventDispatcher接口
addEventListener()注册事件监听器
removeEventListener()移除事件监听器
dispatchEvent()派发事件
EventDispatcher类
11.addEventListener
addEvnetListener(type:String,listener:Function,useCapture:Boolean=false,priority:int=0,useWeakReference:Boolean=false)
removeEventListener(type:String,listener:Function,useCapture:Boolean=false)#p#
12.Event对象
Event类作为创建Event对象的基类,当发生事件时,Event对象将作为参数传递给事件侦听器。
MouseEvent
KeyboardEvent
13.如何自定义事件
1).创建自定义事件名称的Event
dispatchEvent(newEvent(“myEvnet”,true,false);
2).创建自定义事件类
PublicclassMyEventextendsEvent{
….
}
14.Flex3拖曳事件的实现
DragManager(mx.managers)
DragSource
DragEvent
15.什么是数据绑定
数据绑定:当数据源对象的数据发生变化时,目标对象的数据会自动更新,而不需要我们再编写代码去强制更新
绑定实际也是借助事件机制来完成的,当目标使用了数据绑定的时候,目标对象就会监听数据源对象的某一固定事件。当数据源发生变化时,数据源会派发改变事件(ChangeEvent),通知目标对象更新数据。这个过程由Flex完成,不用我们手动干预。
绑定的前提条件:源对象的数据和目标对象的数据格式相同。
16.实现Flex3数据绑定的方法
1).在对象的属性标签中,使用{}把数据源直接绑定到对象的某个属性上。
2).在对象的属性标签中,使用{}把某个函数的返回值作为数据源绑定到对象属性上。
函数的参数要使用[Bindable]绑定符号
[Bindable]
[Bindable(event=“eventname”)]
Event表示当数据源发生变化时,数据源所在对象派发的事件类型,它是可选项,默认的事件名是“propertyChange”,一般情况下只需要使用[Bindable]标签 #p#
17.实现数据绑定的方法
使用<mx:Binding>标签
- source=“…”destination=“…”
- <mx:Modelidmx:Modelid=“books”>
- <books>
- <book>
- <name>FLEX教程</name>
- <author>张三</name>
- </book>
- <book>
- <name>JAVA高级编程</name>
- <author>李四</name>
- </book>
- </books>
- </mx:Model>
18.Object对象和动态对象
Object对象是一个动态对象
varo:Object=newObject();
o.name=“Jack”;
o.age=20;
o.address=“北京海淀100号”;
Model中的节点数据默认是Object类型,作数据源必须转换成ObjectProxy类型。
19.数据绑定的几点说明
[Bindable]标签用于函数时,只能在setter和getter方式定义的函数前使用。称为函数级别绑定。
[Bindable]标签用于公有类时,这个类的所有公有变量、setter和getter方式定义的函数都可以用于绑定。成为对象级别绑定。
20.BindingUtils和动态绑定
Mx.binding.utils
BindingUtils提供了两个静态方法处理动态绑定
bindProperty(site:Object,prop:String,host:Object,chain:Object,commitOnly:Boolean=false)
bindSetter(setter:Function,host:Object,chain:Object,commitOnly:Boolean=false)#p#
21.Flex3支持的样式设置方式
1).直接使用CSS文件,系统默认使用default.css
<mx:Stylesource=“style.css”/>
2).使用<mx:Style>标签
3).使用style设计器(->MXML)
4).使用对象的getStyle()和setStyle()
5).使用StyleManager类
22.样式的类型
样式属性分为可以继承和不可以继承两种
上级容器可继承的属性,直接作用其包含的组件。
全局样式:global
VarglobaalStyle:CSSStyleDeclaration=StyleManager.getStyleDeclaration(“global”);
23.使用主题
主题是一套配置完成的样式风格
Flex提供的几种主题,文件类型.swc
建议使用.swc文件来封装主题
给编译指令添加
-themexxx.css
在Flex-config.xml中通过修改<theme>标签配置主题
24.创建Flex3自己的主题
1).通过修改以后的主题文件创建自己的主题内容
2).使用compc编译主题,生成swc文件(见帮助)
-include-filenamepath
-ooutput.swc
-include-classes
3).通过配置文件编译主题
compc-load-configmyconfig.xml
【编辑推荐】