Recreating Ely's Flex 4 List Component Series

If you haven't seen Ely's video on Adobe TV about improving the designer/developer workflow (which is an updated version of what he infamously previewed at MAX last year), you should probably check that out to see what the goal of this series is.

I'm going to attempt to go through the steps and recreate what he demonstrated, which was to take a simple list and iteratively transform it into a rich, accordion-like interactive list. To get started, be sure that you're setup to compile Flex 4 code and that you have Flash Player 10. Here we go...

Step 1: The Boring List

We need a starting point, so first let's get a boring old list going.

ElysList.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009">

    <List width="300" height="400">
        <Array>
            <String>something</String>
            <String>something else</String>
        </Array>
    </List>

</Application>

Compile and run this, and you should see:

Looks marvelous, doesn't it? Let's go for step 2, which is to add a border and to make the data in the list some objects rather than just an array of strings.

Step 2: List Using Objects for Data and Adding a Border

The application file for step 2 is still kinda boring. Here we'll just make a bindable array of object data and specify a skin file for the List, as well as an item renderer the items in the list should use.

ElysList2.mxml

<?xml version="1.0" encoding="utf-8"?>
<Application xmlns="http://ns.adobe.com/mxml/2009">
    <Script>
        <![CDATA[
            [Bindable] private var customers:Array = [
                {id: 1, firstName: "Greg", lastName: "Jastrab", phone: "123-456-7890", website: "http://www.smartlogicsolutions.com"},
                {id: 2, firstName: "John", lastName: "Appleseed", phone: "234-567-8901", website: "http://www.slsis.com"}
            ];
        ]]>
    </Script>

    <Style>
        List { skinZZ: ClassReference("skins.ListSkin2"); }
    </Style>

    <List bottom="20" top="10" left="10" right="20" itemRenderer="skins.ItemRenderer2">
        {customers}
    </List>

</Application>

Let's checkout the skin for the List:

skins/ListSkin2.mxml

<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009">

    <Rect bottom="0" top="0" left="0" right="0" radiusX="8" radiusY="8">
        <stroke>
            <SolidColorStroke color="#ccccaa" weight="2" />
        </stroke>
    </Rect>

    <Group id="contentGroup" bottom="5" top="5" left="10" right="10"
           layout="flex.layout.VerticalLayout" />

</Skin>

Here we use some new FXG tags to draw the border around the list, and then place the container which will hold the elements of the list within that border.

IMPORTANT: The ID of the group is not arbitrary. If you look inside the flex.component.ItemsComponent class (which List is a descendant of) you will find a SkinPart being declared for the contentGroup variable that is typed as Group:

[SkinPart]
public var contentGroup:Group;

This means the skin file must include a Group with an ID of contentGroup where the item renderers within the list will be placed. Speaking of item renderers, that brings us to the last piece of step 2.

skins/ItemRenderer2.mxml

<?xml version="1.0" encoding="utf-8"?>
<ItemRenderer xmlns="http://ns.adobe.com/mxml/2009">

    <states>
        <State name="normal" />
        <State name="hovered" />
        <State name="selected" />
    </states>

    <content>
        <Rect bottom="0" top="0" left="0" right="0">
            <fill>
                <SolidColor color="#0000ff" alpha="0" alpha.hovered="0.2" alpha.selected="0.8" />
            </fill>
        </Rect>
        <Group id="contentHolder" bottom="3" top="3" left="0" right="0"
               layout="flex.layout.HorizontalLayout">
            <TextGraphic fontSize="20" fontWeight="bold">{data.lastName},</TextGraphic>
            <TextGraphic fontSize="20" fontWeight="bold">{data.firstName}</TextGraphic>
        </Group>
    </content>

</ItemRenderer>

Here we have specified an ItemRenderer with 3 states (normal/hovered/selected). We've added a solid background which will change its alpha value depending on the view state. And finally we added 2 pieces of text so we will see "Lastname, Firstname" in the list.

Compile ElysList2.mxml and you should see:

Later this week I'll tackle the next steps, but hopefully this will keep some of you busy over the weekend.:)

Oh, and here is the source so you won't have to retype all of the above: Ely's List Steps 1-2

Enjoy your Gumbo!