Flex事件机制(三)

上一篇主要以代码的方式说明了如何使用自定义事件在父子组件之间传递数据,那么在开发中,我们可能会遇到另一种情况,就是想在任意一个地方监听到任意一个组件中被触发的事件,这样事件处理更灵活,并不局限于父子组件之间,那么下面就说明这种情况如何处理。

       Flex中所有的组件都间接继承自EventDispatcher,通过查看Flex API,了解一下这个类中的方法。       

       如图所见,该类包含了派发事件、监听事件、移出事件等方法,那么通过这个类就可以实现本文开篇所提出的那种情况,分析一下,监听事件的对象和派发事件的对象必须是同一个对象,这样事件才能被捕获,所以我们需要写一个单例的类,并且组合EventDispatcher,可以满足需求。

       events/MyEventDispatcher.as,这里同样不建议以My起头命名,只是测试用。

package events
{
	import events.MyEvent;	
	import flash.events.Event;
	import flash.events.EventDispatcher;
	import flash.events.IEventDispatcher;	
	import mx.core.Singleton;
	public class MyEventDispatcher
	{
		private static var _inst:MyEventDispatcher;
		private var eventDispatcher:IEventDispatcher;
		public function MyEventDispatcher(singleton:Singleton)
		{
			if(singleton == null)
			{
				throw new Error("Create MyEventDispatcher Error!");
			}
			eventDispatcher = new EventDispatcher();
		}
		public static function getInstance():MyEventDispatcher
		{
			if (!_inst)
			{
				_inst = new MyEventDispatcher(new Singleton);
			}
			return _inst;
		}
		public function addEventListener(type:String, listener:Function, useCapture:Boolean=false, pririty:int=0, useWeakReference:Boolean=true):void
		{
			eventDispatcher.addEventListener(type, listener, useCapture, pririty, useWeakReference);
		}
		public function removeEventListener(type:String, listener:Function, useCapture:Boolean=false, priority:int=0, useWeakReference:Boolean=true):void
		{
			eventDispatcher.removeEventListener(type, listener, useCapture);
		}
		public function dispatchEvent(event:MyEvent):Boolean
		{
			return eventDispatcher.dispatchEvent(event);
		}
		public function hasEventListener(type:String):Boolean
		{
			return eventDispatcher.hasEventListener(type);
		}
		public function willTrigger(type:String):Boolean
		{
			return eventDispatcher.willTrigger(type);
		}
	}
}
class Singleton {}

       为了节省空间,类里不加注释了,其实也不要紧,功能很简单,组合了EventDispatcher对象,对其做了一层代理,并且对MyEventDispatcher单例话,为什么采用单例上面已经说过了,但是为什么使用组合而不是继承呢,在OOPS(面向对象程序设计系统)中,有一条原则是优先使用组合而非继承,组合比继承更灵活,组合允许在运行期间通过设置类的属性来改变类的行为,并且可以使用接口来组合一个类,提供了更高的灵活性。

       到目前为止,我们的工作已经完成一大半了,在上一篇中设计了一个自定义事件类,也就是events/MyEvent.as,我们可以在该类中加入一个dispatch方法,创建完事件之后可以派发,代码如下:       

/**
 * 派发事件
 * @return 
 */
public function dispatch():Boolean
{
  return MyEventDispatcher.getInstance().dispatchEvent(this);
}

       这样,创建完自定义事件之后,就可以直接派发事件了,那么使用起来就很方便了,下面是具体使用代码,一个应用中有两个自定义组件,组件一中有个TextArea,组件二中有个按钮,点击按钮,将数据传递到TextArea中。

       EventTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600" 
			   xmlns:components="components.*">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<components:component1 />
	<components:component2 />
</s:Application>

       components/component1.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx"
		 creationComplete="creationCompleteHandler(event)">
	<fx:Script>
		<![CDATA[
			import events.MyEventDispatcher;
			import events.MyEvent;
			import mx.events.FlexEvent;			
			protected function creationCompleteHandler(event:FlexEvent):void
			{
				MyEventDispatcher.getInstance().addEventListener(MyEvent.SHOWINFO, showInfo);
			}			
			protected function showInfo(event:MyEvent):void
			{
				textArea.text = event.data;
			}			
		]]>
	</fx:Script>
	<s:TextArea id="textArea" />
</s:Group>

       components/component2.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" 
		 xmlns:mx="library://ns.adobe.com/flex/mx">	
	<fx:Script>
		<![CDATA[
			import events.MyEvent;
			import events.MyEventDispatcher;
			protected function buttonClickHandler(event:MouseEvent):void
			{
				var myEvent:MyEvent = new MyEvent(MyEvent.SHOWINFO);
				myEvent.data = "哈哈";
				myEvent.dispatch();
			}
		]]>
	</fx:Script>
	<s:Button label="显示内容" click="buttonClickHandler(event)"/>
</s:Group>

       好,这样就实现了在任意一个地方监听到任意一个组件中被触发的事件的功能,文中如有错误之处,欢迎指出,大家共同进步。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java Edge

MyBatis Generator 用法详解 XML配置详解 3. <generatorConfiguration>的子元素MyBatis Generator中文文档

3457
来自专栏一个会写诗的程序员的博客

TypeScript 之父简介:TS Anders Hejlsberg: Introducing TypeScript参考资料TypeScript入门指南(JavaScript的超集)

https://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

732
来自专栏Android干货

xUtils类库的使用

2074
来自专栏PHP技术

建立灵巧结构的PHP程序

很早就想写这篇文章了,但一直没有时间完成它。不是说我来告诉大家如何做,我更希望本文只是做为一个引子,与大家来讨论关于如何建立一个有效地、灵活的网络应用程序。 ...

2726
来自专栏Ldpe2G的个人博客

Scala typeclass 设计模式

本文的写作的灵感主要是看了这个视频 : Tutorial: Typeclasses in Scala with Dan Rosen

1226
来自专栏何俊林

Android开发基础规范(二)

前言:Android中一些开发规范,避免给自己和别人少留坑。 二、代码相关 2.2.15 Field Ordering 属性排序 在类文件顶部声明的任何属性都...

1817
来自专栏葡萄城控件技术团队

ASP.NET MVC 5 -从控制器访问数据模型

在本节中,您将创建一个新的MoviesController类,并在这个Controller类里编写代码来取得电影数据,并使用视图模板将数据展示在浏览器里。 在开...

2055
来自专栏Java帮帮-微信公众号-技术文章全总结

Java基础-day10-代码题-继承&抽象类

Java基础-day10-代码题-继承&抽象类 1.门类继承题: 编写代码,实现如下功能: (1)定义一个门类, 包含3个属性:宽度width 和 高度hei...

4086
来自专栏CRPER折腾记

Angular 2 + 折腾记 :(7) 初步了解表单:模板驱动及数据驱动及脱坑要点

表单在整个系统中的作用相当重要,这里主要扯下响应表单的实现方式。 首先需要操作表单的模块引入这两个模块; import { FormsModule, React...

562
来自专栏Ldpe2G的个人博客

Scala typeclass 设计模式

996

扫码关注云+社区