Log in / create account
Openbravo.com
Issues
Forge
University
View source | Discuss this page | Page history | Printable version   

ERP 2.50:Developers Guide/Concepts/UI/Javascript Utilities

ERP 2.50:Developers Guide

Index


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

Application menu

HEAD:

BODY:

Application windows and pop-ups

HEAD: 

this.windowTables = new Array(
  new windowTableId('client')
);
setWindowTableParentElement();
this.tabsTables = new Array(
  new tabTableId('tdtopTabs')
);
setTabTableParentElement();

BODY:

Defining/Changing the shortcuts

In web/js/shortcuts.js the shortcuts are defined grouped by categories.

These categories are

These categories are loaded depending of the type of the window.

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

<script language="JavaScript" src="../../../../../web/js/appStatus.js" type="text/javascript"></script>
setProcessingMode('window', false);  <-- in case of form window
setProcessingMode('popup', false); <-- in case of popup window

setProcessingMode('window', true);  <-- in case of form window
setProcessingMode('popup', true); <-- in case of popup window

setProcessingMode('window', true);  <-- in case of form window
setProcessingMode('popup', true); <-- in case of popup window

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

<script language="JavaScript" src="../../../../../web/js/ajax.js" type="text/javascript"></script>
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. 
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: 

English | Translate this article... 


ERP 2.50:Developers Guide/Concepts/UI/Look and feel | ERP 2.50:Developers Guide/Concepts/UI/JavaScript Concepts

Retrieved from "http://wiki.openbravo.com/wiki/ERP_2.50:Developers_Guide/Concepts/UI/Javascript_Utilities"

This page has been accessed 11,436 times. This page was last modified on 14 June 2011, at 11:03. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.