在學(xué)習(xí)Flex的過(guò)程中，你可能會(huì)遇到Flex渲染器的概念，這里和大家分享一下Flex渲染器的使用，在Flex要顯示特定的格式完全可以通過(guò)Flex渲染器來(lái)自定義。

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常頻繁，可以讓用戶自行定義數(shù)據(jù)的顯示格式，做過(guò).NET開發(fā)的朋友我想都知道數(shù)據(jù)控件中的ItemTemplate，我個(gè)人認(rèn)為Flex中的Flex渲染器和.NET中的ItemTemplate從功能上來(lái)說(shuō)相差不大，在Flex要顯示特定的格式完全可以通過(guò)Flex渲染器來(lái)自定義。

在《使用TileList+TitleWindowt組件開發(fā)聊天表情功能》這文章里其實(shí)就已經(jīng)用到了Flex渲染器，只是沒有專們提出來(lái)介紹，這里使用的是內(nèi)部ItemRenderer，除此之外我們還可以使用外部ItemRenderer。故名思意內(nèi)部ItemRenderer就是直接嵌套在Flex內(nèi)部的，外部Flex渲染器則是將要顯示的效果通過(guò)外部組件或是外部類來(lái)進(jìn)行定義開發(fā)。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" 
dataProvider="{faceArray}"itemClick="onItemClick(event)"> 
<mx:itemRenderer> 
<mx:Component> 
<mx:Imagesourcemx:Imagesource="{data.ImageUrl}"/> 
</mx:Component> 
</mx:itemRenderer> 
</mx:TileList> 
 

 如上則是使用的內(nèi)部ItemRenderer，通過(guò)<mx:itemRenderer>和<mx:Component>在Flex組件的內(nèi)部定義項(xiàng)目渲染器（ItemRenderer）。如果想使用外部Flex渲染器的方式實(shí)現(xiàn)呢，則需要定義一個(gè)外部Flex渲染器,將Renderer的格式在自定義的類或組件中去實(shí)現(xiàn)，如下：

package  
{  
importmx.core.UIComponent;  
 
publicclassFaceRendererextendsUIComponent  
{  
privatevarimageUrl:Image;  
 
publicfunctionFaceRenderer()  
{  
super();  
}  
 
protectedoverridefunctioncreateChildren():void  
{  
imageUrl=newImage();  
}  
 
protectedoverridefunctioncommitProperties():void  
{  
super.commitProperties();  
imageUrl.source=data.ImageUrl;  
}  
}  
}  
 

 在Flex組件中通過(guò)Flex渲染器屬性引用自定義的外部渲染器就OK了，最終效果就是《使用TileList+TitleWindowt組件開發(fā)聊天表情功能》這文章里的效果。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" 
dataProvider="{faceArray}" 
itemClick="onItemClick(event)" 
itemRenderer="FaceRenderer"> 
</mx:TileList> 

【編輯推薦】

1. 解析Flex組件中Label組件的用法
2. Flex主題創(chuàng)建及支持的樣式設(shè)置方式
3. 全面認(rèn)識(shí)Flex應(yīng)用程序的六大元素
4. 揭開Flex正則表達(dá)式的神秘面紗
5. Flex數(shù)據(jù)綁定及其使用頻繁的幾種情況