AS3 Shortcut window and pop up

Question

I have an AIR application with several windows. I have set the shortcut key ESC to close window. It's works well. On creationComplete, I have this code :

this.addEventListener(KeyboardEvent.KEY_DOWN, exit_keyDownHandler);

and

 protected function exit_keyDownHandler(event:KeyboardEvent):void
{
    if (event.keyCode == Keyboard.ESCAPE){
        // 
        this.removeEventListener(KeyboardEvent.KEY_UP, exit_keyDownHandler);
                stage.nativeWindow.close();

    }
}

But on this window, I could open a popup window where I have set same shortcut (ESC) to remove popup.

After opening and closing popup window shortcut on main window (first), has no effect !

My code to open popup is as follows:

wpTL = new wAddEditTL();
 PopUpManager.addPopUp(wpTL, this,true);
 PopUpManager.centerPopUp(wpTL); 

On popup window extend TitleWindows, I add this event :

this.addEventListener(KeyboardEvent.KEY_DOWN, exit_keyDownHandler);

I hope a programming expert can help me, thank you very much!

Answer 1

I had some time to test this.

Here is a simple solution that works on my side with both MX and Spak Window components.

First, we create a simple application (Main.mxml) with only two buttons (to open MX or Spark Window) :

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                name="Key Events Test"
                horizontalAlign="center"
                verticalAlign="middle"
                creationComplete="creationCompleteHandler(event)"
                paddingLeft="0"
                paddingTop="0"
                paddingBottom="0"
                paddingRight="0"
                frameRate="60"
                width="320"
                height="200">

    <mx:Button id="sparkWindowButton"
               label="New Spark Window"
               click="sparkWindowButton_clickHandler(event)"/>

    <mx:Button id="mxWindowButton"
               label="New MX Window"
               click="mxWindowButton_clickHandler(event)"/>

    <mx:Script>
        <![CDATA[
        import mx.core.Window;
        import mx.events.FlexEvent;

        import spark.components.Window;

        private function creationCompleteHandler(event:FlexEvent):void {
            NativeApplication.nativeApplication.addEventListener(KeyboardEvent.KEY_DOWN, systemManager_keyDownHandler);
        }

        private function systemManager_keyDownHandler(event:KeyboardEvent):void {
            if (event.keyCode == Keyboard.ESCAPE) {
                var currentWindow:NativeWindow = NativeApplication.nativeApplication.activeWindow;
                currentWindow.stage.nativeWindow.dispatchEvent(new Event(Event.CLOSING));
            }
        }

        private function sparkWindowButton_clickHandler(event:MouseEvent):void {
            var nativeWindow:spark.components.Window = new MySparkWindow();
            nativeWindow.open();
        }

        private function mxWindowButton_clickHandler(event:MouseEvent):void {
            var nativeWindow:mx.core.Window = new MyMXWindow();
            nativeWindow.open();
        }
        ]]>
    </mx:Script>
</mx:Application>

Then we create a Popup Component (PopupPanel.mxml) :

<?xml version="1.0"?>
<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:mx="library://ns.adobe.com/flex/mx"
          title="POPUP"
          verticalAlign="middle"
          width="280"
          height="120">

    <mx:Label text="HEY"
              textAlign="center"
              width="100%"/>

</mx:Panel>

And finaly, we create 2 components :

The MX Window (MyMXWindow.mxml) :

<?xml version="1.0"?>
<mx:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:mx="library://ns.adobe.com/flex/mx"
           horizontalAlign="center"
           verticalAlign="middle"
           width="320"
           height="200"
           creationComplete="creationCompleteHandler(event)"
           showStatusBar="false">

    <mx:Button id="popupButton"
               label="Add a popup"
               click="popupButton_clickHandler(event)"/>

    <fx:Script>
        <![CDATA[
        import mx.events.FlexEvent;
        import mx.managers.PopUpManager;

        public var popup:PopupPanel;

        private function creationCompleteHandler(event:FlexEvent):void {
            this.title = "MX Window #" + NativeApplication.nativeApplication.openedWindows.length;
            this.stage.nativeWindow.addEventListener(Event.CLOSING, closingHandler, false,  0, true);
        }

        private function popupButton_clickHandler(event:MouseEvent):void {
            popup = new PopupPanel();
            PopUpManager.addPopUp(popup, this, true);
            PopUpManager.centerPopUp(popup);
        }

        private function closingHandler(event:Event):void {
            if (popup != null && popup.isPopUp) {
                event.preventDefault();
                trace("CLOSING POPUP");
                PopUpManager.removePopUp(popup);
            } else {
                trace("CLOSING WINDOW");
                stage.nativeWindow.close();
            }
        }
        ]]>
    </fx:Script>
</mx:Window>

And finally, the Spark Window (MySparkWindow.mxml) :

<?xml version="1.0"?>
<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark"
          width="320"
          height="200"
          creationComplete="creationCompleteHandler(event)"
          showStatusBar="false">

    <s:layout>
        <s:VerticalLayout horizontalAlign="center"
                          verticalAlign="middle"/>
    </s:layout>

    <s:Button id="popupButton"
              label="Add a popup"
              click="popupButton_clickHandler(event)"/>

    <fx:Script>
        <![CDATA[
        import mx.events.FlexEvent;
        import mx.managers.PopUpManager;

        public var popup:PopupPanel;

        private function creationCompleteHandler(event:FlexEvent):void {
            this.title = "Spark Window #" + NativeApplication.nativeApplication.openedWindows.length;

            this.stage.nativeWindow.addEventListener(Event.CLOSING, closingHandler, false,  0, true);
        }

        private function popupButton_clickHandler(event:MouseEvent):void {
            popup = new PopupPanel();
            PopUpManager.addPopUp(popup, this, true);
            PopUpManager.centerPopUp(popup);
        }

        private function closingHandler(event:Event):void {
            if (popup != null && popup.isPopUp) {
                event.preventDefault();
                trace("CLOSING POPUP");
                PopUpManager.removePopUp(popup);
            } else {
                trace("CLOSING WINDOW");
                stage.nativeWindow.close();
            }
        }
        ]]>
    </fx:Script>

</s:Window>

Now, the explaination of what we are doing :

In Main.mxml, we are listening to the keyboard events for the whole application (so there's no problem with focus on a particular component or window).

When we catch the ESCAPE keycode, we retrieve the instance of the active application window and send it an Event.CLOSING event to indicate that we are closing the window.

In the window (MyMXWindow.mxml or MySparkWindow.mxml), we retrieve this event and check if the PopUp is open. If so, it is closed and the window continues to work, otherwise we close the window.

I do not know if this is what you want to do, but I hope at least it will point you to the right solution for your project.

Happy coding with Flex and AS3 ;-)