Here are a couple examples of using the TitleWindow container with the PopUpManager class to create custom pop-up windows and dialog boxes.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.events.CloseEvent;
import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
private var titleWindow:TitleWindow;
private function init():void {
var label:Label = new Label();
label.text = "Hello world";
titleWindow = new TitleWindow();
titleWindow.title = "Custom title";
titleWindow.showCloseButton = true;
titleWindow.width = 240;
titleWindow.height = 180;
titleWindow.addEventListener(CloseEvent.CLOSE, titleWindow_close);
titleWindow.addChild(label);
PopUpManager.addPopUp(titleWindow, this, true);
PopUpManager.centerPopUp(titleWindow);
}
private function titleWindow_close(evt:CloseEvent):void {
PopUpManager.removePopUp(titleWindow);
}
]]>
</mx:Script>
<mx:Button label="Launch TitleWindow" click="init()" />
</mx:Application>
View source is enabled in the following example.
Here’s another example showing a custom TitleWindow built in MXML instead of ActionScript. In this example you have to select a check box before you can continue on with a wizard. I copied the idea from the EULA page for an add-on I happened to be installing at the time. You could combine this with the previous entry on “Disabling a Button control for a fixed number of seconds” so that the user has to wait 5 seconds before they can agree/continue.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.containers.TitleWindow;
import mx.managers.PopUpManager;
private var titleWindow:TitleWindow;
private function popUp():void {
titleWindow = PopUpManager.createPopUp(this, CustomTitleWindow, true) as TitleWindow;
PopUpManager.centerPopUp(titleWindow);
}
]]>
</mx:Script>
<mx:Button label="Launch TitleWindow" click="popUp()" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-custom-dialog-boxes-using-the-popupmanager-and-titlewindow-classes/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
title="Installing Super Awesome Component Set for Flex 3"
layout="vertical"
width="480"
height="240"
titleStyleName="titleText"
backgroundColor="white"
backgroundAlpha="1.0"
borderColor="white"
borderAlpha="1.0"
cornerRadius="0"
dropShadowEnabled="false"
showCloseButton="true"
close="titleWindow_close(event)">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
private function titleWindow_close(evt:CloseEvent):void {
PopUpManager.removePopUp(this)
}
private function titleWindow_continue():void {
Alert.show("Installing...");
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Style>
.titleText {
fontSize: 14px;
}
.headingText {
paddingTop: 10px;
paddingBottom: 10px;
fontSize: 10px;
}
</mx:Style>
<mx:Text text="You must accept the software license terms in order to continue the installation."
width="100%"
styleName="headingText" />
<mx:TextArea text="The quick brown fox jumped over the lazy dog"
width="100%"
height="100%" />
<mx:HBox width="100%">
<mx:CheckBox id="checkBox"
label="Click here to accept the software license terms."
width="100%" />
<mx:Button label="Continue"
enabled="{checkBox.selected}"
click="titleWindow_continue()" />
</mx:HBox>
</mx:TitleWindow>
View source is enabled in the following example.
Peter, we built a large Flex app and had a need for popups and I have to say it was super nice to be able to do just what you’re doing for a custom solution. Flex def’ rocks for popups!
What if my custom component that I want to use as a popup is in it’s own directory (and thus has it’s own namespace) I can’t seem to get it working when I have that setup. The only way I can get the popup to work is if the custom component is in the root of my app.
Any ideas?
Hey, can you tell me how we can open a popup only once without creating a modal window. I m working on a project in which there are lotsa pop-ups..I want to open them only once.I am using a MVC architecture for my project. Is there any simpler way without referring a static variable inside a model…
Rajesh,
I’m not sure about MVC, but off the top of my head I’d imagine the easiest way to track whether a window is open is by using a boolean. Otherwise, depending on how your popups are created, maybe set the popup to null when created or closed and then initialize the popup variable just before the popup gets created. That way you could always check to see if the popup is open by checking to see whether the variable is null or not.
And because that was a terrible explanation, I figure it could be something along these lines:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.containers.TitleWindow; import mx.controls.Text; import mx.events.CloseEvent; import mx.managers.PopUpManager; private var popUpWin:TitleWindow; private function initPopUpWin():void { var txt:Text = new Text(); txt.percentWidth = 100; txt.selectable = false; txt.text = "The quick brown fox jumped over the lazy dog."; popUpWin = new TitleWindow(); popUpWin.title = "Title"; popUpWin.width = 160; popUpWin.height = 120; popUpWin.showCloseButton = true; popUpWin.addEventListener(CloseEvent.CLOSE, closePopUp); popUpWin.addChild(txt); } private function createPopUp():void { if (!popUpWin) { initPopUpWin(); PopUpManager.addPopUp(popUpWin, this); PopUpManager.centerPopUp(popUpWin); } } private function closePopUp(evt:CloseEvent):void { PopUpManager.removePopUp(popUpWin); popUpWin = null; } ]]> </mx:Script> <mx:Button label="Launch TitleWindow" click="createPopUp();" /> </mx:Application>Happy Flexing!
Peter
Nice example.
I found one problem. The keyboard focus is still on the underlying window. If you click on the ‘launch the title window’ button, then after it opened hit the spacebar, a second one will open on top of the first.
From view.MXML I want to call a function on close of the popup window to update some data int he calling component. Any ideas?
This pop-up seems as though it is meant to be modal. If you add a third parameter to createPopUp, true, it makes the dialog modal, which should solve the above-mentioned keyboard focus issue.
I was fiddling with this and wanted to pop up a component and close it with the close button. I wanted to do something like this:
But for various reasons I didn’t want the component to have a pre-defined close handler. So I listened for the Close event and tried to close the event target, but it reported errors. The solution was this:
var audioConfig = PopUpmanagercreatePopUp(this, AudioConfig, true); audioConfig.addEventListener(Event.CLOSE, closePopUpWindow); ... private function closePopUpWindow(e:CloseEvent):void { PopUpManager.removePopUp(e.target as IFlexDisplayObject); }Does the same as what you’ve got above, but doesn’t require the name of the object being closed.
Hi is it possible to fire events back to the parent page? Ie from CustomTitleWindow.mxml back to View.mxml ?
Thanks
Craig
Craig,
Which type of events? Custom events or just the
closeevent?Peter