系列文章導航 Flex,Fms3相關文章索引 Air版免費視頻成人聊天室,免費網絡遠程視頻會議系統((Flex,Fms3聯合打造))
Flex中提供了大量用于數據呈現的組件，這其中，以List系列組件最為常見，使用也最頻繁，比如ComBoBox、List、Tree、TileList、DataGrid等等。這些組件有一個共同的特性，那就是支持自定義itemRenderer，這個功能非常強大，能夠幫助我們實現很多實用的功能.
項目渲染器（ItemRenderer）是ListBase類列表控件的重要屬性，我們在平常工作中會經常自定義項目渲染器以實現該類控件的特殊顯示效果。
默認的項目渲染器取決于組件類。TileList 和 HorizontalList 類使用 TileListItemRenderer；List 類使用 ListItemRenderer。DataGrid 類使用 DataGridColumn 中的 DataGridItemRenderer。
什么是itemRenderer?? itemRenderer，可以理解為數據的表現方式，具體地說，是指顯示每一條數據時采用的形式。在使用數據處理類組件時，我們只需要把數據按照一定的格式組織好，然后賦予給組件，剩下的事就不用費心了。? 每一個組件都有默認的itemRenderer，比如List組件：? List組件默認的itemRenderer類似Label組件，只簡單顯示一行文本。如右圖所示，紅色方框選中的是一個itemRenderer。? 本質上，itemRenderer和其它容器類組件沒有區別，里面可以包括任意的可視化元素，包括文本、圖片、視頻等，只要是Flex支持的視覺元素，都可以。
自定義itemRenderer? 組件默認的itemRenderer都過于簡單，如果想加強表現力，就必須創建個性化的itemRenderer。? 自定義itemRenderer有兩種方式：一種是嵌入式，直接寫在組件的標簽中，所有的代碼都集中在一個MXML文件中；另一種是把itemRenderer獨立出來，形成一個MXML組件或ActionScript類。

看下面圖片，我用TileList控件的自定義ItemRenderer實現的效果:
image

代碼下載：
http://files.cnblogs.com/aierong/Air_TestWin.rar


代碼說明：
先自定義一個名稱為:itemh的MXML
<?xml version="1.0" encoding="utf-8"?>? <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="145" height="41"? horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">? <mx:Image click="this.parentDocument.imgclick(event)"? data="{data.label}" source="assets\tx.JPG" width="40"/>? </mx:VBox>? <mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">? <mx:Label text="{data.label}" toolTip="{data.label}" />? <mx:Image toolTip="點我查看視頻" ?buttonMode="true"? source="assets\camera.JPG" width="16" height="20" ?/>? </mx:VBox>
</mx:HBox>

主調用應用中:
<mx:ArrayCollection id="arrColl_keySetup">? <mx:source>? <mx:Array id="arr_keysetup">? <mx:Object data="00" sel="false" label="aaa"/>? <mx:Object data="11" sel="false" label="bbb"/>? <mx:Object data="22" sel="true" label="ccc"/>? </mx:Array>? </mx:source>? </mx:ArrayCollection>
<mx:TileList id="tlist" maxColumns="1"? dataProvider="{arrColl_keySetup}" ? itemRenderer="itemh"? x="34" y="10" width="148">? </mx:TileList>

給TileList的itemRenderer屬性賦值itemh,并綁定數組集合類就可以了。

動態指定itemRenderer
利用ClassFactory類可以動態指定itemRenderer
代碼如下：
private function initTileList():void? {? this.tlist.dataProvider=this.arrColl_keySetup;? this.tlist.itemRenderer = new ?ClassFactory(itemh);? }
<mx:TileList id="tlist" maxColumns="1" x="34" y="10" width="148"? creationComplete="initTileList()">? </mx:TileList>


至于怎樣在項目渲染器訪問主調用應用中的成員，可用parentDocument來引用；? 反過來，主調用應用要訪問項目渲染器中的成員，一般都是通過在項目渲染器先派發事件，然后在主調用應用中注冊事件偵聽器來實現。
例如：在項目渲染器中點擊圖片事件，然后通知主調用應用
<mx:Image click="this.parentDocument.imgclick(event)"? data="{data.label}" source="assets\tx.JPG" width="40"/>
在主調用應用中定義：
public function imgclick(evt:MouseEvent):void? {? var img:Image=evt.currentTarget as Image;? Alert.show(img.data.toString());? }
記住得是public的,不同類之間是無法訪問私有方法的
圖片點擊后效果圖片：
image
其實上面的功能也可以用dispatchEvent來實現
先定義一個事件類
package? {? import flash.events.Event;? public class myEvent extends Event? {? public var data:String;? public function myEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false,data:String="")? {? super(type, bubbles, cancelable);? this.data=data;? }? }? }
然后在itemh中將事件調度到事件流中
<mx:Image click="clickHandler(event)"? data="{data.label}" source="assets\tx.JPG" width="40"/>
private function clickHandler(evt:MouseEvent):void? {? var img:Image=evt.currentTarget as Image;? dispatchEvent(new ?myEvent("img_click",true,true,img.data.toString()));? }
最后在主調應用中監聽事件
private function initTileList():void? {? this.tlist.addEventListener("img_click",onItemimg_click);? }
private function onItemimg_click(evt:myEvent):void? {? Alert.show(evt.data);? }
<mx:TileList id="tlist" maxColumns="1" x="34" y="10" width="148"? dataProvider="{arrColl_keySetup}" itemRenderer="itemh"? creationComplete="initTileList()">? </mx:TileList>



