Tuesday, November 13, 2007

Losing the RollOverColor in TileList

In one of our projects we have a custom effect that plays over each tile as a user mouses over the items in a tilelist. Not getting too much into details, I basically overlay a canvas that appears and disappears as the mouse moves over the tile, giving the illusion that each tile sort of explodes. So the one thing I don't need is the rollOverColor effect, which defaults to a nasty baby blue. Usually I just set the rollOverColor to the same color as the background but that's not working so well on this project, since the background can be an assortment of wallpapers.

Unfortunately there doesn't seem to be any way to disable the rollOverColor, and maybe someone can shed some light on an easier solution. I ended up extending TileList with my own mxml component and overriding the drawitem function, as follows:

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.IListItemRenderer;

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

super.drawItem(item,false,false,caret,transition)
}
]]>
</mx:Script>
</mx:TileList>

As you can see, I override the selected and highlighted parameters with false, thereby eliminating the selected and roll over effect. Seems to work quite well. I now use this mxml component instead of TileList throughout my applications.

3 comments:

elfan said...

what about using setStyle("useRollOver", false) ?

Anonymous said...

try: useRollOver="false", it works fine for me.

www.crazedCoders.com said...

Actually I still need the rollOver effect to fire, since the appearance of the tile must change on rollover. Using setStyle like you suggest or setting the attribute to useRollOver to false actually turns off rollOver events from firing.