Projects:ImproveUIVisibility/TechnicalDocumentation
Contents |
Html HEAD considerations
onLoadDo & onResizeDo
In order to make the code as clean and fast as possible, here is a "to do" related to the onload and onresize implementation of the html. In the Openbravo ERP 2.35 there was structures 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>
In following versions the code of the htmls have this kind of structure:
<head> .... <script language="JavaScript" type="text/javascript"> .... function onLoadDo() { **keyboard operation functions** resizeArea(); 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
Keyboard shortcuts
Related files
utils.js: here are located the functions which capture the key pressing events
shortcuts.js: here are located the functions which define the key combinations for the menu and the windows
menuKeyboard.js: here are located the funcions associated to movements inside the application menu
windowKeyboard.js: here are located the functions associated to movements inside an application window
Implementation guidelines
HEAD:
- 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:
- N/A
Application windows and pop-ups
HEAD:
- 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:
- N/A
Defining/Changing the shortcuts
In web/js/shortcuts.js the shortcuts are defined grouped by categories.
These categories are
- applicationCommonKeys
- menuSpecificKeys
- windowCommonKeys
- editionSpecificKeys
- relationSpecificKeys
- gridKeys
- genericTreeKeys
- popupSpecificKeys
These categories are loaded depending of the type of the window.
- Menu window
- applicationCommonKeys
- menuSpecificKeys
- Form window
- applicationCommonKeys
- windowCommonKeys
- editionSpecificKeys
- genericTreeKeys
- Grid window
- applicationCommonKeys
- windowCommonKeys
- relationSpecificKeys
- gridKeys
- Popup window
- applicationCommonKeys
- windowCommonKeys
- editionSpecificKeys
- popupSpecificKeys
- genericTreeKeys
- gridKeys
To add/change a shortcut change in shortcuts.js following this structure
new keyArrayItem("KEY", "javascript action", null, "auxiliary key", *true if should be propagated, false if not* , 'onkeydown')
Loading Status
Related files
appStatus.js: here are located the functions related to the status change
utils.js: functions related to the 'Popup Loading'
Implementation guidelines
- Import the javascript library just after the windowKeyboard.js import
<script language="JavaScript" src="../../../../../web/js/appStatus.js" type="text/javascript"></script>
- Add the following functions at the beggining of the onLoadDo()
setProcessingMode('window', false); <-- in case of form window
setProcessingMode('popup', false); <-- in case of popup window
- If the window doesn't have validate() function
- Add at the beggining of the button onclick attribute
setProcessingMode('window', true); <-- in case of form window
setProcessingMode('popup', true); <-- in case of popup window
- If the window has validate() function
- Add at the end of the "if" of the validate function which servlet call is the same of your desired executed action
setProcessingMode('window', true); <-- in case of form window
setProcessingMode('popup', true); <-- in case of popup window
- In Openbravo ERP 2.50 there are at least two examples of this implementation
- Main window: Sales Management || Transactions || Create Invoices from Orders || Create Invoices from Orders >> Process
- Popup window: Financial Management || Accounting || Setup || Fiscal Calendar || Calendar >> Year >> Drop Reg Fact Act
| Languages: |