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"?> <!-- --> <mx:Application xmlns: <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. </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"?> <!-- --> <mx:Application xmlns: <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 </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <!-- --> <mx:TitleWindow xmlns: <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 <mx:TextArea <mx:HBox <mx:CheckBox <mx:Button </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:
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:
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
I need to create a little information window that appears over another component for a few seconds while the mouse hovers inside its bounds. Kind of like a tool-tip but bigger and with multiple lines of information.
Is this something I can do with a PopUp window or do you know of a better option?
Hi Peter,
I’m having a weird issue with removing popups.
I’m creating the popup from a click event off an image within an item renderer and using your code above in the ‘popped up’ TitleWindow to remove itself.
I set the modal property to true so the background is blurred.
When the close event is fired from the popup window, the background stops being blurred but the popup remains open.
Any ideas?
cheers
my bad: I had added a removeEffect by accident instead of a hideEffect on the popup window component.
thanks for all your tips!
I am trying to achieve the same effect as Craig, has there been any feedback?
I have a modal titleWindow which spawns another modal titleWindow, on completing some form processing I want the child window to dispatch an Event(COMPLETE) so that the parent window can do further processing. However, from what I’ve read the listeners seem to be disabled.
Any help would be appreciated.
Save issue as Tim and Craig for me…
Also, how can we access variables from the parent considering that parentDocument doesn’t seem to work.