MACROMEDIA FLEX-FLEX BUILDER, Tutorial, Page: 22 / 56

22 Flex Builder Tutorials
The product detail component will not contain any data in this tutorial. Another tutorial
describes how to add data (see
“Tutorial: Binding components to data with Flex Builder”
on page 39 ).
In this part of the tutorial, you complete the following tasks:
•
“Lay out the product detail component” on page 22
•
“Add the product details” on page 24
•
“Finish the footer of the product detail component” on page 26
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.
1.
In Flex Builder, press N.
The New Document dialog box appears.
2.
Select Flex Development in the left pane and double-click MXML Component:Panel in the
right pane.
The dialog box closes and a component file with a Panel container appears.
3.
With the insertion point still blinking in the Panel container, specify the values for the following
properties in the Attributes panel:
■
Common > title
: Product Details
■
Styles > marginBottom
: 8
■
Styles > marginLeft
: 8
■
Styles > marginRight
: 8
■
Styles > marginTop
: 8
4.
Insert an HBox container inside the Panel container by clicking anywhere inside the Panel
container and clicking the HBox button in the Containers category of the Insert bar.
Flex Builder inserts an empty HBox container in the component.
5.
With the insertion point still blinking in the HBox container, specify the value for the following
property in the Attributes panel:
■
Styles > verticalAlign
: middle