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.

View MXML

<?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>

PopUpTitleWindow.mxml

<?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.

 
Tagged with:
 
About The Author

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.

17 Responses to Closing a pop up window using the keyboard in Flex

  1. Raul Riera says:

    This doesnt work on MAC Safari

  2. peterd says:

    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

  3. Bug? says:

    When I have fouce on the pop up windows and I press esc,nothing happened?

  4. Hi Peter,

    The escape does not weem to work on IE7 after clicking anywhere on the screen, inside or outside the window.

  5. Blenjar says:

    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.

  6. Andrew says:

    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.

  7. Andrew says:

    Actually, it works. I am retarded. Didn’t set focus on my component so I guess it wasn’t receiving keyboard events.

  8. Dylan says:

    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.

  9. Web Hustler says:

    Works on my Mac Safari.

  10. Abhilash says:

    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

  11. flex-newbie says:

    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

  12. peterd says:

    flex-newbie,

    I’d try using the focusIn and focusOut methods on the form field.

    Peter

  13. Thank you, it was exactly what I was looking for. Great piece of code.

  14. Simon says:

    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

  15. Simon says:

    Hm sorry, the first line was wrong, here the korrekt one -> initialize=”titleWindow_keyDown()”

  16. Mr A says:

    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