User Guide

Architecting an application 77
...
<mx:TileList id="myTile" dataProvider="{dataObject}"
cellRenderer="ProductThumbnail"
width="100%" height="100%"
itemWidth="120" itemHeight="116"
borderStyle="none"
dragEnabled="true"
change="selectedItem=dataObject[myTile.selectedIndex];
dispatchEvent({type:'change'})
"/>
The component is declared in the ThumbnailView.mxml file using a <ProductThumbnail> tag.
ThumbnailView
The ThumbnailView object is defined in an MXML component because it is a visual object that
you can create using MXML tags and a small amount of ActionScript code. The top-level tag of
the ThumbnailView component is a VBox container.
The component is declared in the FlexStore.mxml file using a
<ThumbnailView> tag.
The component contains the following properties defined in an
<mx:Script> tag:
var selectedItem
var dataObject
var min
var max
The dataObject property stores catalog data.
The component contains the following methods defined in an
<mx:Script> tag:
filter()
sort()
unselect()
The component contains an <mx:TileList> tag for displaying a set of ProductThumbnail
components in a grid format.
The following example from the FlexStore.mxml file shows how the
dataObject property is set
to the
catalog.product property. Notice that you reference the custom ThumbNailView object
using the default namespace.
<ThumbnailView id="thumbView"
label="Product Catalog"
dataObject="{catalog}"
change="selectedItem=event.target.selectedItem"
/>
ProductDetail
The ProductDetail object is defined in an MXML component because it is a visual object that
you can create using MXML tags and a small amount of ActionScript code. The top-level tag of
the ProductDetail component is a VBox container.