세계의끝과 플래시 원더랜드 » EventDispatcher 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 AS3.0 클래스 구조의 여러가지 상황에서 부모, 자식 객체의 참조 방법 http://ufx.kr/blog/404 http://ufx.kr/blog/404#comments Mon, 29 Mar 2010 09:35:02 +0000 세계의끝 http://ufx.kr/blog/?p=404 fla 파일의 프레임에 코드를 잔뜩 늘어놓았던 시절에는, 모든 함수와 변수의 스코프가 동일하므로 참조하는 방법에 대한 고민을 거의 하지 않아도 좋았습니다. 말하자면 fla 프레임의 코드는 하나의 클래스이면서, 생성자 함수외에는 존재하지 않는 클래스라고 볼 수 있을겁니다.

그러나 클래스를 이용하여 객체를 생성하는 경우에는 그렇게 단순하게만 돌아가지는 않습니다. 필연적으로, 원하지 않아도 부모 객체와 자식 객체를 생성하게 되는데, 몇 가지 규칙을 알고 있어야만 올바른 객체간 통신을 할 수 있게 됩니다.

이 내용은 AS2.0을 다루던 초보 개발자들이 AS3.0에 와서 가장 먼저 부딪히는 부분이며, 가장 많이 헤메는 부분이기도 합니다. 이제까지 MovieClip 이나 Sprite 객체를 만들어 마우스 클릭 이벤트만 걸고 노는 것에만 익숙했던 분들은 이 포스트를 정독하시면 많은 것을 얻으실 수 있을겁니다. 그런 즉슨 이 포스트는 AS3.0 에 막 입문한 초보분들을 위한 포스트 입니다.

아래에 설명한 방법들은 객체간 통신을 하기 위해 사용하는 여러가지 방법들 입니다. 물론 이 외에도 다른 방법이 있을 수 있습니다만, 가장 사용빈도가 높고 반드시 알아야 하는 몇 가지 방법을 소개하겠습니다.

A. 부모 객체가 자식 객체를 참조

객체간 관계에서 가장 흔한 상황이 되겠습니다. 부모 객체는 다수의 자식 객체를 가질 수 있고, 자식 객체에 public 으로 선언된 변수나 함수에 대해서는 자식 객체의 객체이름을 통하여 참조할 수 있다는것을 모두들 잘 알고 계실겁니다. 코드로 보면 아래와 같죠.
아래는 부모 객체를 생성한 부모 클래스의 코드 입니다.

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

package
{
	import flash.display.Sprite;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var _childInstance:ChildClass = new ChildClass();
			addChild( _childInstance );
			_childInstance.doSomething();
		}
	}
}

아래는 자식 객체를 생성한 자식 클래스의 코드 입니다.

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

package
{
	import flash.display.Sprite;
 
	public class ChildClass extends Sprite
	{
		public function doSomething():void
		{
			trace( "하위 클래스 : do something in ChildClass !!" );
		}
	}
}

B. 자식 객체가 부모 객체를 참조 – 첫 번째 방법

자, 그럼 거꾸로 자식 객체가 부모 객체에 있는 함수나 변수를 참조하려면 어떻게 하면 될까요? 자식 객체에서 parent 키워드를 사용하면 자신을 addChild 한 부모에게 접근할 수 있습니다만, DisplayObject 상속구조상의 메서드, 속성만 사용 가능할뿐 부모 객체에 정의된 것을 사용할 수는 없습니다.
이것의 논리적 원인을 따져보자면 이렇습니다. 우리가 부모, 자식 객체를 맺어주는데 사용한 메서드는 addChild() 입니다. addChild() 메서드는 Sprite 클래스가 바로 윗 단계에서 상속한 DisplayObjectContainer 클래스의 메서드죠. 아래의 레퍼런스 스샷에서 보시는 바와 같이 parent 를 사용해도 반환되어 나오는 것은 DisplayObjectContainer 입니다.

DisplayObjectContainer 의 읽기 전용 속성인 parent. 반환되어 나오는 것도 DisplayObjectContainer.

다시말해, DisplayObject 상속 체인 구조[01] 에서 부모와 자식 객체간의 결합은 DisplayObjectContainer 가 담당하고 있다는 것이죠… 라는 내용은 당연스러운 사실이지만, 무심코 사용한 parent 역시 DisplayObjectContainer 형(type)을 반환 하므로, DisplayObjectContainer 를 상속한 Sprite 도, 그 Sprite 를 상속한 개별 클래스(ParentClass) 역시 DisplayObjectContainer 까지의 메서드, 속성만 사용할 수 있습니다.[02]
약간 어려운가요? 논리적 원인을 따지자니 오히려 어려워진 감이 있는데, 어쨌건 ParentClass 의 메서드나 속성을 사용하기 위해서는 ParentClass로 형 변환을 해줘야 한다는 것만 이해하고 있다면 오케이 입니다.

아래는 부모 객체를 만드는데 사용한 클래스 입니다.

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

