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

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.

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

March 2008
M	T	W	T	F	S	S
« Feb		Apr »
	1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

March 2008

« Feb

Apr »

15 Responses to “Creating custom pop-up windows with the PopUpManager class (redux)”

Feed for this Entry View blog reactions

1 peterd Mar 20th, 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 Mar 21st, 2008 at 2:01 am

Can you explain why spacing between paragraphs so big? (It is often the big problem)
3 peterd Mar 21st, 2008 at 9:26 am

s’ergo,

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

Peter
4 s'ergo Mar 24th, 2008 at 2:15 am

Thank you!
All works fine.
You the great!
5 Quinnchan Mar 26th, 2008 at 2:03 am

谢谢
6 northwebs.net Mar 26th, 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 Mar 26th, 2008 at 9:42 am

yes u forgot to import it in as like :

import src.Dialog;
8 peterd Mar 26th, 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 Mar 27th, 2008 at 2:51 am

u’re right Peter, thks a lot ;)
10 Gael Mar 30th, 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 Mar 30th, 2008 at 8:32 am

Gael,

How about this:

Peter

12 Andres Apr 24th, 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 May 18th, 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 Jun 13th, 2008 at 9:53 am

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

Thanks
15 spif Jun 30th, 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