flash에서 구현되는 대부분의 사용자와의 Interaction 은 버튼을 통해 이루어 진다.
즉, 버튼을 통해 이벤트가 발생되고 그것을 통해 필요한 반응들을 처리하게 된다.
일반적으로 flash 에 버튼을 설정할때는 아래와 같이 직접 이벤트 핸들러 함수를 등록하여 사용한다.

button.onRelease=function(){  //code....}

하지만 이런 방법은 무비클립이나 버튼 자체에 코드가 종속되어 버리게 되어, 제어해야할 버튼이 많을 경우 이곳저곳에 이벤트 핸들러 함수를 작성해야하므로 체계적인 이벤트 플로우를 관리하기 위해서 좀 부족한 감이 든다.
또한 버튼은 단독으로 한개가 있는것보다는 여러개의 버튼이 컨텐츠의 네비게이션으로서 작용하는 경우가 대부분이다. 따라서, 버튼을 릴리즈 했을 경우 활성/비활성되는 부분도 고려해야하는 문제가 있다.

여기에서 소개하는 방법은 Design pattern 중에 Template method 패턴을 활용하여 버튼 로직을 구현하는 부분을 구현하고 실제적인 기능을 담당하는 부분은 추상클래스의 상속을 통해 구현하는 방법을 사용하였다.

기본적인 개념은 추상클래스 타입을 확장하여 각각의 구상클래스로서 버튼클래스를 제작한다.
그리고 추상클래스 타입을 이용해 작성된  ButtonManager class 에 버튼 클래스를 등록한다.
여기서 ButtonManager class 는 버튼 등록, 활성/비활성 체크 같은 전체적인 버튼을 관리하는 역할을 담당하게 된다.
(* 이곳에 사용된 startEvent 메소드는 기본적으로 제공하는 Dispatcher 클래스의 dispatchEvent 메소드를 재정의 한것이다. )

<AbstractSimpleButton Class>
버튼 추상 클래스로써 생성하는 모든 버튼에 공통적으로 상속되는 클래스이다.
이곳에 선언된 추상메소드를 구상클래스에서 오버라이드(override)하여 실제적인 기능을 구현한다.

import com.dstrict.UB.events.Dispatcher;
import com.dstrict.UB.events.Delegate;

class com.dstrict.UB.ui.button.AbstractSimpleButton extends Dispatcher {
 
 private var _mc:MovieClip;

 public function setController(inMc : MovieClip) : Void {
  _mc=inMc;
 }
 public function getController() : MovieClip {
  return _mc;
 } 
  /**---------------------------------------------------------------------------
     * Constructor function
     * @param inMc controller movieClip
   *---------------------------------------------------------------------------*/
 public function AbstractSimpleButton(inMc:MovieClip) {
  setController(inMc);
  setButton();
 }
 public function setButton():Void{
  getController().onRollOver=Delegate.create(this,onRollOver);
  getController().onRollOut=Delegate.create(this,onRollOut);
  getController().onPress=Delegate.create(this,onPress);
  getController().onRelease=Delegate.create(this,onRelease);
  getController().onReleaseOutside=Delegate.create(this,onReleaseOutside);
 }
 public function onRollOver() : Void {
  // override in sub-class
 }
 public function onRollOut() : Void {
  // override in sub-class
 }
 public function onPress() : Void {
 // override in sub-class
 }
 public function onRelease() : Void {
  // override in sub-class
 }
 public function onReleaseOutside() : Void {
  // override in sub-class
 }
 public function enabled(mode:Boolean):Void {
  // override in sub-class
 }
}

<ButtonManager Class>
추상클래스인 AbstractSimpleButton 클래스 타입을 이용하여 버튼의 등록및 이벤트 위임을 처리하고 있다.
어떠한 구상클래스(concrete class)도 사용되지 않았기 때문에 실제 구현과 완전히 분리되어 코드를 처리할 수 있다.

import com.dstrict.UB.ui.button.AbstractSimpleButton;
import com.dstrict.UB.events.ButtonEvent;
import com.dstrict.UB.events.Dispatcher;
class com.dstrict.UB.ui.button.ButtonManager extends Dispatcher{
 
 private var _buttonSet:Array;
 private var _selectButton:AbstractSimpleButton;
  
  /**---------------------------------------------------------------------------
     * Constructor function
   *----------------------------------------------------------------------------*/
 public function ButtonManager() {
  initialize();
 }
 
 //==================================================================
 ///////////public method //////////////////////////////////////////////
 //==================================================================
 public function addItem(item:AbstractSimpleButton):Void {
  _buttonSet.push(item);
  registerListener(item);
  killListener(item);
 }
 public function getItemAt(index:Number):AbstractSimpleButton{
  return AbstractSimpleButton(_buttonSet[index]);
 }
 public function kill():Void {
  for(var i in _buttonSet){
   AbstractSimpleButton(_buttonSet[i]).enabled(false);  
  }
 }
 public function live():Void {
  for(var i in _buttonSet){
   AbstractSimpleButton(_buttonSet[i]).enabled(true);
  }
 }
 
 //==================================================================
 ///////////event handler //////////////////////////////////////////////
 //==================================================================
 
 public function onPress(evt:ButtonEvent):Void {
  startEvent(new ButtonEvent(ButtonEvent.ON_PRESS,evt.target,evt.currentMovieClip));
 }
  public function onRelease(evt:ButtonEvent):Void {
  enabled(getSelectButton(),true);
  enabled(AbstractSimpleButton(evt.target),false);
  setSelectButton(AbstractSimpleButton(evt.target));
  startEvent(new ButtonEvent(ButtonEvent.ON_RELEASE,evt.target,evt.currentMovieClip));
 }
 public function onRollOver(evt:ButtonEvent):Void {
  startEvent(new ButtonEvent(ButtonEvent.ON_ROLL_OVER,evt.target,evt.currentMovieClip));
 }
 public function onRollOut(evt:ButtonEvent):Void {
  startEvent(new ButtonEvent(ButtonEvent.ON_ROLL_OVER,evt.target,evt.currentMovieClip));
 }

 //==================================================================
 ///////////private method //////////////////////////////////////////////
 //==================================================================
 private function initialize():Void {
  _buttonSet=new Array();
 }
 private function setSelectButton(button:AbstractSimpleButton):Void {
  _selectButton=button;
 }
 private function getSelectButton():AbstractSimpleButton{
  return _selectButton;
 }
 private function registerListener(item:AbstractSimpleButton):Void {
  item.addEventListener(ButtonEvent.ON_ROLL_OVER,this);
  item.addEventListener(ButtonEvent.ON_ROLL_OUT,this);
  item.addEventListener(ButtonEvent.ON_PRESS,this);
  item.addEventListener(ButtonEvent.ON_RELEASE,this);
 }
 private function killListener(item:AbstractSimpleButton):Void {
  var owner:ButtonManager=this;
  item.getController().onUnload=function(){
   item.removeEventListener(ButtonEvent.ON_ROLL_OVER,this);
   item.removeEventListener(ButtonEvent.ON_ROLL_OUT,this);
   item.removeEventListener(ButtonEvent.ON_PRESS,this);
   item.removeEventListener(ButtonEvent.ON_RELEASE,this);
  };
 }
 private function enabled(button:AbstractSimpleButton,mode:Boolean):Void {
  button.enabled(mode);
 }

}

event handler 함수를 보면 등록되어 있는 추상클래스 버튼에서 발생한 이벤트를 받아서 다시 최종적으로 ButtonManager 에 등록되어있는 이벤트 리스너 함수로 넘겨준다. 이 과정에서 필요한 버튼 이벤트 오브젝만 넘겨준다.


<ButtonEvent Class>
버튼에 대한 이벤트 정보를 담고 있는 이벤트 오브젝트.

class com.dstrict.UB.events.ButtonEvent extends com.dstrict.UB.events.Event {

 public static var ON_ROLL_OVER:String = "onRollOver";
 public static var ON_ROLL_OUT:String = "onRollOut";
 public static var ON_PRESS:String = "onPress";
 public static var ON_RELEASE:String = "onRelease";
 public static var ON_RELEASE_OUTSIDE:String = "onReleaseOutside";

 public var currentMovieClip:MovieClip;
 
 /**--------------------------------------------------------------------------
 *constructor function
 *@param Type : String, 이벤트 핸들러 메서드
 *---------------------------------------------------------------------------*/
 public function ButtonEvent(Type : String,Source : Object,curMovieClip:MovieClip) {
  super(Type,Source);
  currentMovieClip=curMovieClip;
 }
 }



<SampleConcreteButton  Class>
실제 버튼 기능을 구현하기 위한 구상 클래스. 단순히 버튼 롤오버 반응과 릴리즈시 활성체크를 구현하였다.
생성하려는 버튼의 기능에 따라 이 클래스는 다르게 구성된다. 물론 추상메소드로서 작용하는
AbstractSimpleButton 클래스의 onRollOver,onRollOut,onRelease,onReleaseOutside, enabled
는 오버라이드(override) 하여 구현하여야 한다.

import com.dstrict.UB.ui.button.AbstractSimpleButton;
import com.dstrict.UB.events.ButtonEvent;
class com.dstrict.UB.ui.button.SampleConcreteButton extends AbstractSimpleButton {
 
 public var buttonIndex:Number;
 
 public function SampleConcreteButton(inMc : MovieClip,inButtonIndex) {
  super(inMc);
  buttonIndex=inButtonIndex;
 }
 
 public function onRollOver() : Void {
  getController().gotoAndStop(2);
  startEvent(new ButtonEvent(ButtonEvent.ON_ROLL_OVER,this,getController()));
 }

 public function onRollOut() : Void {
  getController().gotoAndStop(1);
  startEvent(new ButtonEvent(ButtonEvent.ON_ROLL_OUT,this,getController()));
 }
   
 public function onRelease() : Void {
  startEvent(new ButtonEvent(ButtonEvent.ON_RELEASE,this,getController()));
 }

 public function onReleaseOutside() : Void {
  startEvent(new ButtonEvent(ButtonEvent.ON_RELEASE,this,getController()));
 }
 
 public function enabled(mode:Boolean):Void {
  getController().enabled=mode;
  if(mode){
   getController().gotoAndStop(1);
  }else{
   getController().gotoAndStop(2);
  }
 }

}

var buttonMgr:ButtonManager=new ButtonManager();
buttonMgr.addEventListener(ButtonEvent.ON_RELEASE,this);

buttonMgr.addItem(new SampleConcreteButton(number1_mc,1));
buttonMgr.addItem(new SampleConcreteButton(number2_mc,2));
buttonMgr.addItem(new SampleConcreteButton(number3_mc,3));
buttonMgr.addItem(new SampleConcreteButton(number4_mc,4));

//event handler
function onRelease(evt:ButtonEvent):Void{
 result_txt.text="onRelease event : "+evt.currentMovieClip+"----->"+evt.target.buttonIndex;
}

//Release event
var numberButton:AbstractSimpleButton=buttonMgr.getItemAt(0);
numberButton.onRelease(new ButtonEvent(ButtonEvent.ON_RELEASE,numberButton));


위 코드에는 ButtonManager에 등록되어있는 리스너가 onRelease 이벤트 밖에 없기 때문에
릴리즈 이벤트만 최종적으로 처리한다. 다른 버튼 이벤트를 처리하고 싶으면 리스너에 이벤트를
추가 하여 이벤트 핸들러 함수만 구현하면 된다.

등록된 모든 이벤트는  ButtonManager 의 이벤트 핸들러 함수를 통해 전달된다. 따라서 버튼에 대한 이벤트 플로우를 한곳에 집중할 수 있으며 기존에 코드에 종속되어있는 버튼에 비해 유연성이 크게 향상된다.

sample code 에서 맨 마직막 부분의 release event 부분은 사용자가 마우스를 통해 버튼을
클릭해서 release event 를 발생시키는 것이 아니라 직접 임의로 발생시킬 수 있다.

download sample........

Template method 패턴은 디자인 패턴 중에서도 가장 기본이 되는 패턴중에 하나다.
템플릿이란 단어에서 유추할 수 있듯이 어떤 일정한 틀을 기본으로 클래스를 구성하는 방식이다.
추상클래스(Abstract class) 에 정의되어있는 Abstract method 를 기반으로 알고리즘을 구성하는 template method 를 만들어 동작시키는 것이다. 다시말해 알고리즘의 캡슐화(encapsulation) 라고 할수 있다.

추상클래스(Abstract class) 에서는 단지 알고리즘만 기술하는 역할만 한다. 실제 구현은 서브클래스 (Concrete class) 에서 기술한다. 따라서 Template method 를 이용하면 알고리즘의 구조는 유지하면서 서브클래스에서 추상메소드를 오버라이드하여 재정의 할 수 있다.
서브클래스에서 행동을 지정할 수 있게 하면서도 코드의 재사용이 가능한 특징으로  Template method 패턴은 framework 를 제작하는데 자주 등장한다.

플래시에서는 abstract 키워드가 지원되지 않지만 개념상 큰차이없이 패턴을 사용할 수 있다.

<Abstract class>

class AbstractButton {
 
 private var _mc:MovieClip;
 
 public function setController(inMc : MovieClip) : Void {
  _mc=inMc;
 }
 public function getController() : MovieClip {
  return _mc;
 }
 
 
 //Constructor function
 function AbstractButton(inMc:MovieClip){
  setController(inMc);
  setButton();
 }
 
 
 //Template method
 public function setButton():Void{
     getController().onRollOver=Delegate.create(this,onRollOver);
     getController().onRollOut=Delegate.create(this,onRollOut);
     getController().onRelease=Delegate.create(this,onRelease);
     getController().onReleaseOutside=Delegate.create(this,onReleaseOutside);
 
 }
 
 public function onRollOver() : Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }

  public function onRollOut() : Void{
   // override in sub-class
  throw new Error("Abstract method!!!!!");
 }

  public function onRelease() : Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }

  public function onReleaseOutside() : Void{
   // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
 
 
  public function enabled(mode:Boolean):Void{
  // override in sub-class
  throw new Error("Abstract method!!!!!");
 }
 
}


