Flex4自定义事件

1、自定义事件

2、自定义带参数的事件

        刚到公司上班没多久，事情不是太多。打酱油的成分占据大多时间。闲着没事学习下Flex。在这之前没有接触过Flex。在理解上面多有拙劣之处。重在交流，总结。还望看到的各位高手能够给予指点。

        刚做了一个自定义事件，对于我们初学Flex的并且没有人交流的还是有点难度的。之前有过好多前辈写过关于Flex自定义事件的博文。也许对于很多新手理解上有点难度。这里我就简单的通俗的写下自定义事件。

1、

        自定义事件必须注意几点：

        （1）自定义事件通过继承Event类来实现。

        （2）自定义事件不可以自己触发，只能有系统事件派发。

        了解这两点后现在就可以开始自定义自己的事件了。

        首先我们新建一个ActionScript Class，这个Class继承flash.events.Event。

package myEvent
{
	import flash.events.Event;
	
	public class MyEvent extends Event
	{
		public static const MYEVENT:String = "myevent";
		public function MyEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		override public function clone():Event{
			return new MyEvent(type,bubbles,cancelable);
		}
	}
}
<!--自定义事件继承Event来实现-->

        然后可以创建一个Component，在里面随便添加容器和控件，在控件上面通过系统事件，比如MouseEvent，用来触发事件。注意，这个MouseEvent触发的事件里面通过this.dispatchEvent(evnet:Event)来派发出你自定义的事件。

<?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:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Metadata>
		[Event(name="myevent",type="myEvent.MyEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import myEvent.MyEvent;
			
			private function clickHandle(event:MouseEvent):void{
				this.dispatchEvent(new MyEvent("myevent",true,false));
			}
			
		]]>
	</fx:Script>
	<s:Panel width="400" height="200"
			 title="Show Customize Event"
			 x="200" y="100">
		<s:Button label="On this button,I add a custom event...Click it..." id="showevent"
				  top="50" left="50" click="clickHandle(event)"/>
	</s:Panel>
</s:Group>

        最后在创建的Flex工程里面引入这个Component，为这个component添加事件监听器。

<?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" 
			   xmlns:myms="component.*"
			   minWidth="955" minHeight="600"
			    creationComplete="init()" xmlns:myComponent="myComponent.*">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			
			import myEvent.MyEvent;

			private function init():void{
				component.addEventListener(MyEvent.MYEVENT,clickHandle);
			}
			
			private function clickHandle(event:MyEvent):void{
				Alert.show("The type of this event is "+event.type+"\nThe currentTarget is "+event.currentTarget+
				"\nThe target is "+event.target);
			}
			private function clickHandleThis(event:MouseEvent):void{
				Alert.show("The type of this event is "+event.type+"\nThe currentTarget is "+event.currentTarget+
				"\nThe target is "+event.target);
			}
		]]>
	</fx:Script>
	<myComponent:MyComponent id="component" click="clickHandleThis(event)"/>
</s:Application>
<!--自定义事件-->

2、

        自定义带参数的事件应该明白：

        （1）自定义事件继承Event时的构造函数里面带参数。

        （2）同样需要触发系统事件，然后派发自定义事件。

        新建一个ActionScript Class，这个Class继承flash.events.Event。

package customEvent
{
	import flash.events.Event;
	
	public class TransferData extends Event
	{
		public static const CUSTOMEVENT:String = "customevent";
		public var loginName:String;
		public var password:String;
		public function TransferData(type:String, loginName:String, password:String)
		{
			super(type);
			this.loginName = loginName;
			this.password = password;
		}
		override public function clone():Event{
			return new TransferData(type,loginName,password);
		}
	}
}

        然后创建component来设计并实现数据的传输和接受。

       DispatchData.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="init()">
	<fx:Metadata>
		[Event(name="customevent",type="customEvent.TransferData")]
	</fx:Metadata>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<mx:Validator id="InputLoginName" source="{loginName}" property="text"/>
		<mx:Validator id="InputPassword" source="{password}" property="text"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import customEvent.TransferData;
			
			import mx.controls.Alert;
			private function init():void{
				dispatchData.addEventListener(MouseEvent.CLICK,clickHandle);
			}
			private function clickHandle(event:MouseEvent):void{
				if(loginName.text != "" && password.text != ""){
					canDispatchData();
				}else{
					Alert.show("Please input the content,contain login name and the password!");
				}
			}
			private function canDispatchData():void{
				var loginEvent:TransferData = new TransferData("customevent",loginName.text,password.text);
				this.dispatchEvent(loginEvent);
			}
		]]>
	</fx:Script>
	<s:Panel x="0" y="0" width="300" height="200" title="The DataSource Panel">
		<mx:Form x="10" y="10">
			<mx:FormItem label="Login Name:" fontWeight="bold" required="true">
				<s:TextInput id="loginName"/>
			</mx:FormItem>
			<mx:FormItem label="Password:" fontWeight="bold" required="true">
				<s:TextInput id="password"/>
			</mx:FormItem>
			<s:Button label="DispatchData" id="dispatchData"/>
		</mx:Form>
	</s:Panel>
</s:Group>

        ReceiveData.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:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel x="0" y="0" width="300" height="200" title="The DataReceive Panel">
		<mx:Form x="10" y="10">
			<mx:FormItem label="Login Name:" fontWeight="bold">
				<s:TextInput id="loginName" editable="false"/>
			</mx:FormItem>
			<mx:FormItem label="Password:" fontWeight="bold">
				<s:TextInput id="password" editable="false"/>
			</mx:FormItem>
			<s:Button label="ReceiveData" id="receiveData"/>
		</mx:Form>
	</s:Panel>
</s:Group>

        LoginEvent.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"
		 xmlns:component="component.*"
		  creationComplete="init()"
		   width="900" height="400">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import customEvent.TransferData;
			private var loginName:String;
			private var password:String;
			private function init():void{
				dispatch.addEventListener(TransferData.CUSTOMEVENT,dispatchData);
				receive.addEventListener(MouseEvent.CLICK,receiveData);
			}
			private function dispatchData(event:TransferData):void{
				loginName = event.loginName;
				password = event.password;
				Alert.show("loginName:"+loginName+"\npassword:"+password);
			}
			private function receiveData(event:MouseEvent):void{
				receive.loginName.text = loginName;
				receive.password.text = password;
			}
		]]>
	</fx:Script>
	<component:DispatchData id="dispatch" x="100" y="100"/>
	<component:ReceiveData id="receive" x="500" y="100"/>
</s:Group>

        在Flex工程里面引入component即可

<?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"
			   xmlns:component="component.*"
			   minWidth="955" minHeight="600"
			    horizontalCenter="0" verticalCenter="0">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Panel title="Show dispatch and receive data"
			  horizontalCenter="0" verticalCenter="0">
		<component:LoginEvent/>
	</s:Panel>
</s:Application>