'이벤트'에 해당되는 글 3건
2008.08.07 14:21
Flex에는 크게 MXML과 ActionScript 로 구현되고 있는데, 내부적으로 MXML이 ActionScript 로 변환되어 SWF로 빌드 됩니다. MXML이 ActionScript 로 변환되는 것을 볼 수도 있는데요, keep-generated-actionscript 속성을 바꿔주면 됩니다. 속성 지정 방법은 시난님의 블로그에서 잘 정리해놓으셨습니다. (SliverLight의 경우는 Flex와 다르게 CS 코드가 XAML을 변환시키는 구조라고 하더군요)

실제로 간단하게 속성을 지정하여 변환을 하여 보면 참 새로운(이해 잘 안되는) 코드들이 마구 쏟아져나옵니다. 특정 MXML Application을 생성하면 관련된 파일 4개가 생성이 됩니다. (다른 것들은 보통 특정 스타일 지정 ActionScript 클래스이거나 속성 관련)

예를 들어 test.mxml 파일이 있다면 아래와 같이 생성이 되게 됩니다.
  • test-generated.as
  • test-interface.as
  • _test_FlexInit-generated.as
  • _test_mx_managers_System.as
본 포스트에서 살펴볼 것은 처음에 있는 xxx-generated.as 입니다. 이해를 쉽게 돕기 위해서 간단하게 MXML Application을 만들어보겠습니다. MXML.mxml 이라고 이름 붙혀보았습니다. (조악한 네이밍. ㅜㅜ)


위와 같이 MXML이 생성이 되었다면 아래와 같이 MXML-generated.as 가 생성이 됩니다.
(설명할 부분만 수록하도록 하겠습니다. - 길이가 길어서...)



MXML Application 이기 때문에 클래스는 Application 을 상속받고 있습니다. 그 바로 밑에 보면 흔히 쓰이지 않는 UIComponentDescriptor 타입의 변수가 보입니다.

UIComponentDescriptor 인스턴스는, 비주얼 컴퍼넌트의 인스턴스의 MXML 태그로 지정된 정보를 캡슐화합니다.

MXML 파일내의 대부분의 태그는, UIComponent object의 트리를 설명하는 것입니다. 예를 들어,<mx:Application> 태그는 UIComponent object를 나타내, 그 child containers와 컨트롤도 모두 UIComponent object입니다.

MXML 컴파일러는, 각각의 MXML 태그를 UIComponentDescriptor 인스턴스에 컴파일 합니다. 엄밀하게는, MXML 컴파일러는 ActionScript 데이터 구조를 자동 생성합니다. 이것은, UIComponentDescriptor object의 트리가 됩니다.

실행시에, Container 클래스의 createComponentsFromDescriptors() Methods는, 컨테이너의 childDescriptors 배열의 UIComponentDescriptor object내의 정보를 사용해, 컨테이너의 아이인 실제의 UIComponent object, 및 한층 더 깊은 자손을 작성합니다. 컨테이너의 property creationPolicy 의 값에 따라서는, 어플리케이션의 기동시에 컴퍼넌트의 일부가 표시될 때, 또는 어플리케이션의 개발자가 수동으로 createComponentsFromDescriptors() Methods를 호출했을 때에, 자손이 작성되는 일이 있습니다.

통상, UIComponentDescriptor 인스턴스를 스스로 작성할 것은 없습니다. Container 클래스의 childDescriptors 배열을 경유해, MXML 컴파일러가 자동 생성한 인스턴스에 액세스 할 수 있습니다.

출처 : flexdocs.kr


설 명이 좀 어려운데요, 다시 말해서 MXML로 정의된 정보를 모두 가지고 있게 된다는 것입니다. 내부적으로 트리형태로 자식 컴포넌트들도 다 가지고 있게 되는데, 실제로 UIComponentDescriptor 타입의 _documentDescriptor_ 변수가 Application 이고, 그 자식으로 추가된 Button 컴포넌트는 childDescriptors로 추가되어 있습니다. 물론 Button 컴포넌트도 UIComponentDescriptor 타입이 되죠. 만약 버튼에 자식 컴포넌트가 존재했다면 childDescriptors 에 정의되어 있을겁니다.

여기서 잠시 Application에 childDescriptors로 정의된 Button 을 다시 한번 보겠습니다.

여기서 잠시 보실 것은 Button에 설정해놓은 click 이벤트입니다. 클릭시에 "___MXML_Button1_click" 를 호출하도록 되어 있는데요, 해당 메소드로 가보면 제가 정의한 clickEventHandler 를 호출하도록 하고 있습니다.


특정 이벤트에 대해서 이벤트 핸들러(event handler)를 설정하게 되면 1. 해당 이벤트에 대해서 호출된 메소드를 생성하고 2. 그 메소드가 이벤트 핸들러를 호출하게 하는 방식입니다.

저는 이 구조를 처음 봤을 때 전부터 궁금했던 의문점이 하나 풀렸습니다.

