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

Comments

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…

கிறுக்கனின் கிறுக்கல்கள் - அழுகையின் சிறப்பு

அழுகை என்பதை வெறுத்தவன் நான்... என்னை ஒரு நாள் பிரிந்திருக்க முடியாமல் , கைப்பேசியில் நீ சிந்திய உன் கண்ணீர் ஓசை என் காதில் கேட்கும் வரை...

பின்குறிப்பு: கிறுக்கனின் கிறுக்கல்கள் எங்கிருந்தோ தழுவப்பட்டது போல் தோன்றினால் கிறுக்கன் ( நான் உண்மையை ஏற்றுக்கொள்பவன்..:) ) பொறுப்பல்ல. கிறுக்கனின் கிறுக்கல்களில் வரும் கிறுக்கல்கள் யாவும் என் சிறய மூளையில் உதித்ததே ஆகும்.  Inspirations could have been drawn from somewhere else, but its the execution that counts....Isn't it ?