MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 41

The following is a mock-up of the component:
The product detail component will not contain any data in this tutorial. Another tutorial
describes how to add data (see
on page 58).
In this part of the tutorial, you complete the following tasks:
•
"Lay out the product detail component" on page 41
•
"Add the product details" on page 43
•
"Finish the footer of the product detail component" on page 45
Lay out the product detail component
After studying the component mock-up, you decide to use the following Flex containers to lay
out the component:
•
A Panel container to create the header and position the component's child containers vertically
•
An HBox container within the Panel container to position the product thumbnail and the
product information side by side
•
A VBox container within the HBox to position the product name on top of the price
•
A ControlBar container to create the footer
You start by creating a new component file based on a Panel container.
In Flex Builder, press Control+N.
1.
The New Document dialog box appears.
Select Flex Development in the left pane and double-click MXML Component:Panel in the
2.
right pane.
The dialog box closes and a component file with a Panel container appears.
"Tutorial: Binding components to data with Flex Builder"
Tutorial: Building custom components with Flex Builder 41