其實也可以用<mx:itemRenderer>和<mx:Component>標簽來聲明itemRenderer
例如以上代碼可以改為：
<mx:Script>? <![CDATA[? import mx.controls.Image;? import mx.controls.Alert;
public function imgclick(evt:MouseEvent):void? {? var img:Image=evt.currentTarget as Image;
Alert.show(img.data.toString());? }? ]]>? </mx:Script>
<mx:ArrayCollection id="arrColl_keySetup">? <mx:source>? <mx:Array id="arr_keysetup">? <mx:Object data="00" sel="false" label="aaa"/>? <mx:Object data="11" sel="false" label="bbb"/>? <mx:Object data="22" sel="true" label="ccc"/>? </mx:Array>? </mx:source>? </mx:ArrayCollection>
<mx:TileList id="tlist" maxColumns="1"? dataProvider="{arrColl_keySetup}" ? x="34" y="10" width="148">? <mx:itemRenderer>? <mx:Component>? <mx:HBox width="145" height="41" horizontalScrollPolicy="off" verticalScrollPolicy="off">? <mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">? <mx:Image click="this.parentDocument.imgclick(event)"? data="{data.label}" buttonMode="true" source="assets\tx.JPG" width="40"/>? </mx:VBox>? <mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">? <mx:Label text="{data.label}" toolTip="{data.label}"/>? <mx:Image toolTip="點我查看視頻" buttonMode="true"? source="assets\camera.JPG" width="16" height="20"/>? </mx:VBox>? </mx:HBox>? </mx:Component>? </mx:itemRenderer>? </mx:TileList>

再提供2個比較好的例題
http://blog.minidx.com/2008/10/03/1457.html
http://blog.minidx.com/2008/03/09/559.html


收藏與分享 收藏到QQ書簽 添加到百度搜藏 添加到百度搜藏 添加到雅虎收藏 分享到飯否 收藏到就喜歡網絡收藏夾?
RSS訂閱我 什么是RSS? feedsky ? ?http://wap.feedsky.com/aierongrss ? ?E-mail? 訂閱到雅蛙 ? ? ? ?使用RSS郵天下訂閱 ? ?訂閱到有道閱讀? 訂閱到抓蝦 ? ?鮮果閱讀器訂閱圖標 ? ?Add to Google? 訂閱 Bloglines ? ?哪吒提醒 ? ?Subscribe in NewsGator Online
東莞.net俱樂部 東莞.net俱樂部 歡迎您的加入
我的系列文章 A.Sql Server2005 Transact-SQL 新兵器學習? B.MCAD學習? C.代碼閱讀總結? D.ASP.NET狀態管理? E.DB(數據庫)? F.WAP? G.WinForm? H.Flex
我的好文推薦 FlexAir開源版-全球免費多人視頻聊天室,免費網絡遠程多人視頻會議系統((Flex,Fms3聯合開發))<視頻聊天,會議開發實例8>? Sql Server2005 Transact-SQL 新兵器學習總結之-總結? MS SQL數據庫備份和恢復存儲過程(加強版本)? sql server中分布式查詢隨筆(鏈接服務器(sp_addlinkedserver)和遠程登錄映射(sp_addlinkedsrvlogin)使用小總結)? ASP.NET2.0國際化/本地化應用程序的實現總結(多語言,多文化頁面的實現)? WAP開發資料站(最新更新)? 自定義格式字符串隨筆 (IFormattable,IFormatProvider,ICustomFormatter三接口的實現)? Mcad學習筆記之異步編程(AsyncCallback 委托,IAsyncResult接口,BeginInvoke方法,EndInvoke方法的使用小總結)? Mcad學習筆記之通過反射調用類的方法,屬性,字段,索引器(2種方法)? Mcad學習筆記之序列化(2進制和Soap序列 化)? Mcad學習筆記之委托再理解(delegate的構造器,BeginInvoke,EndInvoke,Invoke4個方法的探討)? ASP.NET狀態管理之一（概括篇）? Flex,Fms學習筆記
banner
希望上面提到的知識對您有所提示,同時歡迎交流和指正? 作者:aierong 出處:http://www.cnblogs.com/aierong 貼子以"現狀"提供且沒有任何擔保,同時也沒有授予任何權利! 本文版權歸作者所有,歡迎轉載! 原創技術文章和心得,轉載注明出處!這也是對原創者的尊重!

本文轉自aierong博客園博客，原文鏈接http://www.cnblogs.com/aierong/archive/2009/02/11/ItemRenderer.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的Flex组件的项目渲染器(ItemRenderer)使用总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。