Recreating Ely’s Flex 4 List Component Series: Part 3 - Adding Transitions

This post was written by Greg Jastrab. Read other posts by Greg Jastrab.

In Part 2 we added hovered and selected states to the ItemRenderer for the list items. In this part we’ll add some transitions to make the list look more like an Accordion. Since screenshots won’t do the example justice this time, I’ll show a screencast I made demonstrating the result first:

(Sorry for the embed being cutoff, still figuring out the params to this word press plugin. Click through for the full embed on its own page.)

Keep reading for the source…

Step 4: Add Accordion-like Selection Transitions

I added some more data to the list so it would look more interesting than switching between only two items. The only other thing that changed in this step was the item renderer:

skins/ItemRenderer5.mxml

<?xml version="1.0" encoding="utf-8"?>
<ItemRenderer xmlns="http://ns.adobe.com/mxml/2009"
              xmlns:mx="library:adobe/flex/halo"
              height="32" height.selected="98">
 
    <states>
        <State name="normal" />
        <State name="hovered" />
        <State name="selected" />
    </states>
 
    <transitions>
        <mx:Transition fromState="selected">
            <mx:Sequence>
            <mx:Parallel>
                <Fade target="{details}" />
                <Resize target="{this}" />
            </mx:Parallel>
            <RemoveAction target="{details}" />
            </mx:Sequence>
        </mx:Transition>
        <mx:Transition toState="selected">
            <mx:Parallel>
                <Fade target="{details}" />
                <Resize target="{this}" />
            </mx:Parallel>
        </mx:Transition>
    </transitions>
 
    <content>
 
        <Group height="32" left="0" right="0">
            <Rect bottom="0" top="0" left="0" right="0" radiusX="5" radiusY="5">
                <stroke>
                    <SolidColorStroke color="#1a2953" weight="2" />
                </stroke>
                <fill>
                    <SolidColor color="#cccccc" alpha="0" alpha.hovered="0.5" />
                </fill>
            </Rect>
            <TextGraphic verticalCenter="0" left="10" right="0"
                         fontWeight="bold" fontSize="22">
                {data.lastName}, {data.firstName}
            </TextGraphic>
        </Group>
 
        <Group id="details" bottom="0" top="36" left="0" right="0"
               layout="flex.layout.HorizontalLayout" includeIn="selected">
            <Group width="50" height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
            </Group>
            <Group height="66">
                <Rect bottom="0" top="0" left="0" right="0">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                    <fill>
                        <SolidColor color="#ffaaaa" alpha="0" alpha.hovered="0.5" alpha.selected="1" />
                    </fill>
                </Rect>
                <Group verticalCenter="0" width="60">
                    <TextGraphic top="0" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        phone
                    </TextGraphic>
                    <TextGraphic top="20" left="0" right="0" fontSize="14"
                                 textAlign="right" fontWeight.selected="bold">
                        website
                    </TextGraphic>
                </Group>
                <Line x="64" yFrom="4" yTo="62">
                    <stroke>
                        <SolidColorStroke color="#ccccaa" weight="2" />
                    </stroke>
                </Line>
                <Group verticalCenter="0" left="68" right="0">
                    <TextGraphic fontSize="14">{data.phone}</TextGraphic>
                    <TextGraphic top="20" fontSize="14">{data.website}</TextGraphic>
                </Group>
            </Group>
        </Group>
 
    </content>
 
</ItemRenderer>

The keys here were to:

specify a height.selected for the item renderer so the entire renderer would resize when the details Group is removed
use the halo Transition, Sequence, and Parallel classes since these alternatives aren’t present (to my knowledge yet) in Gumbo

And as usual, here’s the source and SWF.

I hope everyone’s enjoying their Gumbo!

About the author: Greg Jastrab joined SmartLogic Solutions in June 2006 and leads all Flash/Flex/AIR development. Follow @gjastrab on twitter

Tags: Flex 4, FXG, item renderer, transitions

This entry was posted on Saturday, August 23rd, 2008 at 12:00 am and is filed under Flex 4, Greg Jastrab, Gumbo, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

One Response to “Recreating Ely’s Flex 4 List Component Series: Part 3 - Adding Transitions”

Bookmarks about Screencast says:

December 2, 2008 at 6:15 am

[...] - bookmarked by 4 members originally found by sockmonkeyrevolt on 2008-10-24 Recreating Ely’s Flex 4 List Component Series: Part 3 - Adding Transitions [...]

SmartLogic Solutions Blog