Flex中使用渲染器(ItemRenderer)

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

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

<mx:TileList x="0" y="0" width="100%" height="100%" id="faceList" 
    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的格式在自定义的类或组件中去实现，如下：

package
{
    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组件开发聊天表情功能 》这文章里的效果。

 

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