Hot Key System for Flex (pre-release)
After having a need for creating hot key shortcuts on multiple different occasions, I decided to break down and create a highly-reusable system that integrates seamlessly into any Flex app. I spent some time and planned out several different use-cases that the system will need to account for. A few considerations were as follows:
- Don’t observe hot keys when typing in a text field.
- Group multiple hot keys such that they can be collectively prioritized or enabled/disabled (this is especially crucial for modal popups).
- Implement easy-to-use behavior to common components.
- Keep references weak.
I’m quite satisfied with the results so far, and feel confident that my system will be adaptable to these use-cases and more. Nonetheless, I’d like to push out a pre-release for other developers to test and play with (and perhaps give me feedback as well).
The formal release for the hot key system will include more thorough documentation and meta-data tags for Flex Builder.
Hot Key Demonstration
Source Files
 UPDATE: It’s been brought to my attention that the CTRL buttons aren’t working for people, and I’m pretty sure it has to do with differences between Mac and PC (it’s only working for Mac right now). Apparently keycodes output different values via different OSes, so I’ll probably have to switch over to charcode. I’ll explore this further…
hi,
i’ve downloaded and tried this code. Is’t very useful. Thanks for it.
I found a mistake: in HotKeyManager.as you add the down and up eventListener with the useWeakReference=true.
I needed 2 hours to debug why my code had not worked: I use inline created functions like this
var f : Function = function(e:Event) : void {//do the job};
HotKeyManager.getInstance().addKeyListener(keyCode, f, null);
the function is deleted by the garbage collector becuase there is no other reference pointing to it.
You can easily fix this problem.
regards,
peter
Comment made by peter halacsy on March 12, 2008 @ 10:02 am
This is true…functions will need to have another reference in order to stay alive. However, it would be in your best interest to maintain the reference on your end, because if you don’t then you won’t have a way to remove the listener when you’re done with it. Since the manager is a singleton, it will permanently keep references when all others are removed unless I use weak references.
Thanks for the feedback!
Steve
Comment made by Steve on March 14, 2008 @ 3:58 pm
Thanks, very useful.
However, one thing that annoy me is when the focus is on a textinput, hotkeys don’t work. I know you did it on purpose but as an example, when you submit a form on a html page, you don’t have to put the focus on the sumbit button to send the request whereas you have to with your current implementation and users don’t expect this kind of behaviour.
Comment made by PeZ on March 21, 2008 @ 5:52 am
PeZ,
Keep in mind that using the HotKey system doesn’t require the UI to completely rely on hot keys. For one thing, submit buttons can still be clicked via mouse just the same with or without hot keys, but also the TextInput component in Flex can dispatch ENTER events when the user presses the enter key, which you can alternatively handle for form submissions.
Hope this helps!
Steve
Comment made by Steve on March 25, 2008 @ 10:11 pm
Great reference…so far so good. I do have one question tho - is there anyway to disable hotkeys for the browser? For example, say I want to assign the hotkey CTRL+F to open one of my custom pop-up windows, but CTRL+F also happens the be the find function for both FireFox and IE. Is there anyway to programmatically diable that in Flex? Im attempting to build in some custom functionality where users of a website can assign their own personal hotkeys dynamically. If there are certain combinations I should leave out then I will just write it differently, but I was curious to see if anyone had another idea.
Thanks! Oh and great site!
Comment made by SpinGrrl on April 8, 2008 @ 9:17 am
SpinGrrl, thanks for posting!
I found out that control is not a reliable modifier for hotkeys in browser-run swfs. Not only do system-level control keys override flash’s access, but different OSes treat CTRL+letter combinations differently. Because of this, my first public release of the system will only support unmodified letter keys.
In other words, don’t use CTRL :]
Comment made by Steve on April 8, 2008 @ 6:23 pm
Very nice indeed.
Why are the space and the numbers missing?
Comment made by Yikulju on June 24, 2008 @ 7:02 am
Glad you like it
The HotKeyCodes class is just a convenience class for accessing keycode values of common hot keys. You don’t need to rely on that class for setting up your own hot keys.
For example, if you want to use the space bar, just use Keyboard.SPACE instead.
Comment made by Steve on July 1, 2008 @ 12:46 am
[…] HotKey System: Permet de créer des raccourcis clavier […]
Pingback made by Librairies Flex - Adobe Flex Tutorial - Tutoriaux Flex Builder, MXML, ActionScript, AS3 on January 26, 2009 @ 1:59 pm