Projects:Smartclient/Developers Manual

Contents 1 Introduction 2 Smartclient JS location 3 Smartclient JS and SmartGwt 4 Documentation 5 Using the Smartclient JS library 6 Global Smartclient Settings in Openbravo (autoDraw: false) 7 Customizing the skin 7.1 Skin Location 7.2 Configure Openbravo to use the custom skin

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:

• Documentation
• Demo
• Forum

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:

1. 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).
2. copy/paste the code above setting the skin location to a valid value
3. 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.