Using view states with a custom item renderer

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

The base view state

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 the new state, the cell also has a border and a drop shadow

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 MX 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 a 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 -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center"/>
    </s:layout>
    
    <s:DataGroup itemRenderer="myComponents.ImageComp"
        width="300" height="400">
        <s:layout>
            <s:TileLayout columnWidth="150" rowHeight="175"
                requestedColumnCount="2" requestedRowCount="2" />
        </s:layout>
        <mx:ArrayCollection>
            <fx:Object 
                name="Nokia 3595"
                data="1"
                price="129.99"
                image="assets/Nokia_3595.gif"
                description="Kids love it."/>
            <fx:Object 
                name= "Nokia 3650"
                data="1"
                price="99.99"
                image="assets/Nokia_3650.gif"
                description="Impress your friends."/> 
            <fx:Object 
                name="Nokia 6010"
                data="1"
                price="49.99"
                image="assets/Nokia_6010.gif"
                description="Good for everyone."/> 
            <fx:Object 
                name="Nokia 6360"
                data="1"
                price="19.99"
                image="assets/Nokia_6360.gif"
                description="Great deal!"/>
        </mx:ArrayCollection>
    </s:DataGroup>
</s: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"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
    </s:states>     

    <s:Image id="img1" 
        source="{data.image}" 
        width="75" width.hovered="85"
        height="75" height.hovered="85"/>
    <s:Label text="{data.name}" 
        color="blue" 
        fontSize.hovered="16"/>
    <s:Label text.hovered="{data.price}"/>
    <s:TextArea id="t1" 
        visible="false" visible.hovered="true"
        height="30" width="125"
        text.hovered="{data.description}"/>
</s:ItemRenderer>