IconItemRender In Flex 4.5.1 With Dynamically Called Icon - apache-flex

Question

Alright, simple item render, or so I thought... I have an some data loaded into a list, one of the fields is project_Type. It's a string that either says "RESIDENTIAL" or "COMMERCIAL". And based on that string, I just want to display a little house, or a little office building as the icon. So, I cobbled together my itemrender as follows:
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="dateAdded"
messageField="builder_Name"
iconFunction="myiconfunction"
iconWidth="48" iconHeight="48"
decorator="#Embed('assets/Right-48x48.png')" >
<fx:Script>
<![CDATA[
// iconFunction="myiconfunction"
// iconWidth="32" iconHeight="32" -->
private function myiconfunction(data:Object):String{
var type:String;
var projectType:String = (data != null) ? data.project_Type : "QUESTION";
if (projectType == "RESIDENTIAL") {
type = "assets/House-48x48.png";
}
else if (projectType == "COMMERCIAL") {
type = "assets/Commercial-48x48.png";
}
else if (projectType == "QUESTION") {
type = "assets/Question-48x48.png";
}
return type;
}
]]>
</fx:Script>
</s:IconItemRenderer>
So, pretty straight forward there... But know custom icon.... No errors either though. What am I doing wrong guys?
Update
So, I changed the item renderer to the following, and still no icon... I've double checked the data and RESIDENTIAL and COMMERCIAL are both being passed...
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="dateAdded"
messageField="builder_Name"
iconFunction="myiconfunction"
iconWidth="48" iconHeight="48"
decorator="#Embed('assets/Right-48x48.png')" >
<fx:Script>
<![CDATA[
[Embed(source="assets/House-48x48.png")]
public var residentialClass:Class;
[Embed(source="assets/Commercial-48x48.png")]
public var commercialClass:Class;
[Embed(source="assets/Question-48x48.png")]
public var questionClass:Class;
private function myiconfunction(data:Object):Object
{
var projectType:String = (data != null) ? data.project_Type : "QUESTION";
if (projectType == "RESIDENTIAL") {
return residentialClass;
}
else if (projectType == "COMMERCIAL") {
return commercialClass;
}
return questionClass;
}
]]>
</fx:Script>
</s:IconItemRenderer>
But alas, nothing...

Answer 1

These Mods usually work for me.
<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
labelField="dateAdded"
messageField="builder_Name"
iconFunction="myiconfunction"
iconWidth="48" iconHeight="48"
decorator="#Embed('assets/Right-48x48.png')" >
<fx:Script>
<![CDATA[
private function myiconfunction(data:Object):String
{
var s:String = data.project_Type; //capture data for case match
switch (s.toUpperCase()) {
case "RESIDENTIAL":
return 'assets/House-48x48.png';
break;
case "COMMERCIAL":
return 'assets/Commercial-48x48.png';
break;
default:
return 'assets/Question-48x48.png';
break;
}
}
]]>
</fx:Script>
</s:IconItemRenderer>

Answer 2

Are you sure your icon is ever getting called? Are you sure the path to the icon is correct? Are you sure the icon assets are being embedded in your compiled app?
Instead of returning the path to the object from your function, I'd probably return a class object, not a string value. In half psuedo-code, something like this, which would be inside the renderer:
<fx:Script>
[Embed(source="assets/House-48x48.png")]
public resientialClass : Class;
[Embed(source="assets/Commercial-48x48.png")]
public commercialClass : Class;
[Embed(source="assets/Question-48x48.png")]
public questionClass : Class;
private function myiconfunction(data:Object):Object
var type:String;
var projectType:String = (data != null) ? data.project_Type : "QUESTION";
if (projectType == "RESIDENTIAL") {
return residentialClass;
}
else if (projectType == "COMMERCIAL") {
return commercialClass;
}
return questionClass;
}
</fx:Script>
Specify the renderer function the same way you do in your original code.

Answer 3

Extend the IconItemRenderer class
package {
import spark.components.IconItemRenderer;
public class CustomIconListItemRenderer extends IconItemRenderer
{
[Embed(source="assets/House-48x48.png")]
public resientialClass : Class;
[Embed(source="assets/Commercial-48x48.png")]
public commercialClass : Class;
[Embed(source="assets/Question-48x48.png")]
public questionClass : Class;
public function CustomIconListItemRenderer()
{
super();
iconFunction = iconFunc;
}
private function iconFunc(data:Object):Object
var type:String;
var projectType:String = (data != null) ? data.project_Type : "QUESTION";
if (projectType == "RESIDENTIAL") {
return residentialClass;
}
else if (projectType == "COMMERCIAL") {
return commercialClass;
}
return questionClass;
}
}
}
So then in your list you can assign it as itemRenderer="renderers.CustomIconListItemRenderer"