Flex 4 changes the way we use and customize item renderers for both spark and halo compononets.

There are a few Flex 3 components (Halo) which don't have a Spark corespondent, like AdvancedDataGrid, DataGrid and Tree. For each of these we have have to use a new type of item renderer called MXAdvancedDataGridItemRenderer, MXDataGridItemRenderer and MXTreeItemRenderer respectively. All 3 extend MXItemRenderer which extends ItemRenderer, so they are all highly customizable.

The Spark ItemRender comes with a new set of properties that allows for easy customizing.

autoDrawBackground = true|false When this is true Flex automatically draws the background of the item renderer for all states. This means it will draw the hovered/selected colors by default using the theme color. Set this property to false if you want to prevent this behavior.

You can create your own background by adding a Rect element and customizing the color based on the current state. You can also disable the autodrawing just for one state. For example if you don't want to show the hovered element, but you do want to see the selected element, you can set something like autoDrawBackground.hovered="false" in MXML. If you are not yet familiar with the Flex 4 states you can read about it here.

itemIndex:int This is a very nice addition to the item renderer class. This property is set by the list and it basically tells the item renderer the index of the rendered object in the dataprovider. It doesn't matter if you are reusing item renderers or not, this will always be the absolute position of the data object in the data provider. You can use this to draw alternating background colors or simply customize the renderer based on this property.

selected:Boolean = true|false This property contains true if the current element is selected. Please note that this is different from the state called selected, but when this property is true then the currentState will be selected.

contentBackgroundColor and contentBackgroundAlpha These are the styles that define how the list background will look, for the whole size of the list, not just behind the item renderers. If you don't want the list to have a background you can set the alpha to 0.

rollOverColor and selectionColor If the autoDrawBackground property of the item renderer is true, these are the colors used to draw the background in the hovered and selected states. If the autoDrawBackground property is set to false, you can still use these styles in the renderer to draw the background yourself.

These 3 item renderers were created to be backward compatible with the 3 MX components that were not implemented in Spark. You need to use them as item renderers for their respective components if you want to use spark components inside the item renderer. Since they all inherit from the Spark ItemRenderer class, you can use all the functionality described above.

MXAdvancedDataGridItemRenderer Contains a property called listData with the object to be rendered by the current cell.

MXDataGridItemRenderer Contains a property called dataGridListData with the object to be rendered by the current cell.

MXTreeItemRenderer Contains a property called treeListData of type TreeListData which contains the object to be rendered. This object contains the disclosureIcon, the current indentation level (indent), the renderer icon (icon) and the tree data (label). The item renderer must contain a child called disclosureGroup on which the tree listens for click events to toggle the open/closed states.

So what about TileList ? TileList doesn't exist as a component anymore. The List class supports the new TileLayout which basically transforms your list in a TileList. You can also use HorizontalLayout to make the list horizontal.

So there you have it, Flex 4 clearly simplifies the way you can customize renderers and it should be easier to work with them than with their MX ancestors.