Projects:Smartclient/Developers Manual
Contents |
Introduction
The Smartclient module delivers the Smartclient RIA library to Openbravo. By installing this module it is possible to use Smartclient javascript libraries in custom Openbravo development. The Smartclient module consists of two main parts:
- Smartclient client side javascript libraries
- Smartclient skin for Openbravo
Smartclient JS location
The smartclient libraries are located within the web/org.openbravo.userinterface.smartclient/isomorphic folder inside the module. After building the system they can be found in the same location inside the web application.
Smartclient JS and SmartGwt
Openbravo makes use of the javascript libraries of Smartclient. Openbravo in its core application does not make use of SmartGwt as Openbravo generates the user interface at runtime.
However, the server-side Openbravo framework should facilitate working with SmartGwt. So SmartGwt is clearly an option for custom development on top of Openbravo.
Documentation
For detailed documentation on Smartclient see these pages:
Using the Smartclient JS library
To integrate the Smartclient JS library on your web page you can use a url like the following:
http://localhost:8080/openbravo/org.openbravo.client.kernel/OBCLKER_Kernel/StaticResources
This URL makes use of the Client Kernel module to load the Smartclient libraries. The advantage of using this url, over directly addressing the Smartclient javascript files in your web page, is that the Client Kernel takes care of refreshing client-side caches when the Smartclient module is upgraded. In addition this load method makes sure that other Openbravo javascript utilities are available to your application also.
For the same reasons it can make sense to deliver your own custom javascript development as an Openbravo component as it is described in the Client Kernel Developers Manual.
Global Smartclient Settings in Openbravo (autoDraw: false)
One of the global static resources is created by the smartclient_application_js.ftl template in the org.openbravo.userinterface.smartclient.templates package. This template has the following content:
openbravo.Application.smartclientSkinLocation = "${data.skinLocation}"; isc.setAutoDraw(false);
The important one to note is the isc.setAutoDraw(false). This is a recommended setting in Smartclient. This means however that Smartclient components are not visible until an explicit call to the draw method on the client.
The smartclientSkinLocation variable is discussed in more detail below, in the section on customizing the skin.
Customizing the skin
Openbravo components like the Selector make use of the skin contained in the Smartclient module. The skin can be customized by copying the current skin and making the required changes in a separate module.
Skin Location
The smartclient skin can be found in the modules/org.openbravo.userinterface.smartclient directory and then in the web/org.openbravo.userinterface.smartclient/openbravo/skins/2.50_emulation/smartclient directory.
For information on how to customize skins see the smartclient reference documentation.
Configure Openbravo to use the custom skin
After creating the custom skin you have to configure Openbravo to use it for standard components like the Selector. This is done by overriding a specific template in Openbravo. This the 'Smartclient Application JS template' template. The template source is quite simple:
openbravo.Application.smartclientSkinLocation = "${data.skinLocation}"; isc.setAutoDraw(false);
To override this a custom template has to be created which contains these two lines replacing ${data.skinLocation} with the custom skin location. The current value for the skinLocation is: web/org.openbravo.userinterface.smartclient/openbravo/skins/2.50_emulation/smartclient/
In your skin module the custom skin has to be placed inside a folder called web and then a meaningful subfolder. The path set in the openbravo.Application.smartclientSkinLocation should then reflect this path starting with the web folder.
A custom template is not difficult to create. It can be done following these steps:
- create a text file in the source directory of your module (preferably in a package), the text file extension should preferably be ftl (freemarker extension).
- copy/paste the code above setting the skin location to a valid value
- in Openbravo go to Application Dictionary > Template and create a new template with the following settings:
- Module: the module with the custom skin and the template file
- Name/Description: any sensible value
- Component Type: Smartclient Component
- Overrides template: Smartclient Application JS Template
- Template language: Freemarker
- TemplateclasspathLocation: the path in the source directory to the file, incl. the filename.
Then save the template.