'AS'에 해당되는 글 2건
2010.03.09 02:00
정말 오랫만에 글을 쓰는 것 같네요. ;) 먹고 살기 바쁜터라 통 블로그에 신경을 못썼습니다. 그래도 꾸준히 찾아주신 분들께 감사드립니다.

이번 포스트에서는 ASDoc을 위한 작업에 대한 Tip 과 MXML 에서 ASDoc 을 작성하는 것에 대해 알아보려고 합니다. 많은 분들이 아실 만한 내용입니다만, 정리하는 차원에서 작성해보겠습니다.

우선 ASDoc 을 생성하는 방법은 지용호님의  Flex 프로젝트 문서화 - ASDoc 사용하기 라는 포스트로 알아보시면 되겠습니다. 한번 작업해보시면 아시겠지만, 콘솔에서 asdoc.exe를 실행시켜 작업하는 것이 여간 불편한 것이 아닙니다. 이미 지용호님이 그에 따른 해법으로 ANT[각주:1]를 이용하는 방법에 대해 Flex Builder 3에서 ANT 사용하기 포스트를 해두셨습니다. (짝짝짝) 저희는 그대로 읽기만 하면 됩니다. :)
 
위의 2개의 포스트을 읽고 실습해보셨다면 '이렇게 좋은 기능이!!!' 라고 감탄하셨지 모르겠지만, ASDoc Comment를 입력하는 것 자체가 사실 좀 귀찮기는 합니다. 물론 'Ctrl + Shift + D' 를 눌러 ASDoc Comment 구문을 자동생성 할 수 있는 있습니다만, @param, @return 등을 일일이 입력하는 것 자체가 상당히 귀찮습니다. 이때 유용하게 쓸 플러그인을 하나 소개합니다.

Flex Formatter 입니다. 이미 알고 계신분이 많을 것 같습니다. 예전에 sugo님 블로그인 Apollo9 에서 Flex Builder MXML/AS Code Formatter 라는 포스트로 소개되었던 플러그인인데요, Flex Builder 3에서 가장 아쉬운 기능인 소스코드 포멧팅을 지원해주는 매우 나이스한 플러그인입니다. 이 Flex Forrmatter가 upgrade 되면서 ASDoc 관련 기능들이 추가되었습니다. 자동으로 ASDoc Comment 를 추가해주는 기능입니다.  설치방법은 우야꼬님의 블로그에 Flex Formatter - FlashBuilder Plugin 라는 포스트로 소개가 되어있으니 참고하시면 되겠습니다. (Flex Formatter는 현재 글 쓰는 시간을 기점으로 0.7.1 버전이 최신입니다.)

Flex Builder 3에서 Flex Formatter를 설치한 화면

Flex Builder 3에서 Flex Formatter를 설치하면 위와 같이 좌측상단에 아이콘들이 추가됩니다.


총 5개의 버튼이 나타나게 되는데 간단히 설명해보면 왼쪽에서 오른쪽으로 각 버튼들은 다음과 같은 기능을 합니다.

1. 파일 내에 설정값에 따라 ASDoc Comment 생성
2. 커서가 위치한 열에 ASDoc Comment 생성
3. 코드 포멧팅 적용
4. 들여쓰기 적용
5. 코드 재배치

1번 'Generate ASDoc comments for file' 버튼을 클릭하여 ASDoc Comment를 생성하여보도록 하겠습니다.

위와 같은 테스트코드를 작성 후 'Generate ASDoc comments for file' 버튼을 클릭하게 되면 아래와 같이 주석이 자동으로 생성되게 됩니다.

여기에 ASDoc 문서에서 볼 수 있게 설명을 아래와 같이 적어보도록 하겠습니다.


이렇게 작성된 클래스는 아래와 같이 ASDoc 파일이 생성됩니다.


위의 AS을 참고하여 생성된 ASDoc

위의 AS을 참고하여 생성된 ASDoc


