Design Patterns in ActionScript–Decorator

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.

1. class OutputText {
2. public   function write ( s : String ) : void {
3. trace ( s ) ;
4. }
5. }

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.

1. class OutputAppendText extends OutputText {
2.  
3. private   var output : OutputText ;
4.  
5. public   function OutputAppendText ( output : OutputText ){
6. this . output = output ;
7. }
8.  
9. public   override function write ( s : String ) : void {
10. s += " {APPEND TEXT} " ;
11. output . write ( s ) ;
12. }
13. }

Here is another concrete format class code.

1. class OutputLowercaseText extends OutputText {
2.  
3. private   var output : OutputText ;
4.  
5. public   function OutputLowercaseText ( output : OutputText ){
6. this . output = output ;
7. }
8.  
9. public   override function write ( s : String ) : void {
10. output . write ( s . toLowerCase ()) ;
11. }
12. }

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.

1. var output : OutputAppendText = new OutputAppendText (
2. new   OutputLowercaseText (
3. new   OutputText ())) ;
4. output . write ( " skfjaslf " ) ;

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.

–By GOF BOOK

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.

Demo | Download Full Project

Enjoy!