Problem
You need to perform a task in response to user interaction, such as outputting a list of names to the console when the user clicks a button.
Solution
Use the click event attribute of the s:Button tag to assign a handler for the event in MXML. Alternatively, in ActionScript, use the addEventListener() method on the but- ton instance to assign a listener for the click event.
Detailed explanation
The following code shows how to listen for a button click by using MXML to assign a handler for the click event attribute of the
s:Button tag:
<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">
<fx:Script>
<![CDATA[
protected var names:Array = ['Leif','Zach','Stacey'];
protected function btn_clickHandler(event:MouseEvent):void
{
trace(names.toString());
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button id="btn" label="Show Names" click="btn_clickHandler(event)"/>
</s:Application>
The code creates an application that contains an instance of the button control btn. So that the application will output a list of names to the console when the btn instance is clicked, the click event attribute of the btn instance is wired to the method
showNames():
<s:Button id="btn" label="Show Names" click="btn_clickHandler(event)"/>
Every time a user clicks the button, the Flex Framework dispatches an event of type
MouseEvent.CLICK. The preceding line of code assigns the method
btn_clickHandler() to be invoked every time the button dispatches the click event. Within the
btn_click Handler() method, an array of names is created and output to the console. Notice that an event object of type
MouseEvent is automatically passed into the handler function. Depending on the event being dispatched, this object can be queried for detailed in- formation about the event itself. Run the application in debug mode (F11 in Eclipse), and you'll see the following output in the console
window:
Leif,Zach,Stacey
Event listeners can also be assigned using ActionScript:
<?xml version="1.0" encoding="utf-8"?>
<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"
creationComplete="app_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected var names:Array = ['Leif','Zach','Stacey','Seth','Leonard'];
protected var titles:Array = ['Evangelist','Director',
'Information Architect','Director',
'Creative Director'];
protected function app_creationCompleteHandler(event:FlexEvent):void
{
btn.addEventListener(MouseEvent.CLICK, showNames);
btn.addEventListener(MouseEvent.CLICK, showtitles);
}
protected function showNames(event:MouseEvent):void
{
trace(names.toString());
}
protected function showtitles(event:MouseEvent):void
{
trace(titles.toString());
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Button id="btn" label="Show Names and Titles"/>
</s:Application>
Note here that the handler of the application's creationComplete event is used to wire up the button's click event to two listeners,
showNames and
showTitles:
protected function app_creationCompleteHandler(event:FlexEvent):void {
btn.addEventListener(MouseEvent.CLICK, showNames);
btn.addEventListener(MouseEvent.CLICK, showtitles);
}
Running this application in debug mode generates the following output in the console window:
Leif,Zach,Stacey,Seth,Leonard Evangelist,Director,Information Architect,Director,Creative Director
The listeners are called in the same order as they are registered. Because
showNames was registered before
showTitles, the list of names is generated before the list of titles. To change the order of execution, either change the order in which the listeners are registered with the button, or set their
priority values while registering them with the button, as shown here:
protected function app_creationCompleteHandler(event:FlexEvent):void {
/* Note that the third parameter, useCapture, in the addEventListener() method is already set to false by default and is manually set to false in this example to access the fourth parameter: priority. */
btn.addEventListener(MouseEvent.CLICK, showNames, false, 0);
btn.addEventListener(MouseEvent.CLICK, showtitles, false, 1);
}
Running the application in debug mode, with the modified code, displays the following:
Evangelist,Director,Information Architect,Director,Creative Director Leif,Zach,Stacey,Seth,Leonard
Listeners registered with larger priority values will be called earlier than those with smaller priority values. If more than one listener has the same priority value, the order of execution will be based on the order of registration.
This recipe was originally contributed as part of O'Reilly's Flex 4 Cookbook
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
