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

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

1. peterd says:

   March 20, 2008 at 6:38 pm

   Bah, I forgot to set the TextArea control’s editable property to false, but you get the idea.

   Peter
2. s'ergo says:

   March 21, 2008 at 2:01 am

   Can you explain why spacing between paragraphs so big? (It is often the big problem)
3. peterd says:

   March 21, 2008 at 9:26 am

   s’ergo,

   Try setting the condenseWhite property to true on the TextArea control.

   Peter
4. s'ergo says:

   March 24, 2008 at 2:15 am

   Thank you!
   All works fine.
   You the great!
5. Quinnchan says:

   March 26, 2008 at 2:03 am

   谢谢
6. northwebs.net says:

   March 26, 2008 at 9:36 am

   …createPopUp(this, Dialog, true)…

   how to make relation between dialog in .as and our dialog.mxml?

   and thks ;)
7. northwebs.net says:

   March 26, 2008 at 9:42 am

   yes u forgot to import it in as like :

   import src.Dialog;
8. peterd says:

   March 26, 2008 at 4:16 pm

   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
9. northwebs.net says:

   March 27, 2008 at 2:51 am

   u’re right Peter, thks a lot ;)
10. Gael says:

    March 30, 2008 at 4:05 am

    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
11. peterd says:

    March 30, 2008 at 8:32 am

    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
12. Andres says:

    April 24, 2008 at 8:32 pm

    Hi,

    I’m trying to apply the style of the titleWindow you used in your “Creating a pop up TitleWindow using the PopUpButton control” example. However, when I use the PopUpManager class, the style isn’t applied, it uses the default one like the one in this example, is there anything I can do?

    Thanx in advance
13. Ivy says:

    May 18, 2008 at 7:42 am

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

    June 13, 2008 at 9:53 am

    Could you make the popup re-sizable using the cursor?

    Thanks
15. spif says:

    June 30, 2008 at 4:26 am

    ‘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
    • Kolade says:

      January 20, 2011 at 5:29 am

      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.
16. Eric says:

    August 16, 2008 at 5:50 am

    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?
17. Tiago says:

    August 16, 2008 at 3:01 pm

    Thank you,

    You are doing a great job!
18. peterd says:

    August 16, 2008 at 3:55 pm

    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
    • Guillaume says:

      March 25, 2011 at 4:29 am

      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;
      }
      
19. Eric says:

    August 16, 2008 at 8:14 pm

    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.
20. peterd says:

    August 17, 2008 at 12:05 am

    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
21. Chetan Sachdev says:

    September 5, 2008 at 12:53 pm

    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
22. Abhilash says:

    November 17, 2008 at 9:57 pm

    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
23. Dusan says:

    December 1, 2008 at 8:08 pm

    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]
24. AC says:

    February 12, 2009 at 11:05 am

    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!
25. Anh says:

    February 23, 2009 at 10:13 pm

    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
26. Shailendra says:

    March 9, 2009 at 8:23 pm

    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 ?
27. Jason says:

    May 5, 2009 at 9:19 pm

    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.
28. isaac says:

    June 2, 2009 at 3:50 pm

    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;
    
29. Peter deHaan says:

    June 3, 2009 at 9:34 pm

    isaac,

    Try this:

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

    Peter
30. Ankur says:

    July 21, 2009 at 11:09 pm

    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
    • Anderson says:

      August 26, 2010 at 10:31 am

      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.
31. Adam says:

    September 15, 2009 at 8:12 am

    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 !!
32. Salvador Guerrero says:

    November 16, 2009 at 1:37 pm

    Thanks for the information, this help a lot!

    Cheers!
33. Jord says:

    November 23, 2009 at 1:08 pm

    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
    • Peter deHaan says:

      November 23, 2009 at 3:05 pm

      @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
34. Jord says:

    November 23, 2009 at 4:58 pm

    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?
35. Umesh says:

    December 16, 2009 at 10:47 pm

    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?
    • newguy says:

      January 17, 2010 at 10:11 am

      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.
36. Miroku says:

    December 5, 2010 at 7:32 am

    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]
37. sabir khan says:

    July 18, 2011 at 5:14 am

    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
38. Thamarai says:

    August 10, 2011 at 4:18 am

    Hi,

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