User Guide

46 Flex Builder Tutorials
3. Select and delete all the <mx:Image> tags in the Tile container.
These placeholder images are no longer required.
4. With the insertion point still between the opening and closing <mx:Tile> tags, enter the
following script block:
<mx:Repeater id="list" dataProvider="{dataObject}">
<ProductThumbnail id="product" xmlns="*" dataObject="{list.currentItem}"
/>
</mx:Repeater>
The product data passed by the flexstore.mxml file is stored in the dataObject variable. You use
the custom component called ProductThumbnail to display the product’s thumbnail image,
name, and price. The custom component file, ProductThumbnail.mxml, is supplied with this
tutorial.
5. Save the ThumbnailView.mxml file.
6. Switch to the flexstore.mxml file.
7. In Code view, locate the <local:ThumbnailView> tag, and add the following property (shown
in bold type):
<local:ThumbnailView xmlns:local="*" id="thumbView" dataObject="{catalog}" /
>
8. Save the flexstore.mxml file.
9. Press F12 to test the file in a browser.
If necessary, click the thumbnail view button at the lower edge of the product catalog to switch
views.
Bind the product detail component
When a user clicks a product in the catalog in the grid view or the thumbnail view, the
application should display details about the product in the ProductDetail component on
the right.
In this part of the tutorial, you complete the following tasks:
• “Detect the product in the GridView component” on page 47
• “Detect the product in the ThumbnailView component” on page 47
• “Retrieve the product selection” on page 48
• “Display the product detail” on page 49