Home Tutorial Flex Flex4 Components View state with a custom item renderer in Flex4

 
 

Share on Google+Share on Google+
View state with a custom item renderer in Flex4
Posted on: July 9, 2010 at 12:00 AM
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

Advertisement

Related Tags for View state with a custom item renderer in Flex4:


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.

Posted on: July 9, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com