세계의끝과 플래시 원더랜드 » 커맨드 http://ufx.kr/blog Flash + ActionScript & Design Fri, 27 Jan 2012 21:51:23 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Command Pattern 커맨드 패턴을 이용한 history undo 작업취소 기능 구현 http://ufx.kr/blog/330 http://ufx.kr/blog/330#comments Sat, 31 Oct 2009 08:51:14 +0000 세계의끝 http://ufx.kr/blog/?p=330 command_z자바 코드로 된 디자인 패턴 관련 예제를 액션스크립트 코드로 번역하고, 컴파일을 해 보면 “이것은 마치.. 마법같잖아.” 하고 느끼는 때가 많습니다.
최하위에 위치한 구상 클래스로부터 시작해서 대략 한 두번 추상층을 거치고 호스트코드[01] 까지 거슬러 올라가 코드가 어떻게 실행되는지 살펴보면 (물리적으로) 마땅히 그런 결과가 나오는 것이 맞긴한데, 전체 클래스들이 관계한 모양새와 그것들이 보여주는 결과만을 보면 신기하기 이를데 없습니다. 이런 것이 디자인 패턴의 매력이겠죠?

오늘 포스팅하게 될 내용도 그런 신기한 것 중 하나로, 커맨드 패턴을 이용한 작업취소(언두: undo) 또는 작업내역(history) 기능 구현 입니다.
헤드퍼스트 디자인 패턴에 있는 디자인 패턴 부분의 내용을 기본으로 이해하기 좋도록 시각적인 구성을 추가했고, 중요한 기능 중 하나를 추가해 보았습니다.

undo 나 history 기능 자체는 디자인 패턴이 아닙니다. 이 기능은 커맨드 패턴을 구현하다 보면 서비스로 딸려오는 (자연스럽게 구성할 수 있는) 기능 정도로 이해하는 것이 좋습니다.

먼저 최종 결과 파일부터 볼까요?

위의 컴파일 결과물에서 왼쪽은 리모컨 입니다. 각 숫자는 선풍기의 회전수를 나타내는 회전 강도가 되겠고요, 아래쪽에 undo, redo 버튼, 그리고 현재 history 내역이 무엇인지 볼 수 있는 view history 버튼도 만들어져 있습니다.
각각의 버튼을 눌러보세요.

패턴과는 관계 없지만, 화면에서 보이는 선풍기는 정확하게 표현하자면 실링팬 입니다. 더운 지방이 나오는 영화를 보면 천정에서 천천히 돌아가는 선풍기가 바로 이것이죠. 영어 단어로는 ceiling fan 이라 하는데, 직역하자면 천정 선풍기라는 의미가 되겠습니다.
한편 ceil 이라는 단어는 Math 클래스 에서도 볼 수 있죠. Math.ceil( 1.3 ) 의 결과는 소수점 올림이 적용되어 2 가 나오게 되겠죠? 이때 ceil 이라는 의미가 ‘천정’ 또는 ‘올림’ 이라면, floor 는 ‘바닥’ 또는 ‘내림’ 이라는 상대적인 의미로 Math.floor() 에서도 사용됩니다.

ICommand 인터페이스는 이전 커맨드 패턴을 다룬 예제와 전혀 다르지 않습니다.

0
1
2
3
4
5
6

package 
{
	public interface ICommand
	{
		function execute():void
	}
}

아래는 선풍기를 off 한 상태의 커맨드 클래스 입니다. 이렇게 선풍기의 속도를 커맨드 클래스로 만든 클래스가 속도별로 3개가 더 있습니다. (전체 코드는 하단에 다운로드 링크가 있습니다)

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package 
{
	public class CeilingFanOffCommand implements ICommand
	{
		private var ceilingFan:CeilingFan;
 
		public function CeilingFanOffCommand( $ceilingFan:CeilingFan ) 
		{
			this.ceilingFan = $ceilingFan
		}
 
		public function execute():void
		{
			ceilingFan.off();
		}
	}
}

CeilingFan 클래스는 아래와 같습니다. 4가지 속도에 해당하는 메서드를 public 으로 제공하고 있고, 메서드가 실행되면 speed 라는 이름의 변수에 저장하고 있습니다.

0
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

