Add View Buttons To The Product Catalog - MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual

Insert another Canvas container by switching to Code view, clicking immediately after the
6.
closing
</mx:Canvas>
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.
Click anywhere in the new
7.
and set the following properties in the Attributes tab:
Common > id
Size > height
Size > width
Other > vScrollPolicy
Switch back to Design view to inspect your layout.
8.
Tip: Press F4 to hide the workspace and maximize the Document window. Press F4 again to
restore the workspace.
Save your work.
9.

Add view buttons to the product catalog

The product catalog area of the layout gives the user two views of the products—a grid view and a
thumbnail view. According to the user interface mock-ups, the user should be able to switch views
by clicking view buttons at the lower edge of the catalog. For information about the user interface
mock-ups, see "Review the approved user interface mock-ups" on page
After studying the mock-up, you decide to use the following containers to lay out the buttons:
•
A ControlBar container in the left Panel container to create a footer
•
An HBox container in the ControlBar container to position the buttons horizontally
You use the following steps to lay out and insert the buttons with Flex Builder.
Make sure the flexstore.mxml file is open in Flex Builder.
1.
Insert a ControlBar container by clicking inside the lower edge of the Panel container (without
2.
clicking inside the ViewStack container), and then clicking the ControlBar button in the
Containers category of the Insert bar.
Flex Builder inserts an empty ControlBar container and automatically positions it at the lower
edge of the Panel container.
With the insertion point still blinking in the ControlBar container, specify the values for the
3.
following properties in the Attributes panel:
Size > height
Styles > horizontalAlign
Insert an HBox container by clicking anywhere inside the ControlBar container, and clicking
4.
the HBox button on the Insert bar.
tag, and clicking the Canvas button on the Insert bar.
<mx:Canvas>
: bottomCanvas
: 208
: 100%
: off
: 45
: right
tag, click the Refresh button on the Attributes tab,
Tutorial: Creating a layout with Flex Builder
27.
33