Keyboard shortcuts for Flex UI components

06 Apr 2005

Again someone on flexcoders wanted to assign keyboard shortcuts for UI components/controls in his application. Following was my response with quick and dirty example..
Suppose you want to assign some keyboard shortcuts to each
control on screen so that when shortcut key is pressed, control gets
focussed and pressing enter/space execute associated action. For example, pressing space key while a button is focussed, would be broadcast button's click event.
You can easily achieve this by using Key object, as demonstrated in code later.
I am assuming:

• user would press CTRL + 1, CTRL + 2 ...to focus a control on screen.
• user can press SPACE key to execute associated action with the controls
  like Button, CheckBox, RadioButton or any button kind of component.
• user can use arrow keys to change values in list type of controls like
  ComboBox
• user can type in textfield like control....

Following example has some controls on screen and pressing CTRL + 1 .. CTRL
+ 5 shifts the focus to corresponding control....
Following code is quick & dirty and just for demo, you can always write a ShortcutManager class in very OO way, which is more easier to use and managable...

###KeyObjectDemo.mxml###
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" initialize="initApp()">
<mx:Script>
<![CDATA[
	var keyListener:Object;
	function debugTrace(msg)
{
_ta.text+= msg + newline;
}
	function initApp()
{
keyListener = new Object();
keyListener.onKeyDown = mx.utils.Delegate.create(this, mx.utils.Delegate.create(this,shorcutHandler));
Key.addListener(keyListener);
}
	function shorcutHandler()
{
var bControlPressed:Boolean = Key.isDown(Key.CONTROL);
if(bControlPressed) { //CTRL

if(Key.isDown(49)) { // 1
               	        debugTrace("CTRL + 1");
//set focus to textfield
                 			my_input.setFocus();
}else if(Key.isDown(50)) { //2
                  		debugTrace("CTRL + 2");
//set focus to button
                        	my_btn.setFocus();
}else if(Key.isDown(51)) { //3
   	                    debugTrace("CTRL + 3");
my_radio.setFocus();
}else if(Key.isDown(52)) { //4
   	                    debugTrace("CTRL + 4");
my_check.setFocus();
}else if(Key.isDown(53)) { //5
   	                   debugTrace("CTRL + 5");
my_combo.setFocus();
}
}
}
]]>
</mx:Script>
<mx:TextInput id="my_input" focusIn="debugTrace('TextInput focussed')" change="debugTrace('TextInput value changed')"/>
<mx:Button label="Button" id="my_btn" focusIn="debugTrace('Button focussed')" click="debugTrace('button pressed')"/>
<mx:RadioButton label="radio" id="my_radio" focusIn="debugTrace('RadioButton focussed')" click="debugTrace('Radio button selected')"/>
<mx:CheckBox label="Checkbox" id="my_check"  focusIn="debugTrace('CheckBox focussed')" click="debugTrace('CheckBox change')"/>
<mx:ComboBox id="my_combo" focusIn="debugTrace('ComboBox focussed')" change="debugTrace('ComboBox selection changed')">
<mx:dataProvider>
<mx:Array>
<mx:String>India</mx:String>
<mx:String>USA</mx:String>
<mx:String>Australia</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:VBox>
<mx:Label text="Debug Info:"/>
<mx:TextArea id="_ta" text="" width="200" height="200"/>
</mx:VBox>
</mx:Application>