Question

My item renderer is an image, and the highlight for the selected item is under the image so you cannot see the highlight, is there a way to make the highlight “over” the image?

Thanks.

Answer 1

This is exactly the point at which I realized how complicated certain simple-seeming things in Flex can really be. 🙂

There are various ways of handling a problem like this one depending on the effect you’re after, but the way I’ve always done it is first by overriding certain functions of the TileList, then by using custom itemRenderers. (I’ve never been able to figure out how to have the List’s graphics object of draw on top of the rendered content, though — someone else might be able to shed some light on that.)

For example, I’ll usually create a new class that extends TileList, then override the methods responsible for drawing the highlight and selection indicators to get a bit more control over the way those functions draw the indicators (or sometimes I’ll just comment out their contents altogether, such that nothing gets drawn):

public class MyCustomTileList extends TileList
{
    public function MyCustomTileList()
    {
        super();
    }

    override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
    {           
        var g:Graphics = Sprite(indicator).graphics;
            g.clear();
            g.beginFill(getStyle("myRolloverColor"), getStyle("myRolloverAlpha"));
            g.drawRect(1, 1, width - 1, height - 1);
            g.endFill();

            indicator.x = x;
            indicator.y = y;
    }

    override protected function drawSelectionIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void
    {
        //
    }
}

But as you say, since the graphics object always seems to draw behind the content of the list item, I’ll usually opt to use an item renderer to draw something (e.g., a translucent box) on top of the image associated with my data item:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            private function img_rollOver():void
            {
                highlight.visible = true;
            }

            private function img_rollOut():void
            {
                highlight.visible = false;
            }

        ]]>
    </mx:Script>

    <mx:Image id="img" source="{something}" horizontalCenter="0" verticalCenter="0" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" />
    <mx:Box id="highlight" alpha="0.1" color="#FFFFFF" horizontalCenter="0" verticalCenter="0" width="{img.width}" height="{img.height}" buttonMode="true" useHandCursor="true" mouseChildren="true" rollOver="img_rollOver()" rollOut="img_rollOut()" visible="false" />

</mx:Canvas>

I’m sure there are other approaches, but this one works pretty well for me, and I usually find other benefits to subclassing the stock Flex controls as well.

Hope it helps!