Creating a common itemRenderer different data properties

Question

Ok, first let me set the context. I creating a dashboard-like
table where each row represents an object, and the first column of
the table shows the name of the object and subsequent columns are
various dashboard compliance items.
[Name] [Prop A] [Prop B] [Prop C] [Prop D]
Item 1 {graphic) {graphic) {graphic) {graphic)
Item 2 {graphic) {graphic) {graphic) {graphic)
Item 3 {graphic) {graphic) {graphic) {graphic)
Each dashboard cell displays a different graphic based on
that property. There are 6 graphics, so the itemRenderer looks at
the data for that given property, and then translates the #0-#5
into a class reference for 1 of those 6 graphics using the Switch
method.
override public function set data(value:Object):void {
super.data = value;
switch(value.type) {
case 0:
img.source = scanFailed8;
break;
case 1:
img.source = needsScan8;
break;
etc...
So since the calculation is the same for all of these
properties, what I want to do is create a generic itemRenderer
where I can pass in the property name and then use that reference
in the Switch method. My problem is that the Switch method works
fine if it's:
switch(value.PropA)
But in need to set a public variable that can get passed in
to replace that value. I tried this as a string, and that clearly
failed. Can someone help me get through this issue? I really don't
want to have to maintain a separate item renderer for each
property. :)
Thanks.

Answer 1

OK, here it is in all it's infamy....
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox
xmlns:mx="
http://www.adobe.com/2006/mxml"
implements="mx.controls.listClasses.IDropInListItemRenderer"
horizontalAlign="center" verticalAlign="middle"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
preinitialize="preinit()" creationComplete="init()">
<mx:states>
<mx:State name="long">
<mx:SetStyle name="horizontalAlign" value="left"/>
<mx:SetStyle name="paddingLeft" value="10"/>
</mx:State>
<mx:State name="short">
<mx:RemoveChild target="{theLabel}"/>
</mx:State>
</mx:states>
<!--Load classes for image sources -->
<mx:Script source="../Scripts/LoadIcons.as" />
<mx:Script>
<![CDATA[
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridListData;
import flash.events.Event;
[Bindable]
public var showLongFormat:Boolean;
//private var _listData:DataGridListData;
private var _listData:BaseListData;
// Make the listData property bindable.
[Bindable("dataChange")]
// Define the getter method for listData.
public function get listData():BaseListData {
return _listData;
// Define the setter method for listData
public function set listData(value:BaseListData):void {
_listData = value;
public function preinit():void {
// When data changes the handleDataChanged function is
called
addEventListener("dataChange", handleDataChanged);
public function handleDataChanged(event:Event):void {
// Cast listData to DataGridListData object.
var theListData:DataGridListData =
DataGridListData(listData);
// Access information about the data passed to the item
renderer
// and spit out the right image and text.
switch(theListData.label) {
case '0':
theIcon.source = scanFailed8;
theIcon.toolTip = theListData.dataField + ': Scan Failed';
theLabel.text = 'Scan Failed';
break;
case '1':
theIcon.source = needsScan8;
theIcon.toolTip = theListData.dataField + ': Needs
Scanning';
theLabel.text = 'Needs Scanning';
break;
case '2':
theIcon.source = scanning8;
theIcon.toolTip = theListData.dataField + ': Scanning';
theLabel.text = 'Scanning';
break;
case '3':
theIcon.source = noncompliant8;
theIcon.toolTip = theListData.dataField + ': Non-Compliant';
theLabel.text = 'Non-Compliant';
break;
case '4':
theIcon.source = partial8;
theIcon.toolTip = theListData.dataField + ': Partial
Compliance';
theLabel.text = 'Partial Compliance';
break;
case '5':
theIcon.source = compliant8;
theIcon.toolTip = theListData.dataField + ': Compliant';
theLabel.text = 'Compliant';
break;
default:
theIcon.source = notApplicable8;
theIcon.toolTip = 'Not Applicable';
break;
// Check to see if form is 'long' or 'short'
public function init():void {
if (showLongFormat == true) {
currentState='long';
}else{
currentState='short';
]]>
</mx:Script>
<mx:Image id="theIcon" />
<mx:Label id="theLabel" />
</mx:HBox>
That's a lot of code to just stick an image in a cell. Ok, I
guess it does a little more than that. ;-)