These days I was playing with PopUpManager component on Flex. I was searching for some way to create Popup windows, in the moment for a Login screen, and came across this component.
It’s simple to use, you need only to import it on the script and use it directly. There are four things that you can set on a popup from the component, you can add a popup to the Manager, put a window on the top of others, center it and remove it from the Manager.
I will put some examples here. Let’s first consider creating a popup, we need to extend some component to create a container for the popup.
In this sample, we will use the TitleWindow component as the extended component. Before it’s creation, we need to set up some properties, we will leave it with the default.
Next, we need to set up some basic behaviourof the window, like it’s title, show it’s close button and the code that will take place when someone closes the window. To set all these things up we will need to do the following:
- On the TitleWindow component set the parameter “showCloseButton” to true and set the function that will be called when the event “close” is captured (it can be anything, be creative);
- In the script component, you need to add the definition of the function you set to the close event and code the “PopUpManager.removePopUp(this)” to close the window, you can add some other code too;
- You can add, if you want, a title for the window using the”title” attribute.
With the new component implemented, we can now go to the main program and instantiate it to create the popup window, but, to achieve this, we can use two ways. In the first, we create an instance of the component you created and then add it to the PopUpManager, in the second, we use the PopUpManager to create the instance to us, then we cast it to the type of our component and send it to an empty variable.
The first way is done with this code:
var bar:foo;
bar = foo(PopUpManager.createPopUp(this,foo,true));
Being foo my customized component based on TitleWindow and bar the variable that will contain the instance of the popup. The first parameter is the parent component, the second the component type of the window to be created and the third is the modal definition (if other popups will be avaliable while this one is opened).
The second way:
var bar:foo = new foo();
PopUpManager.addPopUp(bar,this,true);
Being foo the same as above and bar the instance of the component, but this time we do instantiate it and only send it to the PopUpManager. The way you choose is almost identical, it’s up to you if you need to instantiate it manually or let the manager create it to you. In this case, the parameters changed a bit, the first is the component instance, the second the parent and the third is the modal definition, again.
I saw some usefulness in the second if your component have some parameters to be sent on the constructor, but I’m still meditating about it. Some day it can become one post or half…
Best Regards!
