Image does not displaying in custom ItemRenderer while dragging list’s item
February 4th, 2010
I’v spent a lot of time today trying to solve one issue. I had TileList and was using custom itemrenderer to display list’s item. My item-renderer had some textfields and image.
Issue: while dragging list’s item – image inside this draggable stuff does not displays. Was trying a lot of different ways, custom TileLists, dragProxies etc, no luck.
So how turned up, problem was with loading this image after dragImage created, actually image seems to be loading, but! does not displays. So solution of this nightmare below:
1. Open custom item-renderer component mxml file
2. find your image tag, and change it to looks like this:
<mx:Image complete="thumbImageLoadComplete(event)" source="{data['thumb']}" width="64" height="64" id="img" scaleContent="true" horizontalCenter="0" />
where is source=”{data['thumb']}” image source that accept url to image(data['thumb']) and complete=”thumbImageLoadComplete(event)” event handler while image loading complete
3. Add this code
private function thumbImageLoadComplete(event:Event):void{ var bp:Bitmap=dupeImage(img.content as Bitmap); img.source = bp; data['thumb'] = dupeImage(bp); } private function dupeImage(source:Bitmap):Bitmap { var data:BitmapData = Bitmap(source).bitmapData; var bitmap:Bitmap = new Bitmap(data); return bitmap; } override public function set data(value:Object):void{ super.data = value; if(data['thumb'] is Bitmap) data['thumb'] = dupeImage(data['thumb']); // we should copy bitmap itself everytime data changes, for example while filtering }
Where dupeImage is function that returns copied Bitmap from image content (source.content), in thumbImageLoadComplete we assign newly copied Bitmap to image source (img.source). And now attention!
data['thumb'] = dupeImage(img);
This line reassign data source value and assign Bitmap (copy of our image) instead using URL to image. Now i should to explain why we made this. By default TileList class using this class ListItemDragProxy for displaying stuff when drag items. If you’ll look inside this class you can see it create instances from your custom itemrenderer class and assign them the same values as in original items. So in code above we force images to use image Bitmap instead or url for loading image.
In this way we solve two problems – first is enabling image displaying(visible) while dragging item, second is preventing image loading second time(bandwidth & time saving)
data['thumb'] = dupeImage(img);



