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; } } }