tutorials flex popup

Article written the 30/09/2007 17:00.
By iteratif ( Bugalotto Olivier ).

We are going to see in this tutorial how to create modal windows from existing components and also from personalised components.

But before all of that, what is a modal window? It’s a window that is superimposed on an application whilst using it, and is often accompanied by a question or a form field.

The use of the PopUpManager class allows the construction of this type of window and you can decide whether or not it is modal.

This class proposes multiple static methods which will allow us to create, destroy and manipulate windows:

Firstly we are going to create a component that we will call DialogBox:

1. Create a new MXML component 2. The named DialogBox is built on the TitleWindow component

3. Add a title and a close button to our component

Our component is ready and available in the custom component panel.

Flex builder’s power also comes from constructing components quickly with easy integration into the environment. You couldn’t do it as easily in .Net and even less so in Java.

When we make a modal window from a DialogBox component we will use the createPopUp() method:

/*
* Creation of a modal window
* @param parent 	DisplayObject  	The parent is used to create the window
* @param className	Class			The reference of the component class will be used as a window
* @param modal		Boolean			The window is either modal or not 
*/
PopUpManager.createPopUp(this,DialogBox,true);

You can see that this window is modal and is created in the top left which isn’t very pretty. We can center this using the parent that we have built. We will use the centerPopUp() method which requires an instance of the new window to create.

To do this, we pass a reference using the createPopUp() method:

var dBox:IFlexDisplayObject = PopUpManager.createPopUp(this,TitleWindow,true);
PopUpManager.centerPopUp(dBox);

Note: You can see the IFlexDisplayObject interface can be used here, since all of the components that implement this interface are valid – which is the case for our component. We apply a basic rule from OOP: polymorphism.

Our component doesn’t do much; we therefore need to close it to return to our application. To do this we can initiate its closure by a close event broadcast by the close button (the cross at the top right of the component).

...
var dBox:IFlexDisplayObject = PopUpManager.createPopUp(this,TitleWindow,true);
PopUpManager.centerPopUp(dBox);
dBox.addEventListener(CloseEvent.CLOSE,onClose);

To close this window, we will use the method removePopUp(). It asks us the window instance to remove which we can get thanks to the event:

private function onClose(e:CloseEvent):void {
	// The event contains the broadcast event (that which is at the start of the event)
	// in this case – our window.
	var dBox:IFlexDisplayObject = e.target as IFlexDisplayObject;
	PopUpManager.removePopUp(dBox);	
}

In the previous examples you will have noticed that the PopUpManager class created our window instance, but in the case that we already have an instance to hand, how can we make a modal window? They have thought of everything, and our PopUpManager class proposes the addPopUp() method to deal with this problem:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="300" height="300" xmlns:ns1="*" verticalGap="20">
 
	<mx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.core.IFlexDisplayObject;
			import mx.managers.PopUpManager;
 
			private var dBox:DialogBox;
 
			private function onShowDialogBox():void {
				if(!dBox) {
					dBox = PopUpManager.createPopUp(this,DialogBox,true) as DialogBox;
					dBox.addEventListener(CloseEvent.CLOSE,onClose);
				} else {
					PopUpManager.addPopUp(dBox,this,true);
				}
 
				PopUpManager.centerPopUp(dBox);
			}
 
			private function onClose(e:CloseEvent):void {
				PopUpManager.removePopUp(dBox);
			}
		]]>
	</mx:Script>
 
	<mx:Button label="Open window" click="onShowDialogBox()"/>
 
</mx:Application>

As you have seen, the creation of a modal window is easy as the work is done by the PopUpManager. We can also use this to create floating windows by changing the modal parameter to false (it’s default value):

PopUpManager.createPopUp(this,TitleWindow,false);

You can find the source code here: PopUpManager.zip

By ITERATIF - BUGALOTTO Olivier (2007) You can find this tutorial and its comments on my blog

A nice example about this topic can also be found here: http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/

The second example shows how to bundle all the AS code into the Component. I dont think the public should be able to access this section.