Way to assign keyboard buttons to execute actions?

[clankford]

Hello,

Is it possible to assign a "function" or action to certain buttons on the keyboard?

For example, assign a function that will open a DIV when a user presses the "PAGE UP" button, or the "HOME" button?

Thanks, Casey

[JerryBrightbill]

Re: Way to assign keyboard buttons to execute actions?

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.

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.

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'

[Davidk]

Re: Way to assign keyboard buttons to execute actions?

Now that's cool... thanks Jerry.

[clankford]

Re: Way to assign keyboard buttons to execute actions?

Thank you Jerry so much for your response. I think this is going in the right direction, so in basic terms how would I reference my action script to run in this code?

Sepcifically I have the code I need to run referenced as - {dialog.object}.runAction('ReturnFocusNextItem');

By the way this is in a UX component, therefore I would replace "grid" with "dialog" correct?

I experimented by using the following code but gave me an error (attached)Error_122415.png. Please advise how I might script it out correctly. Thanks!


{Dialog.object}.kw = new AUI.KeyWatcher([
{key: 'F2', handle: {dialog.object}.runAction('ReturnFocusNextItem');{
// JavaScript code to run
alert('F2 pressed');

}
}

]);
{Grid.object}.kw.on();

[Peter.Greulich]

Re: Way to assign keyboard buttons to execute actions?

That's really good to know, Jerry,

We're using this method in a UX in the onInitializeComplete event:

if (document.addEventListener){ 
	document.addEventListener("keydown",keyCapt,false); //code for Moz
}
else {
	document.attachEvent("onkeydown",keyCapt); //code for IE
}


function keyCapt(e){


  if (e.keyCode === 123) {
   		alert('F12 key');
  }

  // etc...
}

The only issue is that we have conflicts in the browser w. certain keys, such as F1 & F5.

[clankford]

Re: Way to assign keyboard buttons to execute actions?

Ok I see that I put my code in the wrong place, now at least I'm able to save the UX component with no errors, now when I run the following code all that happens is that I get an alert, does not run the code. Please help.

{Dialog.object}.kw = new AUI.KeyWatcher([
{key: 'F2', handle: function(){
// {dialog.object}.runAction('RetreiveNextItemInfo');
alert('F2 pressed');
}
}

]);
{Grid.object}.kw.on();

[Davidk]

Re: Way to assign keyboard buttons to execute actions?

Even though you're assigning the KeyWatcher to the Dialog object and then turning it on for the Grid object... it does seem to work. For the sake of readability, I'd use either the Grid or Dialog object... don't mix them.

Also, your code for the runAction is commented out. That's why you're only getting the alert.

In my tests (Chrome and Firefox) with a UX, the function keys don't work... but HOME, PAGEUP, SHIFT-H, and others work.