Creating custom pop-up windows with the PopUpManager class at Flex Examples

Aug

Creating custom pop-up windows with the PopUpManager class

By Peter deHaan

Categories: PopUpManager Tags: centerPopUp(), PopUpManager, removePopUp().

The Alert control is great if you need to get a simple confirmation on an action which has a yes/no type answer, but what do you use when you need to prompt a user for their name or something else? JavaScript has a prompt(), and Flex has a very robust PopUpManager class.

This following example will demonstrate how to launch a custom Panel pop-up dialog which includes a Label control, TextInput control, and two Button controls. It also shows how to create a bunch of Flex components and containers using ActionScript instead of MXML.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.containers.ControlBar;
            import mx.containers.Panel;
            import mx.containers.VBox;
            import mx.controls.Button;
            import mx.controls.Label;
            import mx.controls.Spacer;
            import mx.controls.TextInput;
            import mx.managers.PopUpManager;

            private var panel:Panel;

            private function init():void {
                var vb:VBox = new VBox();
                var label:Label = new Label();
                var textInput:TextInput = new TextInput();

                var cb:ControlBar = new ControlBar();
                var s:Spacer = new Spacer();
                var b1:Button = new Button();
                var b2:Button = new Button();

                s.percentWidth = 100;

                b1.label = "OK";
                b1.addEventListener(MouseEvent.CLICK, closePopUp);
                b2.label = "Cancel";
                b2.addEventListener(MouseEvent.CLICK, closePopUp);

                cb.addChild(s);
                cb.addChild(b1);
                cb.addChild(b2);

                label.text = "Please enter your name:";

                vb.setStyle("paddingBottom", 5);
                vb.setStyle("paddingLeft", 5);
                vb.setStyle("paddingRight", 5);
                vb.setStyle("paddingTop", 5);
                vb.addChild(label);
                vb.addChild(textInput);

                panel = new Panel();
                panel.title = "My Title";
                panel.width = 240;
                panel.height = 180;
                panel.addChild(vb);
                panel.addChild(cb);
            }

            private function closePopUp(evt:MouseEvent):void {
                PopUpManager.removePopUp(panel);
            }

            private function createPopUp(evt:MouseEvent):void {
                PopUpManager.addPopUp(panel, this, true);
                PopUpManager.centerPopUp(panel);
            }
        ]]>
    </mx:Script>

    <mx:Button label="Launch Pop-Up" click="createPopUp(event)" />

</mx:Application>

View source is enabled in the following example.

16 Responses to “Creating custom pop-up windows with the PopUpManager class”

Feed for this Entry View blog reactions

1 Nick Aug 9th, 2007 at 6:14 am

Itried to use this code for displaying a popUp window after the user has selected a row on a dataGrid in flex2. I used binding to show the contacts details in the popUp inside a labels textField. it works the way you have done it perfectly off a button but why wont it work form a selected Item click off a dataGrid. Here is my long long code.

Please type your name, location or number as you see it appear on the contacts list including all spaces as you see them. Do not use the ‘ ‘ or ‘(’ ‘)’ operators as this will result in a miss match.

I know you wont get the data in the grid but that part works fine.
2 Tariq Jamal Nov 5th, 2007 at 1:59 pm

Is there anyway to have the variables they enter transfer to the main state? OR refer to the variables?

3 seb Nov 6th, 2007 at 7:04 am

Tariq Jamal > yes if you make that :

....
private var panel:Panel;
private var textInput:TextInput;
....

And you replace on :

private function init():void {
...
var textInput:TextInput = new TextInput(); // before
textInput = new TextInput(); // replace by
...
}

And after you can access to the text property of element textInput, for exemple

private function closePopUp(evt:MouseEvent):void {
         Alert.show(textInput.text)
         PopUpManager.removePopUp(panel);
}

Regards, Seb

4 Jason Jan 4th, 2008 at 1:41 pm

Is there anyway I can create the panel using the flex builder gui rather than actionscript code?
5 Stranger Mar 13th, 2008 at 2:45 am

Hi,

How can i the background even when i open the popup window. The background gets disabled when i open a popup window. I want to enable the background also.

Can you help me in this.

Regards
Stranger
6 Nick Mar 20th, 2008 at 5:36 pm

Hi Peter,

I am looking for a script like this, where the user can say click on a text or button that says “Click here for more info” I do not want them to enter info on a text box, but I want to create a custom text popup in a box that explains info to them, not for them to enter info. Can you modify this script to do so, or what do you suggest?

Thanks alot!

Nick

7 peterd Mar 20th, 2008 at 6:14 pm

Nick,

Instead of creating a TextInput control in the previous example, you could create a read-only TextArea (set the editable property to false).

Or, if you want a longer answer, something like this should do the trick (and probably be a bit more reusable:

<?xml version="1.0" encoding="utf-8"?>
<!-- main.mxml -->
<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>

<?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>

Then create a text file named “info.txt” in the same directory as main.mxml and Dialog.mxml and enter whatever text you want to appear in the More Information dialog.

Hope that helps,
Peter

8 peterd Mar 20th, 2008 at 6:37 pm

Actually, I’ll just do a new post, it would be easier to read:
“Creating custom pop-up windows with the PopUpManager class (redux)”

Peter
9 Arun May 27th, 2008 at 11:10 pm

help me i want codes for setting one Application having controls in view folder as components.
10 Prashanth Samanth Jun 2nd, 2008 at 5:35 am

Hello Guys,

Can I get a Simple AS or JS to open a Popup, so that I can reuse those AS or JS in various places just by calling the JS and the path of the file to open as Popup

Thank a lot in Advance
Prashanth Samanth
11 aymen Dec 12th, 2008 at 2:28 am

thanks it was very useful :)
12 Michelle Dec 23rd, 2008 at 12:54 am

instead of a button, can i use an image to link to the popup?
13 NewBoyNeil Jan 22nd, 2009 at 8:29 am

Hi Peter,

Been trying to develope a small app in flex for a couple of weeks and every time i refer to the web for help i always end up back here on ur blog, and every time u come up with the goods, see the website to see what ur blog has enable me to do!! Big thank you to u for sharing!!

Kind Regards Neil
14 Nik Feb 10th, 2009 at 5:22 am

Hi Peter,

is there a way to restrict the popup window moving inside a rectangle area onMouseMove? Similar to startDrag(x,y,width,height) properties?

thanks
Nik
15 Raj Feb 10th, 2009 at 1:24 pm

I’m looking for a way to have a pop appear at the top of a screen but centered horizontally. Can anyone shed light on how to do this? Thanks.
16 Arun Jun 9th, 2009 at 1:17 pm

I am new to Flex and I have modified the close function to this :

Can you please tell me where the above code would fail where the code listed on the website would succeed?