Adding key board shortcuts to a flex application

Question

I have a flex app with lots of custom components, like custom buttons, comboBoxes etc. I am trying to add keyBoard shortcuts to the flex app. In doing so, I added a key-down listener to the app to listen for ctrl+shift key combination like this:

this.stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);

then I dispatch a custom event that all of my custom components are listening for:

private function reportKeyDown(event:KeyboardEvent):void
{
    var evtObj:Object = new Object();
    evtObj.keyEvent = event;
    dispatchEvent(new CustomEvent(CustomEvent.SHORTCUT_KEYS_PRESSED, evtObj, true, false));
}

In my custom button component I have:

this.addEventListener(CustomEvent.SHORTCUT_KEYS_PRESSED, ShortCutKeysHandler, true);

So, if I go ctrl+shift+W then I want one instance of the custom button to get clicked.

For some reason, the event never gets triggered and never gets to the ShortCutKeysHandler function.

Does anyone know how to do this?

Answer 1

My guess is that your event isn't bubbling to the listeners. If you are strictly looking for keyboard events, and don't need any additional payload, perhaps it would be more effective to simply listen for the stage events in your interested components, alternatively have the stage dispatch your custom event and use stage.addEventListener in your interested components instead of this.addEventListener.

As a convention, I never rely on event bubbling. It obfuscates your application and creates ambiguity. It is better to explicitly define your event structure to gain additional control of your application and make debugging much easier.