package
{
	import flash.display.Sprite;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
		}
 
		public function doSomething():void
		{
			trace( "상위 클래스 : do something in ParentClass !!" );
		}
	}
}

아래는 자식 객체를 만드는데 사용한 클래스 입니다.

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

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			trace( this.parent ); // 출력 : [object ParentClass]
 
			// this.parent 는 DisplayObject 구조의 메서드나 속성만을 사용할 수 있음.
			// 상위 클래스 형(type)으로 형변환(casting:캐스팅) 하면 public 멤버를 사용할 수 있음
			ParentClass( this.parent ).doSomething();
 
			// 아래는 컴파일 에러
			// this.parent.doSomething();
		}
	}
}

trace( this.parent ) 출력 결과에서 보는것과 같이 parent 는 확실히 부모 객체 자체 까지는 참조 가능하지만 parent 가 가리키고 있는 것은 부모 객체의 DisplayObjectContainer 형태이기 때문에 부모 객체의 doSomething() 을 호출하게 되면 컴파일 에러가 발생합니다.
그래서 위와 같이 ParentClass로 형변환을 해야 부모 객체의 메서드를 사용할 수가 있습니다.

또한 형변환은 아래와 같이 할 수도 있습니다.

0
1

var parentInstance:ParentClass = this.parent as ParentClass;
parentInstance.doSomething();

C. 자식 객체가 부모 객체를 참조 – 두 번째 방법

자식 객체에서 부모 객체의 public 메서드를 사용하는 방법은 B 케이스와 같이 형변환 하는 방법 외에도 한가지 더 있습니다. 부모객체가 자식객체에게 부모 객체 자신을 참조할 수 있는 참조(레퍼런스)를 넘겨주는 방법입니다. 아래와 같이 말이죠.

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 ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
 
			// 이렇게 자식 객체에게 this(부모 자신의 객체 레퍼런스)를 넘겨줌
			childInstance.updateParent( this );
		}
 
		public function doSomething():void
		{
			trace( "상위 클래스 : do something in ParentClass !!" );
		}
	}
}
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

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		private var _parent:ParentClass;
 
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		/**
		 * 부모 객체의 레퍼런스를 저장함 (부모 객체에서 호출)
		 * @param	부모객체를 인자로 받아 전역변수에 저장
		 */
		public function updateParent( $parent:ParentClass ):void
		{
			this._parent = $parent;
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			this._parent.doSomething();
		}
	}
}

마치…부모가 통장과 도장과 비밀번호를 자식에게 알려주는 것과 같은 느낌이네요.

D. 자식 객체가 부모 객체에게 이벤트를 보냄

위의 B, C 케이스를 이벤트로 통신을 하는 형태로 바꿔보면 어떨까요? 흔히 사용하는 MouseEvent 도 이에 해당하지만, MouseEvent 같이 사용자의 인터랙션에 의한 이벤트는, 이벤트를 발생하는 객체(dispatcher:디스패쳐)가 하는일이 없는것처럼 보이므로 아래와 같이 일부러 디스패쳐를 사용하는 상황을 구성해보았습니다.

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ParentClass extends Sprite
	{
		public function ParentClass()
		{
			var childInstance:ChildClass = new ChildClass();
			addChild( childInstance );
			childInstance.addEventListener( Event.COMPLETE, animationComplete );
		}
 
		private function animationComplete( $e:Event ):void
		{
			trace( "부모 객체에서 자식 객체에 걸어놓은 Event.COMPLETE 를 캐치함 !!" );
		}
	}
}

자식 객체를 만든 클래스 입니다. 클릭을 하게 되면 객체 자신에게 Event.ENTER_FRAME 을 걸게 되고 매 프레임마다 enterFrameHandler() 핸들러를 실행하게 됩니다. 자세한 내용은 주석을 참고하세요.

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// 클릭을 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.CLICK, clickHandler );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			this.addEventListener( Event.ENTER_FRAME, enterFrameHandler );
		}
 
		private function enterFrameHandler( $e:Event ):void
		{
			// x 가 200이 될 때까지 감속운동 (easeOut)
			this.x += ( 200 - this.x ) * 0.1;
 
			// 200이 되면 엔터프레임을 중단하고 Event.COMPLETE 를 dispatchEvent() 함
			if ( Math.round( this.x ) >= 200 )
			{
				this.removeEventListener( Event.ENTER_FRAME, enterFrameHandler );
				this.dispatchEvent( new Event( Event.COMPLETE ) );
			}
		}
	}
}

실제 작업에서는 이런 종류의 코드를 작성해야 하는 경우가 많을 겁니다. 자식 객체에서 발생한 어떤 상황을 모두 실행한 후, 그 결과를 부모에게 알리고 싶은거죠.

E. 부모 객체가 자식 객체에게 이벤트를 보냄

