Build a PopUp Window with Flex

October 9th, 2009 in Flex

In this Flex tutorial, let’s see how to create a Popup window.

1. Create a new flex project named PopUpWindow, set the name of the main MXML application file to main.mxml and set its layout to vertical.

2. In the main.mxml file, add a button that when the user clicks on it will launch the window by calling the launchPopUp function.

<mx:Button id="button" label="Launch PopUp Window"
			   click="launchPopUp(event);"/>

3. Before writing the launchPopUp function, create a new MXML Component named Window, based on the TitleWindow component and set its size as you want. You have now a Window.mxml file inside your src directory.
Open this file and add some content inside the TitleWindow component, in our case we’ve added an image.

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="650" height="250"
	title="PopUp Window" horizontalAlign="center">

	<mx:Image source="assets/img.gif" />

</mx:TitleWindow>

4. So far we’ve created the window, now let’s it pop up when the button is clicked.
Back with the main.mxml file, add a Script section to the application to create the launchPopUp function.
This function creates a Window object, the component we’ve created before and uses the PopUpManager class to display it.

 <mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;

			private function launchPopUp(e:MouseEvent):void {
				var win : Window = new Window();
				PopUpManager.addPopUp(win,this,true);
				PopUpManager.centerPopUp(win);
			}
		]]>
</mx:Script>

5. At this point, if you test the application, clicking on the button should launch the popup window.
But how to close the window you might ask?
To resolve this issue, let’s edit our Window component (window.mxml file).
The WindowTitle component has a showCloseButton property that you need to set to true to view a close button. Next add a close event listener to handle this event.

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="650" height="250"
	title="PopUp Window" horizontalAlign="center"
	showCloseButton="true"
	close="closeWindow(event);" >

6. Add a Script section to write the closeWindow function. We use the PopUpManager.removePopUp method to remove the window.

<mx:Script>
		<![CDATA[

			import mx.core.IFlexDisplayObject;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;

			private function closeWindow(e:CloseEvent):void {
				PopUpManager.removePopUp(e.target as IFlexDisplayObject);
			}

		]]>
</mx:Script>

7. Alright, now all is good to go. Finally we add to the main application some css to make the application more to our taste.

8. Here’s the final code, test the application to see it in action.

main.mxml :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

 <mx:Style>
	 	Application{
	 	 	backgroundColor: #000000;
	 	}
	 	global{
	 		modalTransparency : .3;
			modalTransparencyColor : #ffffff;
	 	}

</mx:Style>

<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;

			private function launchPopUp(e:MouseEvent):void {
				var win : Window = new Window();
				PopUpManager.addPopUp(win,this,true);
				PopUpManager.centerPopUp(win);
			}
		]]>
</mx:Script>

	<mx:Button id="button" label="Launch PopUp Window"
			   click="launchPopUp(event);"/>

</mx:Application>

Window.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="vertical" width="650" height="250"
	title="PopUp Window" horizontalAlign="center"
	showCloseButton="true"
	close="closeWindow(event);" >

	<mx:Script>
		<![CDATA[

			import mx.core.IFlexDisplayObject;
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;

			private function closeWindow(e:CloseEvent):void {
				PopUpManager.removePopUp(e.target as IFlexDisplayObject);
			}

		]]>
	</mx:Script>

	<mx:Image source="assets/img.gif"/>

</mx:TitleWindow>