<Concrete class>

class ConcreteButton extends AbstractButton{
 
 function ConcreteButton(inMc:MovieClip){
  super(inMc);
 }
 
 
public function onRollOver() : Void{
  getController().gotoAndPlay("over");
 }

 public function onRollOut() : Void{
  getController().gotoAndPlay("out");
 }

 public function onRelease() : Void{
  getController().gotoAndPlay("release");
 }

 public function onReleaseOutside() : Void{
 
 }
 
 public function enabled(mode:Boolean):Void{
  getController().enabled=mode;
 }
 
}

위 sample 은 버튼을 구성하는 간단한 클래스이다. 
플래시에서 Interaction 을 구현할때 거의 대부분버튼을 구현하여 접근한다. 일반적으로 버튼 액션을 구현하려면 버튼 인스턴스나 무비클립 인스턴스를 통해 버튼 이벤트를 주어서 사용하지만 그럴경우 제어해야할 버튼이 많아지면 코드길이가 늘어날 뿐더러 코드 유연성이 떨어지게 된다.

실제 버튼을 구현하려면 추상클래스를 확장하여 추상메소드를 구현하기만 하면 된다.
추상클래스의 추상메소드의 정의는 개발자가 신중히 결정해서 정해야한다. 추상메소드가 너무 많게 되면 서브클래스에서 구현해야할 코드가 많아져 불편한점이 있을 수 있다. 반대로 너무 추상메소드 자체를 큰 덩어리로 나누게되면 유연성을 떨어뜨리게 된다.