부모 객체가 자식 객체에게 이벤트를 보낼 경우도 있겠죠? 부모 객체 입장에서는 자식 객체의 public 멤버들은 모두 참조가 가능하므로 자식 객체의 메서드나 변수를 직접 참조하여 데이터를 전달하거나 메서드를 호출할수도 있습니다. 바로 A케이스와 같은거죠.
그러나 A 케이스의 경우 부모 객체가 자식객체의 public 멤버들이 뭔지 알고 있어야 합니다. 물론 Flash(Flex) Builder 나 FlashDevelop, 또는 FDT, 그리고 Flash CS5 같이 코드 힌트를 지원하는 에디터에서는 자식객체가 가지고 있는 public 멤버들을 볼 수 있지만, 여기서 말하는 것은 그런 기능적인 부분을 이야기 하는 것이 아니라 객체지향 프로그래밍에서의 설계 원칙의 문제입니다. 예를 들어보죠.

만약 부모 객체와 자식 객체가 서로 분리되야할 상황이 생겼습니다. A나 B 케이스는 부모 자식객체간에 서로 직접 참조하고 있으므로, 이 두 객체를 만든 클래스가 분리되는 순간 서로를 참조하고 있던 부분은 모두 컴파일 에러가 발생합니다. 이런 것을 보고 두 객체간 강한 결합을 했다고 표현하죠.
한편, D나 E 케이스는 이벤트를 통해 이 결합을 다소 약하게 만들 수 있습니다. 데이터를 이벤트를 통해 전달하고 이벤트를 보냈다고 어떤 행동을 강제하지 않습니다. 이벤트를 보내는 입장에서는 보내는 걸로 역할을 다 한 것이고 받는 입장에서는 받긴 받았지만 이것을 실행할지 말지는 자신이 결정할 수 있기 때문입니다.

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ParentClass extends Sprite
	{
		private var _roundRect:Sprite = new Sprite;
		private var _childInstance:ChildClass = new ChildClass;
 
		public function ParentClass()
		{
			// 클릭을 위한 RoundRect
			_roundRect.graphics.beginFill( 0x996633 );
			_roundRect.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			_roundRect.buttonMode = true;
			_roundRect.addEventListener( MouseEvent.CLICK, clickHandler );
 
			addChild( _roundRect );
 
			addChild( _childInstance );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			// _roundRect 의 MouseEvent.CLICK 를 캐치하면
			// _childInstance 객체에 MouseEvent.ROLL_OUT 이벤트를 보냄
			_childInstance.dispatchEvent( new MouseEvent( MouseEvent.ROLL_OUT ) );
		}
	}
}

부모 객체에서 사용자의 인터랙션에 의해 발생한 MouseEvent.CLICK과는 다른 이벤트를 고르느라 자식 객체에는 MouseEvent.ROLL_OUT 를 보내는 다소 엉뚱한 예제 입니다만, 이벤트는 이렇게도 할 수 있다는것을 보여주는 예시라고 볼 수도 있겠습니다.

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

package
{
	import flash.display.Sprite;
	import flash.events.MouseEvent;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// ChildClass 객체의 존재를 확인하기 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 120, 10, 100, 100, 60 );
 
			this.buttonMode = true;
			this.addEventListener( MouseEvent.ROLL_OUT, rollOutHandler );
		}
 
		private function rollOutHandler( $e:MouseEvent ):void
		{
			trace( "부모 객체가 자식 객체에게 dispatchEvent() 한 MouseEvent.ROLL_OUT 을 캐치함 !!" );
		}
	}
}

부모 객체(왼쪽에 그려진 RoundRect 그림)를 클릭하면 자식 객체에게 MouseEvent.ROLL_OUT 이벤트를 발생시킬수가 있습니다. 또한 자식객체에는 addEventListener( MouseEvent.ROLL_OUT ) 가 걸려 있으므로 자식 객체를 표시한 오른쪽 RoundRect 그림에 마우스를 올렸다가 밖으로 빼도 동일한 이벤트가 발생하게 됩니다.

F. 이벤트 발생위치를 바꿈

E 케이스의 코드는 부모객체가 자식객체에게[03] dispatchEvent() 메서드를 사용한 것이지만, 반대로 부모객체 내부에서 dispatchEvent() 를 하고 자식객체에서 이것을 addEventListener() 할 수도 있습니다.

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
 
	public class ParentClass extends Sprite
	{
		private var _roundRect:Sprite = new Sprite;
		private var _childInstance:ChildClass = new ChildClass;
 
		public function ParentClass()
		{
			// 클릭을 위한 RoundRect
			_roundRect.graphics.beginFill( 0x996633 );
			_roundRect.graphics.drawRoundRect( 10, 10, 100, 100, 60 );
 
			_roundRect.buttonMode = true;
			_roundRect.addEventListener( MouseEvent.CLICK, clickHandler );
 
			addChild( _roundRect );
 
			addChild( _childInstance );
		}
 
		private function clickHandler( $e:MouseEvent ):void
		{
			// 이번에는 부모 객체인 this 에 dispatchEvent() 를 함
			// _childInstance 객체에서 addEventListener() 하고 있건 말건 무조건 이벤트가 발생
			this.dispatchEvent( new Event( Event.SELECT ) );
		}
	}
}

