Exercise 2.1: Handling a user event
Modified
2 May 2011
Requirements
Prerequisite knowledge
- Exercise 1.1: Setting up Flash Builder and your project files
User level
Beginning
Required products
- Flash Builder 4.5 Premium (Download trial)
Sample files
In this exercise you will use inline ActionScript to display the date selected from a DateChooser control. You will then use a function to achieve the same result as the inline ActionScript (see Figure 1).
In this exercise you will learn how to:
Add a Label and Button to the application
In this section you will use inline ActionScript to handle a change in the application.
- Download the ex2_01_starter.zip file if you haven't already and extract the file ex2_01_starter.fxp to your computer.
- Open Flash Builder.
- Import the ex2_01_starter.fxp file.
- Open the ex2_01_starter.mxml file.
- In Design mode, select the DateChooser control for the Pickup Date.
- In the Properties view, assign the DateChooser control's
idproperty a value of pickupDate (see Figure 2).
- Switch to Source mode.
- Below the Script comment, create a
Scriptblock. - Within the
Scriptblock, import the Alert class:
import mx.controls.Alert;
- Locate the
pickupDateDateChooser control. - To the control, add the
changeproperty assigned to run theshow()method of the Alert package:
<mx:DateChooser id="pickupDate"
change="Alert.show()"
... />
- Use the
Alert.show()function to display the text You have selected, followed by the date selected from thepickupDateDateChooser control, using thetoDateString()function; this displays the date as a string.Note: Use single quotes inside of the
Alert.show()method, because the change event already uses double quotes.
<mx:DateChooser id="pickupDate"
change="Alert.show('You have selected ' +
pickupDate.selectedDate.toDateString())"
.../>
- Save the file.
- Run the application.
- From the
pickupDateDateChooser control, click a date.You should see the Alert window with the date you selected (see Figure 3).
- Return to Flash Builder.
- To the DateChooser control for the Return Date, add the
idproperty with a value ofreturnDate:
<mx:DateChooser id="returnDate"
... />
- Copy the
changeproperty and its value from thepickupDateDateChooser control and paste it within the opening tags for thereturnDateDateChooser control.
<mx:DateChooser id="returnDate"
change="Alert.show('You have selected ' +
pickupDate.selectedDate.toDateString())"
... />
- Change the instance name reference within the
Alert.show()method toreturnDate.
<mx:DateChooser id="returnDate"
change="Alert.show('You have selected ' + returnDate.selectedDate.toDateString())"
... />
- Save the file and run the application.
You should see that the date selected is displayed using the Alert window for both DateChooser controls.
Generate an event handler function
In this section, you will create a function to handle the change event for a DateChooser control.
- Return to Flash Builder.
- Locate the
Scriptblock. - Below the
importstatement, create aprivate functionnameddateChangeHandler()that takes no parameters and returns avoiddata type.
private function dateChangeHandler():void
{
}
- Locate the
pickupDateDateChooser control and cut theAlert.show()method from thechangeevent. - Replace it with a call to the
dateChangeHandler()function:
<mx:DateChooser id="pickupDate"
change="dateChangeHandler()"
... />
- In the Script block and within the
dateChangeHandler()function, paste theAlert.show()method that you cut from thechangeevent. Remember to append a semicolon.
private function
dateChangeHandler():void
{
Alert.show('You have selected ' + pickupDate.selectedDate.toDateString());
}
- Save the file.
- Run the application.
- Click a date within the
pickupDateDateChooser control.The Alert message displays the date you selected (see Figure 4).
- Return to Flash Builder.
- Locate the
returnDateDateChooser control. - For the
changeproperty, replace the value with a call to thedateChangeHandler()function:
<mx:DateChooser id="returnDate"
change="dateChangeHandler()" />
- Save the file and run the application.
- Without selecting a pickup date, select a return date.
You should see the error display shown in Figure 5.
You will fix this error in the next exercise.
+
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.
More Like This
- Exercise 5.9: Skinning the SkinnableDataContainer container
- Exercise 5.10: Creating a production build
- Exercise 5.7: Creating a vertical title bar on a Panel container
- Exercise 1.1: Setting up your project files
- Exercise 1.6: Creating MXML custom components with ActionScript properties
- Exercise 2.2: Using the event object
- Exercise 2.3: Using the addEventListener() method
- Exercise 2.4: Populating an ArrayCollection with retrieved data using the result event
- Exercise 4.5: Creating and using item renderers and item editors
- Exercise 4.6: Navigating using navigator containers
