View source | Discuss this page | Page history | Printable version   

ERP/2.60/Projects/UI Technology/Main Layout Development



The main layout is the next target development for the new Openbravo user interface.

The main layout is shown in the image below. It consists of these parts:

Main layout.png

The functionality (menu's etc.) in the main layout is provided through modules. To follow the example shown in the screenshot above. There will be a module providing the Application Menu, a module for the Bookmarks etc.

The layout will be developed using SmartClient components. These components will be extended/encapsulated in higher level Openbravo application objects which provide higher level functions (e.g. openView, refresh, etc.).


Before going into more detail some common terminology is explained:


Main Layout Parts

As outlined above the main layout consist of two parts: 1) navigation bar, 2) main content area or also called main view area.

The navigation bar provides functions such as:

The navigation bar parts or components are implemented through modules. The navigation bar itself is also provided through a module (Main Application). The Main Application module will deliver an empty navigation bar, its components are provided by modules.

The main content area consists of a multi-document-interface (MDI) provided using tabs. The main layout itself is also provided by the Main Application module, it does not provide specific views (which can be opened as tabs). These are provided by modules.


A view extends a common SmartClient component and adds higher level functions to it. A view is implemented in javascript, if the view implementation is not present in the client then the Main Layout component should be able to retrieve a view implementation from the server.

View Request Steps

A view can be requested in different ways. It can be done through clicking a menu option, through a quick-start field (typing in the view name) or through clicking a hyperlink. A view request consists of two parts:

  1. A view identifier (the name): used by the Main Layout to determine which component to instantiate to create the view.
  2. View parameters: for example the id of a business partner to show and other relevant parameters

The view request goes through the following steps:

Some aspects to take into account:

A special view: classic openbravo window

A special view implementation should take care of opening an openbravo window inside of a tab of the window. The question is if there is one view and the to-be-opened classic window is passed in as a parameter or that each openbravo window will have a corresponding view definition on the client.

The parameters passed to the view should be used as request parameters to open the classic openbravo window. This makes it for example possible to make use of deep-linking and show a specific business partner directly in a window.

Client Side Framework

The client side framework consists of several managers, these are discussed in this section.


The main layout manager is responsible for loading the components shown in the main navigation area.

The navigation bar manager loads the allowed navigation bar components from the backend. The available components are determined by the role-navigation bar component access control.

The navigation bar should support the following functionality: - hide components (and unhide them) - move components, change the order of components

The state of the navigation bar should be persistable so that when a user reopens the page, the same components are visible (and hidden).


The ViewManager manages the views which are opened in the tabs in the application. It keeps a set of active views and makes it possible to open a view. A ViewManager needs to be aware of when a view gets closed.

A specific functionality provided by the ViewManager is persisting the current state of the Main Layout. It should be capable of re-instating the opened tabs when the user re-visits the application. Both which views are opened and the state within a view.


The state manager is responsible for persisting state of the user interface on the client or on the server. Initially we will be focusing on client-side state saving (in cookies). But the concept should be extendable to support server side state saving.

Server side framework

The client-side framework is supported by a server side framework.


The server side application framework (== module) provides the following server side registration possibilities:

Both aspects are maintained in tables.

Component Implementations

A component (for example navigation bar component) is implemented in a module. A module provides the Component implementation in java (extending the BaseTemplateComponent class).


The main layout and its functionality consists of several modules.

Main Application

The main application module provides:

Quick Open View

A navigation bar component which allows the user to easily open a view (shows a suggestion box). Should use the list of registered views.

Application Menu

The application menu component shows the same menu as it is available in the classic OB user interface. The difference is that clicking on menu options will open a view in the main view area.

Create Entity

Retrieved from ""

This page has been accessed 2,562 times. This page was last modified on 17 March 2010, at 19:59. Content is available under Creative Commons Attribution-ShareAlike 2.5 Spain License.