AS3: Creating custom events

01/02/2010 in RIA View Comments

Let’s say you are creating a custom data service provider that can be used by more than one class in your project, or even a portable re-usable class. A nice, clean way to instantiate the data service provider without getting a cart before the horse error (datagrid trying to populate with data that is not yet loaded, etc…), is to use a custom event. It is very easy to create a custom event, dispatch it and listen for it. This way you can have say your datagrid in an mxml file, import the data service provider that has a RemoteObject in it, and the populate the datagrid ONCE the RemoteObject returns data. How would the datagrid know the data is ready?? A custom event!

Below is a simple example of a custom event class, and an mxml file using the custom event. EventPractice.mxml imports the CustomEvent.as file, adds listeners for the custom event while the buttons each dispatch one of the custom events. You simply pass the string value of the CONST variable in the custom event as an argument in the CustomEvent.as constructor, e.g. “dispatchEvent(new CustomEvent(“cEvent01″));”.

So I have two files, EventPractice.mxml and CustomEvent.as. CustomEvent.as contains 4 public static constants, each with a String value. EventPractice.mxml has for buttons that each dispatch a corresponding event, passing the String value to the CustomEvent.as constructor. EventPractice.mxml also has listeners added on creationComplete “listening” for the events immediately. Each event that corresponds with the String value passed by the button click routes to a matching function, throwing Alerts to let you know the right event was thrown.

If you are like me and come from more of a web/scripting/development background and got REAL used to global variables, this is a good way to break clean of that nasty habit.

CustomEvent.as

package {
 
	import flash.events.Event;
 
	public class CustomEvent extends Event{
 
		public static const CEVENT01:String = "cEvent01";
		public static const CEVENT02:String = "cEvent02";
		public static const CEVENT03:String = "cEvent03";
		public static const CEVENT04:String = "cEvent04";
 
		public function CustomEvent(customEventString:String){
 
			super(customEventString, true, false);
 
		}
	}
}

EventPractice.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" 
	creationComplete="init()">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import CustomEvent;
 
			public function init():void{
				//Add the listeners for the events
				addEventListener(CustomEvent.CEVENT01, launchEvent01);
				addEventListener(CustomEvent.CEVENT02, launchEvent02);
				addEventListener(CustomEvent.CEVENT03, launchEvent03);
				addEventListener(CustomEvent.CEVENT04, launchEvent04);
			}
 
			//Method for the button to dispatch the custom events		
			public function throwEvent(e:MouseEvent):void{
				switch (e.currentTarget){
					case btn01:
						dispatchEvent(new CustomEvent("cEvent01"));
						break;
 
					case btn02:
						dispatchEvent(new CustomEvent("cEvent02"));
						break;
 
					case btn03:
						dispatchEvent(new CustomEvent("cEvent03"));
						break;
 
					case btn04:
						dispatchEvent(new CustomEvent("cEvent04"));
						break;			
				}
 
			}
 
			public function launchEvent01(e:CustomEvent):void{
				Alert.show("Custom Event - 1 was thrown.");
			}
			public function launchEvent02(e:CustomEvent):void{
				Alert.show("Custom Event - 2 was thrown.");
			}
			public function launchEvent03(e:CustomEvent):void{
				Alert.show("Custom Event - 3 was thrown.");
			}
			public function launchEvent04(e:CustomEvent):void{
				Alert.show("Custom Event - 4 was thrown.");
			}
 
		]]>
	</mx:Script>
	<mx:VBox>
		<mx:Button id="btn01" label="Event 1" click="throwEvent(event);"/>
		<mx:Button id="btn02" label="Event 2" click="throwEvent(event);"/>
		<mx:Button id="btn03" label="Event 3" click="throwEvent(event);"/>
		<mx:Button id="btn04" label="Event 4" click="throwEvent(event);"/>
	</mx:VBox>
 
</mx:Application>