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