상속에 의한 Adapter 패턴 -  가장 기본이 되는 클래스를 중심으로 클래스를 확장하는 방법으로 인터페이스로 구현하는 방식, 어쩌면 클래스 확장에 있어 가장 기본이 되는 디자인 패턴인듯 싶다.
플래시에서도 가장 쉽게 적용되는 방식이다.

*Adaptee - Banner Class
접합하는 측이 아니라 접합되는 측. 이미 준비되어있는 메소드를 가지고 있는 역할.

public class Banner{
  private String string;
  public Banner(String string){
  this.string=string;
  }
  public void showWithParen(){
  System.out.printIn("("+string+")");
}
public void showWithAster(){
  System.out.printIn("*"+string+"*");
}

}

*Target - Print Interface
필요로 하는 메소드를 제공하는 역할.

public interface Print{
  public abstract void printWeak();
  public abstract void printStrong();
}

*Adapter - PrintBanner Class
Adaptee 역할의 메소드를 사용하여 Target 역할을 충족시키는 역할.

public class PrintBanner extends Banner implements Print{
  public PrintBanner(String string){
    super(string);
  }
  public void printWeak(){
  showWithParen();
  }
  public void printStrong(){
   showWithAster();
  }
}

*Client - Main Class
Target 역할의 메소드를 사용해서 일을 하는 역할

public class Main{
  public static void main(String[] args){
  Print p= new PrintBanner("Hellow");
  p.printWeak();
  p.printStrong();
  }
}
Print interface 를 사용하여 구현하고 있다는 점을 강조하기 위해 인스턴스 변수를 Print 형 변수에 대입하여 사용함...

구조 패턴은 복잡한 구조를 이루는 클래스들을 어떻게 하면 개발하기에도 쉽고 보기에도 좋은 형태를 만들어 줄 것인가에 대한 답을 제시해 준다. 구조 패턴을 이용해서 시스템을 구축하면 새로운 기능을 가진 복합객체를 효과적으로 작성할 수 있다.

구조패턴에는

1. Facade 패턴
2. Adapter 패턴
3. Bridge 패턴
4. Composite 패턴
5. Decorator 패턴
6. Flyweight 패턴
7. Proxy 패턴

1. Facade 패턴

일반적으로 프로젝트를 수행할 때, 하나의 목적을 위해 여러개의 오브젝트들이 유기적으로 연결되게 된다. 이때, 오브젝트들을 묶을 수 있다고 판단이되면, 별도의 오브젝트를 새롭게 만들어 사용자들에게 새롭게 만든 오브젝트의 인터페이스를 이용하여 다른 오브젝까지 모두 사용할 수 있게 만들수 있다. 이처럼 대표 인터페이스를 이용하여 다른 여러 오브젝트를 사용할 수 있게 만드는 패턴이 바로 Facade 패턴이다.

2.  Adapter 패턴

어댑터 패턴은 기존에 존재하는 클래스를 직접 변경하지 않고도 원하는 형태의 인터페이스를 가지게 만드는데, 효과적으로 사용할 수 있는 패턴이다. 외부에서 돈을 주고 구입한 클래스나 다른 부서가 개발한 클래스들이 적용하고자 하는 시스템에 적합하지 않을 경우, 시스템을 변경하지 않고도 이들 클래스를 활용할 수 있는 방법을 제공한다.

3. Bridge 패턴

브리지 패턴은 어댑터 패턴과 팩토리 패턴을 합친 것 같은 패턴으로 이들의 장점을 시스템에 적용한 패턴이다. 이를 간단히 설명하면 동일한 조상을 가진 객체들은 팩토리 패턴을 이용하여, 객체의 생성을 추상화해서 객체들을 사용하는 모듈과 이들을 분리시키지만, 동일한 조상을 가지지 않았거나 동일한 인터페이스를 소유하지 않은 객체는 팩토리 패턴을 적용하기 어렵다. 브리지 패턴은 어댑터 패턴을 이용하여 같은 조상을 가지지 않은 시스템구조에 팩토리 패턴을 적용할 수 있도록 만들어 주는 패턴이다.

4. Composite 패턴

