Keyboard Shortcut like Ctrl+M

[bruceanthony]

I am looking at the possibility of converting an ANSA-AVR application to ProfoundUI. One of the features is the use of many keyboard shortcuts like CTRL+O, CTRL+U and so on and so forth. Is there a way to define keyboard shortcuts without assigning the shortcut to any key such as F1 thru F24. In short, I would like to bind an RPG indicator field name to any keyboard shortcut definition of my choosing.

[Scott Klement]

Sure, you can do tha with JavaScript...

Here's a JavaScript file that I called keycode.js. I put this file into /www/profoundui/htdocs/profoundui/userdata/custom/js. If you're running your programs inside of Genie, you'd also need to put a script tag in your start.html to tell Genie to load the file. Here's the contents:

Code: Select all

var keycode_handler = {
    registered: false
};

keycode_handler.keydown = function (e) {

   e = e || window.event;
   var handled=false;

   if (e.ctrlKey) {
     
     switch (e.keyCode) {
     case 77:              // M key
       keycode_handler.click("button1");
       handled=true;
       break;
     case 79:             // O key
       keycode_handler.click("button2");
       handled=true;
       break;
     case 85:            // U key
       keycode_handler.click("button3");
       handled=true;
       break;
     }
     
   }

   if (handled) preventEvent(e);

}

keycode_handler.click = function (widget) {
  if (getObj(widget) != null)
    pui.click(widget);
}

keycode_handler.start = function () {
  if (keycode_handler.registered) keycode_handler.stop();
  addEvent(pui.runtimeContainer, "keydown", keycode_handler.keydown);
  keycode_handler.registered = true;
}

keycode_handler.stop = function () {
  removeEvent(pui.runtimeContainer, "keydown", keycode_handler.keydown);
  keycode_handler.registered = false;
}

The way this works is that the "addEvent" API will tell the browser to call a routine when a certain event occurs. In this case, the event is the "keydown" (key on the keyboard is pressed down) event. I've registered it to the pui.runtimeContainer -- which is the part of the screen that all of the Profound UI widgets are drawn inside. When a key is pressed, it calls the "keycode_handler.keydown" routine.

This keydown routine checks to see whether the M, O or U key is pressed while the ctrlKey is also pressed. This tells us that the user pressed Ctrl-M, Ctrl-O or Ctrl-U, respectively. The code will then use the pui.click() API to click different buttons on the screen (you'll want to change them) based on which key was pressed. So Ctrl-O, for example, clicks a button with the id "button2". You would, of course, need to create a screen with teh appropriate buttons on them, and bind the button's "response" property to set an indicator that you can check inside your RPG programs.

The preventEvent() API tells the browser that we handled the key board event, so that it does not pass the event further up. for example, in firefox Ctrl-O usually opens the "open file" dialog... but because I did preventEvent when ctrl-O is pressed, it will not open the dialog, since I'm telling it that I've handled the event.

Once this code is loaded into your session, you will need to modify the screens that use it to call keyboard_handler.start() when they want to allow these keys to be pressed, or keyboard_handler.stop() to turn them off. I'm guessing you'll want them enabled when certain screens are loaded, so you'd probably do it in the onload and onsubmit events of your screen.

Code: Select all

onload: keyboard_handler.start();
onsubmit: keyboard_handler.stop();

You can use these from any/all screens you want... If the buttons are present on the screen, it'll click them. If not, it won't do anything when the keys are pressed...

Here's a site where you can test different keypresses to see what the JavaScript keycodes would be:
http://www.cambiaresearch.com/articles/ ... -key-codes

You can learn more about the addEvent API here:
http://www.profoundlogic.com/docs/pages ... Id=3276841

The removeEvent API is here:
http://www.profoundlogic.com/docs/pages ... Id=3276843

the pui.click API is here:
http://www.profoundlogic.com/docs/pages ... Id=3276856

the getObj API is here:
http://www.profoundlogic.com/docs/pages ... Id=3276807

Any questions, just ask...

[DaveLClarkI]

Is there a way to define keyboard shortcuts without assigning the shortcut to any key such as F1 thru F24. In short, I would like to bind an RPG indicator field name to any keyboard shortcut definition of my choosing.

We use a free JavaScript product called MouseTrap (combined with jQuery) for this. It shields you from having to know key codes and such. We just define pre-determined widget id's and, voilá!, the keyboard shortcut starts working in the Profound UI rich display.

For example, the following sets up which keys or shortcut keys are going to be trapped:

Code: Select all

$(document).ready(function()    // jQuery function to execute as soon as the browser page is ready
{
  Mousetrap.bind(
    ['alt+c', 'del', 'alt+f', 'alt+home', 'alt+p', 'alt+x'],
    __WiseKeyCombinations );
});

Then we created a JavaScript function called __WiseKeyCombinations which gets called anytime any of these are invoked. Our function looks like this:

Code: Select all

function __WiseKeyCombinations(e, combo)
{
  console.log('Mousetrap combo = ' + combo);
  switch(combo)
  {
    case 'alt+c':
      if (getObj('btnCopy'))    // if object exists
      {
        pui.click('btnCopy');   // click it
        e.preventDefault();     // if combo has default action, prevent it
        e.stopPropagation();    // and prevent bubbling up the DOM tree
        return false;           // cancel the event
      }
      break;
    case 'del':                 // the delete key
      if (e.target.tagName != 'INPUT'	// if not an input element
      || wob.toType(e.target.readOnly) != 'undefined'	// or input element has a readonly attribute
      && e.target.readOnly === true)	// and it is currently set to "true"
      {
        if (getObj('btnDelete'))  // then, if delete button exists on the page
        {
          pui.click('btnDelete'); // click it
          e.preventDefault();     // if combo has default action, prevent it
          e.stopPropagation();    // and prevent bubbling up the DOM tree
          return false;           // cancel the event
        }
      }
      break;
    case 'alt+f':
      if (getObj('btnFind'))    // if object exists
      {
        pui.click('btnFind');   // click it
        e.preventDefault();     // if combo has default action, prevent it
        e.stopPropagation();    // and prevent bubbling up the DOM tree
        return false;           // cancel the event
      }
      break;
    case 'alt+home':
      if (getObj('btnHome'))    // if object exists
      {
        pui.click('btnHome');   // click it
        e.preventDefault();     // if combo has default action, prevent it
        e.stopPropagation();    // and prevent bubbling up the DOM tree
        return false;           // cancel the event
      }
      break;
    case 'alt+p':
      if (getObj('btnPrint'))   // if object exists
      {
        pui.click('btnPrint');  // click it
        e.preventDefault();     // if combo has default action, prevent it
        e.stopPropagation();    // and prevent bubbling up the DOM tree
        return false;           // cancel the event
      }
      break;
    case 'alt+x':
      if (getObj('btnExit'))    // if object exists
      {
        pui.click('btnExit');   // click it
        e.preventDefault();     // if combo has default action, prevent it
        e.stopPropagation();    // and prevent bubbling up the DOM tree
        return false;           // cancel the event
      }
      break;
    default:
      break;
  }
  return true;                  // continue with normal event handling
}