Home » Documentation » Flex Item Renderers

Item Renderers

An Item Renderer is a component used by data-driven controls, including lists, for displaying each item of a data provider.

By default, data-driven Flex controls display the data they are given as simple text. Item renderers allow you to customize the display of each item of data. For instance, you may display each item in a list as an image or display each column's cells in a data grid differently.

An item renderer is really just a standard component or custom component that is capable of displaying a data item. For instance, both Label and Image are examples of standard controls that can be item renderers.

Drop-In Item Renderers

A drop-in item renderer is one that can be used (and re-used), generally without configuration.

As the below code shows, a drop-in item renderer can be specified with just its full package/class name (i.e. mx.controls.Image).

   <mx:List itemRenderer="mx.controls.Image" />

Where regular item renderers are generally dedicated to displaying a specific field from the data provider item and cannot be re-used, drop-in item renderers can be re-used because they determine which field to use at run-time.

The following common controls are some examples of drop-in item renderers provided by Flex:

To define a component as a drop-in item renderer or drop-in item editor, it must implement the mx.controls.listClasses.IDropInListItemRenderer interface.

Custom Item Renderers

TODO... link to Tutorial: Create Custom Item Renderers

Inline Item Renderers

An inline item renderer is a custom item renderer declared directly in MXML using the <mx:Component> tag (rather than in its own MXML or ActionScript file).

The example code below shows the MXML definition of a inline item renderer defined in an MXML application using the <mx:Component> tag. It also shows the item renderer being used by a TileList.

   <mx:Component id="ImageRenderer">
      <mx:VBox width="100%" height="140" horizontalAlign="center">
         <mx:Image source="{'assets/'+data.image}"/>
         <mx:Label text="{data.image}" />
      </mx:VBox>
   </mx:Component>
   
   <mx:TileList itemRenderer="{ImageRenderer}" dataProvider="..." />

External Item Renderers

TODO...

Examples