Flex의 PopUp 창 구현하기.
1. 개요
PopUp Dialog창 구현하기.

2. 필요한 import 문
import mx.core.IFlexDisplayObject;
import mx.managers.PopUpManager;

3. 필요한 MXML Component
Title Window
이  컴포넌트는 띄우기만 하면 dim처리를 자동으로 처리해주고 주의할 것은

showCloseButton을 true를 해주고   close속성에서 close버튼에 대한 정의가 된 함수를

호출해주는 것이 좋다.(ex.PopUpManager.removePopUp(this as IFlexDisplayObject);


4. PopUp Example
in main.mxml에서는


Popup 창을 호출하는 함수의 예.
   <mx:Script>
        <![CDATA[
            import mx.core.IFlexDisplayObject;
            import mx.managers.PopUpManager;
           
            private function login():void{
            var flexPopup:IFlexDisplayObject =

PopUpManager.createPopUp(this as DisplayObject, PopIn, true);
 //popupmanager에 "flexpopup"이라는 popup창을 띄운다.

           //PopIn은 띄울 팝업창에 대한 정의가 되어 있는 mxml이름이다.

           (flexPopup as PopIn).myid = this.insert.text;     

//혹시 팝업창에 넘길 인자가 있다면 이런 식으로 넘겨주면 된다.

       PopUpManager.centerPopUp(flexPopup);   //팝업창이 띄워지는 위치를 정중앙으로 옮긴다.
            }       
        ]]>
</mx:Script>

//.....


in PopIn.mxml 에서는
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="586"

height="452"   showCloseButton="true" close="this.closeView2()" 

//close버튼을 true으로 셋팅하고 그 버튼에 대한 정의된 함수를 호출한다.

 closeButtonDownSkin="@Embed('img/FP_Button_CloseWindow_Normal.png')"

 closeButtonOverSkin="@Embed('img/FP_Button_CloseWindow_Hover.png')"
 closeButtonUpSkin="@Embed('img/FP_Button_CloseWindow_Normal.png')"

  borderStyle="outset" backgroundColor="#000000" backgroundAlpha="0.0" alpha="0.88">
 //스킨 및 옵션에 대한 셋팅
 <mx:Script>
  <![CDATA[
   import mx.core.IFlexDisplayObject;
   import mx.managers.PopUpManager;
   
   [Bindable]public var myid:String;
   
   
   private function closeView2():void
   {
    PopUpManager.removePopUp(this as IFlexDisplayObject);
    //PopUpManager에서 팝업창을 제거해준다.
   }
  ]]>
 </mx:Script>
</mx:TitleWindow>

Posted by 뚜기당