Programming Flex 3

Applying States

By default, the base state is applied to an application or component. You can define many states for each application and component, but you can apply only one state at any one time. You can apply a state using the currentState property. Example 12-1 defines a state that adds a checkbox (see Adding and Removing Components” later in this chapter for details on adding components to states). The state is applied when the user clicks the button in the base state.

Example 12-1. Applying a state

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:VBox id="vbox">
        <mx:Button label="Add Checkbox" click="currentState='newCheckbox';" />
    </mx:VBox>

    <mx:states>
        <mx:State name="newCheckbox">
            <mx:AddChild relativeTo="{vbox}">
                <mx:CheckBox id="checkbox" label="New Checkbox" />
            </mx:AddChild>
        </mx:State>
    </mx:states>

</mx:Application>

Note that the value of the currentState property is a string specifying the name of the state to apply. In the preceding example, when the user clicks the button, the value of newCheckbox is assigned to the currentState property of the application. The Flex framework then looks for a state with a name attribute of newCheckbox and applies that state. In the preceding example, the state with the name of newCheckbox uses an <mx:AddChild> tag to add a new checkbox to the VBox instance. If you want to return to the base state, you can assign a null value or an empty string to the currentState ...