Skip to content
January 10, 2009 / Shrikant Patil

Flex 4 – List with states and transitions

Flex 4 is going to make states and transition on fly on components. here i have created  a list with states and transitions. check it out.

Please make sure to configure your flex builder to target it to flex 4 SDK and flash player 10.

Below example shows how you can use an item renderer for list, how to skin a itemRenderer with its states and transitions;

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="" xmlns:mx="library:adobe/flex/halo">
import mx.collections.ArrayCollection;
import mx.states.Transition;
private var myArr:ArrayCollection = new ArrayCollection([
<FxList id="myList" dataProvider="{myArr}" color="0xffffff">
<State name="normal"/>
<State name ="hovered"/>
<State name="selected"/>
<Transition fromState="selected">
<Fade target="{phoneLabel}" />
<Resize target="{this}" />
<RemoveAction target="{phoneLabel}" />
<Transition toState="selected">
<Fade target="{phoneLabel}" />
<Resize target="{this}" />

<Rect left="0" right="0" top="0" bottom="0">
<SolidColor color="0xffffff"
<Label id="nameLabel" text="{data.firstName}"
<Label id="phoneLabel" y="15" text="Ph: {data.phoneNumber}"
includeIn="selected" color="0x000000"/>


One Comment

Leave a Comment
  1. Tracey / Jun 29 2009 5:48 pm

    thanks a lot for the article . I didnt even knew flex 4 is out .
    here i just got another good tutorial on flex states hope its helpful to others too

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: