Alpha Anywhere already traps certain key combinations in web components, such as ESC to cancel edits and F9 to save edits on editable components. Internally, a key watcher JavaScript method is used. While not documented, you can add your own JavaScript key watcher to web components using our built in library. There are some caveats with this method. You don't want to assign an action to a key already captured by Alpha Anywhere (such as ESC on an editable form), and once a key event is assigned to an object that is defined on a page, it fires for every component on the page. So if you assign a key watcher to a grid opened by a tabbed UI, once the grid is opened, the key watcher will fire for every component opened on the Tabbed UI. So the code run by the key needs to check for context.
Walking Through The Code
The first step is create some JavaScript in something that runs when the component or page loads. This can be in the JavaScript functions for the component, in a client side event such as 'onGridInitializeComplete' in a grid object, or directly on a page. NOTE: All of the code below is JavaScript. Next, attach a new key watcher to a JavaScript object. You can create a new object or use the component object. If this is placed directly on a page, you will need to define a new object. Code:var KeyWatch = new Object()
KeyWatch.kw = new AUI.KeyWatcher([
// or use the component object - grid object placeholder shown
{Grid.object}.kw = new AUI.KeyWatcher([
They key actions are defined in a JavaScript array in the key watcher. Each key prototype has a 'key' parameter, and a 'handle' which is the code to run if the key is pressed. A single key code array entry is something like this:
{key: 'F2', handle: function(){
// JavaScript code to run
alert('F2 pressed');
}
}
Pressing the F2 key with this will show an alert. Each key array entry is separated by a comma. There is no comma after the last key definition. Once the watcher is defined, it must be turned on with:
keyWatch.kw.on()
//or if using the component object - grid object placeholder shown
{Grid.object}.kw.on();
The complete JavaScript to define multiple key watchers would look something like this:
{Grid.object}.kw = new AUI.KeyWatcher([
{key: 'F2', handle: function(){
// JavaScript code to run
alert('F2 pressed');
}
},
{key: 'SHIFT+F2', handle: function(){
// JavaScript code to run
alert('SHIFT-F2 pressed');
}
},
{key: 'PAGEUP', handle: function(){
// JavaScript code to run
alert('PAGEUP pressed');
}
},
{key: 'HOME', handle: function(){
// JavaScript code to run
alert('HOME pressed');
}
}
]);
{Grid.object}.kw.on();
Key watchers support prefixes as shown above, so you can add CTRL, ALT, or SHIFT as prefixes (they can be added together). Here is a list of supported keys:
Key = 'ENTER' Key = 'TAB' Key = 'BACKSPACE' Key = 'LEFT' Key = 'UP' Key = 'RIGHT' Key = 'DOWN' Key = 'ESCAPE' Key = 'PAGEUP' Key = 'PAGEDOWN' Key = 'END' Key = 'HOME' Key = 'INSERT' Key = 'DELETE' Key = 'F1' Key = 'F2' Key = 'F3' Key = 'F4' Key = 'F5' Key = 'F6' Key = 'F7' Key = 'F8' Key = 'F9' Key = 'F10' Key = 'F11' Key = 'F12'Learn more about Alpha Anywhere
Comment