Creating an application with the CheckBox component

The following procedure explains how to add a CheckBox component to an application while authoring. The following example is a form for an online dating application. The form is a query that searches for possible dating matches for the customer. The query form must have a check box labeled Restrict Age that permits customers to restrict their search to a specified age group. When the Restrict Age check box is selected, the customer can then enter the minimum and maximum ages into two text fields. (These text fields are enabled only when the check box is selected.)

To create an application with the CheckBox component:

Select File > New and choose Flash File (ActionScript 2.0).
Drag two TextInput components from the Components panel to the Stage.
In the Property inspector, enter the instance names minimumAge and maximumAge.
Drag a CheckBox component from the Components panel to the Stage.
In the Property inspector, do the following:
- Enter restrictAge for the instance name.
- Enter Restrict Age for the label parameter.
Select Frame 1 in the Timeline, open the Actions panel, and enter the following code:
```
var restrictAgeListener:Object = new Object();
restrictAgeListener.click = function (evt:Object) {
    minimumAge.enabled = evt.target.selected;
    maximumAge.enabled = evt.target.selected;
};
restrictAge.addEventListener("click", restrictAgeListener);
```
This code creates a click event handler that enables and disables the minimumAge and maximumAge text field components, which have already been placed on Stage. For more information, see CheckBox.click and TextInput component.

To create a check box using ActionScript:

Select File > New and choose Flash File (ActionScript 2.0).
Drag the CheckBox component from the Components panel to the current document's library.
This adds the component to the library, but doesn't make it visible in the application.
Drag the TextInput component from the Components panel to the current document's library.

In the first frame of the main Timeline, add the following ActionScript to the Actions panel to create and position component instances:

this.createClassObject(mx.controls.CheckBox, "testAge_ch", 1, {label:'Age Range', selected:true});
this.createClassObject(mx.controls.TextInput, "minimumAge_ti", 2, {restrict:[0-9], text:18, maxChars:2});
minimumAge_ti.move(20, 30);
this.createClassObject(mx.controls.TextInput, "maximumAge_ti", 3, {restrict:[0-9], text:55, maxChars:2});
maximumAge_ti.move(20, 60);

This script uses the method UIObject.createClassObject() to create the CheckBox instance named restrictAge, and specifies a label property. Then, the code uses the method UIObject.move() to position the button.

Now, add the following ActionScript to create an event listener and an event handler function:
```
// Create handler for checkBox event.
function checkboxHandler(evt_obj:Object) {
 minimumAge_ti.enabled = evt_obj.target.selected;
 maximumAge_ti.enabled = evt_obj.target.selected;
}
// Add Listener.
testAge_ch.addEventListener("click", checkboxHandler);
```
This code creates a click event handler that enables and disables the minimumAge and maximumAge text field components. For more information, see CheckBox.click, EventDispatcher.addEventListener() and TextInput component.