Design Patterns in ActionScript–Decorator

snake-3-256x256 When we build some flash applications, we spend most of the time on two things. One is image, the other is text. Eh, I don’t want to talk about the image. Because in most cases, I don’t need to deal with it, it belongs to others. So, I want to talk something about the text.

Sometimes, we want to capitalize all the text, while sometimes we want all of them be lowercased. Sometimes, we want the text color is red, while sometimes is blue. We need to care the case, the color, and more over, the font, or something else.

I’m tried of this thing. I don’t know whether you guys have any idea to solve this trouble. If you have any, please tell to me via the email.

Now, I’ll introduce my solution. Firstly, we need a basic class to implement the basic function.

The basic class’s code is as follows.

class OutputText {
public function write(s:String):void{

After we finish the basic class, let’s consider the other classes. We need to deal with the format in the other classes. So, we can write some classes to wrapper the basic operation. The concrete format class will inherited from the basic class, and override the basic operation. The override function will do some other thing to format the text.

Here is a concrete format class code.

class OutputAppendText extends OutputText {

private var output:OutputText;

public function OutputAppendText(output:OutputText){
this.output = output;

public override function write(s:String):void{
s+=" {APPEND TEXT}";

Here is another concrete format class code.

class OutputLowercaseText extends OutputText {

private var output:OutputText;

public function OutputLowercaseText(output:OutputText){
this.output = output;

public override function write(s:String):void{

As you see, two concrete classes both inherited from the basic class. So, you can use one concrete class to wrap another concrete class without considering the sequence.

Here is the test code.

var output:OutputAppendText = new OutputAppendText(
new OutputLowercaseText(
new OutputText()));

If you want to add some other format, you just need to write some other class just like the classes mentioned.

And the UML diagram is as follows.


In this class hierarchy, there is only one basic class, which defines the basic operations. All the other classes will be inherited from the basic class, and override the basic operations. Every sub class will do something in the override function to implement the concrete operation.

This pattern is called decorator. The GoF’s definition is as follows.

Attach additional responsibilities to an object dynamically. Decorators provide a flexible alternative to subclassing for extending functionality.


This pattern is very useful when you deal with the input/output or formatting the text. The java I/O system is a famous example of this pattern.

Search-256x256 Demo | DownloadDownload Full Project


Share and Enjoy:
  • Digg
  • Facebook
  • Google Bookmarks
  • DZone
  • Reddit
  • Technorati
  • StumbleUpon
  • Twitter
RSS Enjoy this Post? Subscribe to

RSS Feed   RSS Feed     Email Feed  Email Feed Follow us Follow us
You can leave a response, or trackback from your own site.

2 Responses to “Design Patterns in ActionScript–Decorator”

  1. Chris says:

    your example is not a decorator, what you describe is basic inheritance, according to the GoF a decorator “attaches additional responbilities dynamically”, yours does not do that, what if I wanted to both append and lowercase the text? Id have to write a new subclass that combined the functionality of both of your subclasses, the whole point of decorator is to not have to do that.

  2. [...] > Gang of Four (GOF) Design Patterns in ActionScript–Decorator – [...]

Leave a Reply