jump to navigation

Creating and Dispatching Custom Events in Flex3 August 1, 2010

Posted by Tournas Dimitrios in Flex.

Flex applications consist of a component hierarchy starting with the Application root. Components are built-in or custom. Interaction between components may occur down the component hierarchy (parent to child) or up (child to parent).

  • When a parent component interacts with a child component, the parent utilizes the child component’s interface (API). This interface includes the component’s public properties and methods.For example, a parent component may hide a child component by setting its visible property to fals  ..>>> see code examle below .
  • Conversely, when a component wants to interact with a parent (or ancestor) component, it does so by dispatching events. Events are dispatched to signify an occurrence has taken place and include the details of the occurrence wrapped inside an event object.

The picture below demonstrates an example of a Display component hierarchy

The code below demonstrates the Parent to Child component interaction (through the API)

<!-- parent component -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

            private function doSomething(event:MouseEvent):void {
                lbl.visible = false; // parent (Application) interacting with child (Label)
    <!-- child component -->
    <mx:Label id="lbl" text="Hello there"/> 
    <!-- child component -->
    <mx:Button label="Hide Label" click="doSomething(event)"/>

Lets demonstrate a Flex Application that will have 2 custom components :

  1. A RadioButtonGroup that dispatches a custom event any time a button is clicked
  2. A Label  control that will display any message it is passed in

There are 5 steps to create a custom component :

  1. Inside the custom component create a Metadata blog-tag , and inside this blog-tag ,define the name and the type of the custom component . The Metadata tags do not get compiled into executable byte-code .They provide information to the Flex compiler about how portions of your code get compiled
  2. Instantiate the event
  3. Dispatch the event to the parent component
  4. Create an Event handler on the parent component
  5. Create the information / data in the event object

The code for the RadioButtonGroup componnet is :

		[Event(name="custEvName", type="flash.events.Event")]
			private function clickHandler():void
				var eventObj:Event = new Event("custEvName");

	<mx:Label id="myLabel" text="Select Your Menu for Today"/>

			itemClick="clickHandler()" />

			label="Fish Special" />

			label="Beef Special" />

			label="Veggie Special" />

			label="Lite Plate" />
</mx : VBox>

The code for the custom Label control is :

< xml version="1.0" encoding="utf-8"?>
anvas xmlns:mx="http://www.adobe.com/2006/mxml">


			public var menuForDisplay:String;


	<mx:Label id="theLabel" text="{menuForDisplay}" fontSize="24" />


And finally the code for the main Flex Application is :

< xml version="1.0" encoding="utf-8"?>
< mx:A pp lication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:comp="*">


			private var selectedMenu:String;
			private function custEvNameHandler():void
				selectedMenu = "a menu has been selected";

	<comp:CustEvDispatcher_wt1 id="menuChooser" custEvName="custEvNameHandler()" />

	DisplayMenu id="menuLabel" menuForDisplay="{selectedMenu}" />
	<mx:Button label="Reset the  Menu" click="menuLabel.menuForDisplay=''" />

</m x:A pplication>

I hope you get the picture of how to set-up a custom event

Dispatching Custom event with attached data :

Until now our custom component dispached only a event with a general Event- type object.This Event-type object contains only general information ( target , currentTarget ,id , etc…) A more practical implementation would be to include some custom data with the event dispatch.To do so , we create a custom object class that extend the Event class.

Within this subclass of the Event class, you can add properties, add methods, set the value of an inherited property, or override methods inherited from the Event class. For example, you might want to set the bubbles property to true to override the default setting of false, which is inherited from the Event class.

You are required to override the Event.clone() method in your subclass. The clone() method returns a cloned copy of the event object by setting the type property and any new properties in the clone. Typically, you define the clone() method to return an event instance created with the new operator.

Suppose that you want to pass information about the state of your component to the event listener as part of the event object. To do so, you create a subclass of the Event class to create an event, EnableChangeEvent, as the following example shows:

package myEvents
    import flash.events.Event;

    public class EnableChangeEvent extends Event

        // Public constructor.
        public function EnableChangeEvent(type:String,
            isEnabled:Boolean=false) {
                // Call the constructor of the superclass.

                // Set the new property.
                this.isEnabled = isEnabled;

        // Define static constant.
        public static const ENABLE_CHANGED:String = "enableChanged";

        // Define a public variable to hold the state of the enable property.
        public var isEnabled:Boolean;

        // Override the inherited clone() method.
        override public function clone():Event {
            return new EnableChangeEvent(type, isEnabled);

In this example, this custom class defines a public constructor that takes two arguments:

  • A String value that contains the value of the type property of the Event object.
  • An optional Boolean value that contains the state of the component’s isEnabled property. By convention, all constructor arguments for class properties, except for the type argument, are optional.

From within the body of your constructor, you call the super() method to initialize the base class properties.

Further reading from the Adobe website here >>> and here >>>

Download these source files to get familiarization with this subject here >>>



No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s