AS3 - Decorator pattern and loading in from the Library

Hi,

I've been following this tutorial:

http://www.as3dp.com/2009/04/26/acti...esign-pattern/

And so far everything is working. However, I want my Concrete class to load in an item from the library (basically the graphic for that item). This works fine when just loading in the Concrete class, but as soon as I add a decorator the graphic disappears, and I'm not sure why.

The code so far is:

My Abstract Class

Code:

---

package todd.flashBook.navigation{
 
    import flash.display.MovieClip;
 
    public class navButton extends MovieClip{
     
        public function navButton():void{
            trace("Nav button Created");
        }
     
    }
 
}

---

Abstract Decorator

Code:

---

package todd.flashBook.navigation{
 
    public class navButtonDecorator extends navButton{
     
        protected var button:navButton;
     
    }
 
}

---

Concrete Class

Code:

---

package todd.flashBook.navigation{
 
    public class prevButton extends navButton{
     
        public function prevButton():void{
            trace("I am a previous button");
        }
     
    }
 
}

---

Concrete Decorator

Code:

---

package todd.flashBook.navigation{
 
    public class pageSkipDecorator extends navButtonDecorator{
     
        public function pageSkipDecorator(buttonRef:navButton){
            this.button = buttonRef;
        }
     
        public function skipToPage(pageNum:Number){
         
            trace("skipping to page");
         
        }
     
    }
 
}

---

Everything works, I can call functions from each, just the graphic goes.

I'm calling the Class like this:

Code:

---

var button = new pageSkipDecorator(new prevButton());

---

I'm pretty sure I understand how the Decorator pattern works (bar the reference to the component in the decorator abstract class), but I'm not sure why the graphic isn't showing. I get no errors either. This seems like a usefl pattern, and I can already think of ways I can use it in future projects, but not without this stumbling block :(

Cheers if anyone can shed some light!

You need to create an instance of the ConcreteComponent first, which is your button and then use addChild
var button:navButton = new prevButton();
addChild (button);
button = new pageSkipDecorator(button);

Amazing, thank you!

Another quick follow up question, when I then trace the width of the button, it comes up 0. Any idea why?

Code:

---

var button:navButton = new prevButton();
addChild (button);
button = new pageSkipDecorator(button);
trace(button.width + "  " + button.height);    // 0 0

---

The reason is probably that button now refers to pageSkipDecorator and that is not a Displayobject.

god of course, that was a bit stupid of me.

I've made the reference to navButton in the Decorator Abstract class public, so I can access it from outside, and it works now with button.button.

Thank you, your help has been amazing :)