The command pattern is a design pattern in which an object is used to represent and encapsulate all the information needed to call a method at a later time.
This information includes the method name, the object that owns the method and values for the method parameters.
Three terms always associated with the command pattern are client, invoker and receiver.
The client instantiates the command object and provides the information required to call the method at a later time. The invoker decides when the method should be called. The receiver is an instance of the class that contains the method's code.
Using command objects makes it easier to construct general components that need to delegate, sequence or execute method calls at a time of their choosing without the need to know the owner of the method or the method parameters.
The example app uses one single command class to generate 3 canvas DisplayObjects to the stage.
In the DesignPatternCommand.mxml file im using the CreationComplete event to kick of the Command sequence.
-
private function onCreationComplete():void
-
{
-
var commandCanvas:Command=new Command();
-
commandCanvas.execute(Command.RED, this);
-
commandCanvas=new Command();
-
commandCanvas.execute(Command.GREEN, this);
-
commandCanvas=new Command();
-
commandCanvas.execute(Command.BLUE, this);
-
}
-
Since its good practice in OOP i also created a interface to program the Command class.
ICommand.as
-
import flash.display.DisplayObjectContainer;
-
-
/**
-
* The interface of command implementation
-
* @author Geirr Winnem
-
*/
-
public interface ICommand
-
{
-
/**
-
* Execute the <code>ICommand</code> logic.
-
* @param canvasColor the canvas color to generate
-
* @param stage DisplayObjectContainer which the canvas is added to.
-
*/
-
function execute(canvasColor:String, stage: DisplayObjectContainer):void;
-
}
-
Finally we have the command class itself which implements the ICommand interface
-
import flash.display.DisplayObjectContainer;
-
-
import mx.containers.Canvas;
-
-
/**
-
* Class implementing the Command pattern
-
* @author Geirr Winnem
-
*/
-
public class Command extends Canvas implements ICommand
-
{
-
/**
-
* Constant value for a red canvas
-
*/
-
public static const RED:String="redCanvas";
-
/**
-
* Constant value for a green canvas
-
*/
-
public static const GREEN:String="greenCanvas";
-
/**
-
* Constant value for a blue canvas
-
*/
-
public static const BLUE:String="blueCanvas";
-
-
/**
-
* Constructor
-
*/
-
public function Command()
-
{
-
super();
-
}
-
-
/**
-
* Execute the <code>ICommand</code> logic.
-
* @param canvasColor the canvas color to generate
-
* @param stage DisplayObjectContainer which the canvas is added to.
-
*/
-
public function execute(canvasColor:String, mainStage:DisplayObjectContainer):void
-
{
-
switch (canvasColor)
-
{
-
case RED:
-
super.setStyle("backgroundColor", 0xff0000);
-
break;
-
case GREEN:
-
super.setStyle("backgroundColor", 0×00ff00);
-
break;
-
case BLUE:
-
super.setStyle("backgroundColor", 0×0000ff);
-
break;
-
}
-
this.width=100;
-
this.height=100;
-
mainStage.addChild(this);
-
}
-
}
-
Example App..
Social comments and analytics for this post…
This post was mentioned on Twitter by gwinnem: New blog posting, #Command design pattern in #actionscript(#as3) with source code – http://tinyurl.com/ycz954y…
I totally agree with you, and that is the correct implementation for the pattern. Just though i would keep it simple for the as3 example. I would never implement it without IUndoable in a real world scenario.
I find the command pattern more useful when the ICommand interface has an undo method (or extends IUndoable, for instance). Then you can execute your commands and add them to an undo manager. Each command just needs to know how to reverse the change it made.