Flex中的渲染器(ItemRenderer)使用非常频繁,可以让用户自行定义数据的显示格式,做过.NET开发的朋友我想都知道数据控件中的ItemTemplate,我个人认为Flex中的ItemRenderer和.NET中的ItemTemplate从功能上来说相差不大,在Flex要显示特定的格式完全可以通过ItemRenderer来自定义。
在《使用TileList+TitleWindowt组件开发聊天表情功能 》这文章里其实就已经用到了ItemRenderer,只是没有专们提出来介绍,这里使用的是内部ItemRenderer,除此之外我们还可以使用外部ItemRenderer。故名思意内部ItemRenderer就是直接嵌套在Flex内部的,外部ItemRenderer则是将要显示的效果通过外部组件或是外部类来进行定义开发。
dataProvider = " {faceArray} " itemClick = " onItemClick(event) " >
< mx:itemRenderer >
< mx:Component >
< mx:Image source = " {data.ImageUrl} " />
</ mx:Component >
</ mx:itemRenderer >
</ mx:TileList >
如上则是使用的内部ItemRenderer,通过<mx:itemRenderer>和<mx:Component>在Flex组件的内部定义项目渲染器(ItemRenderer)。如果想使用外部ItemRenderer的方式实现呢,则需要定义一个外部ItemRenderer,将Renderer的格式在自定义的类或组件中去实现,如下:
{
import mx.core.UIComponent;
public class FaceRenderer extends UIComponent
{
private var imageUrl:Image;
public function FaceRenderer()
{
super();
}
protected override function createChildren(): void
{
imageUrl = new Image();
}
protected override function commitProperties(): void
{
super.commitProperties();
imageUrl.source = data.ImageUrl;
}
}
}
在Flex组件中通过ItemRenderer属性引用自定义的外部渲染器就OK了,最终效果就是《使用TileList+TitleWindowt组件开发聊天表情功能 》这文章里的效果。
dataProvider = " {faceArray} "
itemClick = " onItemClick(event) "
itemRenderer = " FaceRenderer " >
</ mx:TileList >