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="http://ns.adobe.com/mxml/2009" xmlns:mx="library:adobe/flex/halo">
<Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.states.Transition;
[Bindable]
private var myArr:ArrayCollection = new ArrayCollection([
{firstName:"Shrikant",lastName:"Patil",phoneNumber:"988675"},
{firstName:"Anand",lastName:"Rao",phoneNumber:"000000"},
{firstName:"Manju",lastName:"Rai",phoneNumber:"1111111"},
{firstName:"Anil",lastName:"Ambani",phoneNumber:"222222"}
]);
]]>
</Script>
<FxList id="myList" dataProvider="{myArr}" color="0xffffff">
<itemRenderer>
<Component>
<ItemRenderer>
<states>
<State name="normal"/>
<State name ="hovered"/>
<State name="selected"/>
</states>
<transitions>
<Transition fromState="selected">
<Sequence>
<Parallel>
<Fade target="{phoneLabel}" />
<Resize target="{this}" />
</Parallel>
<RemoveAction target="{phoneLabel}" />
</Sequence>
</Transition>
<Transition toState="selected">
<Parallel>
<Fade target="{phoneLabel}" />
<Resize target="{this}" />
</Parallel>
</Transition>
</transitions>

<Rect left="0" right="0" top="0" bottom="0">
<fill>
<SolidColor color="0xffffff"
color.hovered="0xfff00f"
color.selected="0x32ff23"/>
</fill>
</Rect>
<Label id="nameLabel" text="{data.firstName}"
text.hovered="{data.firstName},{data.lastName}"
color="0x000000"/>
<Label id="phoneLabel" y="15" text="Ph: {data.phoneNumber}"
includeIn="selected" color="0x000000"/>
</ItemRenderer>
</Component>
</itemRenderer>
</FxList>
</Application>