MACROMEDIA FLEX BUILDER-USING FLEX BUILDER, Use Manual

Page: 31 / 158

Tutorial: Creating a layout with Flex Builder 31
Position the catalog component
In this part of the tutorial, you position the product catalog on the left side of the user interface as
shown in the mock-ups (see
“Review the approved user interface mock-ups” on page 27 ). To meet
this design requirement, you decide to use an HBox (for horizontal box) container to position the
two halves of your user interface side by side.
1.
In Code view (View > Code), place the insertion point at the lower edge of the VBox container
by clicking immediately before the closing
</mx:VBox>
tag.
2.
In the Containers category of the Insert bar, click the HBox button.
Flex Builder inserts an HBox container in the file.
3.
Click anywhere in the
<mx:HBox>
tag, click the Refresh button on the Attributes panel, and set
the following properties in the panel:
■
Styles > horizontalGap:
4
■
Size > height:
548
■
Size > width:
860
Note: When you set the first size property, a message box appears warning you that the container
clips any content that extends beyond the specified size. Select the Don’t Show Me This Message
Again option, and click OK.
4.
Switch to Design view (View > Design), click anywhere in the HBox container, and click the
Panel button in the Containers category of the Insert bar.
Flex Builder inserts a Panel container in the file. You want to use a Panel container for the
product catalog.
5.
Specify the panel’s title by double-clicking the Panel container to open the Quick Tag Editor,
and then entering the property
title="Product Catalog"
as follows.
6.
With the Quick Tag Editor still open, enter the following properties and then Press Enter:
id="main" height="400" width="478"
Tip: Use code hints to work more rapidly.
7.
Insert a ViewStack container inside the Panel container by clicking anywhere inside the Panel
container, clicking the ViewStack button on the Insert bar, and entering
bodyStack in the ID
text box in the dialog box that appears.
After you click OK, Flex Builder inserts a ViewStack container in the Panel container. You
want to use this container to place two views of the product catalog—a grid view and a
thumbnail view—in the same space.