ActionScript 设计模式之自定义事件

 

Flex自定义事件

事件是一个非常有用的功能，通常用于信息传递交互大大提高程序编写的灵活性。在高级语言中都会集成这方面特性；Flex也不例外几乎所有控件中都集成了大量的事件，如果Button的Click事件等。但实际应用中控件自有的事件是不能满真实需要的，特别在自己编写自定义控件时，自定义控件内部信息的改变如何及时通知所在的容器变得很更要；这个时候Flex自定义事件就起到它的作用。

 

首先要自定义一个事件，继承Event。

LoginEvent.as

package com.test
{
 import flash.events.Event;
 import com.test.UserInfo;
 
 public class LoginEvent extends Event
 {
  public function LoginEvent(user:UserInfo,type:String){
   super(type);
   this.user = user;
  }
  public var user:UserInfo;        
 }
}

我们发现里面有个UserInfo,则也要定义一个PO类.

UserInfo.as:

package com.test
{
	public class UserInfo
	{
		public var name:String;
		public var password:String;
	}
}

然后写一个canvas组件。

LoginControl.mxml:

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/mx"
	width="290" height="132">
	<fx:Metadata>
		[Event(name="login",type="com.test.LoginEvent")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import com.test.UserInfo;
			import com.test.LoginEvent;
			public function login():void
			{
				var user:UserInfo = new UserInfo();
				user.name = this.txtUser.text;
				user.password = this.txtPassword.text;
				
				var event:LoginEvent = new LoginEvent(user,"login");
				this.dispatchEvent(event);
			}
		]]>
	</fx:Script>
	<mx:Button x="224" y="100" label="Login" click="login()"/>
	<mx:Form x="10" y="10" width="270">
		<mx:FormItem label="User Name:" required="true">
			<mx:TextInput maxChars="10" id="txtUser"/>
		</mx:FormItem>
		<mx:FormItem label="Password:" required="true">
			<mx:TextInput displayAsPassword="true" maxChars="8" id="txtPassword"/>
		</mx:FormItem>
	</mx:Form>
	
</mx:Canvas>

 

然后写一个测试的mxml:

EventTest.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication 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:ns1="*" 
					   >
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
		import mx.controls.Alert;
		import com.test.UserInfo;
		import com.test.LoginEvent;
		
		private function loginHandler(event:LoginEvent):void{
				Alert.show(event.user.name +" log in.");	
		}
		]]>
	</fx:Script>

	
	<ns1:LoginControl  x="27" y="24"  login="loginHandler(event)" width="301" height="135" />
	
</s:WindowedApplication>

实现的效果如下所示：

 

（完....）