One of the key principles of design patterns is loose coupling. The idea behind the Decorator is to vary the responsibilities without subclassing. In that way, you’re able to maintain a loosely coupled relationship that can be used when you need to change or re-use the classes. The class design for the Decorator is very odd because you have a double inheritance; both to abstract classes! However, you want to separate (and vary) the decoration or the component without interfering with the other.

You might want to take a look at this PHP example of a Decorator to give you another angle on it. Also, see this Decorator chapter from the Freeman’s book available free.

Kindest regards,
Bill

public class ConcreteDecoratorA extends Component

is there any specific reasons for this or it is just the structure convention ?

Thanks in advance :D

The request for a decoration is through the Client. The component is wrapped in your decorator, and so you could put some kind of counter variable in your request for a decoration. Not very elegant, but off the top of my head:

1
2
3
4
5
6
7

<snip>
var componentA:Component = new ConcreteComponent();
var decorate1:Decorator = new ConcreteDecorator(componentA);
counter_cA_d1++;
decorate1 = new ConcreteDecorator(componentA);
counter_cA_d1++;
</snip>

Quick and dirty for testing, but it’s easy to clean up. If you need the information in your program for it to perform correctly, think of adding a helper class whose job it is to keep track of decorations and components decorated.

Elogios,
Bill

I was implementing the Decorator pattern in one of my Flex projects when I bounced in something that I don’t know how to solve in a flexible elegant way.

At some point, I wanted to find out how many and which Decorators where “decorating” my Component. I tried to check the runtime instance of the Decorator (something like ‘instanceof’ operator) but it only returns true for the last instantiated Decorator.

The partial solution I found was something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//Decorator
//Abstract class: Do not instantiate
package 
{
	public class Decorator extends Component
	{
		protected var block:Component;
                // we just save a reference to all Decorators
                protected var decoratorsInUse:ArrayCollection = new ArrayCollection();
	}
}
 
//Concrete Decorator
package 
{
	import flash.display.Shape;
 
	public class ConcreteDecorator1 extends Decorator
	{
 
		public function ConcreteDecorator1(block:Component)
		{
			this.block = block;
                        // Add this in every concrete Decorator
                        this.decoratorsInUse.add(this);
		}
        }
}

Okay, now the problem is, AS3 doesn’t have Generics nor Reflection (Java 1.5 advanced functionalities) so I don’t know how to get a specific Decorator instance from the Decorators list. The solution I found was really bad and not flexible.

Anyone have any suggestions on how to do it?

Thanks!

Cheers!

I’ve seen I posted the DragForm class twice instead of the client class:
Here it goes:

