Friday, July 11, 2008

Transparent List



I often run into situations where I want to use a List but I want to have the rollOver and selection highlights disabled. This often occurs when I want a completely transparent list. There is a style which controls whether the rollOver highlight is displayed, called useRollOver, but it doesn't disable the selection highlight. In addition, even though Tree extends List, the useRollOver style has no effect for the Tree component. Fortunately, due to a good api design, there is a simple solution. You just create a new component class which extends List:

package
{
import mx.controls.List;
import mx.controls.listClasses.IListItemRenderer;

public class TransparentList extends List
{
override protected function createChildren():void
{
super.createChildren();

setStyle( "backgroundAlpha", "0" );
setStyle( "borderStyle", "none" );
}

override protected function drawItem( item:IListItemRenderer,
selected:Boolean=false,
highlighted:Boolean=false,
caret:Boolean=false,
transition:Boolean=false):void
{
super.drawItem(item, false, false, caret, transition);
}
}
}

In createChildren() set the border and background alpha styles. Then override the protected drawItem() function and always pass false to the selected and highlighted parameters of the parent function. You can do the same thing for the Tree component.