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

Tutorial: Building custom components with Flex Builder 33
1.
Open the fbComponents/flexstore.mxml file in Flex Builder.
Make sure you open the file located in the fbComponents folder.
2.
In Design view, click anywhere inside the ViewStack container in the Product Catalog panel,
and select Insert > Local Component.
The Insert Local Component dialog box appears:
3.
Click the Browse button and select the ThumbnailView component, ThumbnailView.mxml,
in the Open dialog box that appears.
After you click Open and then OK to close the dialog boxes, Flex Builder inserts the custom
component in the ViewStack container.
4.
Insert the GridView component by switching to Code view, clicking immediately after the
<local:ThumbnailView>
tag, selecting Insert > Local Component from the menu, and
selecting your GridView component.
You insert the GridView component in the same ViewStack container as the ThumbnailView
component.
5.
Click anywhere in the opening
<mx:Panel>
tag, click the Refresh button on the Attributes
panel to display the tag’s properties, and modify the following values:
■
Size > height
: Clear the value.
■
Size > width
: 484
6.
Locate the
<local:ThumbnailView>
tag, and add the following property (shown in bold type):
<local:ThumbnailView xmlns:local="*" id="thumbView" />
7.
Locate the
<local:GridView>
tag, and add the following property (shown in bold type):
<local:CartView xmlns:local="*" id="gridView" />
8.
In Design view, you can switch between the two catalog views by selecting the ViewStack
container and then clicking the left or right arrows at the top of the container.
9.
Save your work.