ADOBE® FLEX® BUILDER™ 3: USING ADOBE FLEX BUILDER 3

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

88

You can use Flex Builder to insert navigator containers in your application, and then create the layout of each of the

container’s views. If you use a ViewStack container, you can use Flex Builder to add the means for the user to select

a view.

Creating layouts in navigator containers

After you insert a navigator container in your application, you can use Flex Builder to create the layout of each of the

container’s views. The views are child containers of the navigator container.

Only the ViewStack, TabNavigator, and Accordion navigator containers have child containers that you can lay out.

The LinkBar, ButtonBar, and TabBar navigator containers don’t have child containers. Instead, they let users control

the active child container of a ViewStack container.

1 In the MXML editor’s Design mode, drag a ViewStack, TabNavigator, or Accordion container from the Compo-

nents view into the application.

2 To add or remove a child container in the navigator container expand the top of the container.

3 For the ViewStack container, select a child container by clicking the Left or Right arrows that appear at the top

of the container.

The arrows let you cycle through the child containers in the container.

You can also select views in the Outline view (Window > Outline).

4 For the TabNavigator and Accordion containers, click the child tab to select a child container.

5 To set properties of the child container in the Properties view, click its background.

6 Create your layout by inserting controls or containers into the child container.

7 If you are working with a ViewStack container, add a mechanism to let users select the child containers.

Letting users select a view in a ViewStack container

A ViewStack container consists of a collection of child containers stacked on top of each other with only one

container visible, or active, at a time. The ViewStack container does not have a built-in mechanism for letting users

select a child container. You must add a LinkBar, ButtonBar, or TabBar navigator container, or build the logic yourself

in ActionScript. The following example shows an example of a ViewStack container with a LinkBar container:

ADOBE FLEX BUILDER 3

Using Adobe Flex Builder 3

89

You use Flex Builder to add a LinkBar, ButtonBar, or TabBar to a ViewStack container so that users can select the

child containers in the ViewStack container. A LinkBar defines a horizontal row of Link controls that designate a

series of link destinations, as the following example shows:

A ButtonBar defines a horizontal row of buttons. A TabBar defines a horizontal row of tabs, as the following example

shows:

1 Ensure that you set the label property for each child in the ViewStack container.

The label property of the ViewStack children determines the text of the labels that appear on the TabBar or

LinkBar. The following example shows children of a ViewStack container:

<mx:ViewStack id="myViewStack" borderStyle="solid" width="100%">

<mx:Canvas id="search" label="Search">

<mx:Label text="Enter search terms"/>

...

</mx:Canvas>

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

<mx:Label text="Please enter your customer information"/>

...

</mx:Canvas>

<mx:Canvas id="accountInfo" label="Account Info">

<mx:Label text="Please enter your account information"/>

...

</mx:Canvas>

</mx:ViewStack>

2 Drag a LinkBar, ButtonBar, or TabBar container from the Components view into your layout, above the

ViewStack container.

The LinkBar, ButtonBar, and TabBar containers are listed in the Navigator category of the Components view.

3 Set the dataProvider property of the LinkBar, ButtonBar, or TabBar container to the ID of the target ViewStack

container.

To set the dataProvider property, you can select the LinkBar, ButtonBar, or TabBar and set the property in the

Flex Properties view. Alternatively, you can click the navigator’s Plus (+) button and then select the ViewStack

ID in the dialog box that appears.

Setting the

dataProvider property to the ViewStack ID specifies the name of the ViewStack container

associated with it. The text of the labels on the LinkBar, ButtonBar, or TabBar correspond to the values of the

label property of each child of the ViewStack container.

Once the association is made between a ViewStack and a navigator, clicking the buttons or tabs of the navigator

in Design mode will select the corresponding view in the ViewStack.