當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Flex itemReanderer（转）

發布時間：2024/1/17 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Flex itemReanderer（转）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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實現的效果:

代碼下載：

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的,不同類之間是無法訪問私有方法的

圖片點擊后效果圖片：

其實上面的功能也可以用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: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

轉載于:https://www.cnblogs.com/yangpigao/archive/2012/12/11/2812851.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Flex itemReanderer（转）的全部內容，希望文章能夠幫你解決所遇到的問題。

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