Search Flex Components Free

Custom Search

December 7, 2007

Flex 3.0 Tutorial - Change the List Selection Indicator

Recently we were using a TileList to show a group of images and we wanted to completely change how the selection indicator looked. We wrote the item renderer to handle all of the selection code and the only thing left to do was remove the selection indicator from Flex's TileList control. To our surprise, however, Flex doesn't expose a style or property to do this.

The roll-over indicator can easily be removed by setting the useRollOver style to false. The best Flex offers, style wise, for the selection indicator is the color. I guess a cheap way out would be to set the selection color to the same color as your background. This, however, doesn't work when the background is a gradient or image that is not a solid color.
protected function drawSelectionIndicator(
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(color);
g.drawRect(0, 0, width, height);
g.endFill();

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

import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;

public class TileListEx extends TileList
{
override protected function drawSelectionIndicator(
indicator:Sprite, x:Number, y:Number, width:Number,
height:Number, color:uint,
itemRenderer:IListItemRenderer):void
{
return;
}
}

***************************
And here's the code to do that.

import flash.display.Graphics;
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;

public class TileListEx extends TileList
{
override protected function drawSelectionIndicator(
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(color);
g.drawCircle(width / 2, width / 2, width / 2);
g.endFill();

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

*****************************

Related Flex Tutorials