Flex 2 Developer's Guide > Building User Interfaces for Flex Applications > Using Navigator Containers > ViewStack navigator container > Creating a ViewStack container

Creating a ViewStack container

You use the < mx:ViewStack> tag to define a ViewStack container, and you define the child containers in the tag body. You use the following properties of the ViewStack container to control the active child container:

• selectedIndex The index of the currently active container if one or more child containers are defined. The value of this property is -1 if no child containers are defined. The index is numbered from 0 to numChildren - 1, where numChildren is the number of child containers in the ViewStack container. Set this property to the index of the container that you want active.

  You can use the selectedIndex property of the <mx:ViewStack> tag to set the default active container when your application starts. The following example sets the index of the default active container to 1:

  <mx:ViewStack id="myViewStack" selectedIndex="1">
  

  The following example uses ActionScript to set the selectedIndex property so that the active child container is the second container in the stack:

  myViewStack.selectedIndex=1;
  

• selectedChild The currently active container if one or more child containers are defined. The value of this property is null if no child containers are defined. Set this property in ActionScript to the identifier of the container that you want active.

  You can set this property only in an ActionScript statement, not in MXML.

  The following example uses ActionScript to set the selectedChild property so that the active child container is the child container with an identifier of search:

  myViewStack.selectedChild=search;
  

• numChildren Contains the number of child containers in the ViewStack container.

  The following example uses the numChildren property in an ActionScript statement to set the active child container to the last container in the stack:

  myViewStack.selectedIndex=myViewStack.numChildren-1;
  

The following example creates a ViewStack container with three child containers. The example also defines three Button controls that when clicked, select the active child container:

<?xml version="1.0"?>
<!-- containers\navigators\VSSimple.mxml  -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Create a VBox container so the container for 
        the buttons appears above the ViewStack container. -->
    <mx:VBox>
        <!-- Create an HBox container to hold the three buttons. -->
        <mx:HBox borderStyle="solid">

            <!-- Define the three buttons. 
                Each uses the child container identifier 
                to set the active child container. -->
            <mx:Button id="searchButton" 
                label="Search Screen" 
                click="myViewStack.selectedChild=search;"/>

            <mx:Button id="cInfoButton" 
                label="Customer Info Screen" 
                click="myViewStack.selectedChild=custInfo;"/>

            <mx:Button id="aInfoButton" 
                label="Account Info Screen"
                click="myViewStack.selectedChild=accountInfo;"/>
        </mx:HBox>

        <!-- Define the ViewStack and the three child containers and have it
            resize up to the size of the container for the buttons. -->
        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" width="100%">

            <mx:Canvas id="search" label="Search">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" label="Customer Info">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" label="Account Info">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>

When this example loads, the three Button controls appear, and the first child container defined in the ViewStack container is active. Select a Button control to change the active container.

You can also use a LinkBar, TabBar, ButtonBar, or ToggleButtonBar control to set the active child of a ViewStack container. These classes are subclasses of the NavBar class, so they are collectively called navigator bar controls. Navigator bar controls can determine the number of child containers in a ViewStack container, and then create a horizontal or vertical set of links, tabs, or buttons that let the user select the active child, as the following image shows:

The items in the LinkBar control correspond to the values of the label property of each child of the ViewStack container, as the following example shows:

<?xml version="1.0"?>
<!-- containers\navigators\VSLinkBar.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <!-- Create a LinkBar control to navigate 
            the ViewStack container. -->
        <mx:LinkBar dataProvider="{myViewStack}" borderStyle="solid"/>

        <!-- Define the ViewStack and the three child containers. -->
        <mx:ViewStack id="myViewStack" 
            borderStyle="solid" 
            width="100%">
            
            <mx:Canvas id="search" label="Search">
                <mx:Label text="Search Screen"/>
            </mx:Canvas>

            <mx:Canvas id="custInfo" label="Customer Info">
                <mx:Label text="Customer Info"/>
            </mx:Canvas>

            <mx:Canvas id="accountInfo" label="Account Info">
                <mx:Label text="Account Info"/>
            </mx:Canvas>
        </mx:ViewStack>
    </mx:VBox>
</mx:Application>

You provide only a single property to the navigator bar control, dataProvider, to specify the name of the ViewStack container associated with it. For more information on the LinkBar control, see LinkBar control. For more information on the TabBar control, see TabBar control. For more information on the ButtonBar and ToggleButtonBar controls, see ButtonBar and ToggleButtonBar controls.

Flex 2.01