View state with a custom item renderer in Flex4


 

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.

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"

0

data="1"

price="49.99$"

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

1

description="For listening music"/>

<fx:Object

name="Compass"

2

data="1"

price="19.99$"

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

3

description="For direction"/>

</mx:ArrayCollection>

</s:DataGroup>

4

</s:Panel>

</s:Application>

itemrenderer.mxml

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

5

<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">

6

<s:layout>

<s:VerticalLayout/>

</s:layout>

7

<s:states>

<s:State name="normal"/>

8

<s:State name="hovered"/>

</s:states>

<mx:Image id="productImage"

9

source="{data.image}"

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

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

0

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

color="blue"

fontSize.hovered="16"/>

1

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

fontWeight.hovered="bold"/>

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

2

</s:ItemRenderer>

Output:

Running Application:

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

3

Download mainapplication.mxml file code

Download itemrenderer.mxml file code

4

Ads