package 
{
	import flash.display.Sprite;
	import flash.events.*;
 
	public class CeilingFan extends Sprite
	{
		private var location:String = "";
		private var speed:int;
		public static const HIGH:int = 3;
		public static const MEDIUM:int = 2;
		public static const LOW:int = 1;
		public static const OFF:int = 0;
 
		public function CeilingFan( $location:String ):void
		{
			this.fan.cacheAsBitmap = true;
			this.location = $location;
			this.speed = OFF;
			this.addEventListener( Event.ENTER_FRAME, onEnterFrameHandler );
		}
 
		public function high():void
		{
			speed = HIGH;
			outputText();
		}
		public function medium():void
		{
			speed = MEDIUM;
			outputText();
		}
		public function low():void
		{
			speed = LOW;
			outputText();
		}
		public function off():void
		{
			speed = OFF;
			outputText();
		}
		public function getSpeed():int
		{
			return speed;
		}
		private function outputText():void
		{
			txtSpeed.text = location + " : Fan Speed - " + speed;
		}
		private function onEnterFrameHandler( e:Event ):void 
		{
			this.fan.rotation += speed;
		}
	}
}

화면에 있는 선풍기의 날개를 속도에 맞게 회전시킬 것이므로 Event.ENTER_FRAME 을 이용해 fla 의 스테이지에 정의 되어 있는 fan 무비클립을 계속 갱신시키고 있습니다. 가장 아래쪽에 있는 onEnterFrameHandler() 메서드에 있는 fan 의 회전속도는 변수 speed 의 숫자값에 따라 달라지겠죠. speed 가 바뀌는 즉시 fan 의 회전속도도 바뀌게 될 것입니다.

그럼 이제 리모컨 클래스를 살펴볼 차례군요.

0
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141

package 
{
	import fl.controls.Button;
	import flash.display.Sprite;
	import flash.events.*;
	import flash.text.*;
 
	public class RemoteControlWithHistory extends Sprite 
	{
		private var arrCommands:Array = new Array();;
		private var commandHistory:Array = new Array();
		private var historyIndex:int;
		private var txtHistory:TextField = new TextField();
 
		public function RemoteControlWithHistory( $ceilingFan:CeilingFan, $numberOfbuttons:uint = 4 )
		{
			var noCommand:ICommand = new NoCommand();
			for ( var i:int = 0; i < $numberOfbuttons; i++ )
			{
				arrCommands[ i ] = noCommand;
			}
 
			var ceilingFanHigh:CeilingFanHighCommand = new CeilingFanHighCommand( $ceilingFan );
			var ceilingFanMedium:CeilingFanMediumCommand = new CeilingFanMediumCommand( $ceilingFan );
			var ceilingFanLow:CeilingFanLowCommand = new CeilingFanLowCommand( $ceilingFan );
			var ceilingFanOff:CeilingFanOffCommand = new CeilingFanOffCommand( $ceilingFan );
 
			setCommand( 0, ceilingFanOff );
			setCommand( 1, ceilingFanLow );
			setCommand( 2, ceilingFanMedium );
			setCommand( 3, ceilingFanHigh );
 
			init( $numberOfbuttons );
		}
 
		private function init( $numberOfbuttons:uint ):void
		{
			this.x = this.y = 10;
 
			for ( var i:uint = 0; i < $numberOfbuttons; i++ )
			{
				var button:Button = new Button();
				button.addEventListener( MouseEvent.CLICK, buttonWasPushed );
				button.label = i.toString();
				button.height = 30;
				button.y = i * ( button.height + 5 );
				addChild( button );
			}
 
			var undoButton:Button = new Button();
			var redoButton:Button = new Button();
			var historylistButton:Button = new Button()
			undoButton.y = 200;
			redoButton.y = 230;
			historylistButton.y = 260;
			undoButton.label = "undo";
			redoButton.label = "redo";
			historylistButton.label = "view history";
 
			undoButton.addEventListener( MouseEvent.CLICK, undoButtonWasPushed )
			redoButton.addEventListener( MouseEvent.CLICK, redoButtonWasPushed )
			historylistButton.addEventListener( MouseEvent.CLICK, historyView );
 
			addChild( undoButton );
			addChild( redoButton );
			addChild( historylistButton );
 
			txtHistory.width = 300;
			txtHistory.height = 300;
			txtHistory.x = historylistButton.width;
			txtHistory.y = historylistButton.y;
			addChild( txtHistory );
 
			//선풍기의 초기값은 정지상태
			this.buttonWasPushed( null );
		}
 
		public function setCommand( $slot:int, $command:ICommand ):void
		{
			arrCommands[ $slot ] = $command;
		}
 
		public function buttonWasPushed( $e:MouseEvent = null ):void
		{
			var slot:uint = ( $e == null ) ? 0 : uint( $e.target.label );
			arrCommands[ slot ].execute();
			stackProcess( arrCommands[ slot ] );
		}
 
		private function stackProcess( $command:ICommand ):void
		{
			//historyIndex가 undo 중일때 undo나 redo가 아닌 새로운 command가 들어올경우 redo 부분이 없어지도록 배열길이를 조정
			commandHistory.length = historyIndex;
			commandHistory.push( $command );
			historyIndex = commandHistory.length;
		}
 
		public function undoButtonWasPushed( $e:MouseEvent = null ):void
		{
			if ( historyIndex > 1 )
			{
				commandHistory[ ( --historyIndex - 1 ) ].execute();
			}
			else
			{
				trace( "No more Undo" )
			}
		}
 
		public function redoButtonWasPushed( $e:MouseEvent = null ):void
		{
			if ( historyIndex < commandHistory.length )
			{
				commandHistory[ historyIndex++ ].execute();
			}
			else
			{
				trace( "No more Redo" )
			}
		}
 
		public function getCommandList():String
		{
			var str:String = "\n------ Remote Control -------"
			for ( var i:int = 0; i < arrCommands.length; i++)
			{
				str += "\n[slot " + i + "] " + arrCommands[i] 
			}
			str += "\n[undo] " + commandHistory
			return str
		}
 
		private function historyView( e:MouseEvent ):void 
		{
			txtHistory.text = "******History list******"
			for each( var element:Object in commandHistory )
			{
				txtHistory.appendText( ( "\n" + element.toString() ) );
			}
		}
	}
}

