2011. 1. 20. 15:26

이벤트란 무엇인가요? #2

#1 에서 이벤트 등록하고 핸들러를 작동하는 것까지 확인해봤는데요..
어차피 이벤트라는게 다 사람이 만든건데 그거 내가 만들어서 작동 못할것도 없잖아요.
그래서 만들어봅니다. 커스텀 이벤트!

근데 커스텀 이벤트를 만들겠다고 거창하게 이야기했지만 결국 뭐 부터 시작해야할지 모르겠군요.
일단 우리가 흔히 보는 MouseEvent를 한번 확인해보도록 하지요.
Language Reference에서 보면 MouseEvent의 족보에 대해 파악해 볼수가 있습니다.
flash.events 패키지에 위치하고 있고 public class고 Event를 상속받았군요.
Subclasses들은 뭐.. MouseEvent를 상속받은 놈들을 알려주는 거니까요. 지금은 신경쓸 필요는 없어 보이네요.

일단 Event라는 놈들은 원래 죄다 flash.events.Event 클래스를 상속받습니다. 물론 Event클래스를 만들 수도 있을지 모르겠습니다만 나중에 이벤트를 발생시킬때 Event 를 상속받은 놈들만 발생시킬 수 있거든요.

그렇다면 일단 Event를 상속받아 보지요.

package classes.events
{
import flash.events.Event;

public class CustomEvent extends Event
{
    public function CustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
    {
        super(type, bubbles, cancelable);
    }
}
}

요렇게 하면 일단 이벤트는 상속받았고.. 일단 Event를 만들었으니 잘 작동하나 볼까?... 했지만 이것만 갖고는 뭘 어떻게 해야할지 감이 안옵니다.
좀 그럴싸하게 이벤트 상수를 만들어보도록해요.

package classes.events
{
import flash.events.Event;

public class CustomEvent extends Event
{
    public static const SAMPLE_EVENT:String = "sampleEvent";
    public function CustomEvent(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
    {
        super(type, bubbles, cancelable);
    }
}
}

저렇게 해놓고 이벤트를 발생시킬 클래스가 필요하니 클래스를 하나더 만들어보아요.

package classes.example
{
import flash.events.EventDispatcher;

import classes.events.CustomEvent;

public class ExampleEventDispatcher extends EventDispatcher
{
    public function ExampleEventDispatcher()
    {
        super();
    }

    public function checkDispatch():void
    {
        dispatchEvent(new CustomEvent(CustomEvent.SAMPLE_EVENT));
    }
}
}

그럼 chkeckDispatch메서드를 호출생하기만 하면 CustomEvent.SAMPLE_EVENT가 발생하게 됩니다.
그럼 한번 테스트 해볼까요.. 테스트할 Main.as 는 이렇게 만들어 봅시다.

package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
import flash.text.TextField;

import classes.events.CustomEvent;
import classes.example.ExampleEventDispatcher;
public class Main extends Sprite
{
    public function Main()
    {
        super();
        setTextField();
        setGreenButton();
        setExample();
    }

    private var textField:TextField;

    private var greenBtn:Sprite;

    private var exam:ExampleEventDispatcher;

    private function setExample():void
    {
        if(!exam)
        {
            exam = new ExampleEventDispatcher();

            exam.addEventListener(CustomEvent.SAMPLE_EVENT, examSampleEventHandler);
        }
    }

    private function setTextField():void
    {
        if(!textField)
        {
            textField = new TextField();

            textField.width = 200;
            textField.height = 300;
            textField.y = 10;
            textField.multiline = true;
            textField.background = true;
            textField.backgroundColor = 0xFFFFFF;
        }

        addChild(textField);
    }

    private function setGreenButton():void
    {
        if(!greenBtn)
        {
            greenBtn = new Sprite();

            var g:Graphics = greenBtn.graphics;

            g.clear();
            g.beginFill(0x00FF00, 1);
            g.drawRect(0, 0, 50, 50);
            g.endFill();

            greenBtn.x = 210;
            greenBtn.y = 10;

            greenBtn.buttonMode = true;
            greenBtn.useHandCursor = true;

            greenBtn.addEventListener(MouseEvent.CLICK, greenBtnClickHandler);
        }

        addChild(greenBtn);
    }

    private function greenBtnClickHandler(evnet:MouseEvent):void
    {
        exam.checkDispatch();
    }

    private function examSampleEventHandler(event:CustomEvent):void
    {
        textField.appendText("Listen from ExampleEventDispatcher\n");
    }
}
}

컴파일을 하고 실행시키면 아래처럼 나오게 되면 성공..

<


녹색버튼을 마구마구 누르면 왼쪽의 텍스트 필드에 메시지가 찍히게 됩니다. 이게 바로 사용자 정의 이벤트. 커스텀 이벤트의 기초적인 내용이에요. 좀더 복잡한 내용이 있지만 오늘은 여기까지.
궁금한게 있다면 Google을 애용해주세요. ㅎ

이벤트란 무엇인가요? #3 예고편! 두둥!

1. bubbles는 뭔가요? cancelable은요?
2. target? currentTarget? 다 거기서 거기 아닌가요?
3. 악 왜 에러가 나는거에요! clone 메서드의 존재이유.