ERP 2.50:Developers Guide/Concepts/UI/Javascript Utilities
ERP 2.50:Developers Guide |
|
Contents |
Introduction
This chapter gives a more detailed description of several important Openbravo javascript concepts. Other more specific concepts are documented directly in the javascript code.
Html HEAD considerations
JS import considerations
shortcuts.js should be imported before utils.js
utils.js should be imported before dojo.js (if exists)
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
NOTE: If you don't want to see the spinning logo and the "Processing..." text, you should add to the function a third parameter "false". Example setProcessingMode('window', true, false);
Ajax calls
- Import the javascript library just after the windowKeyboard.js import
<script language="JavaScript" src="../../../../../web/js/ajax.js" type="text/javascript"></script>
- There should be a function which is the call itself
- The recommended structure for this call is
function ajaxCall() { try { var paramXMLReq = null; return submitXmlHttpRequest(AAAAAAAA, BBBBBBBB, "CCCCCCCC", "DDDDDDDD", EEEEEEEE, FFFFFFFF, paramXMLReq); } catch (e) { initialize_MessageBox('messageBoxID'); setValues_MessageBox('messageBoxID','ERROR','ERROR',e); } }
The parameter name is used in the html above and should be substituted with your own needed text.
Parameter | Use |
---|---|
AAAAAAAA | Callback function |
BBBBBBBB | Form to submit |
CCCCCCCC | Command which will receive the petition |
DDDDDDDD | Servlet which manages the petition |
EEEEEEEE | For debug purposes. Put there "false" unless you want to debug |
FFFFFFFF | Extra parameter. Put there "null" if there is not extra params. |
- If the callback function returns something, the recommended structure is
function callback(paramXMLParticular, XMLHttpRequestObj) { var strText = ""; if (getReadyStateHandler(XMLHttpRequestObj,null,false)) { try { if (XMLHttpRequestObj.responseText) strText = XMLHttpRequestObj.responseText; } catch (e) { initialize_MessageBox('messageBoxID'); setValues_MessageBox('messageBoxID','ERROR','ERROR',e); } manageCall(strText); } return true; }
Then implement manageCall function to do whatever is needed with the string returned.
Cache trigger
There is a rustic system to prevent people using updated sources due to old cached files in the system.
In web/js/utils.js there is a function
function getCurrentRevision() { var number = 'XXXXX'; return number; }
and in src/org/openbravo/erpCommon/security/Login_F1.html , in onLoadDo() there is a line
if (!revisionControl('XXXXX')) alert("Your browser's cache has outdated files. Please clean it and reload the page.");
in both cases, there is a number (called "XXXXX" in previous code) which should be the same. If both numbers don't equal, an alert will raise in the login screen
"Your browser's cache has outdated files. Please clean it and reload the page."
If you are experiencing this alert/error, you should clear your browser cache
If the alert/error persist check (in this order):
1. In your sources both numbers are the same. If not you have a problem with your sources
2. In your context files both numbers are the same. If not you have a problem while compiling
3. In your browser both numbers are the same. To view that, in your browser go to "view source" of the login frame an ensure that this number is the same of utils.js (check http://yourhost/openbravo-context/web/js/utils.js). If not your application server is caching files, see your application server configuration and delete the cache
Languages: |
ERP 2.50:Developers Guide/Concepts/UI/Look and feel | ERP 2.50:Developers Guide/Concepts/UI/JavaScript Concepts