Different ways of assigning an item renderer in Flex 4
This post looks at a couple ways of defining a custom item renderer on a DataGroup, but it also applies the same way to a SkinnableDataContainer, spark List, and any other spark components that support item rendering.
Here is a very basic custom item renderer that simply shows the data item in a spark Label:
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:Label text="{data}" color="red" /> </s:ItemRenderer>
Given this item renderer there are a few ways to assign it to a DataGroup.
External MXML File
If we put this code into a new file called “SimpleItemRenderer.mxml” then we can reference it like so:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:DataGroup itemRenderer="SimpleItemRenderer"> <s:dataProvider> <s:ArrayList> <fx:String>item 0</fx:String> </s:ArrayList> </s:dataProvider> </s:DataGroup> </s:Application>
Using an external MXML file is nice because you can easily reuse that renderer among other components in your project.
If you would rather not create an extra file just for an item renderer you can also define them inline. For example, when I file a bug report I prefer to have the entire application run with a single file rather than deal with packaging up multiple files.
Defining an Inline Item Renderer
This same item renderer can be defined inline using the Component tag:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <s:DataGroup> <s:dataProvider> <s:ArrayList> <fx:String>item 0</fx:String> </s:ArrayList> </s:dataProvider> <s:itemRenderer> <fx:Component> <s:ItemRenderer> <s:Label text="{data}" color="red" /> </s:ItemRenderer> </fx:Component> </s:itemRenderer> </s:DataGroup> </s:Application>
This is possible because of the <fx:Component> tag which defines a new scope within an MXML file.
You can also define an item renderer in the same MXML document in the Declarations tag, defining a className value on the fx:Component, and then reference that class like this:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Declarations> <fx:Component className="MyInlineItemRenderer"> <s:ItemRenderer> <s:Label text="{data}" color="red" /> </s:ItemRenderer> </fx:Component> </fx:Declarations> <s:DataGroup itemRenderer="MyInlineItemRenderer"> <s:dataProvider> <s:ArrayList> <fx:String>item 0</fx:String> </s:ArrayList> </s:dataProvider> </s:DataGroup> </s:Application>
Assigning via ActionScript
If you want to change your renderer at runtime via ActionScript you need to instantiate a ClassFactory. Here is a sample:
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> <fx:Script> <![CDATA[ public function changeItemRenderer():void { group1.itemRenderer = new ClassFactory(MyInlineItemRenderer); } ]]> </fx:Script> <fx:Declarations> <fx:Component className="MyInlineItemRenderer"> <s:ItemRenderer> <s:Label text="{data}" color="red" /> </s:ItemRenderer> </fx:Component> </fx:Declarations> <s:DataGroup id="group1" itemRenderer="spark.skins.spark.DefaultItemRenderer"> <s:dataProvider> <s:ArrayList> <fx:String>item 0</fx:String> </s:ArrayList> </s:dataProvider> </s:DataGroup> <s:Button x="100" click="changeItemRenderer()" label="change item renderer" /> </s:Application>
If your item renderer looks as simple as the sample in this post you probably want to be using the DataRenderer class instead of the ItemRenderer class since it is lighter weight.
Flex 4 introduced the concept of an “item renderer function” that provides the ability to define multiple item renderers within one DataGroup depending on the item. This is accomplished in DataGroup via the itemRendererFunction property. Read more about using the itemRendererFunction property.
Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.
thanks – but the compiler doesn’t seem to like {data}
@Guleesh – Which code snippet isn’t working for you?
Your code does not work.
ItemRenderer in Declarations section can’t be found by Compiler.
does not exist.
@MarcelS
Sorry it maybe works with DataGroup but not with DataGrid
@MarcelS – Yes, this example is for spark components like DataGroup/List/DropDownList/etc. It likely won’t work with mx components like DataGrid, but be able to if you look into using MXItemRenderer instead of ItemRenderer.