SmartLogic Solutions Blog

Recreating Ely’s Flex 4 List Component Series: Part 2

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

In Part 1 of this series we learned how to create an ItemRenderer for a List in Flex 4. I wanted to get through 2 steps tonight, but only have the code for the next step finished. This code creates the item renderer seen at ~4:20 of Ely’s video.

Step 3: A More Interesting Item Renderer

Most of the work in this step is done in the item renderer, so we’ll just blow through the Application and List skin quickly. The only thing that has changed in the Application file is specifying the new skin and item renderer:

ElysList3.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.ListSkin3"); }
    </Style>
 
    <List bottom="20" top="10" left="10" right="20" itemRenderer="skins.ItemRenderer3">
        {customers}
    </List>
 
</Application>

For the skin of the list I’ve only changed the border and some positioning:

skins/ListSkin3.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="5" radiusY="5">
        <stroke>
            <SolidColorStroke color="#030303" weight="2" />
        </stroke>
    </Rect>
 
    <Group id="contentGroup" bottom="5" top="5" left="5" right="5"
           layout="flex.layout.VerticalLayout" />
 
</Skin>

Finally, we get to the meaty part…a bunch of FXG tags. The new item renderer has the name up top, an area for an image/icon to below the name and to the left, and the phone and website to the right of the image area. The two areas below the name will have a background color appear when the item is hovered or selected, and the phone and website labels will become bold in the selected state:

skins/ItemRenderer3.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>
 
        <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>
            </Rect>
            <TextGraphic verticalCenter="0" left="10" right="0"
                         fontWeight="bold" fontSize="22">
                {data.lastName}, {data.firstName}
            </TextGraphic>
        </Group>
 
        <Group bottom="0" top="36" left="0" right="0" layout="flex.layout.HorizontalLayout">
            <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>

And the result:

$Screenshot of Ely\'s List: Step 3$

Screenshot of Ely's List: Step 3

The next steps will be fun. We’ll spruce up the item renderer even more, and add some animation so the list behaves more like an Accordion than a list.

As usual, here is 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, Gumbo, item renderer, skinning

This entry was posted on Tuesday, August 19th, 2008 at 1:20 am and is filed under FXG, 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.

10 Responses to “Recreating Ely’s Flex 4 List Component Series: Part 2”

maohao Says:
October 17th, 2008 at 4:33 pm
Hi Greg,

Thanks for the posts!

I just downloaded the nightly build (4.0.0.3669) SDK. Your code is not compiling in my FB. Not sure if it’s something on my side or if it’s the API changed;)

1. “Component may not have both a text initializer and attributes. ” for things like ;

2. “Initializer for ‘layout’: values of type mx.layout.LayoutBase cannot be represented in text.” for things like

Best
maohao Says:
October 17th, 2008 at 4:37 pm
the site seems to trimmed of the code:)

1. <TextGraphic fontSize=”20″ fontWeight=”bold”>{data.firstName}</TextGraphic”>

2. <Group id=”contentHolder” bottom=”3″ top=”3″ left=”0″ right=”0″
layout=”flex.layout.HorizontalLayout”>
Greg Jastrab Says:
October 19th, 2008 at 9:22 pm
There have been some API changes. You can specify it in the older style by doing layout=”horizontal”.
Greg Jastrab Says:
October 20th, 2008 at 8:16 pm
Sorry, I forgot that you must also now do <FxApplication> instead of <Application> since the namespaces have been merged. Using that, you specify the layout as a child tag of <FxApplication> as follows:

<layout><HorizontalLayout /></layout>
maohao Says:
October 21st, 2008 at 5:36 pm
Hi Greg,

Thanks very much for the reply.

Now the compiler doesn’t complain about the “layout” part! But I still get error for <List bottom=”20″ top=”10″ left=”10″ right=”20″ itemRenderer=”skins.ItemRenderer3″>{customers} </List> it says
“Initializer for ‘layout’: values of type mx.layout.LayoutBase cannot be represented in text.”

Also, are these constantly updated APIs documented somewhere on a public domain?

Regards,
maohao Says:
October 21st, 2008 at 5:38 pm
Sorry the error message for the List tag is:
“Component may not have both a text initializer and attributes.” instead.

Thanks.
Greg Jastrab Says:
October 21st, 2008 at 7:43 pm
Put your full code up on pastie.org and put it here or email me the link.
maohao Says:
October 22nd, 2008 at 10:25 am
Hi Greg,

Here is the code:

http://pastie.org/298098

Thanks.
Greg Jastrab Says:
October 22nd, 2008 at 10:37 am
Oh sorry forgot you were trying to run my code, haha. The APIs have significantly changed so I’ll have to revisit this older code later and update it. I’ll try to do it next week.
maohao Says:
October 22nd, 2008 at 12:36 pm
thanks much. looking forward to the update. hopefully by next week there won’t be any significant API updates though!