一、心得:
1、flex组件是以event为基础,理解flex组件的event种类、属性、方法
转:事件机制
1.1. 事件简介
事件可以由外设触发, 比如:键盘,鼠标, 也可能是外部输入, 比如:web service的返回.
事件还能由组件的外观和生命周期发生变化时触发, 比如:组件的创建或者改变大小.
所有用户与应用交互都会产生事件.用户没有直接与应用交互也可能产生事件, 比如:数据装载完毕.
你可以在程序中使用事件监听器监听这些事件. 事件监听器是函数方法用于响应指定的事件. 有时也称之为事件处理器.
Flex的事件模型基于DOM3事件模型.
组件产生派发事件并消费(监听)其他事件.如果一个对象想要了解其他对象事件的信息, 可以注册一个监听器.
当事件发生时,对象派发此事件到所有注册过的监听器中.
组件有Flex提供的内建事件. 也可以使用派发-监听模型定义自己的事件监听器, 并指定监听器监听何种事件.
1.2. 事件流简介
当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list, 一直到目标对象, 检查每个节点是否有相应的监听器.
目标对象指的是display list中产生事件的对象. 比如:
如何此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止.
1.3. 事件的派发
Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法.
语法:
objectInstance.dispatchEvent(new Event("event_type"):Boolean
参数event_type是Event对象的type属性. 函数的返回值总是True.
可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button的Click事件.
var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));
在Flex应用中不是必须对新派发的事件进行处理, 如果触发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
如果想给Event对象添加新属性, 就必须继承Event类,然后定义新属性
自定义事件的派发与监听
一个事件,肯定有两方: 抛出事件的对象 和 侦听这个事件的对象
如果这两个对象他们相互之间关联很少,或者自身各自嵌套在别人的容器里,再或者他们之间并不需要相互认识,相互通信就得用到自定义抛出事件。
自定义CustomEvent类,继承Event,并且给他增加一个dispatcher:EventDispatcher属性。
使用这个类,就可以抛出事件并附带数据。
因为使用了 static 设置为静态属性,所以其他任意地方只要注册有这个事件侦听,就能捕获到。
网友例子比较好:
--自定义事件
package
{
import flash.events.Event;
import flash.events.EventDispatcher;
public class CustomEvent extends Event
{
public static const EVENT_NAME:String="event_name";
public static const dispatcher:EventDispatcher=new EventDispatcher();
public var data:Object;
public function CustomEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false, data:Object=null)
{
super(type, bubbles, cancelable);
this.data=data;
}
override public function clone():Event{
return new CustomEvent(type, bubbles, cancelable, data);
}
}
}
--两个canvas
CustomCanvas1.mxml
<?xml version="1.0" encoding="utf-8"?>
//派发自定义事件
CustomEvent.dispatcher.dispatchEvent(custom);
}
]]>
CustomCanvas2.mxml
<?xml version="1.0" encoding="utf-8"?>
//初始化自定义事件,即注册监听
CustomEvent.dispatcher.addEventListener(CustomEvent.EVENT_NAME,clickHandler);
}
private function clickHandler(event:CustomEvent):void{
trace("I get it !");
mylb.text=event.data.toString();
Alert.show(event.toString()+"\n"+event.data.toString())
}
]]>
--main.mxml
<?xml version="1.0" encoding="utf-8"?>
1.4.事件的传播:
事件触发后, Flex有3个检测事件监听器的阶段, 3个阶段的发生的顺序如下:
1. 捕获
2. 目标
3. 上浮
在任意一个阶段, 节点们都有机会操作事件. 比如: 用户点击了一个在VBox中的Button,
在捕获阶段, Flex检查Application对象(根节点)和VBox是否有监听器处理此事件. Flex然后在目标阶段触发按钮的监听器.
在上浮阶段, VBox和应用以与捕获阶段相反的顺序再次获得机会处理事件.
在ActionScript3.0中,你可以在任意目标节点上注册事件监听器. 但是部分事件会被直接传给目标节点,比如Socket类.
捕获阶段的节点顺序是从父节点到子节点的, 而上浮阶段刚好相反.
捕获事件缺省是关闭的,也就是说如果要捕获事件, 必须显式指定在捕获阶段进行处理.
每一个Event都有target和currentTarget属性, 帮助跟踪事件传播的过程.
捕获阶段:
在捕获阶段,Flex在显示列表中检查事件的祖先是否注册了事件的监听器. Flex从根节点开始顺序而下.
大多数情况中, 根节点是Application对象. 同时, Flex改变事件的currentTarget值.
缺省情况下, 在此阶段,没有容器监听事件. use_capture参数的值是False,在此阶段添加监听的唯一方法是在调用add_listener时,
传入一个为True值的use_capture参数, 比如:
myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);
如果是在Mxml中添加监听, Flex设置此参数为False, 没有办法进行修改.
如果设置了use_capture为True, 那么事件将不会上浮. 如果既想捕获又想上浮就必须调用 addEventListener两次.
一次use_capture参数为true, 一次为false;
捕获很少使用, 上浮的使用更为普遍.
目标阶段:
在目标阶段, Flex激发事件的监听程序, 不检查其他的节点.
上浮阶段:
事件只在bubbles属性为True时才进行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp.
在上浮阶段, Flex改变事件的currentTarget属性, 而target属性是初始派发事件的对象.
查询事件阶段:
使用事件的eventPhase可以获得事件当前的阶段,
1: CAPTURE_PHASE
2: AT_TARGET
3: BUBBLING_PHASE
示例: private function determineState(event:MouseEvent):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }
使用下面两个函数停止事件的传播:
stopPropagation()
stopImmediatePropagation()
例子:
<?xml version="1.0" encoding="utf-8"?>
layout="absolute"
borderStyle="solid"
creationComplete="init();">
borderColor="#EEC214" id="cas1" click="clickCas1(event)">
borderColor="#F14C36" id="cas2" >
二、问题
1、 冒泡事件的机制?
事件阶段:1 捕获: 根节点-->子节点-->目标节点
2 目标:目标节点
3 冒泡:目标节点-->子节点-->根节点
捕 ---根节点 ---根节点 冒
获 ---子节点 ---子节点 泡
---目标节点
目
标
2、mx:component中组件不能发现定义的公共function
width="50"
click="openEditWindow(data)"
label="播放">
上面代码不能发现 openEditWindow function;
width="50"
click=" outerDocument.openEditWindow(data)"
label="播放">
三、开发
1、flex builder当需要debug测试时,需要下载flash的debug版本,这时才能以debug方式运行,trace函数才能起作用。
2、flex的web应用与tomcat的工程配置
java web应用在tomcat的webapps下的工程名为flexWeb
1)选择application server type 为J2EE
2)Web root:tomcat的webapps目录下的web应用路径 d:\....\webapss\flexWeb
Root URL:java web应用url http://localhost:8085/flexWeb
3、关于FLEX生成的SWF设置stage.displayState问题
<?xml version="1.0" encoding="utf-8"?>
layout="absolute"
creationComplete="init()"
>
此时报错,应用callLater()方法调用init()方法<?xml version="1.0" encoding="utf-8"?>
callLater:进入下一帧的时候,执行函数
layout="absolute"我们在creationComplete事件里,使用callLater(init)来调用init,让init在进入下一侦的时候再全屏..,问题解决
creationComplete="callLater(init)"
>
4、图层处理
swapChildren方法有问题,可以使用img.parent.setChildIndex(img, img.parent.numChildren - 1); 如果得知父组件则可以这样写:main.setChildIndex(event.currentTarget.valueOf(),main.getChildren().length-1);
基本原理:如果其中某一组件被设置为最大索引,即显示在最上层,则原来索引大于这个组件的其它组件索引自动减1。至于将某一组件的索引不是设置为最大索引,还需试验。用处不太大,没有试验。
5、Flex与Word和Excel文件格式的交流
作的一个项目,需要采用Flex的界面,导出word和excel格式,有如下解决方法:
对于word,可以将word模版文件存成xml格式,而此xml格式中的图片是以 “Base-64 encoded” ,而 Flex 3 可以将生成的图片快照下来转换成此格式,而flex能够操作xml文件,从而可以修改word xml模版文件中的内容,从而与word协作。
http://code.google.com/p/flexlib/wiki/ComponentList
另外一个方法是采用html格式。采用javascript来操作html文件。
而excel则要用到 as3xls, 可以参考:http://zhaoyl.垃圾广告.com/blog/200275
http://code.google.com/p/as3xls/
6、在AIR中使用HTML加载的网页,如果网页里的链接是在新窗口打开的那种,点击就无效了
1.在HTML标签中增加complete,代码如下
2.增加一个对页面链接处理的方法,代码如下
private function deal_blank(e:Event):void
{
var document:Object = HTML(e.currentTarget).htmlLoader.window.document;
var anchors:Object = document.getElementsByTagName("a");
for(var i:Number=0; i < anchors.length; i++) {
var a:Object = anchors[i];
var targetAttr:Object = a.attributes.getNamedItem("target");
if(targetAttr != null && targetAttr.nodeValue == "_blank")
{
var urlAttr:Object = a.attributes.getNamedItem("href");
a.onmouseup = function(o:Object):void{
o.preventDefault();
//navigateToURL(new URLRequest(o.srcElement), "_blank");
website.htmlLoader.load(new URLRequest(o.srcElement));
};
}
}
}
7、flex读取本地文件
FLEX编译的SWF文件,只能选择访问本地文件或访问网络文件,二者只能取一(嗯,为什么?我也不知道,官方说是为了安全考虑),而FLEX编译的默认选项是只能访问网络文件,所以你将bin里的东西COPY到其他地方就不能读取了。而你在默认的bin目录下可以读取得到,是因为FLEX认为你是在IDE环境种,这时是没有这个所谓的安全限制的。
解决办法就是在编译时,加个参数 -use-network=false 就OK了 (FB里,选菜单Project>Properties>Flex Compiler输入这个参数)
但这样做的话,你的SWF就不能读取网络的数据了.
转自:http://snowyrock.spaces.live.com/blog/cns!B8CBEB7169880B1D!416.entry
这个随机数,可以用UNIX时间戳就行
四、资源
flex game: http://www.brighthub.com/internet/web-development/articles/11010.aspx
flex : http://blog.csdn.net/songhuanren/category/285151.aspx
flex open source :http://www.cnblogs.com/mjgforever/archive/2009/03/05/1403777.html
flex 基础知识点: http://xinsync.xju.edu.cn/
google开源库:http://code.google.com/p/flexlib/
flex开源项目:http://www.adobe.com/devnet/flex/?navID=samples
推荐一个学习Flex chart的好网站
最近在做一个与Flex chart相关的项目,特别搜索了一下Flex chart相关资源,,有一个网站特别值得推荐:Quietly Scheming。
其中特别推荐两个应用:
1. Interactive Bubble Chart:http://www.quietlyscheming.com/blog/charts/interactive-bubble-chart/
这个Bubble Chart特别出彩,原版是用Flash开发的,不提供源码,但其Flex版提供源码参考。
2. Flex Chart Explorer:http://demo.quietlyscheming.com/ChartSampler/app.html
这个就不用多说了,类似于Flex Component/Style. Explorer。
与java的socket通信教程
http://www.cnblogs.com/xxcainiao/archive/2009/02/17/1392516.html
工具:
反编译工具:Sothink
3.富文本编辑器
收费但很棒
http://www.flashloaded.com/flashcomponents/flashtexteditor/
开源as3,基于flash,部分适于flex
http://code.google.com/p/as3texteditor/
Flex教程网站
http://www.riameeting.com/
来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/118838/viewspace-584628/,如需转载,请注明出处,否则将追究法律责任。
转载于:http://blog.itpub.net/118838/viewspace-584628/
比如说,要在服务器下载一个100M的文件abc,第一次下载的时候,进度条还能正常显示,然后把下载好的文件abc删除了,在重新下载一次,问题就出来了,进度条不能正常显示了,一下就从0%跳到100%,这种问题怎么解决呢?