아래는 자식 객체를 만드는 클래스 입니다. 자세한 내용은 주석을 참고하세요.

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

package
{
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class ChildClass extends Sprite
	{
		public function ChildClass()
		{
			// ChildClass 객체의 존재를 확인하기 위한 RoundRect
			this.graphics.beginFill( 0x336699 );
			this.graphics.drawRoundRect( 120, 10, 100, 100, 60 );
 
			// 이 객체가 addChild() 되면 핸들러 실행
			// 즉, 어떤 객체의 자식 객체가 된 상황
			this.addEventListener( Event.ADDED, addedHandler );
		}
 
		private function addedHandler( $e:Event ):void
		{
			// 어떤 부모 객체인지는 모르겠지만 부모 객체에 addEventListener() 를 걸어놓음
			// addEventListener() 는 ParentClass 형(type)이 아니더라도 사용할 수 있으므로 캐스팅이 필요 없음
			this.parent.addEventListener( Event.SELECT, selectHandler );
		}
 
		private function selectHandler( $e:Event ):void
		{
			trace( "부모 객체의 이벤트를 자식 객체에서 캐치함 !!" );
		}
	}
}

또는 반대로, 자식 객체에서 this.addEventListener() 하지 않고, 부모객체에서 이벤트가 일어나도록this.parent.dispatchEvent() 한 후, 부모객체가 this.addEventListener() 까지 하게 할 수도 있습니다. 이벤트가 발생(dispatchEvent)하는 위치만 다를뿐 부모, 자식 객체간은 서로를 자유롭게 참조할 수 있으므로 addEventListener() 메서드는 어디나 걸어 놓을 수 있는 것이죠.

이렇게 부모, 자식 객체간의 여러가지 상황에서 서로를 참조하는 방법에 대해 알아보았습니다. 어떤 방법이 절대적으로 옳지 않으므로 상황에 따라 적절하게 사용하면 됩니다. 또한, 어떤 방법이 절대적으로 옳은건 아니지만, 모든 방법을 제대로 이해하고 있어야 합니다. 그 만큼 객체 지향 프로그래밍에서 가장 기초적이고 중요한 내용입니다.

이해가 잘 안되는 케이스가 있다면, 빈 fla 파일에 ParentClass 를 도큐먼트 클래스로 설정하고 컴파일을 해 보세요.

* * *

만약 이벤트와 함께 데이터를 보내야 할 필요가 있을 경우에는 커스텀 이벤트를 사용하면 됩니다. 커스텀 이벤트는 이 포스트의 범위를 벗어나는 내용이므로 “이벤트에 뭔가 같이 보내보자 – 커스텀 이벤트 만들고 사용해보기” 를 읽어보시기 바랍니다.

또한, 객체간 더욱 약한 결합을 구현하기 위한 별도의 방법으로는 옵저버 디자인 패턴을 이용하는 방법이 있습니다. “Observer Pattern 옵저버 패턴 – 이벤트 디스패처를 이용해 구현” 을 참고하세요.

이 포스트는 부모, 자식 객체간 참조 방법을 다룬 글이었습니다. 객체가 아닌 상위 클래스와 하위 클래스의 참조 방법에 대한 글 “AS3.0 클래스의 상속(extends)구조에서 상위, 하위 클래스의 메서드 호출방법” 도 초보 개발자 여러분들에게 많은 도움이 될 것입니다.

  1. Object – EventDispatcher – DisplayObject – InteractiveObject – DisplayObjectContainer – Sprite
  2. Object, EventDispatcher, DisplayObject, InteractiveObject, DisplayObjectContainer 의 메서드, 속성만 사용할 수 있고, Sprite 이하의 메서드, 속성은 사용할 수 없습니다.
  3. 즉, 자식객체의 입장에서 보면 this.dispatchEvent() 된 것입니다.
]]> http://ufx.kr/blog/404/feed 28 Observer Pattern 옵저버 패턴 – 이벤트 디스패처를 이용해 구현 http://ufx.kr/blog/233 http://ufx.kr/blog/233#comments Sun, 07 Jun 2009 19:59:17 +0000 세계의끝 http://ufx.kr/blog/?p=233 bubble지난 옵저버 패턴과 커스텀 이벤트에 대한 포스트에서 AS3.0 의 이벤트 시스템이 옵저버 패턴과 밀접한 관련이 있다고 하였는데요, 이번에는 trace 만 찍지 않고, 실제 액션스크립트로 비주얼 하게 구현을 해 보도록 하겠습니다.

요건은 다음과 같습니다.

  • AS3.0 의 이벤트 디스패처를 이용할 것.
  • 화면에 그래픽 객체가 각자 움직이다가 마우스 클릭을 하면 한 지점으로 모인다.
  • 다시 한번 클릭하면 그래픽 객체들이 다시 각자 움직인다.

