Weird behavior of custom item renderer in Flex 4

I have a class defined like this:

public class Photo
    {
        public 开发者_JAVA技巧function Photo()
        {
        }
        public var PhotoId:int;
        public var Title :String;
        public var Subtitle :String;
        public var PhotoByteArray:ByteArray ;
        public var ThumbnailByteArray:ByteArray;
        public var ShowOnlyInFrontpageTop:Boolean;
        public var ShowInFrontpageGroup:Boolean;
        public var BackgroundColorGradientFrom:String;
        public var BackgroundColorGradientTo:String;
        public var IsActive :Boolean;
    }

I 'm getting diverse objects of this type (Photo) from a WCF service (works fine!). These objects are stored in an ArrayCollection defined like this:

public static var GroupPhotos:ArrayCollection = new ArrayCollection();

I want to show up these photos using a s:List component, like this:

<s:List height="110" id="GroupPhotos" itemRenderer="MyGroupPhotoRenderer">
                <s:layout >
                    <s:HorizontalLayout requestedColumnCount="3"  />
                </s:layout>
            </s:List>

The item renderer is defined this way:

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx" 
                autoDrawBackground="true"
                creationComplete="onItemrenderer_creationCompleteHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.FlexEvent;

            //when the item has been rendered and is ready to be shown the following method will be called
            protected function onItemrenderer_creationCompleteHandler(event:FlexEvent):void
            {               
                img.source =  data.ThumbnailByteArray;
            }

        ]]>
    </fx:Script>

    <s:Group id="PhotoGroup" width="297" height="110" >
        <!--<s:Rect id="imgRectangle" alpha="0" width="95" height="65">
            <s:stroke>
                <s:LinearGradientStroke weight="{GroupBoxBorderWeight}" scaleMode="none"/>
            </s:stroke>
        </s:Rect>-->
        <mx:Image id="img"  
                  width="{PhotoGroup.width}" height="{PhotoGroup.height}" 
                  />
        <s:Label id="title"                  
                 fontSize="20" 
                 text="{data.Title}"/>
    </s:Group>
</s:ItemRenderer>

The s:Label component shows up correctly whereas the mx:Image component shows up always the same image (don't know if this is the first Image or the last in the array). What am i missing? Thanks in advance

Ahhm!!Turns out that this my error! Above i stated that the service is running fine: guess what...it didn't! Fixing the service made the images show up correctly!

Creation complete is only called the first time your renderer is created. Since Flex reuses renderers that means it will only get called the first time. Instead of using creationComplete, override the set data method of your renderer. Unfortunately, s:ItemRenderer doesn't have a set data method, so I'd use a mx:HBox component instead.

Here's a quick example to get you started:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[

            override public function set data(value:Object):void
            {
                super.data = value;

                theLabel.text = value["Title"].toString();
                theImage.source = data.ThumbnailByteArray;

                validateDisplayList();
            }

        ]]>
    </fx:Script>
    <mx:Label id="theLabel" />
    <mx:Image id="theImage" />
</mx:HBox>