Position The Catalog Component - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

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
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.
In Code view (View > Code), place the insertion point at the lower edge of the VBox container
1.
by clicking immediately before the closing
In the Containers category of the Insert bar, click the HBox button.
2.
Flex Builder inserts an HBox container in the file.
Click anywhere in the
3.
the following properties in the panel:
Styles > horizontalGap:
Size > height:
Size > width:
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.
Switch to Design view (View > Design), click anywhere in the HBox container, and click the
4.
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.
Specify the panel's title by double-clicking the Panel container to open the Quick Tag Editor,
5.
and then entering the property
With the Quick Tag Editor still open, enter the following properties and then Press Enter:
6.
id="main" height="400" width="478"
Tip: Use code hints to work more rapidly.
Insert a ViewStack container inside the Panel container by clicking anywhere inside the Panel
7.
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.
"Review the approved user interface mock-ups" on page
tag, click the Refresh button on the Attributes panel, and set
<mx:HBox>
4
548
860
title="Product Catalog"
tag.
</mx:VBox>
as follows.
Tutorial: Creating a layout with Flex Builder
27). To meet
31