User Guide

12 Flex Builder Tutorials
Position the product detail and shopping cart components
In this part of the tutorial, you position the product detail and shopping cart components on the
right side of the user interface as shown in the mock-ups (see “Review the approved user interface
mock-ups” on page 7). You decide to use the existing HBox container to meet this layout
requirement.
The mock-up also shows the product detail and shopping cart components stacked on top of each
other. To meet this layout requirement, you decide to use a VBox container.
1. In Design view, click inside the HBox container to the right of the Panel container.
Be careful not to click inside the Panel container; the vertical insertion bar should appear
beside the Panel container.
2. In the Containers category of the Insert bar, click the VBox button.
Flex Builder inserts a VBox container in the file. You want to use the VBox container to stack
the product detail and shopping cart components on top of each other.
3. With the insertion point still blinking in the VBox container, set the following property in the
Attributes panel:
■ Size > widthFlex: 1
You want the VBox container to scale based on its content.
4. Click anywhere in the new VBox container, click the Canvas button in the Containers category
of the Insert bar, and accept the default width and height values in the dialog box that appears.
Flex Builder inserts a Canvas container in the VBox. You want to insert the product detail
component in this container.
5. With the Canvas container still selected, set the following properties in the Attributes panel:
■ Common > id: topCanvas
■ Size > height: 326
■ Size > width: 364
■ Size > widthFlex: 1
■ Other > vScrollPolicy: off
Tip: If you prefer, you can list all the properties alphabetically by clicking the Show List View button
on the Attributes panel.
6. Insert another Canvas container by switching to Code view, clicking immediately after the
closing
</mx:Canvas> tag, and clicking the Canvas button on the Insert bar.
After you accept the default width and height values in the dialog box that appears, Flex
Builder inserts another Canvas container in the VBox. You want to insert the shopping cart
component in this container.