Flex DataGrid Itemrenderer Image not displaying

Question

All, I have a Datagrid with an ItemRenderer assigned to a column which is a Currency column(String). The renderer is mean to display the Flag of the currency eg; for USD it should display a USD flag image etc. At the moment the column is appearing Blank without an image. I have the following renderer (which extends UIComponent). I am dynamically loading the images in the commitProperties() method. At the moment I have hard-coded it to the USD image to get it to work - but no luck. Any help would be greatly appreaciated.

    public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer

    {

    private var _loader:Loader; 
    private var _img:Image;

    public function CenteredEmbedImage()
    {
        super();

    }


    private var _data:Object;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]


    public function get data():Object
    {
        return _data;
    }

    public function set data(value:Object):void
    {
        var newText:*;

        _data = value;

    invalidateProperties();

        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    private var _listData:BaseListData;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]

    public function get listData():BaseListData
    {
        return _listData;
    }


    public function set listData(value:BaseListData):void
    {
        _listData = value;
    }


    override protected function commitProperties():void
    {
        super.commitProperties();

        if (listData)
        {
            // remove the old child if we have one
            if (_img)
                removeChild(_img);

            _img= new Image();

            //source code of the second way 
            _loader = new Loader(); 
            //notice: NOT _loader.addEventListener,is  _loader.contentLoaderInfo.addEventListener 
            _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.source = e.currentTarget.content;}); 
            _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

            addChild(_img);
        }
    }

    override protected function measure():void
    {
        super.measure();

        if (_img)
        {
            measuredHeight = _img.height;
            measuredWidth = _img.width;
        }
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

        if (_img)
        {
            _img.x = (w - _img.width) / 2;
        }
    }

}

}

JeffryHouser JeffryHouser · Accepted Answer · 2010-12-22T14:31:50

It looks like you're doing a lot of things wrong. First, don't remove and re-create the image each time, create it once in the createChildren() method and just change the source property. Second, I don't see you setting the height or width of the image anywhere. Be sure to do that, usually in updateDisplayList. Third, in the measure method I would recommend setting measuredHeight and measuredWidth with the measuredHeight and measuredWidth of the image. I usually use the getExplicitOrMeasuredHeight and getExplicitOrMeasuredWidth methods.

Fourth why are you using a URL Loader? Just use the Image tag and set the source.

This isn't tested code, but I might change your itemRenderer something like this:

      public class CenteredEmbedImage extends UIComponent implements IListItemRenderer,IDropInListItemRenderer

    {

//    private var _loader:Loader; 
    // the image definition here didn't have a access modifier, I added private
    private var _img:Image;

    public function CenteredEmbedImage()
    {
        super();

    }


    private var _data:Object;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]


    public function get data():Object
    {
        return _data;
    }

    public function set data(value:Object):void
    {
//  what is newText for?
//        var newText:*;

        _data = value;
// set the source here, although you could also set this in commitProperties if 
// you wanted to add a change variable
        _img.source = "assets/images/flags/usd.gif"

    invalidateProperties();

        dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
    }

    private var _listData:BaseListData;

    [Bindable("dataChange")]
    [Inspectable(environment="none")]

    public function get listData():BaseListData
    {
        return _listData;
    }


    public function set listData(value:BaseListData):void
    {
        _listData = value;
    }


// I added this method and moved the image creation here
    override protected function createChildren():void{
     super.createChildren()
     _img= new Image();
     addChild(_img);

    }

    override protected function commitProperties():void
    {
        super.commitProperties();

        if (listData)
        {
            // remove the old child if we have one
// removed this segment
//            if (_img)
//               removeChild(_img);

// removed this loader code too
            //source code of the second way 
//            _loader = new Loader(); 
            //notice: NOT _loader.addEventListener,is  // 

// _loader.contentLoaderInfo.addEventListener 
            // _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{_img.sourc// e = e.currentTarget.content;}); 
//            _loader.load(new URLRequest(encodeURI("assets/images/flags/usd.gif"))); 

        }
    }

    override protected function measure():void
    {
        super.measure();

        if (_img)
        {
// instead of using heigh and width here, I used the getExplicitorMEasured methods
            measuredHeight = _img.getExplicitOrMeasuredHeight();
            measuredWidth = _img.getExplicitOrMeasuredWidth()        }
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
        super.updateDisplayList(w, h);

// we created _img in createChildren() so we already iknow it is created
//        if (_img)
//        {

// set the size of the image
            _img.setActualSize(_img.getExplicitOrMeasuredWidth(), _img.getExplicitOrMeasuredHeight();
// setting the position is probably fine
            _img.x = (w - _img.width) / 2;
//        }
    }

}

}

There is a good chance you could make your life a lot easier by just creating an itemRenderer that extended the image class. Something like this:

public class CenteredEmbedImage extends Image{
 public function CenteredEmbedImage(){ 
   super()
 }

 override function set data(value:Object){
   super.data(value);
   this.source = value.imageSource
 }

}

Flex DataGrid Itemrenderer Image not displaying

1 Answers