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

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