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.

Can you update your post with the code for your List and item renderer? — cliff.meyers, May 24 '09 at 22:17
Incidentally, you can't extend UIComponent with anything but a null-arg constructor. — cliff.meyers, May 24 '09 at 22:19
my List and item renderer are so far from working that it would be pointless to post them here. What I really need is a suggestion of what the code would look like to get an arrayCollection of objects like the one above into a list. I used the arguments on the extended UIComponent, and it seems to be working fine in other places. — Martholomew, May 25 '09 at 14:30

score 1 · Answer 1 · answered May 25 '09 at 08:10

1

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

answered May 25 '09 at 08:10

tst

3,321
1
16
7

score 0 · Answer 2 · answered Jul 21 '09 at 18:19

0

try rawChildren.addChild for adding the Sprite

answered Jul 21 '09 at 18:19

score 0 · Answer 3 · answered Jul 28 '09 at 09:13

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();
        }
    }
}

score 0 · Answer 4 · answered May 23 '09 at 01:41

0

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().

answered May 23 '09 at 01:41

cliff.meyers

17,666
5
51
66

Thanks. More details on how to accomplish that would be very helpful. The problem I am having is that I can't figure out how to get this Sprite object to show up in an mx component. I can't set it as the source for an mx:Image. So what might the code look like to do this? – Martholomew May 23 '09 at 17:10
Try using a simple container such as a Canvas and call its addChild() method passing the Sprite as the argument. It should show up in the upper left corner. – cliff.meyers May 23 '09 at 19:03
Here's what I have, but it doesn't work. Maybe you can offer a suggestion of how to fix it: – Martholomew May 23 '09 at 20:18
the above code returns an error: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject. – Martholomew May 23 '09 at 20:19
and when I do addChild(data as Sprite) it compiles, but then gives an eror at runtime: Type Coercion failed: cannot convert com.myApp::mySpriteClass@22f75ba1 to mx.core.IUIComponent.) – Martholomew May 23 '09 at 20:23
Along with brd6644's answer, these two posts help: http://www.tdotblog.info/?q=node/10 and http://www.streamhead.com/how-to-use-images-in-actionscript-3-with-flashdevelop-and-some-other-as3-tips/ – Martholomew May 23 '09 at 22:54
Can you post the source for your custom sprite class? Or is it too large? – cliff.meyers May 24 '09 at 02:33
I can get it to display in a canvas, but not when I try to put it in a List or a Repeater... public class myUIC extends UIComponent { public var mySprite:Sprite = new Sprite; [Embed(source="assets/BGimage.png")] public var BGimage:Class; public var word:String; public var myBitmap:Bitmap; private 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); } } – Martholomew May 24 '09 at 05:55
Can you post your code in your main post so it's more readable? – cliff.meyers May 24 '09 at 07:11
oops, didn't realize that was possible. :) – Martholomew May 24 '09 at 18:49

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

4 Answers4