위와 같은 코드가 있다고 할때에 이 것을 ActionScript 로는 어떻게 할까 하는 것이었습니다. ActionScript 로는 addEventListener 메소드를 이용해야 되는데, 핸들러 메소드에게 따로 파라미터를 던질 방법이 없었던 거죠. 커뮤니티에도 이와 같은 질문들이 가끔씩 올라왔기도 했고, 저도 상당히 궁금했었습니다.

살짝 감이 잡히시나요?

각 버튼의 이벤트 핸들러가 생성되고 그 이벤트 핸들러에서 위에서 지정한 clickEventHandler를 호출하게 됩니다. 참 난감하더군요 ;)

아무튼 뭐 살짝 MXML이 ActionScript 로 변환되는 과정에 대해 살짝 알아보았습니다. ;)
PopupManager 관련 글은 아직 준비중입니다.. ㅜㅜ



2008-08-20 본문 복구 완료
신고
Favicon of http://lostsin.tistory.com/ BlogIcon 시난 | 2008.08.07 14:34 신고 | PERMALINK | EDIT/DEL | REPLY
헉헉 굿잡!
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.08.25 01:14 신고 | PERMALINK | EDIT/DEL
어려워어려워;;
Favicon of http://wooyaggo.tistory.com BlogIcon wooyaggo | 2008.08.25 01:07 신고 | PERMALINK | EDIT/DEL | REPLY
지금은 플렉스까막눈이지만 나중에 플렉스 할때 꼭 참고하겠습니다!
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.08.25 01:14 신고 | PERMALINK | EDIT/DEL
감사합니다. ;)
다른 분들이 달아주신 덧글은 복구가 불가능(구글이 저장을....)해서 덧글이 없네요 ㅎㅎ
덧글 감사합니다 ;)
Favicon of http://thlife.net BlogIcon THLIFE.net | 2008.10.22 18:11 신고 | PERMALINK | EDIT/DEL | REPLY
항상 좋은 글 감사합니다!
Favicon of http://vulcan9.tistory.com BlogIcon vulcan | 2009.12.04 16:03 신고 | PERMALINK | EDIT/DEL | REPLY
벌써 1년이나 지난 포스트네요..역시 대단하심. mxml 코드 생성기를 만들려다 보니 저도 이벤트쪽 코드가 어떻게 as로 바뀔까하고 궁금해서 나름 정리해 보았습니다. 비슷한 주제일것 같아 트랙백으로 남김니다. 프로젝트 진행용으로 작성된거라 좀 불필요한 내용이 많네요--:;
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.12.04 09:15 신고 | PERMALINK | EDIT/DEL
트랙백 고맙습니다. ;)
프로젝트 잘 진행되기를 기원합니다.
Favicon of http://spyrogira256.textcube.com BlogIcon 윤재진 | 2010.11.05 11:59 신고 | PERMALINK | EDIT/DEL | REPLY
댓글 감사합니다.
Favicon of http://xoul.kr BlogIcon xoul | 2011.07.29 23:40 신고 | PERMALINK | EDIT/DEL | REPLY
와 정말 좋은글 잘 보고 갑니다 ^^
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.07.08 15:27
사용자 정의 컴포넌트(custom component)를 만들었을때, 특정 이벤트를 발생시켜야하는 경우가 종종 있습니다. 마치 Button 을 사용자가 Click 하였을 때, Click Event가 발생하는 것 처럼 말이죠.  아래의 예제는 TextInput을 상속한 MyTextInput이라는 사용자 정의 컴포넌트입니다. 이 컴포넌트의 추가적인 기능으로는 키 입력시 'backspace' 를 입력하면, backspace 이벤트를 발생시키는 것입니다. (MXML로 만든 코드만 올려놓았는데, AS로 만든 버전도 같이 올렸습니다. 둘다 할 줄 알아야 좋죠 ㅋ)

MXML 로 만든 MyTextInput 컴포넌트 (MyTextInput.mxml)

AS로 만든 MyTextInput 컴포넌트 (MyTextInput.as)


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를 눌렀다는 메세지가 나오게 됩니다.









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



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

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

