Flex: Introduction to ItemRenderers

A critical thing to know for any Flex programmer performing data-visualization is the itemRenderer. The itemRenderer in Flex can be a tricky beast, however they’re the best way to interact with content within a datagrid, or the various list controls(tileList, horizontalList, etc).

An itemRenderer is basically an object that sits in the list in the place of the default component(For example, the default component of a datagrid is the Label class). Most itemRenderers have access to all data in their row. You can use them to improve the user experience when performing operations on data. You can use either an MXML component or an ActionScript component as an itemRenderer, however the MXML is more straightforward, so we’ll start with this. Here’s a simple example:

Here’s a datagrid with some users populated(creative, I know), now I’ve used an itemRenderer to add my custom button component into the datagrid to delete a user. Here’s the MXML:

<mx:DataGrid dataProvider="{nameArr}">
	<mx:columns>
		<mx:DataGridColumn
			headerText="First Name"
			dataField="firstName"/>
		<mx:DataGridColumn
			headerText="Last Name"
			dataField="lastName"/>
		<mx:DataGridColumn
			itemRenderer="comp.DeleteBtn"/>
	</mx:columns>
</mx:DataGrid>

Please note that a column that contains an itemRenderer does not need a dataField attribute, as it already has access to all dataFields for a particular row. The itemRenderer property contains the path to the class you wish to use in that column. The MXML component comp.DeleteBtn that is used as the itemRenderer looks like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Button xmlns:mx="http://www.adobe.com/2006/mxml"
	label="Delete"
	dataChange="update();"
	click="deleteUser();"
	>

	<mx:Script>

	<![CDATA[

	//The unique Identifier for my user list
	private var UID:int;

	//this function is run whenever the data is updated
	//you cannot rely on the creationComplete event to work if you're using a remoteObject
	private function update():void
		{
		UID = data.uid;
		}

	//this is run whenever the button is clicked
	private function deleteUser():void
		{
		//I would run a remoteObject that deletes this user from my database
		}
	]]>

    </mx:Script>

</mx:Button>

So Flex creates a DeleteBtn object for every row in the datagrid, and each DeleteBtn component has access to that rows data. While the update() function is not required(as you could use data.uid instead of UID) it simply serves as a reminder that you need to be conscious of when the data an itemRenderer is receiving changes. You also cannot use the creationComplete function to perform actions when the data changes, as the itemRenderer is not recreated when a dataChange even occurs.

Here’s Another Example:

In this example I’m summing the columns to make a total, and formatting the result based on its value. In this particular instance the value will turn red if it is below 20, and green otherwise. I used an ActionScript itemRenderer for this one.

package comp
	{
	import mx.controls.Label;

	public class Sum extends Label
		{
		//Constructor
		public function Sum()
			{
			super();
			}
		//You'll need this function to update how the label looks in the datagrid.
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		     {
		     //This runs the default action for refreshing a Label object, you need this.
		      super.updateDisplayList(unscaledWidth,unscaledHeight);

		      //Sum the sales numbers
		      var sum:int = data.popcorn + data.cotton + data.apples;

		      //Assign the labels text property to display the sum
		      text = sum.toString();

		      //Adjust the fontSize and fontWeight
		      setStyle("fontSize",14);
		      setStyle("fontWeight","bold");

		      //////////////////////////////////////////////////
		      //  conditional formatting based on total sales //
		      //////////////////////////////////////////////////

		      //if the total sales is less than 20
		      if(sum > 20)
		      	{
		      	//set the color to green
		      	setStyle("color",0x00AA00);
		      	}
		      else
		      	{
		      	//set the color to red
		      	setStyle("color",0xAA0000);
		      	}
		     }
		}
	}

For the most part you’ll be overriding the updateDisplayList method to change the look of a component using an ActionScript class.

So there’s a tutorial for basic itemRenderers. A more advanced tutorial is to follow.