Events in Flex

On 06.01.09, In Flex, by Kalyan

What are Events and Listeners?
Events are what make an application work. Actually, without Events, we cannot make an application. An Event can be described as anything from a mouse click to a return of a web service call.
Any user interaction with the application can be treated as an Event. It can be a mouse [...]

What are Events and Listeners?

Events are what make an application work. Actually, without Events, we cannot make an application. An Event can be described as anything from a mouse click to a return of a web service call.

Any user interaction with the application can be treated as an Event. It can be a mouse click or a keyboard button press, a change in a component, or when the data completes loading or even when an application is created. So, when an event is fired or dispatched, there has to be something to pick up the call – this is what we call a Listener. A Listener is just a method or a function which we write to receive an Event fired due to any user interaction.

Let us look at a small example of how an Event is fired and is taken up by an Event Listener or Event Handler. Try clicking on the button “Click Here” in the below application

The code for the above application is as follows:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="610" height="200">

  <mx:Button id="myButton" label="Click Here" click="mySampleEvent(event)" fontFamily="Arial" fontSize="18"/>

  <mx:Label fontSize="18" fontFamily="Arial" id="sampleLabel"/>

  <mx:Script>

<![CDATA[

public function mySampleEvent(event:Event):void{

sampleLabel.text="You clicked on the button";

}

]]>

</mx:Script>

</mx:Application>

Observe the code writtent for the Button component. The button is waiting for a ‘click’ event which when occurs is passed on to an event handler that updates the Label component with the text “You clicked on the button”. It is important to include the ‘event’ keyword so that Flex passes it explicitly to the Event Handler or Event Listener.

What I have shown above is just a basic example of a simple Event. There are several Events that a button can have. To look at the complete list of Events, go the design mode in Flex Builder, click on the Button and in the ‘Flex Properties’, click on Category View as shown in the image below. This will display a complete list of available Events for a particular component

Events in Flex

Observe that there is already a value for the ‘click’ event as I have written a Event handler for it.

We can also get the list of Events available in the Source Mode. In the Source Mode, just hit space after typing in <mx:Button and we will get a auto completion box. The attributes with the gold colored symbol on the left are the Events for the Button Component.

Event flow in Flex

The Event flow in Flex comprises of 3 parts:

Capturing Phase
Targeting Phase
Bubbling Phase

1. Capturing Phase

In this phase, the Flash Player searches every node from the root node to the target node for any listeners and it stops when it finds one.

2. Targeting Phase

The Flash Player sets appropriate values to the target node and checks the target node for any listeners registered.

3. Bubbling Phase

In the third phase, the Flash Player searches for any Listeners starting from the target node to the root node and stops when it find listeners on the root node.

Different methods of Registering Events

There are two ways we can register Event Handlers in Flex. The first method is to include inline Handlers as in the example we discussed above. The second is to use the addEventListener() method.

Using inline Event handlers:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="610" height="200">

  <mx:Button id="myButton" label="Click Here" click="mySampleEvent(event)" fontFamily="Arial" fontSize="18"/>

  <mx:Label fontSize="18" fontFamily="Arial" id="sampleLabel"/>

  <mx:Script>

<![CDATA[

public function mySampleEvent(event:Event):void{

sampleLabel.text="You clicked on the button";

}

]]>

</mx:Script>

</mx:Application>

Using the addEventListener() method:

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="610" height="200" creationComplete="startApplication()">

  <mx:Button id="myButton" label="Click Here" fontFamily="Arial" fontSize="18"/>

  <mx:Label fontSize="18" fontFamily="Arial" id="sampleLabel"/>

  <mx:Script><![CDATA[

      public function startApplication():void {

        myButton.addEventListener(MouseEvent.CLICK, mySampleEvent);

        }

        public function mySampleEvent(event:Event):void {

        sampleLabel.text="You clicked on the button";

        }

        ]]></mx:Script>

      </mx:Application>

Observe in the second method, where I have used an Event called “creationComplete” for the application tag. This Event is fired when the application completes loading in the browser. This calls the function ’startApplication’ that I have defined in the Script area. This function has an “addEventListener” method which is waiting for a mouse click written to the Button. So, the “addEventListener” is only called when the user clicks on the Button. When a mouseclick Event occurs, the addEventListener method calls the function ‘mySampleEvent’ that defines the text to be updated in the Label.

Though this method might seem a bit tedious, this gives developers more flexibility and also, we can register multiple components to the same Handler.

So, that was about Events in short. It would be best to go through the Adobe Livedocs on Flex 3 for a more in-depth knowledge of the Events Propagation and stuff.

If there is any important thing related to Events that you think I should have included in the above post, please let me know through your comments below.