Отдельные боксы

[sstotenkopf]

Как, используя tilelist сделать компоненты dataprovider отдельными боксами, я так полагаю стоит использовать itemrenderer но в каком ключе не знаю. Заранее спасибо!

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/20/creating-complex-data-provider-objects-in-mxml-using-flex-4/ -->
<s:Application name="MX_DataGrid_dataProvider_Object_test"
			   xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   creationComplete="init();">
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.List;
			[Bindable]
			public var arr:Array = ['sam', 'george', 'harris']
				//{label:"David", id:"11/19/1995"}, {label:"Collen", id:"4/20/1993"}, {label:"Sharon", id:"9/06/1997"}, {label:"Ronnie", id:"7/6/1993"}, {label:"James", id:"2/15/1994"}, 
			
			
			protected function init():void {
				
				//for(i=0; i < arr.length; i++) { 
				
		
			
				
			}
		]]>
	</fx:Script>
	<mx:TileList x="145" y="28" width="505" height="294" id="dg" dataProvider="{arr}">
			<mx:itemRenderer>
				<fx:Component>
					<mx:HBox width="150" height="50">
						<mx:Image height="47" width="50" source="http://cs10864.vkontakte.ru/g22570536/c_157848f1.jpg" ></mx:Image> 
					<mx:Label text="{data}"/>
					</mx:HBox>
				</fx:Component>
			</mx:itemRenderer>
	</mx:TileList>
	
	
</s:Application>