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 property. Example 12-2 demonstrates how this works by
adding a second button that returns the application to the base
state.
Example 12-2. Returning to the base 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="Return to Base State" click="currentState='';" />
<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>Figure 12-1 and Figure 12-2 show the two states created from Example 12-2.
The currentState property is a
property inherited from the UIComponent
class. That means each application and each component has its own
currentState property, and you can set
the states of each independently. Another way to say this is that setting
the currentState property for component
A changes the state for component A only, and setting the currentState property for component B changes
the state for component B only.