Share on Google+Share on Google+

View state with a custom item renderer in Flex4

Advertisement
In this example you can see how we can use the view state in custom component.

View state with a custom item renderer in Flex4:

In this example you can see how we can use the view state in custom component. You will use this component in your main application through itemrenderer property.

Example:

mainapplication.mxml

<?xml version="1.0" encoding="utf-8"?>

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

itemrenderer.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: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"/>

</s:ItemRenderer>

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download mainapplication.mxml file code

Download itemrenderer.mxml file code

Advertisements

Posted on: July 9, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.