객체집단을 다루는데 유용한 컴포짓패턴은, 시스템이 집합속에 포함될 객체와 집합을 가지고 있는 객체, 이들 모두가 자기 사진과 동일한 타입(메소드와 데이터)의 객체리스트를 가지게 한다. 그래서 객체리스트에 객체를 삽입하거나 삭제하는 방법으로, 객체집단을 기존의 집단에 신속하게 벗붙이고 삭제하는 작업을 수행할 수 있게 만든다. 그리고 객체집단의 어느 특정한 부분에 명령을 전달하면 특정 부위의 객체집단 모두가 그 명령을 수행하게 만드는 구조를 가진다.

5. Decorator 패턴

데코레이터 패턴은 장식자라는 이름에서도 알 수 있듯이, 특정 객체를 원하는 모양(기능)으로 장식시켜주는 객체를 만들어 준다. 즉, 장식 시켜주는 객체들과 장식 받을 객체들을 만든 뒤, 이들을 이용하여 장식 바은 객체가 원하는 모양이되도록 만들어 주는 것이다. 이대, 기존의 객체(장식받을 객체)를 활용하고 있던 모듈은 장식이 이루어지는 것과 무관하게 작동하도록 한다.

6. Flyweight 패턴

Flyweight 패턴은 시스템 속에 유사한 클래스나 객체의 난립을 줄여주는 역할을 한다. Flyweight 패턴은 데이터를 관리하고 있다가 시스템이 원하는 데이터가 있을때 이를 객체로 만들어 준다. 객체를 만들 때는 데이터를 객체로 변경시켜주는 팩토리에 데이터를 넘겨주고, 팩토리는 이를 필요한 형태의 객체로 만들어서 반환하게 된다.

7. Proxy 패턴

프록시 패턴은 프록시가 대리인이라는 의미를 가지고 있는 것처럼, 원하는 작업을 대신해서 처리하도록 만드는 패턴이다. 시스템이 작업을 처리하는 가운데, 시스템의 처리과정을 효율적으로 만들기 위해 처리를 분산시킬 필요가 있다. 이렇게 처리과정의 일부부능ㄹ 다른 프로세서에 대행시키고자 할 때 프록시 패턴을 적용하면, 시스템의 구조를 어렵지 않게 효율적으로 변경시킬 수 있다.

출처  : C# 객체지향언어로 배우는 디자인 패턴 (정보문화사/Devpia)

The Design Patterns in Java : Table of Contents

Some Background on Design Patterns

Object-Oriented Programming Concepts

Defining Design Patterns

1. Creational Patterns

The Factory Pattern

The Abstract Factory Pattern

The Singleton Factory Pattern

The Builder Pattern

The Prototype Pattern

Summary of Creational Patterns

2. Structural Patterns

The Adapter Pattern

The Bridge Pattern

The Composite Pattern

The Decorator Pattern

The Facade Pattern

The Flyweight Pattern

The Proxy Pattern

The Summary of Patterns

3. Behavioral Patterns

Chain of Responsibility

The Command Pattern

The Interpreter Pattern
The Iterator Pattern

The Mediator Pattern

The Memento Pattern

The Observer Pattern

The State Pattern

The Strategy Pattern

The Template Pattern

The Visitor Pattern

Appendix

Standard Coding Rules

UML

References