Flex Examples
The following example shows how you can set alternating background colors for tiles in a Flex TileList control by setting the alternatingItemColors style using MXML, CSS or ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
<mx:Object label="Eleven" />
<mx:Object label="Twelve" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="4"
columnWidth="120"
rowCount="3"
rowHeight="80"
alternatingItemColors="[#FFFFFF,#CCCCCC,#999999]" />
</mx:Application>
View source is enabled in the following example.
You can also set the alternatingItemColors style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
TileList {
alternatingItemColors: #FFFFFF, #CCCCCC, #999999;
}
</mx:Style>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
<mx:Object label="Eleven" />
<mx:Object label="Twelve" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="4"
columnWidth="120"
rowCount="3"
rowHeight="80" />
</mx:Application>
Or, you can set the alternatingItemColors style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
var colorArr:Array = [0xFFFFFF, 0xCCCCCC, 0x999999];
tileList.setStyle("alternatingItemColors", colorArr);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object label="One" />
<mx:Object label="Two" />
<mx:Object label="Three" />
<mx:Object label="Four" />
<mx:Object label="Five" />
<mx:Object label="Six" />
<mx:Object label="Seven" />
<mx:Object label="Eight" />
<mx:Object label="Nine" />
<mx:Object label="Ten" />
<mx:Object label="Eleven" />
<mx:Object label="Twelve" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tileList"
dataProvider="{arrColl}"
columnCount="4"
columnWidth="120"
rowCount="3"
rowHeight="80"
initialize="init();" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/10/alternating-tile-background-colors-for-items-in-a-tilelist-control-in-flex/ -->
<mx:Application name="TileList_alternatingItemColors_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.TileList;
private var arrColl:ArrayCollection;
private var tileList:TileList;
private function init():void {
var arrColl:ArrayCollection = new ArrayCollection();
arrColl.addItem({label:"One"});
arrColl.addItem({label:"Two"});
arrColl.addItem({label:"Three"});
arrColl.addItem({label:"Four"});
arrColl.addItem({label:"Five"});
arrColl.addItem({label:"Six"});
arrColl.addItem({label:"Seven"});
arrColl.addItem({label:"Eight"});
arrColl.addItem({label:"Nine"});
arrColl.addItem({label:"Ten"});
arrColl.addItem({label:"Eleven"});
arrColl.addItem({label:"Twelve"});
var colorArr:Array = [0xFFFFFF, 0xCCCCCC, 0x999999];
tileList = new TileList();
tileList.dataProvider = arrColl;
tileList.columnCount = 4;
tileList.columnWidth = 120;
tileList.rowCount = 3;
tileList.rowHeight = 80;
tileList.setStyle("alternatingItemColors", colorArr);
addChild(tileList);
}
]]>
</mx:Script>
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
nice articles!!!