A shopping application that displays multiple items on a page might have a custom thumbnail item renderer with two view states. In the base view state, the item cell might look the following image:

When the user rolls the mouse over the item, the view state changes: the thumbnail no longer has the availability and rating information, but now has buttons that let the user get more information or add the item to the wish list or cart. In the new state, the cell also has a border and a drop shadow, as the following image shows:

In this example, the application item renderer's two view states have different child components and have different component styles. The summary state, for example, includes an availability label and a star rating image, and has no border. The rolled-over state replaces the label and rating components with three buttons, and has an outset border.

For information on item renderers, see Using Item Renderers and Item Editors.

Example: Using view states with a custom item renderer

The following code shows an application that uses a custom item renderer to display catalog items. When the user moves the mouse over an item, the item renderer changes to a state where the picture is slightly enlarged, the price appears in the cell, and the application's text box shows a message about the item. All changes are made by the item renderer's state, including the change in the parent application.

<?xml version="1.0"?>
<!-- states\StatesRendererMain.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="450" height="500">
    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.*;
            import mx.controls.Image;
            import mx.collections.ArrayCollection;

            //The data to display in the TileList control.
            [Bindable]
            public var catArray:ArrayCollection = new ArrayCollection([
                { name: "Nokia 3595",
                  data: "1",
                  price: "129.99",
                  image: "../assets/Nokia_3595.gif",
                  description: "Kids love it." },
                { name: "Nokia 3650",
                  data: "1",
                  price: "99.99",
                  image: "../assets/Nokia_3650.gif",
                  description: "Impress your friends." },
                { name: "Nokia 6010",
                  data: "1",
                  price: "49.99",
                  image: "../assets/Nokia_6010.gif",
                  description: "Good for everyone." },
                { name: "Nokia 6360",
                  data: "1",
                  price: "19.99",
                  image: "../assets/Nokia_6360.gif",
                  description: "Great deal!"}, 
            ]);
        ]]>
    </mx:Script>

    <mx:TileList id="myList" 
        dataProvider="{catArray}" 
        columnWidth="150" 
        rowHeight="150" 
        width="310" 
        height="310"
        itemRenderer="myComponents.ImageComp"/>

    <!-- The item renderer fills in the TextArea control. -->
    <mx:HBox>
        <mx:Label text="Description"/>
        <mx:TextArea id="t1" width="200" height="30" wordWrap="true"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

The following code defines the item renderer, in the file ImageComp.mxml:

<?xml version="1.0" encoding="utf-8"?>
<!-- states\myComponents\ImageComp.mxml
    When the mouse pointer goes over a cell, 
        this component changes its state to showdesc.
    When the mouse pointer goes out of the cell, 
        the component returns to the base state. -->

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" 
    horizontalAlign="center"
    verticalAlign="top" 
    mouseOver="currentState='showdesc'" 
    mouseOut="currentState=''">

    <!-- In the base state, display the image and the label. -->
    <mx:Image id="img1" 
        source="{data.image}" 
        width="75" 
        height="75"/>
    <mx:Label text="{data.name}"/>

    <mx:states>
        <mx:State name="showdesc">
          <!-- In the showdesc state, add the price, make the image bigger, 
             and put the description in the parent application's TextArea.-->
            <mx:AddChild>
                <mx:Text text="{data.price}"/>
            </mx:AddChild>
            <mx:SetProperty target="{img1}" name="width" value="85"/>
            <mx:SetProperty target="{img1}" name="height" value="85"/>
            <mx:SetProperty target="{parentApplication.t1}" name="text"
                value="{data.description}"/>
        </mx:State>
    </mx:states>
</mx:VBox>