displaying images from an ArrayCollection in ListItemRenderer in flex

Question

I am facing the following problem, I have an object called "data". It has three properties, one of it being itemRendererData. The "itemRendererData" is an ArrayCollection of objects having many properties one of which is the property "imageURL" (datatype:String).

I am working in flex. I have defined the view and the item renderer properly. The view has the data. I am supposed to get the images from the url specified by imageURL property. In the itemRenderer, I have declared, source

source = {data.itemRendererData.imageURL}

But the images are not being displayed.

Answer 1

Use a the FlexEvent.DATA_CHANGE handler rather than binding, which is actually the proper way to handle this and gives you far more control.

public function CustomItemRenderer() {
    this.addEventListener(FlexEvent.DATA_CHANGE, this.dataChangeHandler);
    this.addEventListener(FlexEvent.CREATION_COMPLETE, this.creationCompleteHandler);
}

private function creationCompleteHandler(e:FlexEvent) {
    if (this.data) {
        this.image.source = this.data.itemRendererData.imageURL;
    }
}

private function dataChangeHandler(e:FlexEvent) {
    if (this.data && this.initialized) {
        this.image.source = this.data.itemRendererData.imageURL;
    }
}

You will notice that I have a handler for FlexEvent.CREATION_COMPLETE as well. This is because the data is actually set before the components are created. So the first time a renderer is loaded, this.image is null and this.image.source will error out.

If that doesn't work, you also need to make sure that the Image / BitmapImage is not a direct child of the renderer. I never did figure out why this was, but adding it as a child of Group fixed that issue where the image was being set but not rendering. Again, I have no idea why this was and I tested for a few hours trying to figure it out.

As an added tip, avoid MXML-based ItemRenderers in mobile applications. They are noticeably slower than pure-AS3 renderers.