Weird behavior of custom item renderer in Flex 4

Question

I have a class defined like this:

public class Photo
    {
        public 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

score 1 · Answer 1 · answered Dec 28 '10 at 11:10

1

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!

answered Dec 28 '10 at 11:10

Savvas Sopiadis

8,213
10
34
53

Glad to hear you got everything up and running. – Jason Towne Dec 28 '10 at 21:27

score 0 · Answer 2 · answered Dec 27 '10 at 19:52

0

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>

answered Dec 27 '10 at 19:52

Jason Towne

8,014
5
54
69

Hi Jason! If interpret correctly what you say, then i should be able (using the s:ItemRenderer) to bind the image this way But this doesn't work: i 'm getting the same result! But i will try what you suggest...and see what happens! – Savvas Sopiadis Dec 27 '10 at 20:18
Another option would be to try overriding the updateDisplayList method in your ItemRenderer to set the values of your label and image. I'm also assuming your Photo class is [Bindable] correct? – Jason Towne Dec 27 '10 at 21:10
I did some surgery on the server side code (WCF service) and verified that the images are correctly inserted into the DBMS and out of it! I also realized that the last image is always drawn! – Savvas Sopiadis Dec 27 '10 at 21:19
Neither suggestion did work! I don't get it (i have to admit it's my first real world project), but it shouldn't be that tough (or am i wrong?). Try to dig again! Ah!! ...yes the Photo class is [Bindable]! – Savvas Sopiadis Dec 27 '10 at 21:31
Without looking at the rest of your code, I'm not sure what to try next. Perhaps these articles may be of help: http://www.switchonthecode.com/tutorials/flex-tutorial-image-itemrenderer and http://stackoverflow.com/questions/1597105/flex-caching-images-in-list-item-renderer and http://coenraets.org/blog/2010/01/cool-itemrenderers-made-easy-in-flex-4/. – Jason Towne Dec 27 '10 at 23:12

Weird behavior of custom item renderer in Flex 4

2 Answers2