2008.07.30 16:10
플렉스 내에서 팝업(Popup)으로 창을 띄우려면 PopupManager 를 사용하게 됩니다. 이 때 팝업의 대상은 제한이 없습니다만(심지어 버튼이라도 팝업가능) TitleWindow 컴포넌트를 이용하는 편이 간편하게 처리가 가능합니다. 레퍼런스에서도 팝업관련 예제는 TitleWindow 컴포넌트를 이용하여 보여주고 있습니다. 이는 TitleWindow 컴포넌트가 레퍼런스에 소개된 것과 같이 팝업용으로 사용하기 위해서 Panel 컴포넌트를 확장하여 만들었기때문입니다. 간단하게 TitleWindow에 대한 활용예제는 여기를 참고하시기 바랍니다.

직접 팝업용 컴포넌트를 구현하여 사용하시는 분들도 있으시겠지만, 저 같은 경우는 TitleWindow 컴포넌트를 상속하여 팝업용 컴포넌트를 만들어 사용하고 있습니다. TitleWindow를 상속받으면 상단 좌측에 Close 버튼을 지원하고 Close버튼 클릭시에 CloseEvent가 발생하므로 보다 간편하게 사용할 수 있는 이점이 있습니다. 또한 상단 타이틀바를 클릭하여 드래그(Drag)해서 팝업 윈도우의 위치를 조정할 수 있기도 합니다.

내부 구현상 TitleWindow의 기능은 부모클래스인 Panel에서 거의 다 구현이 되어있고 Close 버튼을 보이게만 하는 정도입니다. 이러한 내용은 이전에 올린 포스트 :  2008/06/20 - [Dev/Flex] - [Flex] mx_internal 로 선언된 변수나 메소드에 접근하기 (namespace 의 사용) 에서 간단하게 언급하였으므로 참고하시면 되겠습니다.

위에서 TitleWindow를 이용하여 팝업시 이점으로 들었던 것 중에 타이틀바를 클릭하여 드래그(Drag)하면 팝업창의 위치를 조정할 수 있다고 한 것이 있었는데, 그렇다면 다른 컴포넌트의 경우에도 똑같이 드래그(Drag)시에 위치가 조정될까요? 대답부터 해보자면, Flex에서 지원하는 기본 컨테이너 컴포넌트 중에서는 TitleWindow와 Panel 만이 가능합니다. 왜냐하면 팝업창을 드래그(Drag)하여 위치 조정하는 기능은 Popupmanager 에서 부여된 것이 아니라, 해당 컴포넌트 자체에서 지원하는 것이 기 때문입니다. TitleWindow에는 팝업창으로 사용시에 드래그(Drag) 하여 위치를 조정할 수 있도록 기능이 구현되어 있으므로 가능한 것입니다.(Panel 같은 경우는 TitleWindow 의 모든 기능이 이미 구현되어 있으므로 팝업시에 드래그(Drag)도 가능합니다.)

여기서 한가지 의문점이 생깁니다. 팝업이 아니라 직접 addChild 하는 경우에 TitleWindow나 Panel은 드래그(Drag)가 되지 않습니다. 그럼 어째서 팝업시에는 드래그(Drag)가 가능한 것일까요? 위에서 분명히 PopupManager가 해당 컴포넌트들이 위치 조정 가능하도록 지원해주지는 않는다고 말씀드렸는데요, 사실 살짝 관여하기는 합니다. ;) 바로 팝업시에 팝업되는 컴포넌트의 isPopup 속성의 값을 true 로 변경해주는데, 이때문에 TitleWindow나 Panel 가 드래그(Drag) 하여 위치조정이 가능하게 된 것입니다.  아래의 코드가 Panel 에서 타이틀바를 클릭시에 호출되는 메소드인 titleBar_mouseDownHandler() 입니다. 코드를 보시면 isPopup 속성이 true 로 되어 있을시에 startDragging() 메소드를 호출하여 위치조정이 가능하게 되는 것을 아실 수 있습니다.



그렇다면 역으로 TitleWindow로 팝업을 띄웠을때 드래그(Drag)를 못하게 하려면 팝업 후에 isPopup 속성을 false로 바꾸면 되겠죠? 아래의 코드와 결과물은 isPopup 속성을 변경하여 팝업 윈도우가 움직이지 못하도록 하는 예제입니다. ;)


