Flex itemReanderer(转)
Flex中提供了大量用于數(shù)據(jù)呈現(xiàn)的組件,這其中,以List系列組件最為常見,使用也最頻繁,比如ComBoBox、List、Tree、 TileList、DataGrid等等。這些組件有一個(gè)共同的特性,那就是支持自定義itemRenderer,這個(gè)功能非常強(qiáng)大,能夠幫助我們實(shí)現(xiàn)很 多實(shí)用的功能.
項(xiàng)目渲染器(ItemRenderer)是ListBase類列表控件的重要屬性,我們?cè)谄匠9ぷ髦袝?huì)經(jīng)常自定義項(xiàng)目渲染器以實(shí)現(xiàn)該類控件的特殊顯示效果。
默認(rèn)的項(xiàng)目渲染器取決于組件類。TileList 和 HorizontalList 類使用 TileListItemRenderer;List 類使用 ListItemRenderer。DataGrid 類使用 DataGridColumn 中的 DataGridItemRenderer。
什么是itemRenderer??
itemRenderer,可以理解為數(shù)據(jù)的表現(xiàn)方式,具體地說,是指顯示每一條數(shù)據(jù)時(shí)采用的形式。在使用數(shù)據(jù)處理類組件時(shí),我們只需要把數(shù)據(jù)按照一定的格式組織好,然后賦予給組件,剩下的事就不用費(fèi)心了。?
每一個(gè)組件都有默認(rèn)的itemRenderer,比如List組件:?
List組件默認(rèn)的itemRenderer類似Label組件,只簡(jiǎn)單顯示一行文本。如右圖所示,紅色方框選中的是一個(gè)itemRenderer。?
本質(zhì)上,itemRenderer和其它容器類組件沒有區(qū)別,里面可以包括任意的可視化元素,包括文本、圖片、視頻等,只要是Flex支持的視覺元素,都可以。
自定義itemRenderer?
組件默認(rèn)的itemRenderer都過于簡(jiǎn)單,如果想加強(qiáng)表現(xiàn)力,就必須創(chuàng)建個(gè)性化的itemRenderer。?
自定義itemRenderer有兩種方式:一種是嵌入式,直接寫在組件的標(biāo)簽中,所有的代碼都集中在一個(gè)MXML文件中;另一種是把itemRenderer獨(dú)立出來(lái),形成一個(gè)MXML組件或ActionScript類。
?
看下面圖片,我用TileList控件的自定義ItemRenderer實(shí)現(xiàn)的效果:
?
代碼下載:
http://files.cnblogs.com/aierong/Air_TestWin.rar
?
?
代碼說明:
先自定義一個(gè)名稱為: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="點(diǎn)我查看視頻"? buttonMode="true"?
????????????????? source="assets/camera.JPG" width="16" height="20"? />?
??? </mx:VBox>
</mx:HBox>
?
主調(diào)用應(yīng)用中:
<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,并綁定數(shù)組集合類就可以了。
?
動(dòng)態(tài)指定itemRenderer
利用ClassFactory類可以動(dòng)態(tài)指定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>
?
?
至于怎樣在項(xiàng)目渲染器訪問主調(diào)用應(yīng)用中的成員,可用parentDocument來(lái)引用;?
反過來(lái),主調(diào)用應(yīng)用要訪問項(xiàng)目渲染器中的成員,一般都是通過在項(xiàng)目渲染器先派發(fā)事件,然后在主調(diào)用應(yīng)用中注冊(cè)事件偵聽器來(lái)實(shí)現(xiàn)。
例如:在項(xiàng)目渲染器中點(diǎn)擊圖片事件,然后通知主調(diào)用應(yīng)用
<mx:Image?click="this.parentDocument.imgclick(event)"?
????????????????? data="{data.label}" source="assets/tx.JPG" width="40"/>
在主調(diào)用應(yīng)用中定義:
public?function imgclick(evt:MouseEvent):void?
{?
??? var img:Image=evt.currentTarget as Image;?
??? Alert.show(img.data.toString());?
}
記住得是public的,不同類之間是無(wú)法訪問私有方法的
圖片點(diǎn)擊后效果圖片:
其實(shí)上面的功能也可以用dispatchEvent來(lái)實(shí)現(xiàn)
先定義一個(gè)事件類
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中將事件調(diào)度到事件流中
<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()));?
}
最后在主調(diào)應(yīng)用中監(jiān)聽事件
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>
?
?
?
其實(shí)也可以用<mx:itemRenderer>和<mx:Component>標(biāo)簽來(lái)聲明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="點(diǎn)我查看視頻" buttonMode="true"?
??????????????????????? source="assets/camera.JPG" width="16" height="20"/>?
??????????????? </mx:VBox>?
??????????? </mx:HBox>?
??????? </mx:Component>?
??? </mx:itemRenderer>?
</mx:TileList>
?
再提供2個(gè)比較好的例題
http://blog.minidx.com/2008/10/03/1457.html
http://blog.minidx.com/2008/03/09/559.html
轉(zhuǎn)載于:https://www.cnblogs.com/yangpigao/archive/2012/12/11/2812851.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯,堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的Flex itemReanderer(转)的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: c++ 已声明变量提示未定义
- 下一篇: UltraEdit 使用操作