本篇文章是结合实际的flex project来分别的说一下这个三个特性:(本篇文章只介绍EventMap)
一、EventMap(事件地图)
我不知道官方的中文叫法是什么?但是我还是比较中意这种直译的方式:事件地图。
举例子说明:我有三个MXML文件:A.mxml、B.mxml、C.mxml。而它们之间的关系是:A包含B,B包含C。现在我想在C中触发一个
事件,而最终会反映到A中,因此我做了如下的设定。我定义如下一个customer event:MyEvent(请看下面的片段代码)
public class MyEvent extends Event {
public static const CLICK_ME : String = "clickMe";
public function SupporterListEvent( type:String, bubbles:Boolean=false, cancelable:Boolean=false ) {
super( type, bubbles, cancelable );
}
其中A.mxml里面监听了此方法。
this.addEventListener( MyEvent.CLICK_ME , myEventHandler );
那么我在C.mxml里面触发了这个event:
dispatchEvent( new MyEvent( MyEvent.CLICK_ME ));
那么通常的情况是有A与C之间没有任何关系,因此C虽然触发了这个event,但是无法正常的传递到A中(我只说通常的情况)因此,我们需要在B.mxml里面也写上如下的内容:
//监听C传递过来的event
//注意这是在B中监听的
this.addEventListener( MyEvent.CLICK_ME , myEventHandler );
因此当C触发MyEvent.CLICK_ME后,会被B监听,当B监听到C的事件后,再次使用
//注意:这是在B中触发的
dispatchEvent( new MyEvent( MyEvent.CLICK_ME ));
最终由于A中已经监听了MyEvent.CLICK_ME,因此就可以收到C中触发的事件了(通过B进行了一次传递)。
虽然这样也能完成最初的目的:C → A,那么我们需要在B里面写上一些代码,这样做的缺陷是增加了coding时间,同时也降低了source的可读性。同时也增加了A、B、C的耦合性,因此上述方案不是一个较好的resolution。
而Mate flex framework给我们提供的解决方案:使用EventMap
那么我们如何利用EventMap呢?
- 首先需要引入mate swc。地址:http://mate.asfusion.com/page/downloads
- 定义一个folder:maps
然后在其中定义一个EventMap:MyEventMap.mxml(片段代码如下)
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/"
xmlns:extensions="com.asfusion.weather.mate.extensions.*">
<mx:Script>
<![CDATA[
import com.wonlen.test.A;
]]>
</mx:Script>
<EventHandlers type="{ MyEvent.CLICK_ME }">
<MethodInvoker generator="{ A }" method="myEventHandler" />
</EventHandlers>
</EventMap>
请注意:
- A:就是我们要被触发的目标位置。
- myEventHandler:我们之前定义的一个event handler
this.addEventListener( MyEvent.CLICK_ME , myEventHandler );
那么我来解释一下上诉的代码:
首先在MyEventMap里面定义如下的结构:
<EventMap xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://mate.asfusion.com/"
xmlns:extensions="com.asfusion.weather.mate.extensions.*">
</EventMap>
然后就是我们这次的重头戏了:
<EventHandlers type="{ MyEvent.CLICK_ME }">
<MethodInvoker generator="{ A }" method="myEventHandler" />
</EventHandlers>
上面的结构我用中文说一下:
- 当在C中触发了dispatchEvent( new MyEvent( MyEvent.CLICK_ME ));
- 会通过EventMap”寻找到“到类型为 MyEvent.CLICK_ME的eventHandler(即上图定义的结构)
- 之后会寻找到这段结构:<MethodInvoker generator="{ A }" method="myEventHandler" />
它的结构是:定义了接受event handler之后的对象A,然后调用的method:myEventHandler
最后一个步骤:
我们在这个project的主文件下面写上如下代码:
< maps:MyEventMap />
然后我们可以去掉在A中的监听:
this.addEventListener( MyEvent.CLICK_ME , myEventHandler );
通过以上以上的代码,那么最终的过程:
当C触发MyEvent.CLICK_ME后,会通过EventMap找到type为MyEvent.CLICK_ME
的<EventHandlers>结构,触发完毕后会调用<MethodInvoker>的目标对象A中的
myEventHandler函数。也就说通过EventMap,我们可以让MyEvent.CLICK_ME传递到任意地方:MXML文件里面、AS文
件里面都是完全可行的。
EventMap的特点:
它会帮助你的project 和 Flex来管理这些乱七八的事件,也就是只要是在同一个project里面,我可以通过EventMap将任何两个mxml之间通过事件传导的方式联系起来。EventMap将事件(行为)与最终事件处理(动作)联系了起来。
由于它将行为与动作绑定起来了,因此也带来了两个缺点:
- 当一个project里面有100个行为与动作的话,那么我们要在MyEventMap写100段如上的结构,这就变成了一种负担。理所当然的解
决方法:我们可以把这些EventMap分开。例如:ChatEventMap(负责聊天的EventMap)、DrawEventMap(负责绘画的
EventMap)等等。
- 由于它利用了Event type来对Event进行区分,因此我们每一个行为与动作都要设定一个唯一的Event type。如果有100个行为与动作的话,需要设定100个event name,这样的方式的确比较恐怖一些。
以上就是Mate flex framework的EventMap,下次给大家介绍Mate的Injectors(依赖注入机制),通过这种方式可以真正实现mvc的分离,而不需要使用倍受Cairngorm、PureMVC用户痛苦的单例模式。
原文:http://www.riameeting.com/node/163
- 大小: 6 KB
- 大小: 4.4 KB
分享到:
相关推荐
Mate flex framework在实际项目中的应用
Flex Mate框架swc包及Mate用法。
mate flex 框架 基础教程,本资料比较全,看完能够比较全的掌握MATE用法
欢迎大家下载,多提宝贵意见!!!(*^__^*)
一个关于flex的框架,名字mate,比较小巧,上手容易
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
Mate是一个基于标签的,事件驱动的框架。这是一个小例子,用flex3可以直接打开运行
mate-dock-applet, MATE面板的应用平台 用于MATE面板的应用程序停靠小程序平台上的助手 V0.80 applet同时适用于GTK2和GTK3版本,并允许你:在任何你想要的桌面任何尺寸的任何一面上放置一个码头。将应用程序锁定到 ...
Download compiled library (SWC) version 0.9.1 - Flex 3 & 4 Mate is distributed under the Apache 2.0 license.
With this unique advanced-level Flex book, you will: choose among several frameworks to build Flex applications, including Cairngorm, PureMVC, Mate, and Clear Toolkit; apply selected design patterns ...
华为Mate20手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20 位置图 点位图 位号图.pdf 华为Mate20 原理图 电路图.pdf 华为Mate20 注释图 故障标注 主板元器件位置图.pdf 华为Mate20 原厂图 维修流程...
华为Mate10手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate10 位置图 位号图 元件图.exe 华为Mate10 原理图 电路图.exe 华为Mate10 注释图 故障标注 主板元器件位置图.exe 华为Mate10 高级维修手册....
华为Mate8手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate8 位置图 点位图 位号图.pdf 华为Mate8 原理图 电路图.pdf 华为mate8 注释图 故障标注 主板元器件位置图.pdf 华为mate8 故障维修流程图 GPS...
华为Mate10手机原厂维修图纸 原理图 电路图 故障维修图(PDF版)华为Mate10 位置图 点位图 位号图.pdf 华为Mate10 原理图 电路图.pdf 华为Mate10 注释图 故障标注 主板元器件位置图.pdf 华为Mate10 高级维修手册.pdf...
华为Mate20手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate20 位置图 位号图 元件图.exe 华为Mate20 原理图 电路图.exe 华为Mate20 注释图 故障标注 主板元器件位置图.exe 华为Mate20 原厂图 维修...
mate30系列部分应用闪退解决方案1
华为Mate10Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate10Pro 位置图 点位图 位号图.pdf 华为Mate10Pro 原理图 电路图.pdf 华为Mate10Pro 注释图 故障标注 主板元器件位置图.pdf 华为Mate10Pro ...
学习mate flex actionscript 的好资源。源代码.
华为Mate20Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20Pro 位置图 点位图 位号图.pdf 华为Mate20Pro 原理图 电路图.pdf 华为Mate20Pro 注释图 故障标注 主板元器件位置图1.pdf 华为Mate20Pro...