Programming Flex 3

Defining States Based on Existing States

By default, all states are based on the base state. For example, the new checkbox in Example 12-1 and Example 12-2 from the preceding section is added to the VBox. When the new state is applied, the VBox and nested button from the base state continue to exist. However, note that states are not applied cumulatively. For instance, Example 12-3 defines two states in addition to the base state. The base state has two buttons. Each button applies one of the states. When applying the newCheckbox state, a new checkbox is added. When applying the newTextArea state, a new text area is added, but if the checkbox had been previously added, it is removed.

Example 12-3. Defining a state that is not based on an existing 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:Button label="Add Text Area" click="currentState='newTextArea';" />
    </mx:VBox>

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

</mx:Application>

Note

When components are removed by changing states, the components are still stored in memory. Once a component has been created, moving away from ...