Buttons using a Design Pattern

vkimone — Thu, 28 Jun 2007 04:09:43 +0000

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

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

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

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

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

버튼 추상 클래스로써 생성하는 모든 버튼에 공통적으로 상속되는 클래스이다.
이곳에 선언된 추상메소드를 구상클래스에서 오버라이드(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
}
}

추상클래스인 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 에 등록되어있는 이벤트 리스너 함수로 넘겨준다. 이 과정에서 필요한 버튼 이벤트 오브젝만 넘겨준다.

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

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;
}
}

실제 버튼 기능을 구현하기 위한 구상 클래스. 단순히 버튼 롤오버 반응과 릴리즈시 활성체크를 구현하였다.
생성하려는 버튼의 기능에 따라 이 클래스는 다르게 구성된다. 물론 추상메소드로서 작용하는
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);
}
}
 
}

위에서 제작한 클래스를 활용하여 버튼 클래스를 생성하고 등록하는 코드
간단한 4개의 버튼을 구현하고 있다. 사용자는 SampleConcreteButton 를 만들어 버튼을 등록하기만 하면 모든 이벤트를 한꺼번에 관리할 수 있다.

import com.dstrict.UB.ui.button.ButtonManager;
import com.dstrict.UB.ui.button.AbstractSimpleButton;
import com.dstrict.UB.ui.button.SampleConcreteButton;
import com.dstrict.UB.events.ButtonEvent;
 
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

Kimkijeung.com » template method

Buttons using a Design Pattern