A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Professional
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
Flex Quick Start: Getting started
Table of contents
- Coding with MXML and ActionScript
- Creating your first application
- Handling events
- Positioning and laying out Flex components
- Embedding application assets
Handling events
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!".
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200" horizontalAlign="center" verticalAlign="middle" viewSourceURL="src/HandlingEventsEventHandler/index.html" > <mx:Script> <![CDATA[ import flash.events.MouseEvent; private function clickHandler ( event:MouseEvent ):void { myLabel.text = "Hello, World!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" /> </mx:Panel> </mx:Application>
Result
This content requires Flash
To view the full source, right-click the Flex application and select View Source from the context menu.
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 <mx: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"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/HandlingEventsInlineMethod/index.html" horizontalAlign="center" verticalAlign="middle" width="300" height="200" > <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" /> </mx:Panel> </mx:Application>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
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 form and its children are initialized. The event handler for the creationComplete event provides you with a convenient place to run ActionScript code to register event listeners.
Example
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/HandlingEventsActionScript/index.html" horizontalAlign="center" verticalAlign="middle" width="300" height="200" creationComplete="creationCompleteHandler(event);" > <mx: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!"; } ]]> </mx:Script> <mx:Panel title="My Application" horizontalAlign="center" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" > <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/> <mx:Button id="myButton" label="Click Me!" /> </mx:Panel> </mx:Application>
Result
To view the full source, right-click the Flex application and select View Source from the context menu.
For more information
- Handling Events in the Flex 3 Getting Started Experience
- Using Events in the Adobe Flex 3 Help
About the author
Aral Balkan acts and sings, leads development teams, designs user experiences, architects rich Internet applications, and runs OSFlash.org, the London Macromedia User Group, and his company, Ariaware. He loves talking design patterns and writing for books and magazines. He also authored Arp, the open-source RIA framework for the Flash platform. Aral is generally quite opinionated, animated, and passionate. He loves to smile, and can even chew gum and walk at the same time.
