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 >