Event Handling
Flex의 component들은 자신의 동작에 대한 결과를 이벤트를 통해서 자신을 포함한 다른 component에게 알릴수 있다.
이 이벤트를 통해서 component간의 소통이 가능하게 된다.
한 component에서 Event를 dispatch를 하게 되었을때 이 이벤트에 대한 addEventListener를 등록한 component가
발생한 이벤트를 기반으로 새로운 동작을 할 수 있다.
이벤트의 기본구성은
이벤트가 발생한 target과 이벤트가 발생한 target을 포함하고 있는 currentTarget 가 있고
이 이벤트에는 이 이벤트를 사용하는 component가 필요한 data도 포함되어 있다.
Resize Event를 예로 들어보자.
package mx.events
{
import flash.events.Event;
public class ResizeEvent extends Event // 이벤트를 상속받아서 자신만의 이벤트를 만드는 것이 용이하다.
{
public static const RESIZE:String = "resize"; //이벤트가 가지는 여러가지 상황에 대한 static정의를 한다면 쉽게 이벤트의 구분자를 가질수 있다.
//이벤트의 생성자이다.
public function ResizeEvent(type:String, bubbles:Boolean = false,
cancelable:Boolean = false,
oldWidth:Number = NaN, oldHeight:Number = NaN)
{
super(type, bubbles, cancelable);
this.oldWidth = oldWidth;
this.oldHeight = oldHeight;
}
//--------------------------------------------------------------------------
//
// Properties
//
//--------------------------------------------------------------------------
//----------------------------------
// oldHeight
//----------------------------------
public var oldHeight:Number;
//----------------------------------
// oldWidth
//----------------------------------
public var oldWidth:Number;
//--------------------------------------------------------------------------
//
// Overridden methods: Event
//
//--------------------------------------------------------------------------
/**
* @private
*/
override public function clone():Event //이벤트 릴레이가 필요한 경우에 override해서 사용하는 부분으로 이 이벤트와 완전히 똑같은 이벤트를 하나 만들어내는것이다.
{
return new ResizeEvent(type, bubbles, cancelable, oldWidth, oldHeight);
}
}
}
여기 있는 ResizeEvent가 발생했을때 필요한 정보는 현재 이벤트가 발생하기 전의 예전 너비와 높이가 필요해서 properties로서 들어가있다.
이벤트를 만들 경우에 필요한 변수와 종류는 제한이 없다. 이벤트의 properties에 원활한 접근을 위해서 setter, getter함수를 정의해주는 것이 좋다.
그렇다면 이벤트를 dispatch하는 방법은?
이벤트를 발생시킬 대상을 정한다. 일반적인 경우에 부모 혹은 자신에게 이벤트를 dispatch시킨다.
ex) var resize:ResizeEvent = new ResizeEvent(ResizeEvent.RESIZE, false, false, 100, 100);
dispatchEvent(resize); || parent.dispatchEvent(reszie);
이벤트 처리를 위한 EventListener를 작성하는 방법.
mxml의 경우.
<mx:Button id="b1" label="Click Me” click="myEventHandler(event)"/>
as의 경우
b1.addEventListener(MouseEvent.CLICK, myEventHandler);
두가지 모두 동일한 동작을 한다. 하지만 customizing된 Event의 경우 as에 등록하는 것이 용이하다.
private function myEventHandler(event:Event):void
{
Alert.show("An event occurred");
}
이벤트의 흐름.
자식은 부모에게 이벤트로 자신의 상태나 액션을 알려줄수 있고 부모는 그것을 통해서 자식의 상황에 따른 자신의 상황도 바꿀수 있는 기회를 가지게 된다.
그리고 레벨이 2단계를 넘어갈 경우 이벤트 릴레이를 하게 된다. 이 릴레이를 통해서 부모/자식의 통신뿐 아니라 2단계, 3단계 이상의 depth를 가지는 component와의 통신이 가능하게 되는 것이다. 또한, depth는 같으나 상속관계에 있지 않은 다른 component와의 통신도 가능하게 된다. 이런 이벤트 릴레이가 원활하게 하는데 있어서 앞에서 설명한 직접 이벤트의 clone이 유용하게 쓰일수 있다. 필요에 따라서 이러한 이벤트 릴레이 없이 필요한 component에 집적 이벤트를 dispatch시킬수 있다. 하지만 이 경우 상속관계와 component들의 구조를 이벤트 발생시키는 component에서 알아야 해서 유연성이 떨어지는 방법임으로 극히 제한적인 경우에만 사용하여야 한다.
이런 기본적인 이벤트 흐름과 다른 몇가지 이벤트가 있다.
mouseEvent가 그 중에 하나이다.
ppt Flex발표29 설명 그리고 stopPropogation 이벤트를 현재 받은 component에서 더이상 bubbling되지 않게 한다.
이벤트처리가 아주 힘든 것 예.ListBase itemRenderer가 있고 그 위에 뭐가 있기때문에 이벤트 릴레이가 쉽지 않다. 그래서 IDropInListItemRenderer를 쓴다!
이 글은 스프링노트에서 작성되었습니다.
RECENT COMMENT