Handling events
Requirements
User level
All
Adobe Flex applications are event-driven. Events let a programmer know when the user interacts with an interface component, and also when important changes occur in the appearance or life cycle of a component, such as the creation or destruction of a component or its resizing.
When an instance of a component dispatches an event, objects that you registered as listeners for that event are notified. You define event listeners, also called event handlers, in ActionScript to process events. You register event listeners for events either in the MXML declaration for the component or in ActionScript.
There are three ways to receive event notifications:
- Registering an event handler in MXML
- Creating an inline event handler in the MXML definition
- Registering an event listener through ActionScript
Registering an event handler in MXML
The first, and most widely used method for getting event notifications is to define an event handler in MXML that is called when an event occurs.
In this example, you define an event handler for the click event of a Button control. When a user clicks the Button control, the event handler sets the text property of the Label control to "Hello, World!".
Tip: Flash Builder 4 provides tooling that generates stubs for event handlers. For more information refer to Generating event handlers in the Adobe Flash Builder 4 Help.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- HandlingEventsEventHandler -->
<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"
width="200" height="200">
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
private function clickHandler ( event:MouseEvent ):void {
myLabel.text = "Hello, World!";
}
]]>
</fx:Script>
<s:Panel title="My Application" width="100%">
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Label id="myLabel" fontWeight="bold" fontSize="24"/>
<s:Button id="myButton" label="Click Me!" click="clickHandler(event);" />
</s:Panel>
</s:Application>
Result
Creating an inline event handler in the MXML definition
Sometimes the easiest way of responding to events is to define the event handler entirely in the MXML definition of a component. This is known as using an inline event handler.
In the following example, you set the click property of the <s:Button> tag so that it directly sets the text property of the Label control, without calling an event handler method.
Tip: Using inline event handlers may be quick and result in less code, but they also result in code that is harder to read, maintain, and scale. A good rule of thumb is not to include more than one ActionScript statement in an inline event handler. If you must include more complex logic, place it in an ActionScript helper method or in an ActionScript event handler.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- HandlingEventsInlineMethod.mxml -->
<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"
width="200" height="200">
<s:Panel title="My Application" width="100%">
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Label id="myLabel" fontWeight="bold" fontSize="24"/>
<s:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" />
</s:Panel>
</s:Application>
Result
Registering an event listener through ActionScript
You can also respond to events by creating an event handler using ActionScript, and then registering an event listener for the event.
In this example, you use ActionScript to create an event handler for the creationComplete event of the Application container. You then register a listener for your event handler by using the addEventListener() method.
Tip: The creationComplete event for the Application form occurs at the start of your application, after the Application container and its children are initialized. The event handler for the creationComplete event provides a convenient place to run ActionScript code to register event listeners.
Example
<?xml version="1.0" encoding="utf-8"?>
<!-- HandlingEventsActionScript.mxml -->
<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"
width="200" height="200"
creationComplete="creationCompleteHandler(event);">
<fx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.FlexEvent;
private function creationCompleteHandler(event:FlexEvent):void {
// Listen for the click event on the Button control
myButton.addEventListener (MouseEvent.CLICK, clickHandler);
}
private function clickHandler ( event:Event ):void {
myLabel.text = "Hello, World!";
}
]]>
</fx:Script>
<s:Panel title="My Application" width="100%">
<s:layout>
<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:Label id="myLabel" fontWeight="bold" fontSize="24"/>
<s:Button id="myButton" label="Click Me!" />
</s:Panel>
</s:Application>
Result
For more information
This work is licensed under a Creative Commons Attribution-Noncommercial 3.0 Unported License.