클래스가 좀 길군요. 하지만 대부분 생성자 함수와 init() 메서드의 초기화 내용들이므로 지나쳐도 무방하고, 실제 커맨드 패턴을 구현한 내용은 setCommand() 메서드 부터 입니다. 이전 두 개의 커맨드 패턴 관련 포스팅을 읽으신 분들은 이 메서드가 리모컨의 각 버튼에[02] 커맨드 객체를 저장해 주는 역할을 한다는 것을 알고 계실겁니다.

setCommand() 메서드 아래에 있는 buttonWasPushed() 메서드 에서는 각 속도가 할당된 버튼을 클릭하면 커맨드 객체를 통해 CeilingFan 객체에 각 속도에 해당하는 메서드를 실행하게 됩니다. 추가로 stackProcess() 메서드를 실행시키고 있는데, stackProcess() 에서는 history undo 기능을 수행할때 필연적으로 만나게 되는 문제에 대한 해결 방법을 제시하고 있습니다.

history undo 실행 중에 만나는 새로운 커맨드에 대한 처리

stackProcess() 메서드가 실행되면 인자로 받은 커맨드 객체를 commandHistory 배열에 넣는 기본 기능을 수행하면서 마지막 라인에서 commandHistory 의 배열 길이를 historyIndex 라는 별도의 변수에 저장합니다. 배열 길이는 언제든 참조가 가능한데 왜 이렇게 하는 것일까요?
stackProcess() 가 그렇게 한번 실행된 후, 두 번째 실행되면 그 이유를 알 수 있습니다.

stackProcess() 메서드의 첫 번째 라인을 보면 commandHistory 의 배열 길이를 강제로 historyIndex 로 맞줘주는 내용이 보입니다. 커맨드 객체가 계속 새로운 커맨드로 진행되는 경우라면 commandHistory.length 와 historyIndex 의 길이는 같을 것이므로[03] 이 코드는 실행되는 듯 마는 듯 지나치게 됩니다만, 만약 현재 상태가 undo 상태라면 이야기는 달라집니다.

이 문제는 모든 history undo 기능이 가지고 있는 공통의 문제라 할 수 있겠는데요, 사용자가 A, B, C, D 의 커맨드를 순서대로 실행하다가 undo 를 두번 했다면 현재는 B가 실행되고 있겠죠? 여기서 사용자가 고맙게도 redo 를 다시 두번 실행해 준다면 좋겠지만, 사용자가 어디 그런가요? 현재 B가 실행되고 있는 상황에서 C을 건너뛰고 D를 선택하는 상황이 발생하게 됩니다.

