[Flex] TitleWindow를 이용한 팝업(Popup)에 대한 간단한 설명과 Tip

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

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() 메소드를 호출하여 위치조정이 가능하게 되는 것을 아실 수 있습니다.

view plaincopy to clipboardprint?

1. /**  
2. private function titleBar_mouseDownHandler(event:MouseEvent):void  
3. {  
4.     // A mouseDown on the closeButton will bubble up to the titleBar,  
5.     // but it shouldn't start a drag; it should simply start the  
6.     // normal mouse/Button interaction.  
7.     if (event.target == closeButton)  
8.         return;  
9.   
10.     if (enabled && isPopUp && isNaN(regX))  
11.         startDragging(event);  
12. }  

/** private function titleBar_mouseDownHandler(event:MouseEvent):void { // A mouseDown on the closeButton will bubble up to the titleBar, // but it shouldn't start a drag; it should simply start the // normal mouse/Button interaction. if (event.target == closeButton) return; if (enabled && isPopUp && isNaN(regX)) startDragging(event); }

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

view plaincopy to clipboardprint?

1.    
2. <?xml version="1.0" encoding="utf-8"?>  
3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  
4.     <mx:Script>  
5.         <![CDATA[  
6.             import mx.core.UIComponent;  
7.             import mx.events.CloseEvent;  
8.             import mx.managers.PopUpManager;  
9.             import mx.containers.TitleWindow;  
10.              
11.             public function Popup(move:Boolean):void  
12.             {  
13.                 var c:TitleWindow = PopUpManager.createPopUp(this, TitleWindow) as TitleWindow;  
14.                 c.showCloseButton = true;  
15.                 c.width = 200;  
16.                 c.height = 200;  
17.                 c.title = "Test Popup";  
18.                 c.isPopUp = move;  
19.                  
20.                 c.addEventListener(CloseEvent.CLOSE, closeEventHandler);  
21.                 PopUpManager.centerPopUp(c);  
22.             }  
23.              
24.             private function closeEventHandler(evt:CloseEvent):void  
25.             {  
26.                 PopUpManager.removePopUp(evt.currentTarget as UIComponent);  
27.             }  
28.         ]]>  
29.     </mx:Script>  
30.     <mx:Button label="움직이는 팝업 띄우기"   
31.       horizontalCenter="0" verticalCenter="0" fontSize="12" click="{Popup(true)}" width="180"/>  
32.     <mx:Button label="움직이지 않는 팝업 띄우기"   
33.       horizontalCenter="0" verticalCenter="32" fontSize="12" click="{Popup(false)}" width="180"/>  
34. </mx:Application>  

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <![CDATA[ import mx.core.UIComponent; import mx.events.CloseEvent; import mx.managers.PopUpManager; import mx.containers.TitleWindow; public function Popup(move:Boolean):void { var c:TitleWindow = PopUpManager.createPopUp(this, TitleWindow) as TitleWindow; c.showCloseButton = true; c.width = 200; c.height = 200; c.title = "Test Popup"; c.isPopUp = move; c.addEventListener(CloseEvent.CLOSE, closeEventHandler); PopUpManager.centerPopUp(c); } private function closeEventHandler(evt:CloseEvent):void { PopUpManager.removePopUp(evt.currentTarget as UIComponent); } ]]> </mx:Script> <mx:Button label="움직이는 팝업 띄우기" horizontalCenter="0" verticalCenter="0" fontSize="12" click="{Popup(true)}" width="180"/> <mx:Button label="움직이지 않는 팝업 띄우기" horizontalCenter="0" verticalCenter="32" fontSize="12" click="{Popup(false)}" width="180"/> </mx:Application>

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

view plaincopy to clipboardprint?

1. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">  
2.     <mx:Script>  
3.         <![CDATA[  
4.               
5.             public function init():void  
6.             {  
7.                 myPanel.isPopUp = true;  
8.             }  
9.               
10.         ]]>  
11.     </mx:Script>  
12.     <mx:Panel id="myPanel" width="250" height="200" layout="absolute"   
13.       title="myPanel" x="125" y="50">  
14.         <mx:Label text="팝업이 아닙니다." fontSize="12" horizontalCenter="0" verticalCenter="0"/>  
15.     </mx:Panel>  
16.       
17. </mx:Application>  

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()"> <mx:Script> <![CDATA[ public function init():void { myPanel.isPopUp = true; } ]]> </mx:Script> <mx:Panel id="myPanel" width="250" height="200" layout="absolute" title="myPanel" x="125" y="50"> <mx:Label text="팝업이 아닙니다." fontSize="12" horizontalCenter="0" verticalCenter="0"/> </mx:Panel> </mx:Application>

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