Home arrow Flash arrow Page 4 - The Decorator Pattern in Action

The Decorator Pattern in Action

In this third part of a six-part series on the Decorator pattern, we move from last week's conceptual example to something more concrete: using the pattern to decorate a paper doll. This article is excerpted from chapter four of ActionScript 3.0 Design Patterns Object Oriented Programming Techniques, written by William B. Sanders and Chandima Cumaranatunge (O'Reilly, 2007 ISBN: 0596528469). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 4 stars4 stars4 stars4 stars4 stars / 7
December 11, 2008
  1. · The Decorator Pattern in Action
  2. · Decorator Class: Dressing the Dolls
  3. · Concrete decorator classes
  4. · Implementing the Paper Doll Decorator

print this article

The Decorator Pattern in Action - Implementing the Paper Doll Decorator
(Page 4 of 4 )

As noted, no interface was created for implementing this application, and so you can see clearly how the concrete component is wrapped by the decorators. Then, on the stage, you can see the effects of the different combinations.

The sequence is:

  1. Instantiate a concrete component.
  2. Wrap the concrete component in the desired decorator instance using the format:

      componentInstance = new DecoratorInstance(componentInstance) 
  3. Apply the getter method (getDressed()) to the concrete component instance initiated to get the fully wrapped values. The values will include those of the concrete component instance and the applied decorations.

Example 4-16 illustrates how to implement the paper doll decorator.

Example 4-16. FashionShow.as

   import flash.display.Loader;
   import flash.net.URLRequest;
   import flash.display.Sprite;
   public class FashionShow extends Sprite
var ensemble:Array=new Array();
      public function FashionShow()
         var doll:Model = new Sue();
         doll=new Hat(doll);
         doll=new OrangeDress(doll);
         //doll=new BlueDress(doll);
         //doll=new Umbrella(doll);
         doll=new Bow(doll);
         doll=new Muff(doll);
         var ready2wear:String=doll.getDressed();
         for (x=0; x < ensemble.length; x++)
      private function sewingMachine(wardrobe:String):Array
         return ensemble;
      private function clothesOn(outfit:String)
var clothier:Loader=new Loader();
         var item:String="clothes/" + outfit + ".gif";
         var getItem:URLRequest=new URLRequest(item);

Once you’ve got everything ready to go, you’ll need some GIF files. The model (concrete component) should be an image of a doll that you will clothe with the Decorator pattern. Each filename needs to be the name of the value assigned to thewhatToWearvariable in the concrete component or decorator listing, minus the tilde (~) character. For example, the concrete component,Sue,whatToWearvariable is assigned the string value “~sue” and so the GIF filename for that component would besue.gif. The decoratorBlueDresshas awhatToWearvalue of “~bluedress,” and so the image with the blue dress would be namedbluedress.gif. Place all the GIF files, including the file representing the doll model, in a folder namedclothes.

Finally, open up a new Flash document and set the stage dimensions to 300 × 650. In the Properties panel’s Document class window, type in FashionShow. The size and shape of your stage will depend on the size of the paper dolls you use.

Figure 4-6 shows two different combinations of decorations on the paper doll. The image on the left decorates with the hat, bow, orange dress, and muff, while the second is the blue dress, the bow and an umbrella. Each appears very different just by changing the combination of decorations.

Figure 4-6.  Paper doll with two different decoration sets

Instead of paper dolls, any component could be decorated with any characteristics. Also, you can include more than a single property or method in a decoration. In the next section, we’ll take a look at adding additional properties with the Decorator design pattern.

Please check back next week for the continuation of this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials