Build a PopUp Window with Flex

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

View DemoDownload Source

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>

27 thoughts on “Build a PopUp Window with Flex

  1. ANONYMOUS

    Great code snippets. It’s people like you that keep the rest of us sane when we can’t or don’t want to try to figure something out.

    Thanks!

  2. Atin

    Nice tutorial, I have just a question: is there a way to set popup window’s width and height in a relative way respect to main application? If I just set (for example) 50% it doesn’t work

  3. michael

    For TitleWindow u have given width=”650″ height=”250″
    BUt i want it to be 100% stretch, how can it be possible …i tried with width=”100%” height=”100%”…….

    but it loads a small sized window……………….how can i get full 100% stretched….

  4. Lynn

    How does the main.mxml file know to call the window.mxml file contents? There is seemingly no reference to window.mxml in main.mx. Sorry flex builder newbie.

  5. Lynn

    Sorry flex newbie….how does the button in main.mxml “know” that it is supposed launch the window.mxml component? The click event makes no reference to an id of the TitleWindow that is in window.mxml. I’m thinking it has something do with with “new window” instantiating it from the component?

  6. admin Post author

    @ LYNN :
    Hi, Indeed we build the Window component in window.mxml and instantiate it in the main application with :

    var win : Window = new Window();

  7. nirav

    HI..
    i have a datagrid, on datagrid itemclick event i want to popup a window containing data of selected row
    (data on popup window should be editable and change should reflect on datagrid).
    how can i do this?
    thanks

  8. kavya

    Hi,
    I am trying to launch the pop up button (Titlewindow with tabnavigator ).. whenever i press the submitt button..

    Can any one please help..

  9. stauros

    Perfect tutorial!
    one question though: what about if i want the popup window to be stretched and be 80% width and height from the parent? how do i achieve that?

    Thanks in advance!

  10. Robert

    @michael

    this could help

    win.width = (FlexGlobals.topLevelApplication as DisplayObject).width;
    win.height = (FlexGlobals.topLevelApplication as DisplayObject).height;

Leave a Reply

Your email address will not be published. Required fields are marked *