Skip to main content

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 !!!


Popular posts from this blog

My 10 years in Application Development

It's been around 10 years since I started programming. May be a bit more, if I have to include my first attempts at C programming in school. But it would be a grave insult to call remembering ten lines of code and just replicating it to put a star on the screen. I also did a course on Visual basic, but it was more gimmicks that Application development. But it was truly in the year 2007 when I started my Master in Computer Applications that I found a new flare for developing applications. 
I was very late to computers in general and even when I joined my Masters, computers were not really accessible to me. But when I joined my Masters where one is actually expected to hone the skills which they already have, but in case it was were I was learning the skills, initially it was very difficult. I was not sure what computers had for me nor I had a natural flair for programming. But the thing about computers that attracted me was the visual medium it gave. Initially it was just a door t…

Changing Timezone in Postgresql, Ubuntu

Timezone and locale are integral concepts that one should be aware of when implementing a System. For example. if you create a database in PostgreSql, it will use the default System settings for the database. Lets say you have a server in UK and your client is US. If the client tries to retrieve the current date or time, it is going to show the UK time and not the US one.
Today I encountered a different issue in our client place where the Ubuntu timezone and PostgreSql timezone were showing a incorrect values. Instead of Indian Standard Time (IST) it was showing Pacific Daylight Time(PDT). These are the steps that I followed to change the timezone to IST in PostgreSql and Ubuntu.
Changing timezone in Ubuntu:
sudo dpkg-reconfigure tzdataYou will be prompted to choose the continent and then the area. Provided screen shots where we configure the location.
Use TAB key to navigate to the OK button and then press Enter.

The changes will get reflected immediately. To check it you can open a n…

Dissecting Openbravo 3.0 UI Architecture

Having been worked on Openbravo 3.0 UI for more than a year now (right from RC1) , Openbravo has leaped ahead of most contemporary ERP's in terms of UX design and usability. And a part of the credit has to go to the community too as they were actively involved in finalizing the UX and also involved enthusiastically in tested out the RC versions and providing their feedback.

In this post, I have tried to draw limelight on the basic UI components that are being used in Openbravo and their corresponding smartclient components. This is just to provide a very high level idea on how the entire architecture is coupled together. I have tried to use a single screen shot of Openbravo interface and tried to map the base components here.

The hierarchy can be visualized in simple terms as follows:

Exhaustive information on these components are provided in the Openbravo Wiki here.

Most of these components are defined and managed from individual files (or code) thereby making it really easy to …