package
{
import flash.display.*;
import flash.net.URLRequest;
import flash.media.Sound;
import flash.events.MouseEvent;
import flash.events.IOErrorEvent;
public class Client extends Sprite
{
private var aTargets:Array = [];
private var aDrags:Array = [];

public function Client()
{
var tgt1 = new tg();// a movie clip associated with the Target class
tgt1.x = 100;
tgt1.y = 150;
addChild(tgt1)
aTargets.push(tgt1);

var drag1 = new DragTextQuestion();// DragTextQuestion is a concrete component
drag1.setUp(”nice”, tgt1, new LooseCheck);// We need a word, a target and a check strategy

/******** This is what makes it function properly ****
if I place this code after the decorations things go wrong *****/
drag1.x = drag1.origX = 300;
drag1.y = drag1.origY = 150;
/*******/

// preparing for the sound decorator

var sound = new Sound(new URLRequest(”audio/nice.mp3″));
drag1 = new DrgQSoundDecorator(drag1);
drag1.setSound(sound);

// second decoration (filters)
drag1 = new DrgQFilterDecorator(drag1);

// launch question
drag1.addEventListener(MouseEvent.MOUSE_DOWN, drag1.dragMovie);
drag1.addEventListener(MouseEvent.MOUSE_UP, drag1.dropMovie);

//get the drag into an array for later adding to stage and checking
aDrags.push(drag1);

// Second drag object will have a different checking strategy

var tgt2 = new tg();// a movie clip associated with the Target class
tgt2.x = 100;
tgt2.y = 250;

aTargets.push(tgt2);

var drag2 = new DragTextQuestion();// DragTextQuestion is a concrete component
drag2.setUp(”horrible”, tgt2, new TightCheck);// We need a word, a target and a check strategy

drag2.x = drag2.origX = 300;
drag2.y = drag2.origY = 250;

// preparing for the sound decorator
var sound2 = new Sound(new URLRequest(”audio/horrible.mp3″));
drag2 = new DrgQSoundDecorator(drag2);
drag2.setSound(sound2);

// second decoration (filters)
drag2 = new DrgQFilterDecorator(drag2);

// launch question
drag2.addEventListener(MouseEvent.MOUSE_DOWN, drag2.dragMovie);
drag2.addEventListener(MouseEvent.MOUSE_UP, drag2.dropMovie);

//get the drag into an array for later checking
aDrags.push(drag2);

// Add targets to stage

// set up for checking
checkButton.addEventListener(MouseEvent.CLICK, checkH);

placeTargets();
placeDrags();
}

function checkH(e:MouseEvent)
{
for (var i = 0; i < aDrags.length; i++)
{
if (aDrags[i].correct == false)
{
aDrags[i] = new DrgQWrongDecorator(aDrags[i]);
addChild(aDrags[i]);
}
else
{
aDrags[i] = new DrgQCorrectDecorator(aDrags[i]);
addChild(aDrags[i]);
}

}
}

private function placeTargets()
{
for (var i = 0; i < aTargets.length; i++)
{
addChild(aTargets[i]);
}
}
private function placeDrags()
{
for (var i = 0; i < aDrags.length; i++)
{
addChild(aDrags[i]);
}
}

}
}

here it goes! You will also need two mp3 files named nice.mp3 and horrible.mp3 in a folder named audio. In my app these contain the pronunciation of the words.

You will also need a fla file with a rectanguar movieclip (extending sprite) named “tg” associated with the class Target.

In the real application I have an array of words and one of targets(normally photographs or drawings representing the words).

Thank you for your help and patience

Curro

