04
Aug
08

Closing a pop up window using the keyboard in Flex

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.


9 Responses to “Closing a pop up window using the keyboard in Flex”


  1. 1 Raul Riera Aug 4th, 2008 at 12:56 pm

    This doesnt work on MAC Safari

  2. 2 peterd Aug 4th, 2008 at 1:21 pm

    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. 3 Bug? Aug 4th, 2008 at 5:01 pm

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

  4. 4 Tejas Sanghavi Aug 4th, 2008 at 9:49 pm

    Hi Peter,

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

  5. 5 Blenjar Aug 5th, 2008 at 12:01 pm

    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. 6 Andrew Aug 6th, 2008 at 1:53 pm

    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. 7 Andrew Aug 6th, 2008 at 2:07 pm

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

  8. 8 Dylan Aug 8th, 2008 at 12:48 pm

    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. 9 Web Hustler Aug 13th, 2008 at 2:56 am

    Works on my Mac Safari.

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".