解析Flex渲染器的使用-oc渲染器

在学习Flex的过程中，你可能会遇到Flex渲染器的概念，这里和大家分享一下Flex渲染器的使用，在Flex要显示特定的格式完全可以通过Flex渲染器来自定义。

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常频繁，可以让用户自行定义数据的显示格式，做过.NET开发的朋友我想都知道数据控件中的ItemTemplate，我个人认为Flex中的Flex渲染器和.NET中的ItemTemplate从功能上来说相差不大，在Flex要显示特定的格式完全可以通过Flex渲染器来自定义。

在《使用TileList+TitleWindowt组件开发聊天表情功能》这文章里其实就已经用到了Flex渲染器，只是没有专们提出来介绍，这里使用的是内部ItemRenderer，除此之外我们还可以使用外部ItemRenderer。故名思意内部ItemRenderer就是直接嵌套在Flex内部的，外部Flex渲染器则是将要显示的效果通过外部组件或是外部类来进行定义开发。

<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>

如上则是使用的内部ItemRenderer，通过<mx:itemRenderer>和<mx:Component>在Flex组件的内部定义项目渲染器（ItemRenderer）。如果想使用外部Flex渲染器的方式实现呢，则需要定义一个外部Flex渲染器,将Renderer的格式在自定义的类或组件中去实现，如下：

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

在Flex组件中通过Flex渲染器属性引用自定义的外部渲染器就OK了，最终效果就是《使用TileList+TitleWindowt组件开发聊天表情功能》这文章里的效果。

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

【编辑推荐】