SmartLogic Logo (443) 451-3001

The SmartLogic Blog

SmartLogic is a web and mobile product development studio based in Baltimore. Contact us for help building your product or visit our website to learn more about what we do.

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

August 23rd, 2008 by

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!

  • Pingback: Bookmarks about Screencast

  • jason

    I am trying to compile your code and Flex Builder is giving an error in the ItemRenderer5.mxml file.

    Getting “Could not resolve to a component implementation”

    Not sure why content is in the itemrenderer? Are you missing a namespace?

  • http://www.smartlogicsolutions.com/wiki/Greg_Jastrab Greg Jastrab

    This example is quite old jason, and the SDK has changed quite a bit since then. Throughout most of my examples here, if there isn’t updated code in the comments, it will most likely be fixed by adding the

    xmlns:s="library://ns.adobe.com/flex/spark"

    namespace declaration and prepending all tags with s:

    However, I’m not sure if this example would work with just that. I’ve been meaning to revisit recreating the list with the current SDK – I’ll try to do it at some point this week.

  • Dhvani

    M having an issue in flex 4 where m trying to use states in my module and its giving an error that “could not resolve to component implementation

Greg Jastrab was a developer and project manager at SmartLogic from 2006 to 2011. Follow @gjastrab on twitter

Greg Jastrab's posts