How to create a popUp in Flex

Today I am going to show you how easy it is to show popUp windows in your Flex application.

Above is a picture of our simple application that only has one label and a button, when we press the button a nice popup with rounded corners pops up and if we click close button in the popup it disappears.

In order to make this work, we have to build two files, one will be our application with the text and button to show popup and another file that will be a MXML component (in Flex Builder you just go to File -> New -> MXML Component). Both of the files have to be saved in the same directory on order for this example to work.

Application source code

To use popups Flex has a manager that is devoted specially for that. In our Application under script tags we import mx.managers.PopUpManager. This will allow us to show the popup windows, center them and close them when needed.

As you can see above the application is very basic, on the button click we call showPopUp() function. In this function we first declare a local variable of type IFlexDisplayObject, because this is what createPopUp method from PopUpManager returns.

createPopUp method accepts 4 arguments, 2 of them are optional. First we have to specify the parent of the Popup, this will help Flex set up coordinates and such when we want to later center the popup. Since we want to have our application as the parent we input this as first parameter.

Second parameter we input the name of the MXML component that we made as our PopUp window, in our example file is popUpWindow.mxml, thus we put popUpWindow as second parameter.

The third parameter is optional – modal:Boolean, so it can be either true or false. If we set it to true, than we will not be able to do anything other than interact with popUp window, if it is set to false, than we can still interact with application even when our popUp is on screen.

All there is to do now, it to center our new popUp window with PopUpManager.centerPopUp(popUp). The argument popUp is IFlexDisplayObject that we have created with PopUpManager.createPopUp() method.

Blow is the source of the popUpWindow.mxml file. The only thing worth noting here is that we have assigned a click action for a button, which calls PopUpManager.removePopUp() method. Arugment is this, since our mxml file is the popUp that we want to remove from stage.

popUpWindow.mxml file

Advertisements

, , ,

  1. #1 by vatsalad on November 24, 2009 - 5:14 pm

    Until now I was under the impression that AlertBox used in combination with the ‘s preinitialize, creationComplete was the way to create popups. Now I know better. Thank you for sharing this piece of info.

  2. #2 by Ladislav Klinc on November 24, 2009 - 5:27 pm

    Well AlertBox does not give you whole lot of possibilities. It is OK to be used for simple alerts. PopUpManager gives you lot more options for creating nice and more useful popUps.

  3. #3 by MLR on October 12, 2011 - 6:00 am

    thank you.. great to have quick way to get rounded corners 🙂

  1. close popUp when we click anywhere outside of popup – in modal part… « Blog on engineering, programming and some more

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: