Flex custom list selection not highlighting

Question

I want to create a custom list in Flex for an interface prototype. The list is supposed to have an image and 3 text fields. This is what I have done so far, the control displayed is what I want. But, when I click on one of the items, the item does not appear (visually) to be selected. I was not sure how I would implement this.

Here is my code so far:

<s:List width="400" height="220" 
        dataProvider="{arrColl}"
        alternatingItemColors="[#EEEEEE, white]">
    <s:itemRenderer>
        <fx:Component>
            <mx:Canvas height="100">
                <mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
                <mx:Label left="125" y="10" text="{data.title}" />
                <mx:Label left="125" y="30" text="{data.type}" />
                <mx:Label left="125" y="50" text="{data.description}" />
            </mx:Canvas>
        </fx:Component>
    </s:itemRenderer>
</s:List>

Answer 1

Not sure what kind of graphic your data.imageSource is. Perhaps the Image is masking the highlight. Can you try making it the backgroundImage of the Canvas? Also, I've noticed that using PNG or JPG images in lists and grids can mask highlight colors. They also can prevent mouseclicks from reaching the listItem. If possible try using a SWF with vector graphics.

Answer 2

For anyone else, who is stuck and on the same boat - this is what I did and it works now:

<mx:List width="400" height="220" 
        dataProvider="{arrColl}"
        alternatingItemColors="[#EEEEEE, white]">
    <mx:itemRenderer>
        <fx:Component>
                <mx:Canvas height="100">
                    <mx:Image height="90" width="120" source="{data.imageSource}"></mx:Image>
                    <mx:Label left="125" y="10" text="{data.title}" fontWeight="bold" />
                    <mx:Label left="125" y="30" text="{data.type}" fontStyle="italic" />
                    <mx:Label left="125" y="50" text="{data.description}" />
                </mx:Canvas>
        </fx:Component>
    </mx:itemRenderer>
</mx:List>

Note: The difference is the List and itemRenderer are from the mx namespace rather than the s namespace.