만약 stackProcess() 에서 push() 만 하는 경우라면 어떻게 될까요? undo 상태의 B위치에서 누른 새로운 D는 commandHistory의 5번째 원소가 될테죠.
commandHistory 를 나열해보면 이렇게 되어있겠네요. [ A, B, C, D, D ].
이것은 우리가 바라는게 아니라는것을 알 수 있습니다. undo 상태에서 redo 가 아닌 새로운 커맨드가 들어올 때, history 를 저장하고 있는 배열에서 redo 가 될 부분은 모두 버리고 새로운 커맨드를 쌓아나가야 하는 것이죠.
그래서 우리가 의도한 [ A, B, D ] 가 되도록 하기 위해서 commandHistory.push( $command ) 를 하기 직전에, 별도로 저장한 historyIndex 로 배열의 길이를 조절해 주는 것입니다.

—

stackProcess() 메서드 아래에는 undoButtonWasPushed() 메서드와 redoButtonWasPushed() 메서드가 있어서 undo나 redo 버튼이 눌렸을때에는 새로운 커맨드를 실행하는 것이 아니라 commandHistory 배열에서 앞뒤로 인덱스를 움직이며 커맨드를 실행해 줍니다.

마지막으로 호스트코드를 살펴보겠습니다. 이쪽은 뭐 간단합니다.
선풍기와 리모컨 객체를 하나씩 만들어 addChild 했을 뿐이네요.

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

package 
{
	import flash.display.Sprite;
 
	public class Main extends Sprite 
	{
		public function Main():void 
		{
			var ceilingFan:CeilingFan = new CeilingFan( "Living Room" )
			ceilingFan.x = 400;
			ceilingFan.y = 200;
			addChild( ceilingFan );
 
			var remoteControl:RemoteControlWithHistory = new RemoteControlWithHistory( ceilingFan, 4 );
			addChild( remoteControl );
 
		}
	}
}

이 예제는 fla 에 있는 이미지 자원을 사용하기 때문에 컴파일도 fla 에서 합니다. 화면에서 모든것을 표현하고 있기 때문에 trace() 대신 화면을 관찰하면 됩니다. 현재 히스토리 현황을 알기 위해서 view history 버튼을 누르세요.

  Command Pattern ( History Undo) 액션스크립트 코드 다운로드 - fla, as, swf 파일 포함. fla 파일은 CS4 에서 작성
  1. 액션스크립트로 말하자면 도큐먼트 클래스 이죠
  2. 정확하게는 커맨드 슬롯을 저장하는 배열에
  3. 아직 commandHistory.push( $command ) 하기 이전이므로
]]> http://ufx.kr/blog/330/feed 4 Command Pattern 커맨드 패턴을 액션스크립트로 컨버팅. 두 번째 – Head First Design Pattern http://ufx.kr/blog/327 http://ufx.kr/blog/327#comments Sat, 08 Aug 2009 20:58:50 +0000 세계의끝 http://ufx.kr/blog/?p=327 commad_center지난 포스트에서는 간단한 형태의 커맨드 패턴에 대해 살펴보았습니다. 이 포스트는 여러가지 커맨드 객체를 조합하여 실제 사용될법한 커맨드 패턴 리모컨을 만들어 보겠습니다.

지난 포스트에서 Light 구상객체를 만들어, LightOnCommand 객체로 감싸고, LightOnCommand 객체를 SimpleRemote 에 setCommand() 메서드를 이용하여 할당 한 후, 필요할 때마다 호출하는것 까지 해 보았습니다.

커맨드 패턴은 이렇게 구상 객체의 메서드를 직접 호출하지 않고, 구상객체를 감싸고 있는 커맨드 객체를 호출하여 캡슐화 한 것입니다. 이렇게 캡슐화를 하게 되면, 새로운 구상객체가 생겨도 리모컨 객체의 코드의 변경 없이 각 기능별로 ICommand 인터페이스를 구현한 커맨드 객체를 만들고 리모컨 객체에 할당하여 호스트코드에서 모두 동일한 명령어로 구상객체의 메서드를 호출할 수 있게되는 장점을 누릴 수 있게 됩니다.


지난 포스트에서는 Light 구상객체를 다뤄보았으니, 이번에는 좀 다른 구상객체를 살펴보겠습니다.

먼저 지난번과 같은 ICommand 인터페이스 입니다.

0
1
2
3
4
5
6

package 
{
	public interface ICommand
	{
		function execute():void
	}
}

Stereo 클래스는 오디오 시스템을 표현하는 구상 클래스 입니다. 단순히 불을 켜고 끄는것이 아니라 여러 가지 기능을 수행하고 있습니다.

0
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
34
35
36
37
38
39
40
41

package 
{
	public class Stereo
	{
		private var location:String;
 
		public function Stereo( $location:String ) 
		{
			this.location = $location
		}
 
		public function on():void
		{
			trace( location , "스테레오 켬" )
		}
 
		public function off():void
		{
			trace( location , "스테레오 끔" )
		}
 
		public function setCD():void
		{
			trace( location , "스테레오에 CD 넣음" )
		}
 
		public function setDVD():void
		{
			trace( location , "스테레오에 DVD 넣음" )
		}
 
		public function setRadio():void
		{
			trace( location , "스테레오에 라디오 켬" )
		}
 
		public function setVolume( $volume:int ):void
		{
			trace( location , "스테레오 볼륨을", $volume, "으로 조정" )
		}
	}
}

StereoOnWithCDCommand 클래스는 ICommand 를 구현하는 커맨드 객체 클래스 입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

package 
{
	public class StereoOnWithCDCommand implements ICommand
	{
		private var stereo:Stereo;
		public function StereoOnWithCDCommand( $stereo:Stereo ) 
		{
			this.stereo = $stereo;
		}
 
		public function execute():void
		{
			stereo.on();
			stereo.setCD();
			stereo.setVolume( 11 );
		}
	}
}

execute() 메서드를 호출하면 스테레오시스템을 켜고, CD를 넣고, 볼륨을 11로 설정하게 됩니다.
StereoOffCommand 는 execute() 메서드 안에 stereo.off() 가 있다는 것만 제외하면 StereoOnWithCDCommand 클래스와 동일한 클래스 입니다.
StereoOffCommand 클래스를 포함한 전체 코드는 아래에서 다운로드 받을 수 있는 링크가 있습니다.

그럼 리모컨 클래스를 어떻게 변했을까요?

0
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
34
35
36
37
38
39
40
41
42
43
44
45
46

package 
{
	public class RemoteControl
	{
		private var onCommands:Array;
		private var offCommands:Array;
 
		public function RemoteControl()
		{
			onCommands = new Array();
			offCommands = new Array();
 
			var noCommand:ICommand = new NoCommand();
			for ( var i:int = 0; i < 7; i++ )
			{
				onCommands[ i ] = noCommand
				offCommands[ i ] = noCommand
			}
		}
 
		public function setCommand( $slot:int, $onCommand:ICommand, $offCommand:ICommand ):void
		{
			onCommands[ $slot ] = $onCommand;
			offCommands[ $slot ] = $offCommand;
		}
 
		public function onButtonWasPushed( $slot:int ):void
		{
			onCommands[ $slot ].execute();
		}
 
		public function offButtonWasPushed( $slot:int ):void
		{
			offCommands[ $slot ].execute();
		}
 
		public function toString():String
		{
			var str:String = "\n------ Remote Control -------"
			for ( var i:int = 0; i < onCommands.length; i++)
			{
				str += "\n[slot " + i + "] " + onCommands[i] + "  " + offCommands[i]
			}
			return str
		}
	}
}

SimpleRemoteControl 에 비해서 코드가 많이 추가되었지만 하는일은 변함이 없습니다. 이번에는 다뤄야 하는 커맨드객체의 숫자가 여러개 이므로 배열로 관리를 하고 있고, on 버튼과 off 버튼을 따로 누르도록 만들었습니다. 어떤 구상객체를 담고 있는 커맨드 객체라 하더라도 리모컨 객체는 아무생각없이 execute() 만 호출하면 되는 것이죠.

호스트 코드는 컨버팅 대상인 자바코드 전체를 번역하였기 때문에 내용이 다소 깁니다만, Stereo 객체만을 눈여겨 보시면 되겠습니다.

0
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

