How do you set ByteArray to IconItemRenderer in Flex 4?

Question

I am having problems setting a ByteArray image to the "iconField" in IconItemRenderer. I think I'm halfway there as to use the "iconFunction", however what should I call to set the image in "iconField"?

Please help! Thank you in advance.

<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/mx"
iconFunction="initializeIcon"
iconWidth="45"
iconHeight="45">

<fx:Script>
    <![CDATA[
    import mx.utils.Base64Decoder;
    private function initializeIcon(data:Object):void
    {
        var imageName:String = data.image; //image is Base64 encoded data from a dynamic array

        var byteArr:ByteArray;
        var base64Dec:Base64Decoder = new Base64Decoder();

        base64Dec.decode(imageName);
        byteArr = base64Dec.toByteArray();

        //set iconField? what should I do from here on.
    }
    ]]>
</fx:Script>
</s:IconItemRenderer>

Answer 1

This code will solve your problem.

<?xml version="1.0"?>
<s:IconItemRenderer xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:component="spark.components.*"
                    iconField='byteArray'>
    <fx:Script>
    <![CDATA[
        import mx.utils.Base64Decoder;

        override public function set data(value:Object):void {
            super.data = value;
            var imageName:String = data.image;
            var base64Dec:Base64Decoder = new Base64Decoder();
            base64Dec.decode(imageName);
            data.byteArray = base64Dec.toByteArray();
        }
        ]]>
</fx:Script>
</s:IconItemRenderer>

Just fyi I think it's not best practice to put decoder into item renderer. I would recommend keep it level above. Also keep in mind that IconItemRenderer is only available for mobile applications.