옵저버 패턴이므로 등장인물 3인이 필요하겠습니다.

  1. 주제 객체
    이벤트 디스패처 (EventDispatcher) 가 주제 역할을 하게 됩니다. 이벤트 시스템의 중심에서 이벤트를 전파하는 역할을 하고 있죠.
  2. 옵저버 객체
    여기서는 화면에서 움직이는 그래픽 객체가 옵저버 입니다. 옵저버들은 평소에는 다른 기능을 하다가[01] 이벤트가 발생하면 지정된 곳으로 모이게 됩니다.
  3. 인포 객체
    이벤트 디스패처가 옵저버 들에게 전달하는 Event 내부에 같이 실어 보내는 데이터가 인포 객체 입니다.

화면과 기능을 어떻게 구현할 것인가 좀더 구체화 시킬 필요가 있을 것 같습니다.

  • 옵저버 객체들이 움직이는 방식으로는 Timer 를 이용해 2초 주기의 TweenMax 의 베지어 트윈을 이용해 랜덤한 위치로 결정.
  • 주제가 옵저버에게 전달하는 정보로는 MouseEvent.MOUSE_DOWN 이 일어난 mouseX 와 mouseY 좌표값으로하여 그 정보에 따라 옵저버 객체들이 모이도록 한다.
  • 옵저버 객체들이 주제에 등록되고 등록해제 되는 것을 옵저버 객체에 대한 MouseEvent.MOUSE_DOWN 으로 구현한다.
  • 최초 도큐먼트 클래스에서 모두 옵저버 등록을 하고, 옵저버 객체에 MouseEvent.MOUSE_DOWN 이 한번 일어나면 옵저버 리스트에서 빠지고 (동시에 시각적으로 차이를 내기 위해 alpha = 0.5 해줌) 다시한번 MouseEvent.MOUSE_DOWN 이 일어나면 다시 옵저버 리스트로 들어가도록 한다.

그 외에 옵저버와 직접적인 기능과는 관계 없는 내용으로, MouseEvent.ROLL_OVER 가 일어난 객체를 가장 상위로 올리도록 한 후 상하 관계를 쉽게 알 수 있도록 옵저버 객체 중앙에 십자 표시를 하였고, 주제 객체가 정보를 새로 생성했는지 아닌지 시각적으로 구분하기 위해 정보가 생성되면[02] 배경 이미지의 색상을 바꾸는 내용이 추가로 들어갔습니다.

그럼 이제 주제 인터페이스를 보도록 하겠습니다.

0
1
2
3
4
5
6
7
8

package 
{
	public interface ISubject
	{
		function addObserver( $o:IObserver ):void
		function removeObserver( $o:IObserver ):void
		function notifyObserver():void
	}
}

지난번 옵저버 패턴과 완전히 동일합니다.

주제 구상 클래스는 정보의 전달을 이벤트 디스패처가 담당하게 되었으므로 약간 다릅니다.

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

package 
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
 
	public class Subject implements ISubject 
	{
		private var dispatcher:EventDispatcher = new EventDispatcher();
		private var _arrObserver:Array = new Array();
		private var _infoObject:Object;
 
		public function Subject()
		{
 
		}
 
		//ISubject 를 구현 - 옵저버 등록
		public function addObserver( $o:IObserver ):void
		{
			dispatcher.addEventListener( ObserverEvent.NOTIFY, $o.update );
			addObject( $o );
		}
 
		//옵저버에 등록된 대상 객체를 배열에 저장
		private function addObject( $o:IObserver ):void
		{
			arrObserver.push( $o );
		}
 
		//ISubject 를 구현 - 옵저버 제거
		public function removeObserver( $o:IObserver ):void
		{
			dispatcher.removeEventListener( ObserverEvent.NOTIFY, $o.update );
			removeObject( $o );
		}
 
		//옵저버를 제거하면 배열에서 제거
		private function removeObject( $o:IObserver ):void
		{
			var index:int = arrObserver.indexOf( $o, 0 )
			arrObserver.splice( index, 1 )
		}
 
		//ISubject 를 구현 - 이벤트 발생 --> 정보 전달
		public function notifyObserver( ):void
		{
			dispatcher.dispatchEvent( new ObserverEvent( ObserverEvent.NOTIFY, this.infoObject ) )
		}
 
		//도큐먼트 클래스에서 호출할 메서드
		public function setClick( $x:int, $y:int ):void
		{
			makeInfoObject( $x, $y )
			notifyObserver();
		}
 
		//정보를 Object 로 만들어 변수에 저장
		private function makeInfoObject( $x:int, $y:int ):Object
		{
			return _infoObject = { infoX : $x, infoY : $y }
		}
 
		public function get infoObject():Object { return _infoObject; }
 
		public function get arrObserver():Array { return _arrObserver; }
	}
}

EventDispatcher 객체를 생성했고 구상 객체 목록을 관리할 수 있도록 배열을 하나 만들었습니다.
이벤트를 통해 전달할 정보를 저장할 Object 객체도 하나 만들었네요.
ObserverEvent.NOTIFY 가 발생하면 dispatcher가 각각의 옵저버들이 걸어놓은 $o.update 메서드를 실행 하는 것입니다.

