Fabio Biondi Blog » Blog Archive » Remove default blue theme color from TileList: drawSelectionIndicator() and drawHighlightIndicator() overriding in FX3

Remove default blue theme color from TileList: drawSelectionIndicator() and drawHighlightIndicator() overriding in FX3

10 August 2009 No Comment

Problem: Using the TileList component (or other List Base components) a light blue color appears when you rollover an item and a dark blue when you select it.

You want remove them to implement your own graphic effects.

Solution: Extend TileList Component and override drawSelectionIndicator() and drawHighlightIndicator methods() methods

Following an image to recognize the issue:

FIX THE ISSUE:
To remove this default effect you need to extends the TileList Class and override drawSelectionIndicator() and drawHighlightIndicator() methods.
You can do this using two tecniques:

1) using a custom MXML Component based on a TileList

<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
	<![CDATA[
		import mx.core.EdgeMetrics;
		import mx.core.IFlexDisplayObject;
		import mx.skins.halo.ListDropIndicator;
		import mx.events.DragEvent;
		import mx.controls.listClasses.IListItemRenderer;
		use namespace mx_internal;
 
 
		// Remove the rollOver indicator
		override protected function drawSelectionIndicator(
				indicator:Sprite, x:Number, y:Number,
				width:Number, height:Number, color:uint,
				itemRenderer:IListItemRenderer):void
		{
		/* You can leave this method empty or manage your own design */
		}
 
 
		// Remove the Selection indicator
		override protected function drawHighlightIndicator(
			indicator:Sprite, x:Number, y:Number,
			width:Number, height:Number, color:uint,
			itemRenderer:IListItemRenderer):void
		{
		/* You can leave this method empty or manage your own design */
		}
 
		]]> 
	</mx:Script>
 
</mx:TileList>

2) Creating a new ActionScript 3.0 Class:

package components
{
 
import flash.display.Sprite;
import mx.controls.TileList;
import mx.controls.listClasses.IListItemRenderer;
 
 
public class TileListNoThemeAS extends TileList
{
 
 
	// Remove the rollOver indicator
	override protected function drawSelectionIndicator(
		indicator:Sprite, x:Number, y:Number,
		width:Number, height:Number, color:uint,
		itemRenderer:IListItemRenderer):void
	{
	/* You can leave this method empty or manage your own design */
	}
 
 
	// Remove the Selection indicator
	override protected function drawHighlightIndicator(
		indicator:Sprite, x:Number, y:Number,
		width:Number, height:Number, color:uint,
		itemRenderer:IListItemRenderer):void
	{
	/* You can leave this method empty or manage your own design */
	}
 
 
	public function TileListNoThemeAS()
	{
		super();
	}
 
	}
}

To use the new TileLists just define them from your main mxml file:

<?xml version="1.0"?>
<mx:Application layout="vertical"
   xmlns:mx="http://www.adobe.com/2006/mxml" 
   xmlns:components="components.*"
   initialize="populateAC();" >
 
 
   <mx:Script>
   <![CDATA[
 
      import mx.collections.*;
 
      [Bindable] 
      private var TileListdp:ArrayCollection;
 
      private var sampleItems:Array = new Array("Fabio", "Giorgio", "Barbara", "Ivan");
 
 
      private function populateAC():void {
 
      	 TileListdp = new ArrayCollection(sampleItems);
 
      }
 
 
 
   ]]>
   </mx:Script>
 
   <mx:Label text="Standard TileList" />
   <mx:TileList dataProvider="{TileListdp}" itemRenderer="itemRenderer.Row"/>
 
   <mx:Spacer height="30" />
 
   <mx:Label text="Fixed TileList defined in a MXML file" /> 
   <components:TileListNoTheme dataProvider="{TileListdp}" itemRenderer="itemRenderer.Row"/>
 
   <mx:Spacer height="30" />
 
   <mx:Label text="Fixed TileList defined in a ActionScript Class" /> 
   <components:TileListNoThemeAS dataProvider="{TileListdp}" itemRenderer="itemRenderer.Row"/>
 
 
</mx:Application>

Following the final SWF output (check it rollover and selecting an item)

This movie requires Flash Player 10

Naturally this is only an exercise to understand how modify the default indicators.
To include your own design you’ll need to update the new overrided methods with a custom graphic or you should manage the items selection using the itemRenderer data property and playing with the TileList dataProvider. We’ll understand how to do it in a future article.

Download Source Code