Flex: How to use a custom Event

1. Declare a custom Event that extends Event and have some properties for data transfer purpose.

2. Declare the custom Event in component/application's metadata block

3. In the declared component/application, dispatch the custom event under specific circumstance.

4. Use the component in outter component/application and generate the event handler.

5. Get the data stored in event object.

 

Eg.

1. Application domain(VOTest.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"
			   xmlns:components="components.*"
			   minWidth="955" minHeight="600" preinitialize="initApp(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
		<fx:XML id="employeeXML" source="data/employees.xml"/>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import event.ShowPreview;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import vo.Employee;
			public var employee:Employee;
			[Bindable]
			public var employeeList:ArrayCollection = new ArrayCollection();
			
			public function initApp(event:Event):void{
				
				for each(var emp:Object in employeeXML.children()){
					employee = new Employee();
					
					employee.firstName = emp.firstName;
					employee.lastName = emp.lastName;
					employee.city = emp.city;
					
					employeeList.addItem(employee);
				}
			}
			
			protected function employeedisplay1_showPreviewHandler(event:ShowPreview):void{
				previewLabel.text = (event as ShowPreview).employee.firstName + " ";
				previewLabel.text += (event as ShowPreview).message;
				previewLabel.visible = true;
			}
			
		]]>
	</fx:Script>
	<s:VGroup>
		<components:EmployeeDisplay employeeList="{employeeList}"
									showPreview="employeedisplay1_showPreviewHandler(event)"/>
		<s:Label text="Employee Preview" id="previewLabel" visible="false"/>
	</s:VGroup>
</s:Application>

 

2. Component Domain(EmployeeDisplay.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"
		 width="278" height="552"
	     preinitialize="initApp(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Metadata>
		[Event(name="showPreview", type="event.ShowPreview")]
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import event.ShowPreview;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.CalendarLayoutChangeEvent;
			
			import vo.Employee;
			
			[Bindable]
			public var employeeList:ArrayCollection;
			
			private var employee:Employee;
			
			public function initApp(event:Event):void{
				for each(var emp:Employee in employeeList){
					employee = new Employee();
					employee.firstName = emp.firstName;
					employee.lastName = emp.lastName;
					employee.city = emp.city;
				}
			}
			
			protected function button1_clickHandler(event:MouseEvent):void{
				var eventObject:ShowPreview = new ShowPreview("showPreview", employeeDropDownList.selectedItem, employeeTextArea.text);
				this.dispatchEvent(eventObject);
			}
		]]>
	</fx:Script>
	<s:VGroup>
		<s:DropDownList id="employeeDropDownList" dataProvider="{employeeList}" labelField="firstName"/>
		<s:TextArea id="employeeTextArea"/>
		<s:Button label="Preview" click="button1_clickHandler(event)"/>		
	</s:VGroup>
	
</s:Group>

 

3. Custom Event(ShowPreview.as)

 

package event
{
	import flash.events.Event;
	import vo.Employee;
	
	public class ShowPreview extends Event
	{
		public var employee:Employee;	//Data for transfer
		public var message:String;		//Data for transfer
		
		public function ShowPreview(type:String, employee:Employee, message:String)
		{
			super(type);				//type info: can be Event.CLICK or custom event type defined in <metadata>
			
			this.employee = employee;
			this.message = message;
		}
	}
}

 

4. Value Object(Employee.as)

 

package vo
{
	[Bindable]
	public class Employee
	{
		public var firstName:String;
		public var lastName:String;
		public var id:String;
		public var title:String;
		public var email:String;
		public var managerID:String;
		public var department:String;
		public var location:String;
		public var phone:String;
		public var directDial:String;
		public var deskLocation:String;
		public var city:String;
		public var state:String;
		public var countryCode:String;
		public var postalCode:String;
		public var hireDate:Date;
		public var evaluation:int;
		
		public function Employee()
		{}
		
		public function createFullName():String{
			return this.firstName + " " + this.lastName;
		}
	}
}