디스패처용 커스텀 이벤트 입니다. 커스텀 이벤트에 대한 포스트에서도 있듯이 커스텀 이벤트의 형태는 변수명이나 상수명을 제외하고는 다른 커스텀 이벤트와 동일합니다.

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

package 
{
	import flash.events.Event;
 
	public class ObserverEvent extends Event
	{
		static public const NOTIFY:String = "notify";
		private var _info:Object;
 
		public function ObserverEvent( $type:String, $info:Object, $bubble:Boolean = false, $cancelable:Boolean = false )
		{
			super( $type, $bubble, $cancelable );
			this._info = $info;
		}
 
		override public function clone():Event
		{
			return new CustomEvent( type, _info, bubbles, cancelable );
		}
 
		public function get info():Object
		{
			return _info;
		}
	}
}

옵저버 쪽으로 넘어가 보겠습니다. 인터페이스에는 dispatcher가 호출할 update() 메서드 이외엔 없군요.

0
1
2
3
4
5
6
7

package 
{
	import flash.events.Event;
	public interface IObserver
	{
		function update( $e: Event ):void
	}
}

위의 인터페이스를 구상하는 옵저버 구상 클래스 입니다.

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

package 
{
	import flash.display.Shape;
	import flash.display.Sprite
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.utils.Timer;
	import gs.TweenMax
	import gs.easing.*;
 
	public class Item extends Sprite implements IObserver
	{
		public var txtId:TextField;
		private var _id:uint;
		private var _x:int;
		private var _y:int;
		private var stageWidth:uint;
		private var stageHeight:uint;
		private var timer:Timer = new Timer( 2000, 0 )
 
		private var isInfo:Boolean;
 
		public function Item ( $size:uint = 50 ) 
		{
			var circle:Shape = new Shape()
			circle.graphics.lineStyle( 0, 0, 0 )
			circle.graphics.beginFill( 0x000000, 1 )
			circle.graphics.drawCircle( 0, 0, $size )
			circle.graphics.endFill()
			addChild( circle )
 
			var hLine:Shape = new Shape();
			hLine.graphics.lineStyle( 1, 0xcc3300 );
			hLine.graphics.lineTo( 60, 0 );
			hLine.x = -30;
			addChild( hLine )
 
			var vLine:Shape = new Shape();
			vLine.graphics.lineStyle( 1, 0xcc3300 );
			vLine.graphics.lineTo( 0, 60 );
			vLine.y = -30;
			addChild( vLine )
 
			txtId = new TextField()
			var format:TextFormat = new TextFormat()
			format.font = "Verdana";
			format.color = 0xFFFFFF;
			format.size = 20;
			txtId.defaultTextFormat = format
			txtId.selectable = false;
			txtId.autoSize = "left";
			txtId.backgroundColor = 0x000000;
			addChild(txtId)
 
			this.addEventListener( Event.ADDED_TO_STAGE, initStage );
 
			timer.addEventListener( TimerEvent.TIMER, onTimeHandler )
			timer.start()
		}
 
		//옵저버가 되기위한 구현
		public function update( $e:Event ):void
		{
			var event:ObserverEvent = $e as ObserverEvent;
			this._x = event.info.infoX;
			this._y = event.info.infoY;
			// 정보로 들어온 값이 undefined 인지 아닌지 확인하여 isInfo에 Boolean 으로 저장
			this.isInfo = ( _x && _y ) ? true : false;
		}
 
		private function onTimeHandler( e:TimerEvent = null ):void 
		{
			if ( isInfo )
			{
				concentration()
			}
			else
			{
				deconcentration()
			}
		}
 
		private function initStage( e:Event ):void 
		{
			removeEventListener( Event.ADDED_TO_STAGE, initStage );
			stageWidth = stage.stageWidth;
			stageHeight = stage.stageHeight;
		}
 
		public function set id ( $value:uint ):void 
		{
			_id = $value;
			txtId.text = _id.toString()
		}
 
		public function get id():uint { return _id; }
 
		//Event 의 정보 값으로 모이기
		public function concentration():void
		{
			TweenMax.to( this, 1, { x:_x, y:_y , ease:Quart.easeInOut } );
		}
 
		//Event 정보 값이 undefined 일 경우 랜덤으로 움직이기
		public function deconcentration():void
		{
			TweenMax.to( this, 2, { x:Math.round(Math.random() * stageWidth), y:Math.round(Math.random() * stageHeight), 
					bezier:[ { x: Math.round(Math.random() * stageWidth), y: Math.round(Math.random() * stageHeight) } ], 
					ease:Quart.easeInOut } );
		}
	}
}

구상 클래스의 길이가 약간 길지만 대부분 생성자에서 Shape로 그림을 그리는 부분과, 객체 본연의 할일을 부분[03] 들이고, 옵저버로서의 내용은 인터페이스 메서드인 update() 메서드를 구상하는 내용 뿐 입니다.

그럼 호스트코드(도큐면트 클래스) 에서는 어떻게 주제로 하여금 옵저버들에게 정보를 주게 할까요?

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

