How to draw Alternative Row Background in TileList
Submitted by softking on Tue, 12/22/2009 - 10:24
How to draw Alternative Row Background in TileList?
TileList inherits from TileBase. TileBase has a function called "drawTileBackground".
How do we select the color for the background color of the tile? We can create a class that extends TileList and override this function in order to change this color.
I tried this but my overriding function was never called!, After looking in the code in TileBase i realized that "drawTileBackground" is called from the function "drawTileBackgrounds" (with S at the end) but in this function i never reached the line where "drawTileBackground" is used. This is due to the fact that the style "alternatingItemColors" was null. By changing this style to anything else other then NULL i got the expected behavior.
See the code for the class below
<?xml version="1.0" encoding="utf-8"?>
<mx:TileList xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
<mx:Script>
<![CDATA[
import mx.controls.listClasses.IListItemRenderer;
public var colorFunction:Function;
protected override function drawTileBackground(s:Sprite, rowIndex:int, columnIndex:int, width:Number, height:Number,
color:uint, item:IListItemRenderer):DisplayObject{
if(colorFunction!=null){
color = colorFunction(rowIndex,columnIndex,item.data);
}
return super.drawTileBackground(s,rowIndex,columnIndex,width,height,color,item);
}
]]>
</mx:Script>
</mx:TileList>Notice that i defined a public member called "colorFunction" of type function, in order to get a different color for a tile , a function pointer must be assigned to this member. See Below
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" xmlns:local="*" initialize="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dp:ArrayCollection = new ArrayCollection();
private function init():void{
for(var i:int = 0 ; i < 1000 ;i++){
var obj:Object = new Object();
obj.label = "test" + i.toString();
obj.color = Math.random()*255*255;
dp.addItem(obj);
}
}
private function getColor(rowIndex:int, columnIndex:int,data:Object):int{
return data.color;
}
]]>
</mx:Script>
<!-- Notice that you must define something in alternatingItemColors -->
<local:TileListEx dataProvider="{dp}" id="tileList"
labelField="label" alternatingItemColors="1"
colorFunction="getColor"/>
</mx:Application> See the example in action here:
http://www.softologia.com/sites/default/files/TileListTest.swf