/*

The component class:

package
{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.*;
import flash.events.Event;
public class DragQuestion extends Sprite
{
protected var initX;
protected var initY;
private var userAnswer:*;
private var answer:*;
private var isRight:Boolean;
private var checkStrategy:CheckStrategy;
private var base:Sprite = new Sprite();

public function setSprite(sprite:Sprite)
{
base = sprite;
addChild(base);
}
public function dragMovie(event:MouseEvent):void
{
this.startDrag();
}

public function dropMovie(event:MouseEvent):void
{
this.stopDrag();
checkTarget();

}
public function setStrategy(checkStrategy:CheckStrategy)
{
this.checkStrategy = checkStrategy;
this.checkStrategy.setTarget(this);

}
public function setTarget(t:*)
{
this.answer = t;
}

public function getAnswer():*
{
return this.answer;
}
public function get origX():Number
{
return initX;
}
public function set origX(n:Number)
{
this.initX = n;
}
public function get origY():Number
{
return initY;
}
public function set origY(n:Number)
{
this.initY = n;
}

public function set correct(b:Boolean)
{
this.isRight = b;
}
public function get correct():Boolean
{
return this.isRight;
}
protected function checkTarget()
{
checkStrategy.checkTarget();
this.isRight = this.isRight;
}

}
}

******************

The Abstract Decorator class:

package
{
import flash.events.MouseEvent;
import flash.media.Sound;

public class DrgQDecorator extends DragQuestion
{
public function setSound(s:Sound):void{}
override public function dragMovie(e:MouseEvent):void{}
override public function dropMovie(e:MouseEvent):void{}
}
}

************

The concrete component class:

package
{
public class DragTextQuestion extends DragQuestion
{
private var word:String;

public function setUp(word:String, target:*, checkStrategy:CheckStrategy)
{
this.word = word;
this.buttonMode = true;
setSprite( new DragForm(word));
setStrategy(checkStrategy);
setTarget(target);
}

}
}

***************

Check strategy interface:

package
{
public interface CheckStrategy
{
function checkTarget():void;
function setTarget(target:Object):void;

}
}

**************
Concrete Strategy 1:

package
{
import flash.geom.*;
public class LooseCheck implements CheckStrategy
{
private var question:DragQuestion;

public function setTarget(target:Object):void
{
this.question = target as DragQuestion;
}
public function checkTarget():void
{
if (question.dropTarget != null)
{
if (question.dropTarget.parent.hasOwnProperty(”isTarget”))
{
if(question.dropTarget.parent == question.getAnswer())
{
question.correct =true;
}
else
{
question.correct =false;
}
question.x = question.dropTarget.parent.x;
question.y = question.dropTarget.parent.y;
}
else
{
question.x = question.origX;
question.y = question.origY;
}
}
else
{
question.x = question.origX;
question.y = question.origY;
question.correct = false;
}
trace(”Is Right?: ” + question.correct);
}

}
}

********************

Concrete Check strategy 2:

package
{
public class TightCheck implements CheckStrategy
{
private var question:DragQuestion;

public function setTarget(target:Object):void
{
this.question = target as DragQuestion;
}
public function checkTarget():void
{

if (question.hitTestObject(question.getAnswer()))
{
question.correct = true;
question.x = question.dropTarget.parent.x;
question.y = question.dropTarget.parent.y;

}
else
{
question.correct = false;
question.x = question.origX;
question.y = question.origY;
}

trace(question.correct);
}

}
}

*********************

Concrete Decorator 1:

package
{
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.net.URLRequest;

public class DrgQSoundDecorator extends DrgQDecorator
{
private var dragQ:DragQuestion;
private var sound:Sound;

public function DrgQSoundDecorator(o:DragQuestion)
{
this.dragQ = o;
addChild(dragQ);

}
override public function dragMovie(e:MouseEvent):void
{

this.dragQ.dragMovie(e);
}
override public function dropMovie(e:MouseEvent):void
{
sound.play();
this.dragQ.dropMovie(e);
}
override public function get correct():Boolean
{
return this.dragQ.correct;
}
override public function setSound(s:Sound):void
{
this.sound = s;
}
}
}

****************

Concrete Decorator 2:

package
{
import flash.events.MouseEvent;
import flash.filters.*;

public class DrgQFilterDecorator extends DrgQDecorator
{
private var dragQ:DragQuestion;
var bevelFilter:BevelFilter = new BevelFilter();
var shadowFilter:DropShadowFilter = new DropShadowFilter();
var glowFilter:GlowFilter = new GlowFilter();

public function DrgQFilterDecorator(o:DragQuestion)
{
this.dragQ = o;
bevelFilter.shadowAlpha =0.5;
bevelFilter.distance = 2;
dragQ.filters = [bevelFilter, shadowFilter];
addChild(dragQ);
}
override public function dragMovie(e:MouseEvent):void
{

glowFilter.color = 0xAA0000;
glowFilter.blurX = 32;
glowFilter.blurY = 32;
glowFilter.strength = .6;

dragQ.filters = [glowFilter];
this.dragQ.dragMovie(e);
}
override public function dropMovie(e:MouseEvent):void
{

this.dragQ.filters =[bevelFilter, shadowFilter];
this.dragQ.dropMovie(e);
}
override public function get correct():Boolean
{
return this.dragQ.correct;
}

}
}

*****************

Concrete Decorator 3:

package
{
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.net.URLRequest;
import flash.display.*;
import flash.geom.Point;
import flash.events.MouseEvent;

//import flash.filters.DropShadowFilter

public class DrgQCorrectDecorator extends DrgQDecorator
{
private var dragQ:DragQuestion;
private var sound:Sound;
var figure:Shape = new Shape();

public function DrgQCorrectDecorator(o:DragQuestion)
{
this.dragQ = o;
addChild(dragQ);
var rect = getBounds(dragQ);
var pt:Point = new Point(rect.x +rect.width – 10, rect.y + 10)
//figure.graphics.beginFill();
figure.graphics.lineStyle(4,0×33CC33);
figure.graphics.moveTo(pt.x,pt.y);
var pt2:Point = new Point(pt.x + 8, pt.y -8);
figure.graphics.lineTo(pt2.x,pt2.y);
var pt3 = new Point(pt.x – 5, pt.y -5);
figure.graphics.moveTo(pt.x, pt.y);
figure.graphics.lineTo(pt3.x, pt3.y);

dragQ.addChild(figure);
trace(”getBounds(dragQ)” + getBounds(dragQ));
trace(”getBounds(this)” + getBounds(this));
this.addEventListener(MouseEvent.MOUSE_DOWN, dragMovie);

}
override public function dragMovie(e:MouseEvent):void
{
try{
dragQ.removeChild(figure);
}
catch(e:Error)
{
}
this.dragQ.dragMovie(e);
}
override public function dropMovie(e:MouseEvent):void
{
this.dragQ.dropMovie(e);

}
override public function get correct():Boolean
{
if(this.dragQ.correct)
{
this.dragQ.removeEventListener(MouseEvent.MOUSE_DOWN, dragMovie);
this.dragQ.buttonMode = false;
}
return this.dragQ.correct;
}

}
}

************************+

Concrete Decorator 4:

package
{
import flash.events.MouseEvent;
import flash.media.Sound;
import flash.net.URLRequest;
import flash.display.*;
import flash.geom.Point;
import flash.events.MouseEvent;

public class DrgQWrongDecorator extends DrgQDecorator
{
private var dragQ:DragQuestion;
private var sound:Sound;
var figure:Shape = new Shape();

public function DrgQWrongDecorator(o:DragQuestion)
{
this.dragQ = o;
addChild(dragQ);

var rect = getBounds(dragQ);
var pt:Point = new Point(rect.x +rect.width – 10, rect.y + 10)
figure.graphics.lineStyle(4,0xFFBB00);
figure.graphics.moveTo(pt.x,pt.y);
var pt2:Point = new Point(pt.x + 8, pt.y -8);
figure.graphics.lineTo(pt2.x,pt2.y);
var pt3 = new Point(pt.x , pt.y-8 );
figure.graphics.moveTo(pt.x+8, pt.y);
figure.graphics.lineTo(pt3.x, pt3.y);

dragQ.addChild(figure);
this.addEventListener(MouseEvent.MOUSE_DOWN, dragMovie);

}
override public function dragMovie(e:MouseEvent):void
{
try{
dragQ.removeChild(figure);
}
catch(e:Error)
{
}
this.dragQ.dragMovie(e);
}
override public function dropMovie(e:MouseEvent):void
{
this.dragQ.dropMovie(e);

}
override public function get correct():Boolean
{
return this.dragQ.correct;
}

}
}

*******************

Target Class:

package
{
import flash.display.Sprite;

public class Target extends Sprite
{
public var isTarget:Boolean = true;
}
}

***************************

Helper class to give form to dragable words:

package
{
import flash.text.*;
import flash.display.Shape;
import flash.display.Sprite;

public class DragForm extends Sprite
{
private var word:String;
private var field:TextField;

public function DragForm(word:String)
{
this.word = word;
display();
}
public function setUp()
{

}

private function display()
{
field = new TextField();
field.multiline = false;
field.selectable = false;

field.autoSize = TextFieldAutoSize.CENTER;
field.type = TextFieldType.DYNAMIC;
field.text = word;
//field.background = true;
//field.border = true;

var format:TextFormat = new TextFormat();
format.font = “Arial”;
format.size = 18;
format.color = 0xFFFFFF;

format.bold = true;
field.setTextFormat(format);

var shape:Shape = new Shape();
var bgColour:uint = 0xCC3300;
shape.graphics.beginFill(bgColour);
shape.graphics.drawRoundRect(- field.width/2 -2, (-field.height/2)-2 ,field.width +4 ,field.height+4 ,30);
shape.graphics.endFill();
addChild(shape);
addChild(field);

field.x = – field.width / 2;
field.y = – field.height / 2;
var theMask = new Sprite();
theMask.graphics.beginFill(0×000000, 0.0);
theMask.graphics.drawRect(-field.width/2,-field.height/2,field.width,field.height);
theMask.graphics.endFill();
addChild(theMask);
}

}
}

********************

finally the client class. It has only two drag questions with a different check strategy each. One(TightCheck) doesn’t let the dragWord on the target unless it is the right one. The other lets it stay on and you see if it is correct with visual clues.

package
{
import flash.text.*;
import flash.display.Shape;
import flash.display.Sprite;

public class DragForm extends Sprite
{
private var word:String;
private var field:TextField;

public function DragForm(word:String)
{
this.word = word;
display();
}
public function setUp()
{

}

private function display()
{
field = new TextField();
field.multiline = false;
field.selectable = false;

field.autoSize = TextFieldAutoSize.CENTER;
field.type = TextFieldType.DYNAMIC;
field.text = word;
//field.background = true;
//field.border = true;

var format:TextFormat = new TextFormat();
format.font = “Arial”;
format.size = 18;
format.color = 0xFFFFFF;

format.bold = true;
field.setTextFormat(format);

var shape:Shape = new Shape();
var bgColour:uint = 0xCC3300;
shape.graphics.beginFill(bgColour);
shape.graphics.drawRoundRect(- field.width/2 -2, (-field.height/2)-2 ,field.width +4 ,field.height+4 ,30);
shape.graphics.endFill();
addChild(shape);
addChild(field);

field.x = – field.width / 2;
field.y = – field.height / 2;
var theMask = new Sprite();
theMask.graphics.beginFill(0×000000, 0.0);
theMask.graphics.drawRect(-field.width/2,-field.height/2,field.width,field.height);
theMask.graphics.endFill();
addChild(theMask);
}

}
}

*/