이번에는 반대로 isPopup 속성을 true로 변경하여 팝업이 아닌대도 바로 움직일 수 있게 해보도록 하겠습니다. MXML로 정의해 놓은  Panel 의 isPopup 속성을 true로만 변경하였습니다.



이상으로 간단하게 TitleWindow에 대해 다루어 봤습니다. 차후 포스팅에는  PopupManager에 대해서 한번 다뤄볼 생각입니다. ;)

참고문서 : 2009/05/20 - [Dev/Flex] - [Flex] 팝업매니저를 이용한 사용자 정의 컴포넌트의 제작


신고
Favicon of http://lostsin.tistory.com BlogIcon 시난 | 2008.07.31 00:43 신고 | PERMALINK | EDIT/DEL | REPLY
이런걸 보면.. 참 난 반성을 많이 해야한다니까..
글을 어쩜 이리 정성 껏 쓸 수 있지! 놀라워-
난 그냥 결과랑 소스만 보라고 틱 올림;;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 01:05 신고 | PERMALINK | EDIT/DEL
적으면서 나도 정리가 된달까.. ;)
그런 의미에서 적어서 정리하려고 글을 좀 장황하게 적어. ㅋ
Favicon of http://blog.empas.com/chaniks BlogIcon 찬익 | 2008.07.31 03:18 신고 | PERMALINK | EDIT/DEL | REPLY
Panel의 startDragging()을 override하여, 컴포넌트를 새로 하나 만드는 것도 방법! :')
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 09:37 신고 | PERMALINK | EDIT/DEL
전 전에 직접 드래그를 구현해서 썼었는데 말이죠.. ^^;
Favicon of http://blog.empas.com/chaniks BlogIcon 찬익 | 2008.08.01 17:17 신고 | PERMALINK | EDIT/DEL
컨테이너들이 거부 반응(?) 일으키지 않던가요? -ㅁ-;;
예전에 GIS 프로토타이핑할때 startDrag()/stopDrag() 이용해서 드래깅을 좀 건드렸던 적이 있는데, 쓰면 쓸수록 잡다한 문제들이 하나둘씩 툭툭 튀어나와서 고생했던 기억이 나요.. -_-;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.08.01 18:13 신고 | PERMALINK | EDIT/DEL
네. 좀 반항을 하더군요...ㅋ
뭐랄까 좀 어설프게 만들어져있다는 느낌?
Favicon of http://blog.empas.com/chaniks BlogIcon 찬익 | 2008.08.01 22:11 신고 | PERMALINK | EDIT/DEL
Flex는 자신만의 4차원 세계를 구축한, 일종의 넘사벽 프레임워크란 생각.. -_-;;
Favicon of http://2rang.tistory.com BlogIcon 꽃녀 | 2008.07.31 09:20 신고 | PERMALINK | EDIT/DEL | REPLY
잘 보았습니다.
음... 그런데 PopupUpManager 로 Window는 안되더라구요...(당연한 말인가?ㅋ)
titleWindow밖엔 사용 못한다고 본것 같은뎅... 맞나염?
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 09:45 신고 | PERMALINK | EDIT/DEL
Application도 Class 화 해서 띄울 수 있습니다. ;)
따지고 보면 Application 도 컨테이너에서 나온 녀석이라서.. ^^;
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 15:11 신고 | PERMALINK | EDIT/DEL
다음 포스트에서 다룰 내용입니다만, PopupManager 가 팝업을 띄우는 로직이 흔히 생각하시기에 팝업을 어떤식으로 표현할 것인가.. 에서 벗어나지는 않더라고요 ㅎㅎ
어짜피 다 addChild 하는 것이라서 뭐든지 비주얼컴포넌트면 상관없어요 ㅎ
Favicon of http://lovedev.tistory.com BlogIcon ActionDev | 2008.07.31 11:49 신고 | PERMALINK | EDIT/DEL | REPLY
잘봤어여 ^^ 좋은 정보감사합니다~
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 13:08 신고 | PERMALINK | EDIT/DEL
방문 감사드립니다. ;)
Favicon of http://gogothing.tistory.com BlogIcon 게릴라 | 2008.07.31 15:06 신고 | PERMALINK | EDIT/DEL | REPLY
시난님 말씀대로..참 정리 잘하세요~^^ 검쉰님 글 보다 제가 쓴 거 보면 완전 비교됨 ㅋㅋㅋㅋ 늘 좋은 정보. 팁. 감사^^
Favicon of http://warkyman.tistory.com BlogIcon 검쉰 | 2008.07.31 15:12 신고 | PERMALINK | EDIT/DEL
정리 잘해보려고 노력중입니다. ;)
쉽지가 않네요.. ㅎㅎ
Favicon of http://starplaying.tistory.com BlogIcon 라면스프 | 2008.09.26 11:32 신고 | PERMALINK | EDIT/DEL | REPLY
^^ 정말 깔끔하네요. 좋은 정보 감사합니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2008.09.26 13:21 신고 | PERMALINK | EDIT/DEL
방문 감사합니다 ;)
Favicon of http://www.waterfox.co.kr BlogIcon 여뉘 | 2009.04.08 10:21 신고 | PERMALINK | EDIT/DEL | REPLY
항상 좋은정보 감사합니다 ^-^
이거 그냥 <mx:TitleWindow 속성에다가 isPopup으로 바로 넣으면안돼네요? 제가 이상한건지... 동적으로 만들면돼지만.. ㅋ
Favicon of http://www.waterfox.co.kr BlogIcon 여뉘 | 2009.04.08 11:32 신고 | PERMALINK | EDIT/DEL
아;; 아니군요 PopUpManager에 애드하면돼는군요;; 왜 한번에 보면 모를까;;; 아직 개념부족;; ㅠ ㄳㄳ
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.02 10:15 신고 | PERMALINK | EDIT/DEL
해당 컴포넌트에 바로 값을 넣으면 안되더라고요 ㅎㅎ
시점이 아마 다른듯. 객체생성 후에 팝업되는 것이니 당연한 것일 수도..
Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 | 2009.05.28 14:03 신고 | PERMALINK | EDIT/DEL | REPLY
분야는 틀리지만 블로그 하면서 조금씩 배우고 있어요 감사합니다.
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.02 10:16 신고 | PERMALINK | EDIT/DEL
동일한 덧글이 2개 달려서 하나는 삭제 했습니다. ;)
찾아와주셔서 감사합니다 ㅎ
Favicon of http://waterfox.tistory.com BlogIcon Waterfox | 2009.06.15 10:59 신고 | PERMALINK | EDIT/DEL | REPLY
음음... 글올리실때 라인, 배경그리드같은거 어떻게해서 올리는거예요?
보기 편하던데... 궁금합니다~
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2009.06.15 18:34 신고 | PERMALINK | EDIT/DEL
http://koko8829.tistory.com/305
참고하시면 좋겠네요~
Favicon of http://waterfox.tistory.com BlogIcon Waterfox | 2009.06.16 15:07 신고 | PERMALINK | EDIT/DEL
감사합니다 ^-^ㅋㅋ 잘되네요
Favicon of http://webnoon.net BlogIcon 웹눈 | 2010.03.13 23:46 신고 | PERMALINK | EDIT/DEL | REPLY
좋은 정보 감사합니다 ^^
상팔이 | 2010.08.27 00:03 신고 | PERMALINK | EDIT/DEL | REPLY
혹시 canvas 에 addChild 를 써서 canvas(꼭 canvas가 아니어도 됨)를 집어 넣어서
드래그를 했을떄 위치이동을 할수 있는 방법이 있나요?
협업이 이런 기능을 요청을 하는데 이틀쨰 삽질중입니다. ^^;;;
_____________ canvas______________
| |
| ___canvas__________ |
| | 요걸드래그해서 | |
| | 위치이동 | |
| |___________________| |
|__________________________________|
Favicon of http://blog.flashplatform.kr BlogIcon 검쉰 | 2010.09.05 00:46 신고 | PERMALINK | EDIT/DEL
윗글에 Panel 객체가 isPopup 이라는 속성이 true 가 되었을때 Drag 가 가능한것인지 설명한 것이니 참고하시면 될 것 같습니다.
Panel 에 있는 코드와 같이 말씀하신 내부의 Canvas 도 동일한 코드를 작성하시면 되겠네요.
- 덧글 좀..(굽신굽신) : 장문의 덧글은 트랙백을 이용해주세요 ;^)
Name
Password
Homepage
Secret

티스토리 툴바