User Guide

Tutorial: Binding components to data with Flex Builder 65
Bind the ThumbnailView component to the data
After binding the GridView component to the data, you bind the ThumbnailView component.
1.
Open the ThumbnailView.mxml file located in the fbBindings folder.
2.
In Code view, enter the following script block after the opening <mx:VBox> tag to declare a
variable called dataObject:
<mx:Script>
var dataObject;
</mx:Script>
By creating a variable called dataObject, you create a property for the component. You can use
this new property in the ThumbnailView tag to pass data to the ThumbnailView component.
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 66
“Detect the product in the ThumbnailView component” on page 66