MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Use Manual page 53

Insert the detail and cart components in the layout
Two Canvas containers were inserted in the Flex Store layout to position the product detail and
shopping cart components. In this part of the tutorial, you insert the two components that you
created, ProductDetail.mxml and CartView.mxml, into the Canvas containers.
Make sure the flexstore.mxml file is open in Flex Builder.
1.
The file is located in the fbComponents folder.
In Design view, insert the product detail component by clicking in the first Canvas container
2.
(ID is topCanvas) on the right side of the layout, and selecting Insert > Local Component.
The Insert Local Component dialog box appears.
Click the Browse button in the dialog box that appears, and select the ProductDetail
3.
component, ProductDetail.mxml.
Click Open, and then click OK to close the dialog boxes.
4.
Flex Builder inserts the custom component in the Canvas.
Click the
5.
<mx:Canvas>
select the container, and then clear the
These values were for prototyping purposes only.
Insert the CartView component by clicking in the second Canvas container (ID is
6.
bottomCanvas) and inserting CartView.mxml using the technique described in steps 2
through 4.
Select the second Canvas container and clear the
7.
inspector.
Switch to Code view (View > Code), locate the
8.
following properties (shown in bold type):
<local:ProductDetail xmlns:local="*" id="productDetail" height="330"
width="370" vScrollPolicy="off" />
Locate the
9.
<local:CartView>
<local:CartView xmlns:local="*" id="cartView" height="212" width="370" />
Save your work.
10.
tag on the tag selector on the lower edge of the Document window to
width
tag, and add the following properties (shown in bold type):
Tutorial: Building custom components with Flex Builder
and properties in the Tag inspector.
height
and
width height
<local:ProductDetail>
properties in the Tag
tag, and add the
53