Flex 3 Cookbook

Chapter 2. Menus and Controls

The Flex 3 software development kit (SDK) comes with an extensive library of prebuilt user interface (UI) controls that make application development a snap. You can easily configure the behavior of these controls through their properties by using ActionScript or MXML, as well as modify their visual appearance by using Cascading Style Sheets (CSS). Additionally, because ActionScript 3 is a full-fledged object-oriented programming (OOP) language, you can extend the default controls to provide custom functionality, through classical OOP constructs.

The controls available in the Flex 3 SDK are located in mx.controls package. At the time of this writing, the mx.controls package lists more than 50 controls that serve as building blocks for a rich user interface.

2.1. Listen to a Button Click

Problem

You need to perform a task in response to user interaction, such as output a list of names to the console when the user clicks a button.

Solution

Use the click event attribute of the <mx:Button> tag to assign a handler for the event in MXML. Alternatively, in ActionScript use the addEventListener method on the button instance to assign a listener for the click event.

Discussion

The following code shows how to listen to a button click by using MXML to assign a handler for the click event attribute of the <mx:Button> tag:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Button id="btn" label="Show Names" click="showNames(event)"/> <mx:Script> ...