Creating custom pop-up windows with the PopUpManager class (redux)

In a previous example, “Creating custom pop-up windows with the PopUpManager class”, we saw how you could use ActionScript to create pop up windows using the PopUpManager class in Flex.

In the following example we see how you can create a custom MXML component and pass the class name to the static PopUpManager.createPopUp() method to display the pop up.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/20/creating-custom-pop-up-windows-with-the-popupmanager-class-redux/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;

            private function launchMoreInfo():void {
                var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                PopUpManager.centerPopUp(win);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="Click for more information"
                click="launchMoreInfo();" />
    </mx:ApplicationControlBar>

</mx:Application>

Dialog.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- Dialog.mxml -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        title="More information"
        showCloseButton="true"
        width="400"
        height="300"
        close="titleWindow_close(event);">

    <mx:Script>
        <![CDATA[
            import mx.events.CloseEvent;
            import mx.managers.PopUpManager;

            private function titleWindow_close(evt:CloseEvent):void {
                PopUpManager.removePopUp(this);
            }
        ]]>
    </mx:Script>

    <mx:String id="info" source="info.txt" />

    <mx:TextArea id="txt"
            htmlText="{info}"
            focusAlpha="0.0"
            width="100%"
            height="100%" />

</mx:TitleWindow>

info.txt

<font size="+2"><i>More Information...</i></font>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec at arcu in lacus iaculis ultricies. Vivamus consectetuer. Donec vulputate aliquam leo. Nam metus. Aliquam nulla odio, ultrices vitae, nonummy eget, viverra accumsan, tellus. Curabitur neque ante, nonummy ut, fermentum eu, elementum a, ligula. Fusce hendrerit lectus ac velit. Suspendisse lorem pede, sagittis ac, fermentum non, auctor quis, nulla. Integer eu lacus sit amet justo vestibulum sodales. In euismod tellus eget magna. Vestibulum sed ante. Suspendisse eros libero, gravida ac, cursus et, porta vitae, lectus.</p>

View source is enabled in the following example.

43 thoughts on “Creating custom pop-up windows with the PopUpManager class (redux)

  1. northwebs.net,

    You shouldnt need the import. the Dialog.mxml, info.txt, and main.mxml should all be in the same directory. Sorry, I think the filenames above the code are a bit confusing. You can check out the source code to see the exact folder structure.

    Peter

  2. Hi,

    If i want to put the Dialog.mxml file in an other folder (ie : src/myComponents/Dialog.mxml). How can I then reference it into the code “PopUpManager.createPopUp(this, Dialog, true) as Dialog”. I tried to put myComponents.Dialog but it doest’n work.

    Any help please

    Thanks

  3. Gael,

    How about this:

    <mx:Script>
        <![CDATA[
            import mx.managers.PopUpManager;
            import myComponents.Dialog;
    
            private function launchMoreInfo():void {
                var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;
                PopUpManager.centerPopUp(win);
            }
        ]]>
    </mx:Script>
    

    Peter

  4. I want to do instead of info.txt in static I want dynamic that comes from database in text field.How????Anyone help me???

  5. ‘All works fine.’

    Thats not true, the example didnt works.What about this?

    var win:Dialog = PopUpManager.createPopUp(this, Dialog, true) as Dialog;

    here is error: undefined property dialog

    1. I had d same problem the solution is u av to av to import the managers.Popupmanager class into ur script block using the import statement.

  6. Excellent tutorial as usual!

    Just one question. If I change the width/height of the popup to percentwidth/percentheight, it doesn’t work. How do I set the size of the popup to, say, 80% of the parent?

  7. Eric,

    This is a little crude, and you probably want to ask this question on the FlexCoders list, but you may be able to do what you want if you create a custom TitleWindow component and calculate the width/height yourself based on the Application’s width/height multiplied by the desired percent width/height. Something like the following:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="absolute"
            showCloseButton="true"
            width="80%"
            percentHeight="80"
            creationComplete="titleWin_creationComplete(event);"
            close="titleWin_close(event);">
    
        <mx:Script>
            <![CDATA[
                import mx.events.ResizeEvent;
                import mx.events.FlexEvent;
                import mx.core.IFlexDisplayObject;
                import mx.events.CloseEvent;
                import mx.managers.PopUpManager;
                import mx.core.Application;
    
                private function titleWin_creationComplete(evt:FlexEvent):void {
                    var titleWin:TitleWindow = evt.target as TitleWindow;
                    var widthPct:uint = Application.application.width * titleWin.percentWidth / 100;
                    var heightPct:uint = Application.application.height * titleWin.percentWidth / 100;
    
                    titleWin.width = widthPct;
                    titleWin.height = heightPct;
                    PopUpManager.centerPopUp(titleWin);
                }
    
                private function titleWin_close(evt:CloseEvent):void {
                    PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
                }
            ]]>
        </mx:Script>
    
        <mx:Label text="Lorem Ipsum" />
    
    </mx:TitleWindow>
    

    Peter

    1. Hi,

      Indeed you were right peterd, I followed your idea and rebuilt this function (in my popup class for Flex 4 :


      public function resizePercentage(widthPercentage:Number, heightPercentage:Number):void {
      var appWidth:Number = FlexGlobals.topLevelApplication.width;
      var appHeight:Number = FlexGlobals.topLevelApplication.height;

      this.width = Number(appWidth*(widthPercentage/100));
      this.height = Number(appHeight*(heightPercentage/100));

      this.maxWidth = this.width;
      this.maxHeight = this.height;
      }

  8. I am sorry Peter, I didn’t mean to offend anyone. I am very new to flex and I am not familiar with flexcoder list. Thanks a lot for your help anyway. Great blog.

  9. Eric,

    No problem. Sorry, after re-reading my reply, I worded it very poorly. I meant my solution was a little crude and I’m sure somebody on the FlexCoders list would have a more elegant solution.

    Peter

  10. Peter,
    Thanks for the solution, I have a question. New height and width is received on CreationComplete, now is it possible to set height and width of child components based on this new height and width. Could you please give an example for this.

    Thank You


    Chetan

  11. I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.

    Thanks

    Abhilash

  12. Hi Peter,

    Ive been looking at your example and also the examples in the livedocs. Ive been doing flex for about 2 months now and previously i was developing in AS 2.0, C#, Java and VB. Im just trying to get my head around this class and it has been annoying. I have an application that uses a socket connection to raise events. When these events are raised, i am using a custom Alert component that is displayed using the PopUpManager class. Now it all works great, the problem is i am using the same PopUpManager class to display another custom Alert component. After adding one, it seems as though i cannot add the second one, even after removing it. Is there anything that i am missing to be getting the this error?? should i possible have 1 component with the two others nested within it? and the parent of these two be the panel that i use to display in PopupManager?

    the error i am getting is as follows:

    RangeError: Error #2006: The supplied index is out of bounds.
    at flash.display::DisplayObjectContainer/getChildAt()
    at mx.core::Container/getChildAt()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2332]
    at mx.containers.utilityClasses::CanvasLayout/updateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\utilityClasses\CanvasLayout.as:279]
    at mx.containers::Canvas/updateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\containers\Canvas.as:363]
    at mx.core::UIComponent/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:6214]
    at mx.core::Container/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\Container.as:2675]
    at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:602]
    at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:675]
    at Function/http://adobe.com/AS3/2006/builtin::apply()
    at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8460]
    at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8403]

  13. Hi Peter

    Thank you for the good examples. I wonder if you have an answer for this. I want to popup a custom window like this example, and be able to dispatch an event back to the opener. Basically when the custom window closes I want run a function from the opener.

    Are there any problems with this approach? Thanks!

  14. Hi AC, this is the problem I also face just now. It can be easily solved with Cairgnorm framework but w/o it, you can do this way.

    1. You create custom event in your custom popup window. Then dispatch event as usual.
    2. In your opener, you have a reference to popup window, register it with custom event listener above. i.e.
    (in your opener’s code)
    var popup:CustomPopup = new CustomPopUP();
    popup.addEventListener(yourEvent, functionHandler);

    private var fucntion functionHandler(yourEvent):void{ }

    Regards,
    Anh

    P.S. This is a great flex blog :D Thank you, Peter

  15. Do you know how to make modal dialog only cover specific section of the swf application (say some panel) and not the full swf application ?

  16. I’m also wondering the same as Shailendra (previous poster). Is there a way to make the modal window cover only a component, not the entire stage? I debugged and found where the modal window is created. I guess we could just inherit from the proper classes and resize/relocate the modal window.

  17. Hello Sir

    I am having a problem now !!I tried to use pop up window

    private function launchMoreInfo():void {
        var win:Dialog = PopUpManager.createPopUp(this, ManageMedia, true) as ManageMedia;
        PopUpManager.centerPopUp(win);
    }
    

    I am not able to compile this code . Can any one Explain me the Exact Syntaz

    Var win : XXXX –>should it be the name of the other class we are going to call or Dialog class ?
    Can you please explain me the line

    var win:Dialog = PopUpManager.createPopUp(this, ManageMedia, true) as ManageMedia;
    
  18. Hi Peter,
    Your tutorial helped me a lot.
    Can you please help me. I want to pass data from my parent window in the Dialog window. How can I do so?
    I am new to flex.
    Thanks in advance

    1. Hi Peter,
      Your tutorial more helped for me
      But one thing, already some people asked this question..
      “Can you please help me. I want to pass data from my parent window in the Dialog window. How can I do so?”…

      Thanks,
      Anderson.

  19. Hello

    Thank you for your site and support !
    I would like to develop a dynamic popup window :
    If i select (single click) an item in a advanceddatagrid, and click on a button elsewhere, a popup appear with information about the selected item.
    I know how to create the popup but i don’t know how to send information to this popup
    thanks !!

  20. Hey Peter,
    Thanks for the great post! This has been really useful in helping me understand creating popups better.
    I’ve read both: Creating custom pop-up windows with the PopUpManager class (redux) & Creating custom pop-up windows with the PopUpManager class & their corresponding comments.

    I was wondering if you could help me understand the examples a little better (I’m only a few flex days old)

    I really like this example where you separated Dialog.mxml from main.mxml.
    As compared to the original post of , I find this example a neater and more organized way of handling codes. However, I find it a shame that this (redux) post was created for the purpose of just displaying information.

    I’m wondering if you can advice me on how to modify Dialog.mxml into a form submission Popup. I’ve looked through your original post, and although the user is able to enter his/her name, that inputted value is not submitted by a form & does not go anyway.

    I’m pretty familiar with the HTTPservice, but I’m not quite sure how to go about writing the structure of the application for me to turn Dialog.mxml into a form. Can you help me out here?

    Thanks so much in advance,
    Jord

    1. @Jord,

      The best way to display a Form in Flex is to probably use the <mx:Form/> and <mx:FormItem/> tags (should be lots of examples on this site as well). Then create a Submit type button which validates the form. If the data is valid then send the form values to the server using HTTPService and then close the dialog. If the data is not valid, then display an error dialog using the Alert component and don’t close the popup.

      Peter

  21. Thanks Peter,
    I’ve actually figured it out!

    I’ve replaced the codes in Dialog.mxml to:

    <?xml version=”1.0″ encoding=”utf-8″?>
     
    <mx:TitleWindow xmlns:mx=”http://www.adobe.com/2006/mxml”
            title=”Some title”
            showCloseButton=”true”
            width=”400
            height=”300
            close=”titleWindow_close(event);”>
     
    <mx:Script>
            <![CDATA[
                    import mx.events.CloseEvent;
                    import mx.managers.PopUpManager;
     
                    private function titleWindow_close(evt:CloseEvent):void {
                            PopUpManager.removePopUp(this);
                    }
            ]]>
    </mx:Script>
     
    <mx:HTTPService id="srv" url="http://localhost/someplace" method="POST" result="mx.controls.Alert.show(srv.lastResult.toString());">
    <mx:request>
            <field1>{field1.text}</field1>
            <field2>{field2.text}</field2>
    </mx:request>
    </mx:HTTPService>
     
    <mx:Form width="100%" height="100%">
            <mx:FormItem label="field1">
                    <mx:TextInput id="field1"/>
            </mx:FormItem>
     
            <mx:FormItem label="field2">
                    <mx:TextInput id="field2"/>
            </mx:FormItem>
     
            <mx:FormItem>
                    <mx:Button label="Submit" click="srv.send();"/>
            </mx:FormItem>
    </mx:Form>
     
    </mx:TitleWindow>

    Can you please look though for me if i applied these concepts wrongly?

  22. Hi Peter,

    I really got stuck with one problem. I am creating a desktop applicaiton using air. In that applicaiton left side contains a list and right side contains a HTML component. Double clicking on a list item will load the currosponding html id that in right side.

    Click on List item opens a popup which will be on top of the HTML component. The problem is in Windows (I tried XP) this popup goes beind the HTML/SWF . I tried adding modal = true while adding popup which brought made popup visible on top of HTML component but the SWF in HTML became disappear..

    I want to make this popup NOT as Modal so that background is enabled, but want to show on top of HTML component when swf is there.

    How can solve this issue?

    1. Instead of loading info.text (html tags) i want to add an mxml file(with mxml components inside). To load the text u used the TextArea
      htmlText=”{info}” property but what kind of component can i use to insert mxml components that are in an external mxml file. Please help me.

  23. Hi Peter,
    I’ve got a problem:
    when I try and create a popup in the way you describe I get this error

    ArgumentError: Undefined state 'inactive'.
    	at mx.core::UIComponent/getState()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:10168]
    	at mx.core::UIComponent/findCommonBaseState()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:10188]
    	at mx.core::UIComponent/commitCurrentState()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:10010]
    	at mx.core::UIComponent/commitProperties()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:8018]
    	at spark.components.supportClasses::GroupBase/commitProperties()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\supportClasses\GroupBase.as:1058]
    	at spark.components::Group/commitProperties()[E:\dev\4.x\frameworks\projects\spark\src\spark\components\Group.as:743]
    	at mx.core::UIComponent/validateProperties()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:7933]
    	at mx.managers::LayoutManager/validateClient()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:863]
    	at mx.managers::PopUpManagerImpl/addPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:384]
    	at mx.managers::PopUpManagerImpl/createPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\PopUpManagerImpl.as:237]
    	at mx.managers::PopUpManager$/createPopUp()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\PopUpManager.as:139]
    	at BoardComponent/Main()[C:\Users\Mirò\Adobe Flash Builder 4\MetropoliAway\src\BoardComponent.mxml:143]
    	at BoardComponent/___BoardComponent_Group1_creationComplete()[C:\Users\Mirò\Adobe Flash Builder 4\MetropoliAway\src\BoardComponent.mxml:8]
    	at flash.events::EventDispatcher/dispatchEventFunction()
    	at flash.events::EventDispatcher/dispatchEvent()
    	at mx.core::UIComponent/dispatchEvent()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:12528]
    	at mx.core::UIComponent/set initialized()[E:\dev\4.x\frameworks\projects\framework\src\mx\core\UIComponent.as:1627]
    	at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:759]
    	at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.x\frameworks\projects\framework\src\mx\managers\LayoutManager.as:1072]
  24. i want to know is there any way to open popupwindow except popupmanager.createpopup(this,child,false)
    becouse i want to set child dynamically but in this case i am facing problem please help me ASAP

  25. Hi,

    s thr any way to create a pop up window in action scrtip file, without calling the mxml file in createpopup()

Comments are closed.