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

I am using a decorator pattern for a small drag and drop language exercise. I have a component class with basic dragdrop funcionality and then I decorate it with sound ,some embellisments(filters) and correct/incorrect feedback(all in diferent concrete decorator classes).

The app works fine but I have found something weird: if I place the objects on the stage before I decorate them, everything goes fine, but if I place them after decorating them I get strange behaviours.

Could we have a post on how to place decorated items on the stage?

Thank you

Curro

Now I want to use a Decorator pattern to add new functionality that is relevant to my Flex app only. So I have an “AbstractBean” class that looks 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

package decorators
{
	public class AbstractBean
	{
		protected var displayName:String;		
 
		public function AbstractBean()
		{
			super();
		}
 
		// Getters / Setters
		public function get DisplayName():String
		{
			return displayName;
		}
 
		public function set DisplayName(aValue:String):void
		{
			displayName = aValue;
		}
	}
}

——————————————
An abstract decorator that looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

package decorators
{
	public class DecorateBean extends AbstractItem
	{
		public function DecorateBean()
		{
			super();
		}
 
		// Getters / Setters for distinction
		public function get DisplayName():String
		{
			return displayName;
		}
 
		public function set DisplayName(aValue:String):void
		{
			displayName = aValue;
		}
	}
}

——————————————
This is what my Concrete Component looks like (this is the Bean that maps one to one to my CFC return object):

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
29
30
31

package model
{
	import decorators.AbstractItem;
 
	[RemoteClass(alias="decorator.cfcdirectory.myBean")]  //tells Flex what CF Object type this is
 
	[Bindable]
	public class Bean extends AbstractBean
	{
		private var _displayName:String;
 
		public function Item()
		{
			_displayName = "";
 
			super();
		}
 
 
		// Getters / Setters
		public function get DisplayName():String
		{
			return _displayName;
		}
 
		public function set DisplayName(aValue:String):void
		{
			_displayName = aValue;
		}
	}
}

——————————————
And finally the Concrete Decorator where I want to add a new Property based on the Display Value:

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
29
30
31
32
33

package decorators
{
	public class ConcreteDecoratorA extends DecorateBean
	{
		private	var _localBean:AbstractBean;
		private	var _aNewValue:String;
 
		public function Decorate_AddDisplayStatus(bn:AbstractBean)
		{
			this._localBean = bn;
 
			super();
		}
 
		override public function set Display(aValue:String):void
		{
			this.NewValue = aValue;
			_localBean.DisplayName = aValue + ' some extra text';
		}
 
 
		public function get NewValue():String
		{
			return _aNewValue;
		}
 
		public function set NewValue(aValue:String):void
		{
			_aNewValue = aValue;
		}
 
	}
}

I am getting nasty errors saying I am overridding classes that can’t be overridden (the actual getter / setter functions). I can get my bean data to populate if I monkey with this but I can never seem to get the “NewValue” to actually populate. Can you point me to an example where somebody does the Decorator with a Bean style concrete component please? I would really like to get this to work. Thanks!!

You will find that some patterns can be combined and others not so much—depending very much on the application. Keep in mind that the pattern is designed to meet development goals and maintain good OOP principles. The important criteria is whether the combinations (of design patterns) work to enhance re-use and change. Sometimes mixing design patterns works fine as you will see in the Model View Controller (MVC), while in other cases the components conflict with one another. My advice is to get the basics of each design pattern first, and then you can experiment with mixing designs if your task requires it.

Kindest regards,
Bill

I am quite new to this amazing world of Design Patterns from a learning view, I was just wondering if you were using say, ‘Simple Factory’ if you were to add a decorate function, eg. decorate(obj:Shape, type:String) could you add this to the factory? Or do you think it should stay within the client.

Thanks for this article!
Josh