ItemRenderer and Repeater

在使用 Tile 或 TileList 的时候，我们经常要插入自定义的组件，有两种常用的方法可以解决这个问题。

 

 

• 以TileList 和 ItemRenderer 的方法渲染自定义组件

           第一种是在 TileList 中加入两个东西，第一个是 dataProvider 当然是数据源了，这里我们可以用Array或者ArrayCollection。
           另一个属性是itemRenderer 这里我们要放入一个可视化的组件，当然也可以是你自定义的组件了。
           itemRenderer 的工作过程是 把数据源中的每一项送给 itemRenderer 的 Data 属性。

           注意 itemRenderer 的路径 是包的全路径。

 
           所以，对于较复杂的数据类型，或我们自定义的数据类型，我们可以采用 重写get data 函数，或者监听dataChang的方法。
         

           具体的例子如下：

        

          

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			  import mx.collections.ArrayCollection;
			  import mx.events.ListEvent;
			  import mx.controls.Alert;
			
			  import ListItemView;
			  import ListItemVO;
			 
			 [Bindable]
			 private  var _dataArr:ArrayCollection=new ArrayCollection();
			 
			 private function init():void{
			 this._dataArr.addItem(new ListItemVO("1","a"));
			 this._dataArr.addItem(new ListItemVO("2","b"));
			 this._dataArr.addItem(new ListItemVO("3","c"));
			 this._dataArr.addItem(new ListItemVO("4","d"));
			 this._dataArr.addItem(new ListItemVO("5","e"));
			 list.addEventListener(ListEvent.ITEM_CLICK,doListEvent);
			 }
			 
			 private function doListEvent(e:ListEvent):void{
			 	Alert.show(e.itemRenderer.data._id);
			 }
		]]>
	</mx:Script>
	
<mx:TileList id="list"  width="100"  dataProvider="{this._dataArr}"  itemRenderer="ListItemView" />
</mx:Application>

  

    其中tileList 的itemRenderer 的对象是一个自定义的组件。如下

   

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="24" dataChange="doChange()" >
	<mx:Script>
		<![CDATA[
		   [Bindable]
		   public var _listData:Object;
		
			private function doChange():void{
				this._listData=this.data as ListItemVO;
			}
		]]>
	</mx:Script>
<mx:Label  text="{_listData._name}" />
</mx:Canvas>

  

     上面的函数就是用data 属性 赋予数据类型的方法，dataChange 事件要进行监听。

 

    ListItemVO是一个类，里面有两个字符串作为变量他的结构如下

  

package
{   
	[Bindable]
	public class ListItemVO
	{     
		public  var _id:String;
		public  var _name:String;
		public function ListItemVO(id:String,name:String)
		{
	      this._id=id;
	      this._name=name;
		}
	}
}

   

•     第二种是Tile 和 Repeater 的组合，只不过itemRenderer的一系列东西换成了 Repeater。

         一般而言 Repeater 的使用是这样的。

   

<mx:Tile width="100"  backgroundColor="0xffffff">
	<mx:Repeater id="tileRepeater" dataProvider="{this.Arr}">
		 <local:ListItemView  _listData="{tileRepeater.currentItem}"  click="ItemClickHandler(event)" />
	</mx:Repeater>
</mx:Tile>

    dataProvider 写在了Repeater中,Repeater 中加着你要渲染的组件

    所以可以像普通的组件一样，赋予它的属性参数，这里我们就用了_listData="{tileRepeater.currentItem}" 

    同样可以监听这个组件的事件。

  

   完整的代码如下

    

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.ListEvent;
			import mx.controls.Alert;
			
			import ListItemView;
			import ListItemVO;
			 
			 [Bindable]
			 private  var Arr:Array=new Array();
			 
			 private function init():void{
			 var _dataArr:Array=new Array();
			 _dataArr.push(new ListItemVO("1","a"));
			 _dataArr.push(new ListItemVO("2","b"));
			 _dataArr.push(new ListItemVO("3","c"));
			 _dataArr.push(new ListItemVO("4","d"));
			 _dataArr.push(new ListItemVO("5","e"));
			   this.Arr=_dataArr;
			 }
			 
			 private function ItemClickHandler(event:MouseEvent):void{
			    Alert.show(event.currentTarget._listData._id);
			 }
		]]>
	</mx:Script>
	
<mx:Tile width="100"  backgroundColor="0xffffff">
	<mx:Repeater id="tileRepeater" dataProvider="{this.Arr}">
		 <local:ListItemView  _listData="{tileRepeater.currentItem}"  click="ItemClickHandler(event)" />
	</mx:Repeater>
</mx:Tile>
</mx:Application>

 

   注意点击项目监听的函数，和执行的函数。

 

   还可以这么写 click=" ItemClickHandler(event.CurrentTarget.getRepeaterItem())"

 

   完整Demo的代码在附件中：