[Flex] Event 메타태그

사용자 정의 컴포넌트(custom component)를 만들었을때, 특정 이벤트를 발생시켜야하는 경우가 종종 있습니다. 마치 Button 을 사용자가 Click 하였을 때, Click Event가 발생하는 것 처럼 말이죠.  아래의 예제는 TextInput을 상속한 MyTextInput이라는 사용자 정의 컴포넌트입니다. 이 컴포넌트의 추가적인 기능으로는 키 입력시 'backspace' 를 입력하면, backspace 이벤트를 발생시키는 것입니다. (MXML로 만든 코드만 올려놓았는데, AS로 만든 버전도 같이 올렸습니다. 둘다 할 줄 알아야 좋죠 ㅋ)

MXML 로 만든 MyTextInput 컴포넌트 (MyTextInput.mxml)
<?xml version="1.0" encoding="utf-8"?> <mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" keyDown="keyDownEvent(event)"> <mx:Metadata> [Event(name="backspace",type="flash.events.Event")] </mx:Metadata> <mx:Script> <![CDATA[ private function keyDownEvent(evt:KeyboardEvent):void { if(evt.charCode == 8) //backspace 입력시 { dispatchEvent(new Event("backspace")); } } ]]> </mx:Script> </mx:TextInput>
AS로 만든 MyTextInput 컴포넌트 (MyTextInput.as)
package { import flash.events.Event; import flash.events.KeyboardEvent; import mx.controls.TextInput; [Event(name="backspace", type="flash.events.Event")] public class MyTextInput extends TextInput { public function MyTextInput() { super(); this.addEventListener(KeyboardEvent.KEY_DOWN, keyDownEvent); } private function keyDownEvent(evt:KeyboardEvent):void { if(evt.charCode == 8) //backspace 입력시 { dispatchEvent(new Event("backspace")); } } } }

keyDown 이벤트가 발생할때에 입력한 값이 backspace에 해당하는 '8' 이면  backspace 이벤트를 발생하도록 하였습니다. 여기서 눈여겨 보셔야 할 것은 Event 메타태그인데요. 위의 코드에서 아래와 같이 선언하였습니다.

<mx:Metadata>
  [Event(name="backspace",type="flash.events.Event")]
</mx:Metadata>

'선언해 놓은 컴포넌트에서 발생되는 이벤트가 이런 것이 있다~' 라고 선언해준다고 생각하시면 되겠습니다. 2가지를 적어야 하는데요, name과 type 입니다. name에는 해당 이벤트 이름, type 에는 해당 이벤트 클래스를 적어주시면 됩니다. 위와 같이 선언해놓으면 아래와 같이 name이 MXML 상에서 아래의 이미지와 같이 이벤트로 표시됩니다.

빌더에서 해당 이벤트가 명시됨.

이 backspace 이벤트를 이용하여 아래와 같이 예제를 한번 만들어보았습니다. 사용자가 backspace 키를 누르면 아래의 TextArea 에 backspace를 눌렀다는 메세지가 나오게 됩니다.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:c="*" width="402" height="267" fontSize="12"> <mx:Script> <![CDATA[ private function backspaceEventHandler(evt:Event):void { traceTextArea.text += "사용자가 backspace 를 눌렀습니다.\n"; } ]]> </mx:Script> <c:MyTextInput x="121" y="65" backspace="backspaceEventHandler(event)"/> <mx:TextArea id="traceTextArea" x="10" y="172" height="85" editable="false" width="315"/> <mx:Button x="333" y="233" label="clear" click="{traceTextArea.text = ''}"/> </mx:Application>

그 렇다면 상단의 코드에서 보시면 MyTextInput 컴포넌트에서  keyDown 이벤트 핸들러를 지정한 2행을 보시면 TextInput 에도 keyDown 이벤트에 대해서 메타태그가 선언되어 있다 라고 유추해볼 수 있습니다. 실제로 TextInput 에는 레퍼런스에서 볼 수 있듯이 TextInput에서 정의된 4개의 이벤트가 아래와 같이 메타태그로 선언되어 있습니다.

[Event(name="change", type="flash.events.Event")] [Event(name="dataChange", type="mx.events.FlexEvent")] [Event(name="enter", type="mx.events.FlexEvent")] [Event(name="textInput", type="flash.events.TextEvent")]

keyDown 이벤트는 InteractiveObject 에서 정의되어 있어서 소스를 직접 확인할 수는 없네요. 안타깝습니다. ;)

이와 같은 자료는 지용호님의 블로그에 [Flex 2.0.1]커스텀 컴포넌트에 사용하는 Metadata 태그 소개 라는 포스트가 존재합니다만, 아직 어려워하시는 분들이 있는 것 같아 다시한번 설명해보았습니다.

이상으로 Event 메타태그에 대해서 알아보았습니다. ;)