Client side scripting in Openbravoopenbravo

Dissecting the application scripting architecture of Openbravo ERP 3.0

One of the main USP’s of Openbravo ERP 3.0 is its RIA (Rich Internet Architecture) based on the smartclient framework. Openbravo was one of the pioneers in the Opensource ERP industry to move to a fluid client based architecture. In my earlier post , I attempted to dissect the User Interface elements in Openbravo. In this post, I tend to explain briefly the way the client side scripting is segregated which would be quite useful while debugging and also while extending the module and creating new scripts.

The main client side scripts are present in the module org.openbravo.client.application. Here is the folder structure of the user interface module.

The custom scripts that are used in Openbravo ERP are added in the web/org.openbravo.client.application/js folder. There is another folder in the same path, org.openbravo.userinterface.smartclient which contains the core smartclient elements that are being used and modified for Openbravo. Notice that the scripts are segregated related to the user interface elements. For eg., The alert-management folder contains all the scripts needed for rendering and manipulation of the alert window. I will try to touch base on few elements that are being used widely and most likely to be debugged. But before that we should be aware that Openbravo uses the free marker template engine to generate user interface based on the scripts. In essence, the user interface elements that we see are mostly formed from FTL (Freemarker Template Language) templates. These templates are stored in the src/org/openbravo/client/application/templates folder. Here is a screenshot of the templates.

I am not going to explain in detail all the templates, but layout.js.ftl is the main template that acts as the base of the user interface and contains the top menu section and the tabbed workspace. The other templates are quite self-explanatory from their names and if there are any doubts in this, please drop in a comment.
Next coming to the Application scripts, here are the key scripts.
1. Main View
The main view contains the scripts necessary for the rendering and manipulation of data in the tabs, The ob-tab.js is the base script file for the tab and ob-standard-window.js is the main container inside the tab. The ob-standard-view contains the form view and grid view of each tab. ob-messagebar.js is also contained in ob-standard-view so that it is displayed properly in both form view as well as grid view. 
  • ob-tab.js
  • ob-standard-window.js
  • ob-standard-view.js
  • ob-messagebar.js (the form and grid components are detailed below)
  • ob-view-grid.js
  • ob-view-form.js

2. Grid View

All the scripts related to grid layout is present in the grid folder. Here ob-grid.js is the main grid definition extended from smartclient grid. The ob-view-grid.js is the file that is used to render the grid layout for all the normal windows. ob-tree-grid.js is an extension of smartclient tree grid and used in tree grid reference in Openbravo. The ob-tree-view-grid.js is the grid layout that is rendered in windows where tree grid is being used. For eg., Organization window.
3. Form View

The form view contains all the scripts related to the form view. The interesting thing here is, note that there are separate scripting files for the status bar, attachment section, linked item, notes. Any improvements made to these will not adversely affect the form view and similarly it is easier to add new components to the form view similar to these. The ob-view-form.js is the base script for rendering the form view. Another interesting thing to note here is the formitem folder. The formitem folder is nothing but scripts for each of the reference types being used by Openbravo. This again improves code readability, maintainability and is easily extendable. 

4. Toolbar
Another more used feature is the toolbar. Here ob-action-button.js contains the generic actions to be performed for all toolbar and button fields and of course with some exceptions. But ob-toolbar.js is the file where all the toolbar elements like New, Delete, Save, Export are defined. ob-clone-order.js is a custom button developed specifically for order window. So this is defined separately again to make sure that core functionality is not affected by newer developments. 
You can check the other folders and see how cool and simple it is to understand the application scripting architecture in Openbravo. Feel free to comment on any mistake that I may have made (in this blog post) and also for any doubts or clarifications. 
Happy Working !!!
Previous post

Boost Openbravo performance with AppDynamics and Munin

Next post

Improvements To Tree Grid View in Openbravo