'event'에 해당되는 글 2건
- 2011.01.20 이벤트란 무엇인가요? #2
- 2011.01.13 이벤트란 무엇인가요? #1
#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 메서드의 존재이유.
'ActionScript' 카테고리의 다른 글
| 야훔의 저렴한 개발 시즌2 - 싱글톤 패턴 (2) | 2011.06.13 |
|---|---|
| 이벤트란 무엇인가요? #3 (0) | 2011.02.11 |
| 저렴하게 AIR 개발하기 (0) | 2011.01.14 |
| 이벤트란 무엇인가요? #1 (0) | 2011.01.13 |
| ActionScript Class 만들기(기본) (0) | 2011.01.13 |
내가 처음 3.0을 접했을때가 불과 2년전이었는데 그때 가장 어렵게 느껴졌던게
도무지 "이벤트"라는 녀석과 친해지기 어렵다는 사실이었다.
도데체 왜 "이벤트"라는 놈을 갖고 코드를 작성해야만 할까.
"이벤트"없이 코딩할 수 있지 않을까?
라는 고민으로 수없이 많은 생각들을 하곤했었는데
결론적으로는 ActionScript의 태생적 이유때문이라는 것인데 ECMAScript를 모태로 삼고있는
ActionScript로써는 개발자가 원하는 흐름대로 코드를 진행하기 위해서는 이벤트를 사용해야만 한다고
결론 지었다.
또다른 결론이 하나 더 있는데 이는 어플리케이션을 구성하는데 있어서 구조적으로 "약한결합"을 사용해야 유지보수, 클래스의 컨포넌트 화(化), 등이 용이하다는 결론.
위와같은 결론 덕에 결국 이벤트를 사용하긴 해야겠는데 뭘 어떻게 써야하는 것인지 당최 배우기가 마땅찮다.
그래서 일단 이벤트를 추가하고(import), 등록하고(addEventListener), 행동(Handler) 하는 3가지 단계를 마스터 해보자.
package
{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.events.MouseEvent;
import flash.text.TextField;
public class Main extends Sprite
{
public function Main()
{
super();
createSprite();
createTextArea();
}
private var sp:Sprite;
private var ta:TextField;
private function createSprite():void
{
if(!sp)
{
sp = new Sprite();
addChild(sp);
drawSprite();
}
}
private function drawSprite():void
{
if(sp)
{
var g:Graphics = sp.graphics;
g.clear();
g.beginFill(0x00FF00, 1);
g.drawRect(0, 0, 100, 100);
g.endFill();
configureSpriteListeners();
}
}
private function createTextArea():void
{
if(!ta)
{
ta = new TextField();
ta.width = 200;
ta.height = 300;
ta.x = 110;
ta.y = 0;
ta.multiline = true;
ta.background = true;
ta.backgroundColor = 0xFFFFFF;
addChild(ta);
}
}
private function configureSpriteListeners():void
{
sp.addEventListener(MouseEvent.CLICK, spriteClickHandler);
}
private function spriteClickHandler(event:MouseEvent):void
{
ta.appendText("click sprite! \n");
}
}
}
위의 코드를 한글로 번역을 하자면 이렇다.
"sp라는 Sprite객체를 만들어서 너비 100, 높이 100 사이즈의 초록색 네모를 그린다음 클릭하면 "click sprite!"라는 메시지를 ta라는 TextField객체에 출력해라!"
라는 것이다. 컴퓨터 나라말은 참 다양하지만(JAVA, C, C++, ActionScript, JavaScript.. 등등) 번역하고 보면 별거 없는 것같은 기분이다.
어쨌든 저 코드를 컴파일 해보자.
그럼 저 Main.swf를 실행해볼까.. (아래의 녹색 상자를 클릭해보세용)
간단하게 CLICK 이벤트를 등록하고 작동하게하는 예제를 만들어 봤다.
나름 간단하게 작성된 예제인데 여기서 드는 의문점은 해당 클래스에 등록할 수 있는 이벤트들은 어디서 확인하느냐는 의문.
그런 이벤트에 관련된 사항은 Language Reference를 확인하면 된다.
예를들어 방금 사용한 Sprite 클래스를 확인해보면
어떤 이벤트를 등록(addEventListener) 할 수 있는지 확인할 수 있다.
게다가 친절하게도 어떤 시점에서 이벤트가 발생하는지 설명도 해줬다. 좀 괜찮은데?
예전에 같이 일하던 분이 요런 말씀을 해주셨더랬다.
"궁금하면 API 뒤져봐"
그말이 진리. ㅎㅎㅎ
Sprite 클래스는 내부적으로 스스로를 클릭하면 CLICK 이벤트를 발생하게끔 설계되어있다.
그럼 우리는 그런 이벤트를 수신할 수 있도록 addEventListener를 통해 이벤트를 등록한다.
이때 같이 들어가는 Handler는 이벤트가 수신했을 때 실행하게 된다.
대략 이런 모양.
이미지 출처는 제가 그렸으므로 함부로 퍼가면 안됩니다. 말씀은 해주시고 퍼가세요.
Sprite는 addEventListener를 하든 말든 어차피 클릭을 하면 CLICK이벤트를 발생시킨다.
그럼 어떤 누군가는 addEventListener를 해서 핸들러를 실행시키겠지.
이벤트의 등록과 핸들러의 실행의 구조적인 모양새는 이런 모양이다.
그럼 어떤 누군가는 addEventListener를 해서 핸들러를 실행시키겠지.
이벤트의 등록과 핸들러의 실행의 구조적인 모양새는 이런 모양이다.
그럼 클래스도 누군가가 만들어 사용하는 걸텐데 (적어도 신이 만든건 아닐거 아냐) 나도 만들어 볼 수 있지 않을까??
두둥. "이벤트란 무엇인가요? #2" 예고편.
1. 내가 만든 이벤트?
2. dispatchEvent?
3. 오오오오.....(뭐지???)
'ActionScript' 카테고리의 다른 글
| 야훔의 저렴한 개발 시즌2 - 싱글톤 패턴 (2) | 2011.06.13 |
|---|---|
| 이벤트란 무엇인가요? #3 (0) | 2011.02.11 |
| 이벤트란 무엇인가요? #2 (0) | 2011.01.20 |
| 저렴하게 AIR 개발하기 (0) | 2011.01.14 |
| ActionScript Class 만들기(기본) (0) | 2011.01.13 |
Prev
Rss Feed