Writing an ItemRenderer in Actionscript in Flash Builder

Question

I'm trying to write an item renderer (in Flash Builder 4.6) purely in action script, as action script seems to provide a faster and more customisable interface compared to the built in renderers. (Label / Icon etc).

I wanted the list to display an image, and two text fields. Currently it places all these elements on the canvas, but as soon as I begin scrolling (and virtual list takes affect) My old elements are not removed from the stage. Eg: Before Scrolling https://i.sstatic.net/Mk5HX.png After Scrolling https://i.sstatic.net/Qt7wZ.png

Data is stored in name, image, Company and Title.

Any help regarding this issue or in fact a better way to do what I'm trying to do would be greatly appreciated.

Currently I have a class (I've removed the imports etc)

public class UILabel2 extends IconItemRenderer
    {
        public function UILabel2() {
            super();
        }
override public function set data(value:Object):void
        {
            super.data = value;
            var DBname:String = data.name as String;
            var DBimage:String = data.image as String;
            var DBcompany:String = data.Company as String;
            var DBtitle:String = data.Title as String;

            //iconField = location;

            trace(DBname);
            label = DBname;
            messageField = "Peanuts";

            //iconWidth=64;
            //iconHeight=64;
            avatarHolder = new Graphic();
            avatar = new BitmapImage();

            iconField = DBimage;

            avatar.fillMode = "clip";
            avatar.source = DBimage;
            avatarHolder.width = 64;
            avatarHolder.height = 64;

            avatarHolder.addElement( avatar );
            addChild(avatarHolder);

            text2 = new TextField();
            text2.x = textMargin;
            text2.y = 45;
            text2.text = DBcompany;
            addChild(text2);

            var text3:TextField = new TextField();
            text3.x = textMargin;
            text3.y = 25;
            text3.text = DBtitle;
            addChild(text3);
            //trace(listArrow1MED);

            arrowHolder = new Graphic();

            //arrowHolder.width = 20;
            //arrowHolder.height = 20;
            arrowHolder.x= Wsize-40;
            //trace(Wsize);

            arrow = new BitmapImage();



            arrow.fillMode = "clip";
            arrow.source = listArrow1LGE;



            arrowHolder.addElement( arrow );
            addChild(arrowHolder);


            //iconField = avatar;
        }

Answer 1

In order to minimize resource use, Flash recycles ItemRenderers. This means that each ItemRenderer may be constructed once, and then have its data changed multiple times.

What this means in your case is that each time a renderer's data is set, it creates new components (text fields, image) in the renderer.

What you need to do to fix this:

1. Move all of the create component / addElement / addChild code into the constructor.
2. Create variables to store references to those components.
3. In set data, change the data shown by those objects, instead of creating new components.