Macromedia flex builder-using flex builder User Manual
Tutorial: Building custom components with Flex Builder
47
Build the shopping cart component
According to the component’s functional specification, the shopping cart component should
display the products that the user wants to bring to the checkout area for purchase. The user can
delete items from the cart by selecting an item and clicking the Delete button. The user can also
proceed to the checkout area by clicking the Checkout button.
display the products that the user wants to bring to the checkout area for purchase. The user can
delete items from the cart by selecting an item and clicking the Delete button. The user can also
proceed to the checkout area by clicking the Checkout button.
The following is a mock-up of the component:
The shopping cart component does not contain any data in this tutorial. Another tutorial
describes how to add data (see
describes how to add data (see
).
The Checkout button is disabled in these tutorials.
In this part of the tutorial, you complete the following tasks:
•
•
•
Lay out the shopping cart component
After studying the component mock-up, you decide to use the following Flex containers to lay
out the component:
out the component:
•
A Panel container to create the header and position the component’s child containers vertically
•
A ControlBar container to create the footer
You start by creating a component file based on a Panel container.
1.
In Flex Builder, press Control+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.
right pane.
The dialog box closes and a component file with a Panel container appears.
3.
Double-click the Panel container and enter the following property value (shown in bold type)
in the Quick Tag Editor:
in the Quick Tag Editor:
<mx:Panel... title="Shopping Cart" />