<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600">

<s:Panel title="View State with a custom item renderer"

chromeColor="#333333"

color="#CCCCCC" width="348" height="438">

<s:DataGroup itemRenderer="mycomponent.viewstateitemrenderer"

width="300" height="376" x="18" y="19">

<s:layout>

<s:TileLayout columnWidth="150" rowHeight="175"

requestedColumnCount="2" requestedRowCount="2" />

</s:layout>

<mx:ArrayCollection>

<fx:Object

name="Iphone"

data="1"

price="129.99$"

image="@Embed('C:/work/bikrant/image/iphone.png')"

description="More flexible"/>

<fx:Object

name= "Mobile"

data="1"

price="99.99$"

image="@Embed('C:/work/bikrant/image/orbit.png')"

description="Gift for a friend."/>

<fx:Object

name="MP3 player"

data="1"

price="49.99$"

image="@Embed('C:/work/bikrant/image/player.png')"

description="For listening music"/>

<fx:Object

name="Compass"

data="1"

price="19.99$"

image="@Embed('C:/work/bikrant/image/compass.png')"

description="For direction"/>

</mx:ArrayCollection>

</s:DataGroup>

</s:Panel>

<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:states>

<mx:Image id="productImage"

source="{data.image}"

width="100" width.hovered="128"

height="100" height.hovered="128"/>

<s:Label text="{data.name}"

color="blue"

fontSize.hovered="16"/>

<s:Label text.hovered="{data.price}" color="green"

fontWeight.hovered="bold"/>

<s:Label text.hovered="{data.description}" color="red"/>