Flex Examples
The following example shows how you can close a pop up window when a user presses the Escape key in Flex.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/closing-a-pop-up-window-using-the-keyboard-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="top"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
private function button_click(evt:MouseEvent):void {
var popUpTitleWindow:PopUpTitleWindow = new PopUpTitleWindow();
PopUpManager.addPopUp(popUpTitleWindow, this, true);
}
]]>
</mx:Script>
<mx:Button id="button"
label="Launch Window"
click="button_click(event);" />
</mx:Application>
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/04/closing-a-pop-up-window-using-the-keyboard-in-flex/ -->
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
showCloseButton="true"
styleName="noPadding"
layout="absolute"
width="300"
height="200"
creationComplete="init();"
resize="init();"
close="titleWindow_close(event);"
keyDown="titleWindow_keyDown(event);">
<mx:Style>
.noPadding {
paddingBottom: 0;
paddingTop: 0;
paddingLeft: 0;
paddingRight: 0;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.core.IFlexDisplayObject;
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
public var source:String;
private function init():void {
PopUpManager.centerPopUp(this);
this.setFocus();
}
private function titleWindow_close(evt:CloseEvent):void {
PopUpManager.removePopUp(evt.target as IFlexDisplayObject);
}
private function titleWindow_keyDown(evt:KeyboardEvent):void {
if (evt.charCode == Keyboard.ESCAPE) {
this.dispatchEvent(new CloseEvent(CloseEvent.CLOSE));
}
}
]]>
</mx:Script>
<mx:Label id="lbl"
text="Press ESC to close this window."
fontWeight="bold"
truncateToFit="true"
horizontalCenter="0"
verticalCenter="0" />
<mx:ControlBar horizontalAlign="right" width="100%">
</mx:ControlBar>
</mx:TitleWindow>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
This doesnt work on MAC Safari
Raul Riera,
Which version of OSX and Flash Player are you using?
It worked for me on OSX 10.5.4 (1.83 GHz Intel Core Duo) with the following browsers:
- Safari 3.1.2 w/ Flash Player 10.0.0.551 (debug)
- Firefox 3.0.1 w/ Flash Player 10.0.0.551 (debug)
Peter
When I have fouce on the pop up windows and I press esc,nothing happened?
use the following method in init() function.
this.setFocus();
Hi Peter,
The escape does not weem to work on IE7 after clicking anywhere on the screen, inside or outside the window.
Hey I need help figuring out how to retrieve data from an .XML file. can you point me to the right example?
thx in advance.
Does work for me on mac 10.5.4
Fla: 9,0,115,0 installed
Safari: 3.1.2
I though my move to flex was supposed to remove this cross browser hell.
Actually, it works. I am retarded. Didn’t set focus on my component so I guess it wasn’t receiving keyboard events.
Once the focus is taken away from the Flash you can’t regain focus by simply clicking the within the swf. Instead you have to click into a component that is properly set to accepts click events like a button or input field. You probably could somehow set the Application to test for mouse events in the case of the screen being disabled by an Alert window. In this case everything is disabled except for the close button so the close button is the only item that can. This is working about as well as it can. In a real app you would being doing things like Ctrl+S to intiate a save function and there will be plenty of things to click to get focus back.
This approach works for me with XP on IE 7 and Firefox 2.
Works on my Mac Safari.
I have a form designed using Flex. The form does not fit the screen area and hence I am having scroll bars in it. When we click on some of the controls in the form, we open popups. But when the popup is opened, if we scroll the form using the form scroll bar then the popup is not getting scrolled. I want the popup to be scrolled along with the form elements. Please let me know how this can be done.
Thanks
Abhilash
Pete,
thanks for all the example and it really helps.
how do I make a popup help window which contains some help information on a particular field, but closes automatically when user clicks the mouse some other fields. More or less like google maps balloon type functionality.
I was not able to find a way to catch the mouse event anywhere else functionality in flex.
Do you have an example for it.
thanks
flex-newbie,
I’d try using the
focusInandfocusOutmethods on the form field.Peter
Thank you, it was exactly what I was looking for. Great piece of code.
Hi
Thanks for the Code, but i think its better if you take an EventListener.
To the Tag the line -> initialize=”titleWindow_keyDown()
Than a new function:
private function titleWindow_keyDown():void { stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey); }And a second function:
private function pressKey(event:KeyboardEvent):void{ if (Keyboard.ESCAPE) { close(); // call your close-function } }Now you should be able to call this keyboard function every time – equal what focus are set
Simon
Hm sorry, the first line was wrong, here the korrekt one -> initialize=”titleWindow_keyDown()”
Simon,
I think you need
if (event.charCode == Keyboard.ESCAPE) {
instead of
if (Keyboard.ESCAPE) {
as this seems to close the popup/title window or whatever on any key press, not just ESCAPE !!!
And the reason is “if (Keyboard.ESCAPE)” will always be true as Keyboard.ESCAPE is a keyboard key value and therefore non-zero. Actually an ASCII value for ESCAPE.
see http://livedocs.adobe.com/flex/3/langref/flash/ui/Keyboard.html