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:
- bar with menu's and information in the top
- multi-document-interface in the main content area
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: corresponds to the navigation bar together with the multi-document-interface (multi-tabbed) in the main content area.
- Navigation bar: is the bar in the top providing global application functions such as opening a tab, quick search and logon/user information.
- Navigation bar part: is for example a menu or other component which is shown in the top bar.
- View: a view corresponds to a main tab opened in the main layout. A view has a unique name (used by the system to open a view) and a title (shown in the tab header).
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:
- application menu
- quick open view
- quick create entity
- global search
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.
- name: the name used to retrieve the view implementation from the system.
- title: the title shown in Main Layout. The title may be parameterized (showing for example a business partner name).
- parameters: a view needs to be able to retrieve a set of named parameters. The view defines what parameters it expects and also how it handles them.
- initialize: a view needs an explicit initialize method which tells the view to load information from the server and be prepared to be shown.
- getState/setState: a view should support getting and setting its state. The state is used to re-create the same user interface when a user open the application again.
- etc./to be added: during the implementation this api definition will be extended.
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:
- A view identifier (the name): used by the Main Layout to determine which component to instantiate to create the view.
- View parameters: for example the id of a business partner to show and other relevant parameters
The view request goes through the following steps:
- view is requested from the ViewManager (is part of the Main Layout)
- the ViewManager checks if the view implementation is already present on the client. If not it loads it from the server.
- the view implementation is present on the client. It is instantiated.
- The View Manager sets the parameters and calls initialize on the View.
- The View Manager adds the view to the Main Layout, effectively showing it.
- The View Manager decides to changes focus to the new view (this depends on the View request also, open in new tab, open in same tab, open in background)
Some aspects to take into account:
- the above description mentions that the ViewManager calls initialize on a View. It is possible that we need to add some more initialization methods to the api of a view (for example: beforeShow, afterShow etc.).
- When opening a view in the main tab area the ViewManager should maybe show a Loading in progress indicator.
- Modules can provide new view implementations. This means that we need a central view registry which allows registration of new views and which is the central point for ViewManager to request view implementations.
- the ViewManager should check if the views it has locally have not changed on the server. Just in line with the overall caching logic we can use the development status of a module and the module's version number. We should also support a development mode which allows easy refreshing of views on the client.
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:
- registration of components: the registered components are provided/created by the application component provider
- access control by component
Both aspects are maintained in tables.
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.
The main application module provides:
- a registry (client or server side) where components can register new navigation bar parts
- the navigation bar which automatically loads its contents from the main navigation registry
- the client side implementation of the ViewManager, StateManager, etc.
- a (client or server-side) registry for modules to registers views
- a mechanism to load views from the server.
- manages the available components and their access through an component-role table
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.
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.