load bitmapData into TileList AS3

Question

say I have a bitmap on my stage, and I want to load this bitmap into TileList component. But TileList's dataProvider requests URL links to be passed as a parameter but not bitmapData. How would I do that?

NOTE: I'm loading the bitmapdata from Sqlite database, in which it's stored as byteArray. Oh and I'm using AIR.

Answer 1

You can pass a DisplayObject as the source parameter of a TileList item's. If you have a BitmapData quickest option would be to pass a Bitmap object containing that bitmapData:

for(var i:int = 0 ; i < 10; i++) t.addItem({label:'item '+(i+1),source:new Bitmap(new YourBitapData())});

If you want to do the custom cell renderer route, you can do also do that. The main problem is the UIComponent's getDisplayObjectInstance() method doesn't cater for BitmapData. I imagine you could subclass ImageCell and make the changes needed:

• either by overriding getDisplayObjectInstance() and checking doing something like: if(getQualifiedSuperclassName(classDef) == "flash.display::BitmapData") return new Bitmap(new classDef);
• either by simple adding a Bitmap object based on the source

The simpler, the better though, so I'd recommend trying my 1st suggestion.

Answer 2

I haven't used the fl.controls.TileList, but it seems to use a similar strategy that Flex components use: item renderers.

In this case, the documentation for fl.controls.TileList says:

The default cell renderer for this component is the ImageCell class. An ImageCell cell renderer displays a thumbnail image and a single-line label. To render a list-based cell in a TileList component, use the CellRenderer class.

In your case, what you want is to specify a class that will just take a BitMapData from the dataProvider and use that to display the image.

To use a different class for the renderer, use the TileList's cellRenderer style.

I haven't created a custom cell renderer for the Flash TileList, but here's some links that may help get you started:

• how to create a custom cell renderer for a tile list in flash
• define a custom a cell renderer

A basic approach to creating your own custom renderer would be something like this:

1. Create a new class that extends CellRenderer:

public class CustomRenderer extends CellRenderer
{
    public function CustomRenderer()
    {
        super();
    }
}

2. Override the setter method for the data property of the CellRenderer class:

The TileList component will create a renderer for each element in the dataProvider. It then calls this setter method on each renderer to pass in the data for that element. In this setter, you can get the BitMapData and use that to renderer the image. Below is some untested code, there's probably a nicer way to do this (we have nice shortcuts for this type of stuff in Flex)

override public function set data(value:Object):void
{
    super.data = value;
    if (value != null && value.hasOwnProperty("propertyNameThatContainsBitMapData"))
    {
        var bmData:BitMapData = value["propertyNameThatContainsBitMapData"] as BitMapData;
        if (bmData)
        {
            var g:Graphics = this.graphics;
            g.beginBitMapFill(bmData);
            g.drawRect(0,0,100,100); // use whatever dimensions you want
            g.endFill();
        }
    }
}