AboutFlex.net

This example shows you how to change the currentState of a custom itemRenderer in a TileList;

The application:

<code>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	creationComplete="{init()}"
	xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html" xmlns:creativesource="it.creativesource.*" width="550" height="225">
	<mx:Script>
		<![CDATA[
			import it.creativesource.CustomObject;
			import mx.collections.ArrayCollection;
			import mx.events.ListEvent;
 
			[Bindable]
			private var dp:ArrayCollection=new ArrayCollection();
 
 
			//initilize the application and fill the TileList's dataProvider
			private function init():void{
				for (var i:int=0;i<50;i++){
					var obj:CustomObject=new CustomObject();
					obj.someVar='obj'+i;
					dp.addItem(obj);
 
				}	
			}
 
 
 
		]]>
	</mx:Script>
 
	<creativesource:CustomTileList dataProvider="{dp}" 		
		selectable="false"
		itemRenderer="ItemRenderer" 		
		width="100%" height="100%" 
		/>
 
</mx:Application>
 
 
</code>

The Custom TileList:

package it.creativesource
{
	import mx.controls.TileList;
	import mx.events.ListEvent;

	public class CustomTileList extends TileList
	{
		private var _lastSelectedItem:Object={}
		public var defaultState:String=""
		public var selectionState:String="SELECTED"

		public var customSelection:Boolean=true;

		public function CustomTileList()
		{
			this.addEventListener(ListEvent.ITEM_CLICK,handleItemClick)
			super();
		}

		/*
		  this method handles the ItemClick and
		  sets the state of the current object
		  and to state of the lastSelected

		*/
		private function handleItemClick(e:ListEvent):void{
			if(customSelection){
		 		_lastSelectedItem.state=defaultState;
				_lastSelectedItem=e.itemRenderer.data as Object;
				_lastSelectedItem.state=selectionState
		 	}
		 }

	}
}

The custom Class Object:

package it.creativesource
{
	[Bindable]
	public class CustomObject
	{

		//this property should contain the state value of the ItemRenderer
		public var state:String='';

		//this a generic property
		public var someVar:String='';

		//CONSTRUCTOR method
		public function CustomObject(){

		}

	}
}

The custom ItemRenderer:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox backgroundColor="#FF0000"
	mouseOver="{currentState='OVER'}"
	mouseOut="{currentState=data.state}"
	buttonMode="true"
	currentState="{data.state}"
	xmlns:mx="http://www.adobe.com/2006/mxml"
	width="80" height="80" cornerRadius="20"
	borderStyle="solid" verticalAlign="middle">
	<mx:states>
		<mx:State name="SELECTED">
			<mx:SetStyle name="backgroundColor" value="#1800FF"/>
		</mx:State>
		<mx:State name="OVER">
			<mx:SetStyle name="backgroundColor" value="#FFFF00"/>
		</mx:State>
	</mx:states>
	<mx:Text mouseChildren="false"
	text="{data.someVar}"
	width="100%" textAlign="center"/>
</mx:HBox>