Okay, now that makes it a lot clearer. So the problem is that the x and y properties are acting strangely. Why not send them and we’ll see what’s going on. Just put them in one big comment, and I’ll break them down so that we can look at the code and figure out what’s going on.

Take care,
Bill

I also forgot to mention that I am using a strategy pattern to implement different types of checking.

Shall I send you or post the files? They are 15 although short!

Thank you again for your time and interest.

Curro

That’s a great question, and no posts are history on this blog. (That’s because, they’re based on topic; not timeframe.) For me, one of the trickiest problems in using ActionScript 3.0 is using the DisplayObjectContainer effectively. Further, this is not just an issue for the Decorator but for all design patterns for both Flash and Flash Builder (Flex).

In looking at the Client class in the above example, I believe that you can find the answer. What is being added to the DisplayObjectContainer (stage) is the “decorated object” not just the “object” and the “decoration” as separate elements.

The Decorator design pattern is the only one I know that has an abstract class that is a subclass. So what I believe you’ve attempted to do and why you’re running into trouble is that you’ve separated the decorator from the component and because the decorator is subclassed from the component, it’s causing a problem with the DisplayObjectContainer. Of course, I’d have to look at the code, but that’s what it sounds like from what you say.

Take a look at the documentation for the DisplayObject and DisplayObjectContainer.

Kindest regards,
Bill