하지만 아쉽게도 AS 파일에서만 지원되고, MXML에서는 아직 지원되지 않네요. ;-(


이번에는 MXML에서 ASDoc 를 생성하는 것에 대해 알아볼텐데요, MXML에서도 ASDoc Comment를 입력하면 ASDoc을 생성할 수 있습니다만, AS와는 달리 Class 수준의 Comment를 달수 없었다는 것이 문제였습니다.  (위에서 '간단한 테스트용 클래스인 MyClass'라고 출력되는 부분) 부끄럽게도 그간 ActionScript로 작성된 라이브러리에만 ASDoc을 만들었터라 MXML에서는 ASDoc을 생성해보지 않아서 해결책 찾을 생각도 안해보았는데, 이번에 한번 해보려고 열심히 구글링~ 해보았더니 떡하니 이런 문서가 있더군요!
Flex 4 에서 해당 기능이 추가되었네요. 기존의 MXML의 Comment 방식이었던 <!-- --> 과 구별하기 위해 <!--- --> (dash 3개)를 사용하게 정의하고 있네요. Flex Builder 3를 사용하시는 분들께서도 Flex 4 sdk 를 내려받으셔서 Flex 4의 asdoc.exe 를 사용하시면 위와 같이 MXML에서 Class 수준의 Comment를 입력할 수 있습니다. ;)

위의 MXML을 참고하여 생성된 ASDoc

위의 MXML을 참고하여 생성된 ASDoc


Flash Builder 가 정식발매 된 후에는 당연한 듯 사용할 지도 모를 정보입니다만, 기록의 차원에서 정리하여보았습니다. ASDoc 관련 정보는 LiveDoc의 Using ASDoc에 잘 나와있으니 참고하시면 좋겠네요. ;)
  1. 자바기반의 빌드 자동화 툴. (http://ant.apache.org/) [본문으로]
저작자 표시 비영리 변경 금지
신고
Creative Commons License
Creative Commons License
공룡 | 2010.03.09 02:24 신고 | PERMALINK | EDIT/DEL | REPLY
좋은글 잘보고 갑니다~~~~ ^^
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.03.09 13:07 신고 | PERMALINK | EDIT/DEL
덧글 감사합니다 ;^)
Favicon of http://me2day/tangbba BlogIcon 꼬출든남자 | 2010.03.09 12:59 신고 | PERMALINK | EDIT/DEL | REPLY
저도 이넘을 쓰기는 하는데..
이것 때문인지는 모르겠지만 코드 어시스트가 삑싸리나기도 하고..
괄호 한개 안닫은 구문이 코드 중간에 있으면 에러창 토하고.. ㅋㅋ Snippet과 적당히 섞어 쓰고 있어욤
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.03.09 13:07 신고 | PERMALINK | EDIT/DEL
ASDoc 은 민감하니 부드럽게~ ㅎㅎ
Favicon of http://koko8829.tistory.com BlogIcon 열이아빠 | 2010.03.09 14:25 신고 | PERMALINK | EDIT/DEL | REPLY
저도 이제 슬슬 주석질을 좀 해야될텐데요. ^^
스크립트 내용 분석해서 알아서 주석도 달아주고 하면 좋겠어요.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.03.12 08:22 신고 | PERMALINK | EDIT/DEL
진정한 자동화문서!!! ㅋ
Favicon of http://vulcan9.tistory.com BlogIcon vulcan | 2010.03.09 15:55 신고 | PERMALINK | EDIT/DEL | REPLY
mxml에서 클래스주석 다는 방법 유용하게 잘쓰겠습니다..ㅎㅎ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.03.12 08:22 신고 | PERMALINK | EDIT/DEL
더 유용한 것들 알게되시면 공유를 좀.. ^^
Favicon of http://blog.jidolstar.com BlogIcon 지돌스타 | 2010.03.17 13:02 신고 | PERMALINK | EDIT/DEL | REPLY
ㅋㅋㅋ 이제 mxml에도 주석질!
Favicon of http://tawool.tistory.com BlogIcon 타울 | 2010.03.24 19:04 신고 | PERMALINK | EDIT/DEL | REPLY
오...이젠 Flex4를 사용해야할때인가봐요 ㅋㅋ
검쉰님 좋은 내용 감사합니다~ ㅎ
Favicon of http://hazbola.tistory.com BlogIcon 뿌꾸 | 2010.03.24 21:22 신고 | PERMALINK | EDIT/DEL | REPLY
좋은글 너무 잘 보았습니다 ^^ 트래붹 걸었습니다 ..^^
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret
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 본문 복구 완료
신고
Creative Commons License
Creative Commons License
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
prev"" #1 next