Flex 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. |
Here's a simple app that illustrates Flex's default selection indicator. If you click any of those great movies, you'll see the background behind the image turn blue. This is what we're going to remove in this tutorial.
After setting every imaginable style and property trying to remove the selection, we eventually began diving into the Flex source code to find a solution. Down in the nitty-gritty of the Flex code, in a file named ListBase.as, we found the culprit. Whenever a list item is selected, the function
drawSelectionIndicator is called. 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;
}
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;
}
As you can see, there is no way around drawing a background when an item is selected. It simply draws a rectangle using the color set by the
selectionColor style. What we can do, however, is override this function and make it do nothing. To do this, we'll need to make a new TileList that extends the current one. I called mine, TileListEx.
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;
}
}
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;
}
}
You can use this class exactly like you would an ordinary
TileList except now there will be no selection indicator. Here's the exact same example as above using the extended TileList class. That's it for removing the indicator, but since we overrode the selection indicator function, we can now make it do whatever we want. Here's a quick example on how to make the selection indicator a circle instead of a rectangle.
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;
}
}
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;
}
}
The sky's the limit when it comes to making the selection indicator look like whatever you want - so go crazy. Hopefully in future releases of Flex, Adobe adds a selection alpha style so developers can easily remove the selection indicator without having to override any functions. Here's a zip file containing the source code from the last example. If you've got any questions, leave a comment.