package 
{
	import flash.display.Sprite;
 
	public class Main extends Sprite 
	{
		public function Main():void 
		{
			var remoteControl:RemoteControl = new RemoteControl();
 
			var livingRoomLight:Light = new Light( "거실" );
			var kitchenLight:Light = new Light( "주방" );
			var cellingFan:CeilingFan = new CeilingFan( "거실" )
			var garageDoor:GarageDoor = new GarageDoor( "" );
			var stereo:Stereo = new Stereo( "거실" )
 
			var livingRoomLightOn:LightOnCommand = new LightOnCommand( livingRoomLight );
			var livingRoomLightOff:LightOffCommand = new LightOffCommand( livingRoomLight );
 
			var kitchenLightOn:LightOnCommand = new LightOnCommand( kitchenLight );
			var kitchenLightOff:LightOffCommand = new LightOffCommand( kitchenLight );
 
			var ceilingFanOn:CeilingFanOnCommand = new CeilingFanOnCommand( cellingFan );
			var ceilingFanOff:CeilingFanOffCommand = new CeilingFanOffCommand( cellingFan );
 
			var garageDoorUp:GarageDoorUpCommand = new GarageDoorUpCommand( garageDoor );
			var garageDoorDown:GarageDoorDownCommand = new GarageDoorDownCommand( garageDoor );
 
			var stereoOnWithCD:StereoOnWithCDCommand = new StereoOnWithCDCommand( stereo );
			var stereoOff:StereoOffCommand = new StereoOffCommand( stereo );
 
			remoteControl.setCommand( 0, livingRoomLightOn, livingRoomLightOff );
			remoteControl.setCommand( 1, kitchenLightOn, kitchenLightOff );
			remoteControl.setCommand( 2, ceilingFanOn, ceilingFanOff );
			remoteControl.setCommand( 3, stereoOnWithCD, stereoOff );
 
			trace( remoteControl.toString() );
 
			remoteControl.onButtonWasPushed( 0 );
			remoteControl.offButtonWasPushed( 0 );
			remoteControl.onButtonWasPushed( 1 );
			remoteControl.offButtonWasPushed( 1 );
			remoteControl.onButtonWasPushed( 2 );
			remoteControl.offButtonWasPushed( 2 );
			remoteControl.onButtonWasPushed( 3 );
			remoteControl.offButtonWasPushed( 3 );
		}
	}
}

Stereo 객체를 생성하고 두 개의 커맨드 객체 StereoOnWithCDCommand( stereo ) 와 StereoOffCommand( stereo ) 에 넣어, setCommand 메서드를 이용해서 커맨드 객체를 러퍼런스로 저장하였습니다.
이번 리모컨은 on 버튼과 off 버튼이 따로 있는 리모컨 이므로 사용할 때도 각각의 메서드를 호출하게 됩니다.

실행 결과는 다음과 같습니다.

—— Remote Control ——-
[slot 0] [object LightOnCommand] [object LightOffCommand]
[slot 1] [object LightOnCommand] [object LightOffCommand]
[slot 2] [object CeilingFanOnCommand] [object CeilingFanOffCommand]
[slot 3] [object StereoOnWithCDCommand] [object StereoOffCommand]
[slot 4] [object NoCommand] [object NoCommand]
[slot 5] [object NoCommand] [object NoCommand]
[slot 6] [object NoCommand] [object NoCommand]
거실 불 켜짐
거실 불 꺼짐
주방 불 켜짐
주방 불 꺼짐
거실 선풍기 속도 높음
거실 선풍기 끔
거실 스테레오 켬
거실 스테레오에 CD 넣음
거실 스테레오 볼륨을 11 으로 조정
거실 스테레오 끔

  Command Pattern Example 액션스크립트 코드 다운로드 - 18개의 *.as 파일을 포함하고 있는 zip 파일 입니다. ]]> http://ufx.kr/blog/327/feed 0 Command Pattern 커맨드 패턴을 액션스크립트로 컨버팅 – Head First Design Pattern http://ufx.kr/blog/248 http://ufx.kr/blog/248#comments Thu, 18 Jun 2009 04:42:03 +0000 세계의끝 http://ufx.kr/blog/?p=248 remote_controller헤드퍼스트 디자인 패턴의 제 6 장 커맨드 패턴 입니다. 커맨드 패턴은 객체지향 프로그래밍에서 가장 중요한 패턴 중 하나이므로 최소한의 커맨드 패턴을 적용하여 개념에 대한 이해를 돕는 포스트로부터 시작하여 차근차근 단계를 밟아 몇개의 포스트로 나눠서 작성 하겠습니다. 이 포스트는 그 중 가장 간단한 형태의 커맨드 패턴에 대해 다룹니다.

먼저 커맨드 패턴에 대한 정의를 보겠습니다.

커맨드 패턴 – 커맨드 패턴을 이용하면 요구 사항을 객체로 캡슐화 할 수 있으며, 매개변수를 써서 여러 가지 다른 요구 사항을 집어넣을 수도 있습니다. 또한 요청 내역을 큐에 저장하거나 로그로 기록할 수 도 있으며, 작업취소 기능도 지원 가능합니다.

