Projects/KeyboardOperation/TechnicalDocumentation
Contents |
Keyboard Operation - Technical Documentation
Related files and functions
utils.js: here are located the functions which capture the key pressing events
- stopKeyPressEvent(evt): Stops the propagation and the default action of the browser shortchut
- startKeyPressEvent(evt): Enables the propagation and the default action of the browser shortchut
- keyArrayItem(key, evalfunc, field, auxKey, propagateKey, event): Builds the keys array on each screen. Each key that we want to use should have this structure
- obtainKeyCode(code): Returns the ASCII code of the given key
- keyControl(pushedKey): Handles the events execution of keys pressed, based on the events registered in the keyArray global array
- putFocusOnMenu(): Put the focus on the Menu frame
- putFocusOnWindow(): Put the focus on the Window frame
- enableShortcuts(type): Used to activate the key-press handling. Must be called after set the keys global array "keyArray"
shortcuts.js: here are located the functions which define the key combinations for the menu and the windows
- keyArrayItem(key, evalfunc, field, auxKey, propagateKey, event): Builds the keys array on each screen. Each key that we want to use should have this structure
- Example: keyArrayItem("S", "alert('You have pressed Ctrl + S');", null, "ctrlKey", false, 'onkeydown')
- getShortcuts(type): Defines the keys array for all the application
menuKeyboard.js: here are located the funcions associated to movements inside the application menu
- menuUpKey(state): Defines the cursor movement when this functions is called. If the "state" is "true" it means that the function starts its execution, and it starts a recursive bucle that ends when the function is called again with "state" = false. The logic of this is related to the specification: when you hold a key pressed, the focus should change sequentially (not only one change) until the key is unpressed.
- menuUpKey(state): Same logic of menuUpKey(state)
- menuLeftKey(): Defines the cursor movement when this functions is called.
- menuRightKey(): Defines the cursor movement when this functions is called.
- menuHometKey(): Defines the cursor movement when this functions is called.
- menuEndKey(): Defines the cursor movement when this functions is called.
- menuEnterKey(): Defines the cursor movement when this functions is called.
windowKeyboard.js: here are located the functions associated to movements inside an application window
- cursorFocus(evt, obj): Put the focus on the clicked element. If the clicked element doesn't belong to the form, the focus will be on the first element
- isInsideForm(obj): Returns true if the object is inside the form. Returns false in any other case
- setWindowElementFocus(obj, type): Put the focus on the obj passed
- mustBeJumped(obj): Returns true if the object must be jumped
- mustBeIgnored(obj): Returns true if the object must be ignored
- canHaveFocus(obj): Returns true if the object can have focus
- getNextWindowElement(): Returns the next form element that can have focus
- getPreviousWindowElement(): Returns the previous form element that can have focus
- getFirstWindowElement(): Returns the first form element that can have focus
- getLastWindowElement(): Return the last form element that can have focus
- windowTabKey(): Defines the cursor movement when this funcion is called
- windowShiftTabKey(): Defines the cursor movement when this funcion is called
- setFirstWindowElementFocus(): Put the focus on the first form element that can have focus
- setLastWindowElementFocus(): Put the focus on the last form element that can have focus
Previous steps
In order to make the code as clean and fast as possible, here a new implementation way is going to be defined as a previous step of the keyboard operation implementation. In the 2.35 there are things like this:
<HEAD>
....
<SCRIPT language="JavaScript" type="text/javascript">
....
function onloadClient() {
....
}
....
</SCRIPT>
....
</HEAD>
<BODY .... onload="resizeArea(); focoPrimerControl(); updateMenuIcon('buttonMenu'); onloadClient(); xx(); yy(); zz(); etc();" .... onresize="resizeArea(); etc();">
....
</BODY>
The idea is that in the 2.40 the code of ALL application HTML have this kind of structure:
<HEAD>
....
<SCRIPT language="JavaScript" type="text/javascript">
....
function onLoadDo() {
resizeArea();
focoPrimerControl();
updateMenuIcon('buttonMenu');
onloadClient CONTENT (the whole content, not the function call)
xx();
yy();
zz();
etc();
}
function onResizeDo() {
resizeArea();
etc();
}
</SCRIPT>
</HEAD>
<BODY .... onload="onLoadDo();" .... onresize="onResizeDo();">
....
</BODY>
Notice that the onLoadDo() and onResizeDo() are the last loaded/written functions before the HEAD end
Implementation guidelines
Application menu
HEAD changes:
- Remove all "var arrTeclas", "var keyArray", "new Teclas", "new keyArrayItem", "activarControlTeclas()" and "enableShortcuts()" references (if any)
- Add <script language="JavaScript" src="../web/js/shortcuts.js" type="text/javascript"></script> before <script language="JavaScript" src="../web/js/utils.js" type="text/javascript"></script>
- Add <script language="JavaScript" src="../web/js/menuKeyboard.js" type="text/javascript"></script> after <script language="JavaScript" src="../web/js/utils.js" type="text/javascript"></script>
- Include "enableShortcuts('menu');" in onLoadDo() (preferably in first place)
BODY changes:
- Minor changes
Application windows and pop-ups
HEAD changes:
- Remove all "var arrTeclas", "var keyArray", "new Teclas", "new keyArrayItem", "activarControlTeclas()", "enableShortcuts()", "focoPrimerControl()" and "setFocusFirstControl()" references (if any)
- Add <script language="JavaScript" src="../../../../../web/js/shortcuts.js" type="text/javascript"></script> before <script language="JavaScript" src="../../../../../web/js/utils.js" type="text/javascript"></script>
- Add <script language="JavaScript" src="../../../../../web/js/windowKeyboard.js" type="text/javascript"></script> after <script language="JavaScript" src="../../../../../web/js/utils.js" type="text/javascript"></script>
- Include the following structure in onLoadDo() in first place:
this.windowTables = new Array(
new windowTableId('client')
);
setWindowTableParentElement();
this.tabsTables = new Array(
new tabTableId('tdtopTabs')
);
setTabTableParentElement();
- If there is more tables containing a form, they must be added in windowTables array. Note that 'client' is the most common id for tables containing forms, but it could be another id name in some windows
- If the window or the popup has a default action button, it must be added in windowTables array specifying the id of the button as a second parameter in the windowTableId.
- If there is more tables containing a tab group, they must be added in windowTables array. Note that most of the pop-ups haven't got any tab, so the last four lines don't have to be included in pop-up windows.
- Include "enableShortcuts('edition');", "enableShortcuts('relation');" or "enableShortcuts('popup');" in onLoadDo(), depending the kind of window.
- Include "setWindowElementFocus('firstElement');" in onLoadDo(). If the onload focus has to be in an specefic element, this specific element id has to be called instead of 'firstElement' and add 'id' parameter. This function must be called after the resizeArea() function.
- Example: setWindowElementFocus('acceptButton', 'id') ... where acceptButton is the id of the element which has going to have the focus when the window loads
- Include structures like this example for custom window shortcuts (if they are needed and always after the "enableShortcuts('window');")
- Example: keyArray[keyArray.length] = new keyArrayItem("C", "alert('('You have pressed Alt + C')');", null, "altKey", false, 'onkeydown');
BODY changes:
- N/A
Category: Projects