possible to display an arrayCollection of Sprites in a List component?

Question

I have an arrayCollection of objects that extend Sprite, and have bitmaps within them.

I want to display these in a list (or some other component that would allow a user to scroll through them, and see their associated data.)

When I do: myList.dataProvider = myArrayCollection

the list just shows a bunch of lines of [Object, Item] instead of the visual sprites.

Here is a simplified version of my Object:

public class myUIC extends UIComponent
    {

     public var mySprite:Sprite = new Sprite;

     [Embed(source="assets/BGimage.png")]
     public var BGimage:Class;

     public var myBitmap:Bitmap;
     public var wordText:TextField = new TextField;

     public function myUIC(myWord:String)
     {
      this.wordText.text = myWord;
      this.myBitmap = new BGimage;
      this.mySprite.addChild(this.myBitmap);
      this.mySprite.addChild(this.wordText);
      this.addChild(this.mySprite);
     }
    }

Tried many different ways to get it to show up in a List, but can't do it.

Answer 1

Sounds like you may want to try writing a simple item renderer (perhaps based off UIComponent) that adds the associated sprite the display list of the render using addChild().

Answer 2

See this tutorial: Flex Examples - displaying icons in a flex list control

Answer 3

try rawChildren.addChild for adding the Sprite

Answer 4

Here, try using an itemRenderer something like this. It ought to work with any generic DisplayObject. It's grabbing the width and height from the assigned data property, so you might need to set variableRowHeight to true in your actual list for it to work as expected.

package
{
    import flash.display.DisplayObject;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.core.UIComponent;
    import mx.events.FlexEvent;

    /*
    Extending UIComponent means we can add Sprites (or any DisplayObject)
    with addChild() directly, instead of going through the rawChildren property.
    Plus, in this case, we don't need the extra overhead of Canvas's layout code.

    IListItemRenderer lets us use it as a List's itemRenderer. UIComponent already
    implements all of IListItemRenderer except for the data property
    */
    public class SpriteRenderer extends UIComponent implements IListItemRenderer
    {
        // Implementing the data property for IListItemRenderer is really easy,
        // you can find example code in the LiveDocs for IDataRenderer
        private var _data:Object;

        [Bindable("dataChange")]
        public function get data():Object
        {
            return _data;
        }

        public function set data(value:Object):void
        {
            if (value !== _data) {

                // We need to make sure to remove any previous data object from the child list
                // since itemRenderers are recycled
                if (_data is DisplayObject && contains(_data as DisplayObject)) {
                    removeChild(_data as DisplayObject);
                }

                _data = value;

                // Now we just make sure that the new data object is something we can add
                // and add it
                if (_data is DisplayObject) {
                    this.width = (_data as DisplayObject).width;
                    this.height = (_data as DisplayObject).height;

                    addChild(_data as DisplayObject);
                }

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

        public function SpriteRenderer()
        {
            super();
        }
    }
}