package 
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import gs.TweenLite;
 
	public class Main extends Sprite 
	{
		private var subject:Subject;
		private var isInfo:Boolean = true;
		private var clickedItem:Array = new Array();
		private var bg:Sprite;
 
		public function Main():void
		{
			subject = new Subject()
			createBG();
			createItem();
		}
 
		private function createBG():void
		{
			bg = new Sprite()
			bg.graphics.lineStyle(0, 0, 0)
			bg.graphics.beginFill(0x555555, 1)
			bg.graphics.drawRoundRect( 0, 0, stage.stageWidth, stage.stageHeight, 50, 50 )
			bg.graphics.endFill()
			addChild( bg )
			bg.addEventListener( MouseEvent.MOUSE_DOWN, bgClickHandler)
		}
 
		private function createItem():void
		{
			for ( var i:uint = 0; i < 10; i++ )
			{
				var item:Item = new Item()
				item.id = i;
				item.buttonMode = true;
				item.addEventListener( MouseEvent.MOUSE_DOWN, itemClickHandler );
				item.addEventListener( MouseEvent.MOUSE_OVER, itemRollOverHandler );
				addChild( item );
 
				subject.addObserver( item );
			}
		}
 
		//옵저버 객체에 마우스 이벤트가 일어나면 handleItem() 으로 객체를 보냄
		private function itemClickHandler( e:MouseEvent ):void 
		{
			var target:Item = e.currentTarget as Item
			handleItem( target )
		}
 
		//주제에 있는 옵저버 리스트(배열)을 조회하여 리스트에 있으면 옵저버 등록을 해지 (없으면 옵저버 등록)
		private function handleItem( $item:Item ):void
		{
			var isFind:Boolean;
			for each( var item:Object in subject.arrObserver )
			{
				if ( item === $item )
				{
					subject.removeObserver( $item );
					$item.alpha = 0.5;
					isFind = true;
					break
				}
			}
			if ( !isFind )
			{
				subject.addObserver( $item )
				$item.alpha = 1;
			}
		}
 
		//롤오버된 객체는 가장 위로 올림
		private function itemRollOverHandler( e:MouseEvent ):void 
		{
			setChildIndex( e.currentTarget as Sprite, numChildren - 1 );
		}
 
		//배경을 클릭한 지점을 주제 메서드로 보냄
		private function bgClickHandler( e:MouseEvent ):void
		{
			isInfo = !isInfo;
 
			if ( isInfo )
			{
				subject.setClick( undefined, undefined );
				TweenLite.to( bg, 1, { tint:0x555555 } );
			}
			else
			{
				subject.setClick( mouseX, mouseY );
				TweenLite.to( bg, 1, { tint:0x8D2545 } );
			}
		}
	}
}

각 메서드에 주석을 달아 놓았으니 참고하시면 되겠습니다.
위의 도큐먼트 클래스를 컴파일한 결과입니다.

배경을 한번 클릭하면 이벤트가 발생하고, 다시한번 클릭하면 객체들은 다시 원래의 할일을 합니다.
객체를 클릭하면 옵저버 리스트에서 빠지고, 다시한번 클릭하면 옵저버에 등록됩니다.

이벤트 모델을 이용한 옵저버 패턴은, 옵저버 객체를 임의로 빼거나 추가해도 디스패처로가 다른 옵저버들에게 전달하는 이벤트에는 아무런 문제가 발생하지 않게되죠.[04]

이렇게 디스패처에 의해 발생된 이벤트에 정보를 실어 옵저버 객체에 전달하고 이벤트 리스너에 등록된 함수를 이용해 객체 내부를 업데이트 하여 정보를 사용하는 방법까지 표현하였습니다.

Observer Pattern Dispatcher Event Example 액션스크립트 코드 다운로드 (187)
  1. 화면에서 각자 움직이다가
  2. 즉, 배경에 MouseEvent.MOUSE_DOWN 이 일어나면
  3. 랜덤으로 2초마다 움직이게 하는 일
  4. 객체간 약한 결합 : Loose Coupling
]]> http://ufx.kr/blog/233/feed 7 이벤트에 뭔가 같이 보내보자 – 커스텀 이벤트 만들고 사용해보기 http://ufx.kr/blog/228 http://ufx.kr/blog/228#comments Sun, 07 Jun 2009 04:14:31 +0000 세계의끝 http://ufx.kr/blog/?p=228 sale_imgAS2.0 에서 AS3.0 으로 넘어와 보면 가장 처음 느끼는 것이 “뭐이리 복잡하게 해야 되는 거냐?” 하는 점이겠죠. 버튼에 액션을 넣어 뭔가를 하고 싶은 경우라면 button.onRelease = function() { //하고싶은일 } 이나 심지어 무비클립에 on(release) { //하고싶은일 } 같이 간단한 코드만으로 하고싶은 일을 하던것에 비해서 AS3.0 의 이벤트 리스너 방식은 귀찮기만 해 보입니다.

