10
Jan
09

Flex 4 (Gumbo) – 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>

1 Response to “Flex 4 (Gumbo) – List with states and transitions”


  1. 1 Tracey
    June 29, 2009 at 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

    http://askmeflash.com/tutorial_m.php?p=tutorial&tid=0


Leave a Reply