Have Geek Brain

Flex: is there a way to put the TileList on "over" itemRenderer?

My rendering of items is an image, and the selection for the selected item is below the image, so you can't see the selection, is there a way to make the selection "on top" of the image?

Thanks.

0


a source to share


3 answers


This is exactly the moment I realized how complex some simple things in Flex can be. :)

There are different ways to solve this problem depending on the effect you are performing, but the way I have always done it is to override some of the TileList functions first and then use custom itemRenderers. (I've never been able to figure out how to use a list box graphic to draw on top of the displayed content, though maybe someone can shed some light on it.)

For example, I usually create a new class that extends TileList, then overrides the methods responsible for drawing the selection and selection indicators to give a little more control over how these functions draw the indicators (or sometimes I'll just comment out their contents altogether to drew nothing):

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 graphic always seems to go behind the contents of the list item, I usually prefer to use the item renderer to draw something (like a semi-transparent box) over the associated image 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 works very well for me, and I usually find other advantages to subclassing Flex controls.

Hope it helps!

+3


a source


Thought of using a border by adding a 2px image? Another alternative that comes to mind is absolute positioning ...



+1


a source


It seems to me that it is easier to turn off the selection and highlight the effects, then create what you expect in the renderer. The data for rendering must have some kind of .selected property in it. The renderer can then bind or respond to changes to its data. Selected (or something similar) and update its appearance as you wish.

I only use the default graphics when I have no other choice. I would never want to expand the list to it (although good code is Christian).

0


a source






More articles:


All Articles