In this article you will learn how to add custom event to flex component using action script class. In a large flex applicaiton its always needed to split the applicaiton into small small flex components. Adding custom events to the compoents can make easier for developers to communicate between different components.

Here is how you can add custom event to flex compoent and how to respond on that event.

1. Create a action script class called ItemAddedEvent.as

package dot4pro

{

import  flash.events.Event;

public class  ItemAddedEvent extends Event

{

// the string  must be the same with the one specified

// in the  Event metatag in name attribute

public  static const ITEMADDED_EVENT:String = "itemaddedevent";

// constructor

public  function ItemAddedEvent(type:String):void

{

super(type);

}

}

}

2.Create a new component and import the custom event class.

import dot4pro.ItemAddedEvent;

3. Add meta data info on the component

<mx:Metadata>

[Event(name="itemaddedevent", type="dot4pro.ItemAddedEvent")]

</mx:Metadata>

4. Dispatch the event from where you want to raise the event.

dispatchEvent(new  ItemAddedEvent(ItemAddedEvent.ITEMADDED_EVENT));

5. Put the component on the mail application and define its id. For eg: “myComponent”.

6. Add event hanlder to the component that you have placed on the main applicaiton to catche the event outside the component

myComponent.addEventListener(ItemAddedEvent.ITEMADDED_EVENT,ItemAdded);

7. Create the EventHander function

private function ItemAdded(evt:Event)

{

//Implement
your code here

}