Custom Extension up and down input field

[Dino]

Hi

I am trying to create a custom extension, that will have an input field, where if you press the down key, it will do a tab, while pressing the up key, will do a shift tab.
if using an extension like this in a subfile option column, the idea is you can go from one field to the next using up and down keys instead of tab, which is one of the popular ways when using green screen.

the extension I created is here, with the new properties and the actions for it, but I cannot get the tab or shift-tab to work correctly. maybe I am missing something. Any suggestion welcomed.

Code: Select all

function DEFINE_EXTENSION_SimpleInputUpDown()
{
var definition =
       {
       name: "SimpleInputUpDown", 
       group: "vis",
       type: "element",
       display: "Simple Input Up Down",
       subType: "new",

       properties:
       {
        value: { type: "String", defaultStatic:"", description: "Value to appear in the field" },
        style:   { type: "Style", description: "CSS to apply to the extension." },
        onKeyUp: { type: "Event", defaultDynamic: "SENDKEY(\"Shift+Tab\");", description: " The onKeyUp event." },
        onKeyDown: { type: "Event", defaultDynamic: "SENDKEY(\"Tab\");", description: " The onKeyDown event." },
       },

       init: function(element, elementContainer)
       {
          this._element = element ;
          this._elementContainer = elementContainer ;
          var inpValue = this.getPropertyValue("value");
          var inp = document.createElement("input");
          inp.innerHTML = inpValue;
          inp.sendKey   = "Enter";
          if (!this.isDesignMode())
          {
             var self = this;
             inp.onkeyup = function() { self._onKeyUp(inp); };
             inp.onkeydown = function() { self._onKeyDown(inp); };
          }         
          this.applyTabIndex(inp);
          elementContainer.appendChild(inp);
          this.inputElem = inp;
          if (AXES.isTS2Engine) element.addListener("AddedToDOM", this._handleAddedToDOM, this);
       },

       render: function(element, elementContainer)
       {
          var input = this.inputElem;
          if (!AXES.isTS2Engine)
          {
             /* TS1 sizing */
             var size = element.getSize();
             input.style.width = (size.width).toString() + "px";
             input.style.height = (size.height).toString() + "px";
          }
          var style = this.getPropertyValue("style");
          this.applyStyle(style, input);
       },

       destroy: function(element, elementContainer)
       {
          this.inputElem.onkeydown = null;
          this.inputElem.onkeyup = null;
          this.inputElem.sendKey = null;                
          this.inputElem = null;
          delete this.inputElem;
          element.removeListener("AddedToDOM", this._handleAddedToDOM);
          delete this._element;
          delete this._elementContainer;
       },

      _handleAddedToDOM: function(event)
      {
         var size = this._element.getSize();
         this.inputElem.style.width = (size.width).toString() + "px";
         this.inputElem.style.height = (size.height).toString() + "px" ;
      },

     _onKeyDown: function(input)
     {
       var env = { defaultKey : input.sendKey };
       this.raiseEvent("onKeyDown", env);
     },

     _onKeyUp: function(input)
     {
       var env = { defaultKey : input.sendKey };
       this.raiseEvent("onKeyUp", env);
     }
  };

  AXES.Extensions.add(definition);
}

DEFINE_EXTENSION_SimpleInputUpDown();

Instructions to create custom extensions with axes are here:
https://axesdocs.lansa.com.au/index.php ... extensions

which basically after doing a code like the one I have here, is to put this extension in your project folder, axes *R for the public and you can use it.

[Dino]

Thank you Shumpei for sending me in the right direction!

I was trying to handle the keys up and down to act like tab and shift for subfiles, using script... an easier solution, was to use a keymap.

So using the keymap just created in this post (viewtopic.php?f=9&t=212) I did a couple of other changes... found the UpArrow and indicated to be now a PrevField, and the DownArrow and changed to be now NextField:

axeskeymap11.png (13.5 KiB) Viewed 3381 times

and with that, now in a subfile I can use that map and move with up and down keys in the subfile instead of tabs. excellent! just needed another perspective.

axeskeymap12.png (86.63 KiB) Viewed 3381 times