Build a PopUp Window with Flex
October 9th, 2009 in Flex | 23 CommentsIn 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>
Oct 11th, 2009
Very helpful!
Oct 27th, 2009
Nice tutorial :>
Dec 16th, 2009
Thanx a lot. It took me only 2 mins to do this..
May 27th, 2010
it is very useful one. ,
Jun 10th, 2010
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!
Jun 16th, 2010
Awesome tutorial…Thanks
Sep 1st, 2010
Its really help full… small but nice tutorial….. thanks a lot!
Sep 2nd, 2010
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
Sep 11th, 2010
thank u
Sep 13th, 2010
Can you convert this script to Flash Builder 4????
Sep 16th, 2010
PHILLIP: Try changing this:
var win : Window = new Window();
to this:
var win : window = new window();
Sep 28th, 2010
Its great thanks a lot
Sep 29th, 2010
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….
Feb 5th, 2011
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.
Feb 6th, 2011
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?
Feb 7th, 2011
@ LYNN :
Hi, Indeed we build the Window component in window.mxml and instantiate it in the main application with :
var win : Window = new Window();
Feb 22nd, 2011
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
Feb 23rd, 2011
Thanks Guy.. Really helpful
Aug 16th, 2011
goyo baina….
Oct 31st, 2011
Thanks a lot, this was very helpful
Nov 18th, 2011
Hi,
I am trying to launch the pop up button (Titlewindow with tabnavigator ).. whenever i press the submitt button..
Can any one please help..
Nov 30th, 2011
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!
Dec 19th, 2011
@michael
this could help
win.width = (FlexGlobals.topLevelApplication as DisplayObject).width;
win.height = (FlexGlobals.topLevelApplication as DisplayObject).height;