Dispatching Events between components in Flex

In order to share data between components, the best approach is to share the information through Event Dispatching.

In this sample, I am going to use 3 files – Main Application file named DispatchingEvents.mxml and two Component files called Dispatcher.mxml and Receiver.mxml

In the application, I have created one created one instance of each of the components.

In this application we are going to pass a value from the dispatcher to the receiver through the application.

If you run the application you can see the following:

As you can see, the Receiving component is already receiving a value through a public property (myProperty). This public property is being passed in from the application.

If you refer to the source of the application, I have created a bindable private variable called shared Data and in the Receiver component at line 18, the value of its public property - ‘myProperty ‘ is passed through a binding expression through the ‘sharedData’ variable.

Now we want the Dispatcher component to pass information, the application to capture that event and place that information in the ‘sharedData’ variable, so that it is accessible to the receiver component.

In the Dispatcher component, I have placed a pair of MetaData tags. The purpose of these tags is to allow you to declare objects or members of that component.

For a component to dispatch an event we need to first declare the event, its name and what class it uses.So we use the Metadata tags to declare an event.Each event that is to declared must have a name.

Here I am creating an event called ‘dataShared’ as follows:

[Event(name="dataShared")]

Now the component is capable of dispatching the event but has not yet dispatched the event.

Then we have to decide what kind of event we are going to dispatch. Each instance you are going to dispatch needs to be an instance of some existing event class. If you going to notify that something happened but are not sharing data we can use the standard ‘Event’ class, which is what I am going to do here.

Then we create an instance of the ‘Event’ class in the clickhandler() method.

var event : Event = new Event("dataShared");

Note that I am passing the event(dataShared) as an argument to the Event class constructor.

To dispatch the event I am going to use a method called ‘dispatchEvent’.This method is a member of every visual component.So we can dispatch the components from anywhere we like.

We shall now pass the ‘event’ object we have just constructed to the dispatchEvent method.

private function clickHandler():void {

var event : Event = new Event("dataShared");

dispatchEvent(event);

}

In the application, for the dispatcher component we shall add an eventhandler. As with all eventhandler calls I am going to pass the event object that was generated or dispatched by the component to my handler method.

I am using the function sharedDataHandler, to change the value of the ‘sharedData’ string. Iam giving a value for the ‘sharedData’ string in this function as follows :

private function sharedDataHandler(event:Event):void

{

sharedData="Data was shared from the component";

}

Now if we run the application and click on the button we get the value in the receiver component.