이상으로 Event 메타태그에 대해서 알아보았습니다. ;)
신고
dilu | 2008.07.08 10:00 신고 | PERMALINK | EDIT/DEL | REPLY
어제 마침 커스텀 이벤트에 대해 공부했었는데, 쉽게 정리가 되네요 ~
좋은 글 감사합니다 (_ _)
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.08 11:03 신고 | PERMALINK | EDIT/DEL
방문 감사합니다~ ;)
박스농사 | 2008.07.08 10:55 신고 | PERMALINK | EDIT/DEL | REPLY
아 머리아퍼.
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.08 11:03 신고 | PERMALINK | EDIT/DEL
두통엔 타이레놀~
김민성 | 2008.07.08 11:28 신고 | PERMALINK | EDIT/DEL | REPLY
항상 옆자리에 앉아 있는데...
이제서야 댓글을 남기네요~ ^^
근데 플렉스 자료 만긴 정말 많다... 여기 팬들도 많은거 같아요~~ ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.08 15:15 신고 | PERMALINK | EDIT/DEL
공부해서 남주자! 스타일이랄까요. ㅋ
Favicon of http://lovedev.tistory.com BlogIcon ActionDev | 2008.07.08 12:49 신고 | PERMALINK | EDIT/DEL | REPLY
잘봤어요~ ^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.08 15:14 신고 | PERMALINK | EDIT/DEL
방문 감사합니다. ;)
Favicon of http://genial12.tistory.com BlogIcon 양팸두목 | 2008.07.08 17:03 신고 | PERMALINK | EDIT/DEL | REPLY
술한잔 해야 될낀데.ㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.09 06:53 신고 | PERMALINK | EDIT/DEL
뉘신지? ^^;
아카시아 | 2008.07.09 00:20 신고 | PERMALINK | EDIT/DEL | REPLY
며칠전 질문에 답해주셔서 감사합니다. 덕분에 잘 해결되었어요~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.09 06:53 신고 | PERMALINK | EDIT/DEL
네엡! 도움 되셨다니 잘되었네요 ㅎ
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2008.07.09 13:49 신고 | PERMALINK | EDIT/DEL | REPLY
아주아주 좋은 글입니다. ㅎㅎㅎ
천문노트에 bindable metadata 태그에 대한 글 올려놨어요 ㅎㅎ
http://astronote.org/board/index.php?print=&amp;menu=7255&amp;table_name=flex&amp;job=view&amp;idx=27202&amp;page=1
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.09 15:36 신고 | PERMALINK | EDIT/DEL
와우~ 대단하심!!! +_+
전 요즘에 SDK 까보자는 생각에 하나씩 죄다 보고 있는 중입니다. ;) 힘드네요;;
비만짱구 | 2009.02.10 16:25 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 글이네요. 지돌님 글 보고 어려워 한다는 사람들중 한명입니다. 잘 보고 갑니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.02.15 11:19 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다 ;)
강동 | 2009.07.07 17:04 신고 | PERMALINK | EDIT/DEL | REPLY
잘봤습니다...퍼가도될까요?
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.07.07 21:39 신고 | PERMALINK | EDIT/DEL
출처만 밝히시면 퍼가셔도 좋습니다 ;)
Favicon of http://blog.chanik.com BlogIcon 찬익 | 2009.07.13 12:04 신고 | PERMALINK | EDIT/DEL | REPLY
cancelable도 함께 고고싱
Favicon of http://blog.younghorn.com BlogIcon 이민철 | 2009.11.23 10:59 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 글이네요.
AS 랑 다르군요.
어쩐지 MXML에 아무리 넣어도 안보이더라고요..
메타태그에 넣어야하네요..
엉엉 ㅠㅠ

고맙습니다.
상팔이 | 2010.08.27 00:24 신고 | PERMALINK | EDIT/DEL | REPLY
api 보다 더 이해하기 싶게 설명해 놓으셨네요..
좋은 정보 감사합니다.
cjssus | 2012.04.10 09:03 신고 | PERMALINK | EDIT/DEL | REPLY
담아갑니다. 좋은내용 감사합니다.
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
2008.04.14 13:36

Adobe Flex 공식사이트 에서 진행한 이벤트중 3월의 이벤트인 '내 블로그에 Flex 가 있다' 이벤트가 있었습니다.

사용자 삽입 이미지

매거진을 준다고 하시기에 메일을 냅다 보냈드랬죠~

오늘 연락이 왔습니다! 사이트에 발표글도 올라왔더군요!

사용자 삽입 이미지

우왓! 워낙 쟁쟁한 블로거 분들이 많아서 생각도 안하고 있었습니다!
너무 감사드립니다. ;)
(영구기 님도 당첨되셨네요 더불어 축하축하)

게다가 플렉스 자격증 50% 할인 바우쳐도 오늘 보내주셨네요. ;)

사용자 삽입 이미지

오늘은 완전히 행운의 날인듯? ㅎㅎ 로또 사러가야겠습니다! ㅋ
신고
Favicon of http://airdev.tistory.com BlogIcon 영구기 | 2008.04.14 14:43 신고 | PERMALINK | EDIT/DEL | REPLY
ㅎㅎ 땡큐염~트랙백 교환이벤트 같네요^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.14 15:52 신고 | PERMALINK | EDIT/DEL
트랙백을 교환해봅시다~ ㅋ
시드 | 2008.04.14 18:08 신고 | PERMALINK | EDIT/DEL | REPLY
검쉰행님 축하 드려요~~ 밥은 쏘실꺼죠?? 그렇죠?? 기다리고 있겠습니다~ ㅎㅎ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.14 18:41 신고 | PERMALINK | EDIT/DEL
응? 뭐?
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2008.04.14 19:24 신고 | PERMALINK | EDIT/DEL | REPLY
앗..밥 쏘신다구요. 저도 대기자 명단에...ㅎㅎ
축하드려요~~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.14 21:04 신고 | PERMALINK | EDIT/DEL
열이아버님까지!! ㅋ
조후니 | 2008.04.15 14:47 신고 | PERMALINK | EDIT/DEL | REPLY
학스 맛난거 사죠 ㅋㅋ
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.04.15 15:20 신고 | PERMALINK | EDIT/DEL
형이 사줘야죠. ㅋㅋ
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
prev"" #1 next

티스토리 툴바