본문 예제에서는 리모컨을 이용하여 홈 오토메이션을 구현하는 내용을 다루고 있습니다.

커맨드 객체는 모두 같은 인터페이스를 구현 해야 합니다. 커맨드 메서드이기 때문에 메서드 이름은 excute() 가 적당하겠네요.

0
1
2
3
4
5
6

package 
{
	public interface ICommand
	{
		function execute():void
	}
}

그리고 Light 구상 클래스 입니다. 불을 켜고 끄는 기능이 부여 되어있네요.

0
1
2
3
4
5
6
7
8
9
10
11
12
13

package 
{
	public class Light
	{
		public function on():void 
		{
			trace( "불 켜짐" )
		}
		public function off():void 
		{
			trace( "불 꺼짐" )
		}
	}
}

다음은 커맨드 인터페이스를 구현하는 LightOnCommand 클래스 입니다.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package 
{
	public class LightOnCommand implements ICommand
	{
		private var light:Light;
 
		public function LightOnCommand( $light:Light )
		{
			this.light = $light;
		}
 
		public function execute():void
		{
			light.on();
		}
	}
}

생성자에서 Light 객체를 받아 인스턴스 변수로 저장하고 excute() 가 호출되면 객체 내부의 on() 메서드를 호출 하는 역할을 합니다.
불을 켜고 끄려면 LightOffCommand 클래스도 있어야 겠습니다. 포스트 본문에 보여지지 않는 코드들은 가장 아래에서 다운로드 받을 수 있습니다.

그럼 리모컨 클래스를 살펴보겠습니다.
SimpleRemoteControl 객체는 버튼 하나짜리 리모컨이라고 생각하면 됩니다. 다만 그 버튼에 여러가지 커맨드를 할당하고 해지하면서 기능을 실행 하는 것이죠.

0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

package 
{
	public class SimpleRemoteControl
	{
		private var slot:ICommand;
 
		public function setCommand( $command:ICommand ):void
		{
			slot = $command
		}
 
		public function buttonWasPressed():void
		{
			slot.execute();
		}
	}
}

불을 켜는 프로세스를 잠깐 살펴보면, Light 객체를 생성자로 받은 LightOnCommand 객체를 다시 SimpleRemoteControl 에서 setCommand() 메서드를 이용해 슬롯에 장전하고, buttonWasPressed() 메서드를 이용해 실행하고 있는거네요.

호스트 코드에서는 이렇게 사용 합니다.

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

package 
{
	import flash.display.Sprite;
 
	public class Main extends Sprite 
	{
		public function Main():void 
		{
			var remote:SimpleRemoteControl = new SimpleRemoteControl();
			var light:Light = new Light();
			var garageDoor:GarageDoor = new GarageDoor();
			var lightOn:LightOnCommand = new LightOnCommand( light );
			var garageOpen:GarageDoorOpenCommand = new GarageDoorOpenCommand( garageDoor );
 
			remote.setCommand( lightOn );
			remote.buttonWasPressed(); //출력 : 불 켜짐
			remote.setCommand( garageOpen );
			remote.buttonWasPressed(); //출력 : 차고 문 열림
		}
	}
}

위에서 설명한대로 호스트 코드에서는 리모컨과 필요한 구상 객체를 만들고 커맨드 객체에 구상 객체를 할당 합니다. 다시 커맨드 객체를 리모컨 객체에 세팅 한 후 커맨드 객체를 실행 하고, 커맨드 객체는 구상 객체의 메서드를 실행하는 구조를 가지고 있습니다. 문장으로 써 놓고 보면 뭔가 복잡해 보이지만 실제로 코드를 실행해 보면 쉽게 이해할 수 있는 구조로 되어 있죠.

요컨대 구상객체에 직접 명령을 내리지 않고, 중간 매개체인 커맨드 객체가 대신 처리하게 하도록 명령을 캡슐화 한 것입니다. 이렇게 하면 호스트 코드에서는 어떤 기능이 리모컨에 할당되어 있는지 관계 없이 명령을 실행할 때는 커맨드 메서드인 excute() 만 호출하면 되겠죠.

Command (simple) Pattern Example 액션스크립트 코드 다운로드 (152) ]]> http://ufx.kr/blog/248/feed 0