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

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:

[flash /wp-content/uploads/2008/08/elysliststep4.swf]
(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!