View source | View content page | Page history | Printable version   

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

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

Retrieved from "http://wiki.openbravo.com/wiki/Projects:ImproveUIVisibility/TechnicalDocumentation"

This page has been accessed 2,659 times. This page was last modified on 8 June 2012, at 05:28. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.