One of the most common uses of states is adding and removing
components. You can use the <mx:AddChild> tag to add a component or
components. Example 12-4
defines a state named newTextInput
that adds a text input component instance.
Example 12-4. Basic addition of a component using a state
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Button id="button" label="Add Text Input"
click="currentState='newTextInput';" />
<mx:states>
<mx:State name="newTextInput">
<mx:AddChild>
<mx:TextInput id="textinput" />
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Application>The default behavior of the <mx:AddChild> tag is to add the component
or components to the application container or component for which the
state is defined. However, if you want to define an explicit target to the
component (or components) you added, use the relativeTo attribute. Example 12-5
adds the new text input as a child of the VBox instance with an id of vbox.
Example 12-5. Adding one component relative to another
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox id="vbox">
<mx:CheckBox id="checkbox1" label="One" />
<mx:CheckBox id="checkbox2" label="Two" />
<mx:Button id="button" label="Add Text Input"
click="currentState='newTextInput';" />
</mx:VBox>
<mx:states>
<mx:State name="newTextInput">
<mx:AddChild relativeTo="{vbox}">
<mx:TextInput id="textinput" />
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Application>When adding child components, the new instance is added as the last
child of the target by default. For instance, in the preceding example,
the new text input is added below the two checkboxes and button in the
base state, as you can see in Figure 12-6. However, you can
control where the new instances are added using the position attribute. The default value is lastChild, but you can optionally specify
firstChild to add the new instance(s)
to the beginning of the target container.
When you use lastChild or
firstChild as the position value, the
target value is interpreted as the container to which you want to add the
child component(s). When you use a value of before or after for the position attribute, the target is interpreted as
a sibling of the component(s) you are adding. If you want to add the child
component(s) immediately before or after an existing component, you can
specify the sibling component as the target and then use the value of
before or after for the position attribute. Example 12-6 adds the new text
input immediately after the first checkbox in the base state.
Example 12-6. Adding a component using the position property
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox id="vbox">
<mx:CheckBox id="checkbox1" label="One" />
<mx:CheckBox id="checkbox2" label="Two" />
<mx:Button id="button" label="Add Text Input"
click="currentState='newTextInput';" />
</mx:VBox>
<mx:states>
<mx:State name="newTextInput">
<mx:AddChild relativeTo="{checkbox1}" position="after">
<mx:TextInput id="textinput" />
</mx:AddChild>
</mx:State>
</mx:states>
</mx:Application>As you can see in Figure 12-7, the text input is now between the two checkboxes.
You remove components with the <mx:RemoveChild> tag, and the process generally is simpler than adding components.
The <mx:RemoveChild> tag requires
just one attribute, called target. The
target attribute allows you to specify
a reference to a component you want to remove. Example 12-7 has two checkboxes in the base state.
The noCheckboxes state uses the <mx:RemoveChild> tag to remove both
checkboxes.
Example 12-7. Removing a component
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:VBox id="vbox">
<mx:CheckBox id="checkbox1" label="One" />
<mx:CheckBox id="checkbox2" label="Two" />
<mx:Button id="button" label="Remove Checkboxes"
click="currentState='noCheckboxes';" />
</mx:VBox>
<mx:states>
<mx:State name="noCheckboxes">
<mx:RemoveChild target="{checkbox1}" />
<mx:RemoveChild target="{checkbox2}" />
</mx:State>
</mx:states>
</mx:Application>