이 포스트에서는 이벤트 시스템이 2.0 이전의 콜백 방식에 비해 가지는 유리한 점 중의 하나를 살펴보겠습니다. 커스텀 이벤트 클래스를 이용하여 이벤트를 보내면서 특정한 정보를 보낼 수 있는 방법입니다. 콜백 방식으로는 부릴 수 없는 재주죠.

우선 커스텀 이벤트 클래스를 하나 만들어 봅니다.

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

package 
{
	import flash.events.Event;
 
	public class CustomEvent extends Event
	{
		static public const CALL:String = "call";
		private var _data:Object;
 
		public function CustomEvent( type:String, data:Object, bubble:Boolean = false, cancelable:Boolean = false )
		{
			super( type, bubble, cancelable );
			this._data = data;
		}
 
		override public function clone():Event
		{
			return new CustomEvent( type, _data, bubbles, cancelable );
		}
 
		public function get data():Object
		{
			return _data;
		}
	}
}

커스텀 클래스의 모양새는 거의 이런 식입니다. bubble, cancelable 등 몇가지 파라미터들이 있습니다만, 이 포스트에서는 커스텀 클래스를 이용한 데이터 전송만을 다룰 것이므로, 생성자에서 object 를 인자로 받아 변수로 저장하고 있다는 것만 기억하면 되겠습니다.

커스텀 클래스는 어떻게 사용하는지 볼까요?

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

package 
{
	import flash.display.Sprite
	import flash.events.*;
	import CustomEvent;
 
	public class CustomEventTest extends Sprite 
	{
		private var broadcast:EventDispatcher = new EventDispatcher();
		private var info:Object = { info1:"의류관 세일중. ", info2:"무료시식코너 운영중. ", info3:"제휴카드 무이자 할부중. " };
 
		public function CustomEventTest ()
		{
			stage.addEventListener( MouseEvent.CLICK, clickHandler );
			broadcast.addEventListener( CustomEvent.CALL, broadcastListen );
			broadcast.addEventListener( CustomEvent.CALL, customer1Action );
			broadcast.addEventListener( CustomEvent.CALL, customer2Action );
		}
 
		private function clickHandler( e:MouseEvent ):void 
		{
			broadcast.dispatchEvent( new CustomEvent( CustomEvent.CALL, info ) );
		}
 
		private function broadcastListen( e:CustomEvent ):void 
		{
			trace( "----모든 이벤트 목록 : ", e.data.info1, e.data.info2, e.data.info3 );
		}
 
		private function customer1Action(e:CustomEvent):void 
		{
			trace( e.data.info2, ": 먹으러 가볼까나" );
		}
 
		private function customer2Action(e:CustomEvent):void 
		{
			trace( e.data.info1, ": 찜해놨던 옷을 사러가자" );
			trace( "옷을 샀으니 이제 방송 안들어" )
			broadcast.removeEventListener( CustomEvent.CALL, customer2Action );
		}
 
	}
}

위의 내용은 백화점에서 세일 정보를 방송 ( broadcast ) 하고 있고, 그 정보에 반응하는 백화점 고객이 있다는 설정 입니다.

옵저버 디자인 패턴의 등장인물 소개에서 주제를 여러가지 단어로 설명을 했었는데요,[01] broadcaster 도 주제를 표현하는 단어로 볼 수 있습니다. (그래서 이런 비유를 선택했습니다.)

실제로 이벤트 시스템은 옵저버 디자인 패턴에서 주제객체가 update 메서드를 이용해 옵저버들에게 정보를 전달하는 방식과 동일합니다. 디스패처는 이벤트 리스너 목록에 있는 리스너들에게 정보를 뿌려주죠.

인스턴스 멤버를 만든 부분을 볼까요?

0
1

private var broadcast:EventDispatcher = new EventDispatcher();
private var info:Object = { info1:"의류관 세일중. ", info2:"무료시식코너 운영중. ", info3:"제휴카드 무이자 할부중. " };

위와 같이 EventDispatcher 객체를 생성하면서 broadcast 라고 이름 지었고, 이벤트를 통해 전달할 정보인 info 를 Object 객체로 만들었습니다.

아래는 커스텀 이벤트를 발생시키는 디스패치 이벤트 입니다.

0

broadcast.dispatchEvent( new CustomEvent( CustomEvent.CALL, info ) );

이렇게 이벤트를 디스패치 하게 되면 broadcast 객체에 addEventListener 시켜 CustomEvent.CALL 이벤트가 발생하는지 귀 기울이고 있던 리스너에 info 가 전달 됩니다.

이벤트 모델은 리스너들이 정보를 받아보는지 아닌지에 대한 것은 디스패처가 관심 없습니다. 다만 정보를 이벤트를 통해 보낼 뿐이죠. 이러한 구조는 객체지향 프로그래밍이 지향하는 약한 결합 (Loose Coupling)을 표현합니다.

  1. dispatcher, supplier, notifier, publisher, server, service, provider
]]> http://ufx.kr/blog/228/feed 6