Changing Flex itemRenderer at runtime

A few perspectives on managing itemRenderer changes at runtime in AdvancedDataGrid.

The provided examples use Sparkline components and show how to change the item renderer to use a particular Sparkline configuration (in terms of properties and styles).

Flex Sparkline

To illustrate the different points I want to highlight concerning item renderer changes, let’s use Sparklines.

Sparklines, invented by Edward Tufte, are “data-intense, design-simple, word-sized graphics”. They’re often just called micro-charts.

For my examples, I used a Flex Sparkline implementation provided by Graham Odds.

Before discussing item renderer changes, let’s take a look at the different components provided by Graham (Sparkline, ColumnSparkline and TernarySparkline) and how they can be configured in different ways:

Integrating Sparkline in AdvancedDataGrid

Integrating the Sparkline components in an AdvancedDataGrid is easy, just use them as item renderers for your columns.

For this, you just need to define the itemRenderer property of your column.

For example, in MXML:

itemRenderer="com.scottlogic.sparkline.Sparkline"

Note: Don’t forget to use the fully qualified name of your renderer class.

In ActionScript, you would do:

myColumn.itemRenderer = new ClassFactory(Sparkline);

Now, if you want to take benefit of the properties and styles available on Sparkline classes, the easiest using MXML is to define your item renderer inline by using a mx:Component block in which you can define properties and styles according to your needs.

For example:

<mx:AdvancedDataGridColumn headerText="Column"dataField="ColData">
	<mx:itemRenderer>
		<mx:Component>
			<spark:ColumnSparkline>
				<spark:positiveFill>
					<mx:SolidColor color="0x00a700" />
				</spark:positiveFill>
				<spark:negativeFill>
					<mx:SolidColor color="0xff0000" />
				</spark:negativeFill>
				<spark:zeroStroke>
					<mx:Stroke color="0x000000" />
				</spark:zeroStroke>
			</spark:ColumnSparkline>
		</mx:Component>
	</mx:itemRenderer>
</mx:AdvancedDataGridColumn>

In ActionScript, you’d have to use the properties property of the ClassFactory as we’ll see in Changing itemRenderer at runtime using ClassFactory.

The result can be seen in the following example (right click to view source code):

Changing itemRenderer at runtime using mx:Component

We just saw that using an mx:Component block allows to define properties and styles for our item renderers. Now, let’s define multiple configurations and switch to one or the other at runtime.

For this, we declare multiple mx:Component blocks¹ and assign a className to these blocks.

For example:

<mx:Component className="Sparkline1">
	<spark:Sparkline/>
</mx:Component>

<mx:Component className="Sparkline2">
	<spark:Sparkline
		normalRange="[0,9]"
		xMaxMarkerEnabled="true" xMinMarkerEnabled="true"
		yMinMarkerEnabled="true" yMaxMarkerEnabled="true"
	>
</mx:Component>

We can then select the configuration to use at runtime by doing:

myColumn.itemRenderer = new ClassFactory(Sparkline1);

or

myColumn.itemRenderer = new ClassFactory(Sparkline2);

Note: After assigning a new itemRenderer to your column, don’t forget to refresh the AdvancedDataGrid display by calling invalidateDisplayList().

Here’s a complete example (right click to view source code) illustrating this method:

Changing itemRenderer at runtime using ClassFactory

Let’s now use the properties property of the ClassFactory to change our item renderer at runtime.

On any ClassFactory object, the properties property can be used to define property values that must be set on any object generated by the factory.

So, let’s use this to configure our sparkline for example:

var sparkRenderer:ClassFactory = new ClassFactory(Sparkline);

sparkRenderer.properties = { normalRange: [0,5], xMaxMarkerEnabled: true };

Note: the ClassFactory doesn’t support styles definition to be automatically applied on the objects generated by the factory. I have included in the below example, a UIComponentFactory that supports an additional property called styles allowing to do so.

Once you have defined your properties and styles on the factory, just use it as your new item renderer by doing:

myColumn.itemRenderer = sparkRenderer;

Here is a complete example that uses the ClassFactory to change item renderers at runtime (right click to view source code):