How to create a New Skin

Introduction

This how-to explains how to create a module that contains a skin (for use in classic -2.50 based- and 3.00 windows). We will create an example module called Example Skin, with the Java package name org.openbravo.userinterface.skin.blue. It is not mandatory to build both classic (2.50 based) and 3 skins parts. Each part is independent. NOTE: The 'Login' page customization is included in the classic (2.50 based) side.

For more extensive documentation about Openbravo 2.50 UI components, consult the Look and feel article.

For more extensive documentation about Openbravo 3 UI components personalization, consult the Skins article.

The latest version of the complete example can be found at: https://code.openbravo.com/erp/mods/org.openbravo.userinterface.skin.blue/

Files structure

Openbravo 3

Create the following folder structure

#openbravo#/modules/org.openbravo.userinterface.skin.blue/web/org.openbravo.userinterface.smartclient/openbravo/skins/Blue/

Since Openbravo 3 is module based, the recommendation is to add here as many folders as parts of Openbravo 3 you want to customize. Each file inside each folder should include ONLY the attributes/properties you want to change Thanks to that if new material is added to Openbravo 3, it will be also be inherited in your custom skin. You can always release a new version of your custom skin introducing the new elements.

Here is a real example of how to manage this folder: https://code.openbravo.com/erp/mods/org.openbravo.userinterface.skin.blue/file/tip/web/org.openbravo.userinterface.smartclient/openbravo/skins/Blue

Create the component provider at

#openbravo#/org.openbravo.userinterface.skin.blue/src/org/openbravo/userinterface/skin/blue/

The component provider is used to load the previous built files. You can find more information about how component provider works at: Openbravo 3 Architecture: Component Provider

Here is a real example of a skin component provider: https://code.openbravo.com/erp/mods/org.openbravo.userinterface.skin.blue/file/tip/src/org/openbravo/userinterface/skin/blue/ResourcesComponentProvider.java

Openbravo Classic/2.50

NOTE: In Openbravo 2.50 the default skin was "Default" skin, but in Openbravo 3 also a new skin called "250to300Comp" has been built to make classic (2.50 based) windows look more like new Openbravo 3 windows

Create the following folder structure

#openbravo#/modules/org.openbravo.userinterface.skin.blue/web/org.openbravo.userinterface.skin.blue/skins/Blue/

Create at this location

#openbravo#/modules/org.openbravo.userinterface.skin.blue/web/org.openbravo.userinterface.skin.blue/skins/Blue/*

These files (with the content):

Openbravo_ERP.css: <source lang="css">@import url(Openbravo_ERP_250.css); </source> Openbravo_ERP_240.css <source lang="css">@import url(Openbravo_ERP_250.css); </source> Openbravo_ERP_250.css <source lang="css">@import url(../../Default/Openbravo_ERP_250.css); @import url(../../org.openbravo.userinterface.skin.250to300Comp/250to300Comp/Openbravo_ERP_250.css); </source> Openbravo_ERP_250_print.css <source lang="css">@import url(../../Default/Openbravo_ERP_250_print.css); </source> Openbravo_ERP_print.css <source lang="css">@import url(Openbravo_ERP_250_print.css);</source>

Now you have to add each class you need to change from the "Default" or "250to300Comp" skin in your Openbravo_ERP_250.css file or in Openbravo_ERP_250_print.css file

You have to include also in these added classes ONLY the attributes you want to change. Thanks to that if new material is added to the "Default" or to the "250to300Comp" skin, it will be also be inherited in your custom skin. You can always release a new version of your custom skin introducing the new elements.

If you add/change any image that needs to be flipped to RTL (if it is selected), you have to add also a file "RTLFlippedImages.txt" with the path of these images

Here is a real example of how to manage these files: https://code.openbravo.com/erp/mods/org.openbravo.userinterface.skin.blue/file/tip/web/org.openbravo.userinterface.skin.blue/skins/Blue

PD: Remember that you should make changes only in files inside "Blue" folder.

Inside Openbravo ERP

1. Log into Openbravo ERP as System Administrator.
2. From the Application dictionary, select Application Dictionary > Module.
3. Click New
4. Select the Module tab and fill in the following essential fields:
   • Java Package = org.openbravo.userinterface.skin.blue
   • Name = Skin: Blue
   • Type = Module
   • Description = Skin that provides the application a blue look&feel
   • Help/Comment = When you install this module a new skin called 'Blue' is added and applied. To enable it also in classic mode go to "Session Preferences" window. To disable it you have to uninstall it.
   • Version = 1.0.0
   • In Development = checked
5. You can also fill in the following additional information:
   • License Type = Openbravo Public License
   • License text = Licensed under the Openbravo Public License version 1.1. You may obtain a copy of the License at http://www.openbravo.com/legal/license.html or in the legal folder of the Openbravo ERP core distribution.
   • Author = your name (or company name)
   • URL = your web address (or company web address)
6. Click Save.
7. Select the Dependency tab.
8. Click New
9. Fill at least the following essential fields as follows:
   • Dependent Module = Core
   • First Version = 3.0.13118 (or at least > 3.0.13118)
   • Dependency Enforcement = Major Version
10. Click Save

If the skin contains Openbravo 3 based components, also:

1. Click New
2. Fill at least the following essential fields as follows:
   • Dependent Module = User Interface Application
   • First Version = 2.1.13118 (or at least > 2.1.13118)
   • Dependency Enforcement = Major Version
3. Click Save
4. Click New
5. Fill at least the following essential fields as follows:
   • Dependent Module = Workspace & Widgets
   • First Version = 2.1.13118 (or at least > 2.1.13118)
   • Dependency Enforcement = Major Version
6. Click Save
7. Click New
8. Fill at least the following essential fields as follows:
   • Dependent Module = User Interface Selector
   • First Version = 2.1.13118 (or at least > 2.1.13118)
   • Dependency Enforcement = Major Version
9. Click Save
10. Click New
11. Fill at least the following essential fields as follows:
    • Dependent Module = Query/List Widget
    • First Version = 1.0.13118 (or at least > 1.0.13118)
    • Dependency Enforcement = Major Version
12. Click Save

If the skin contains Openbravo classic (2.50 based) components, also:

1. From the Application menu, select Application Dictionary > Reference.
2. In grid view, select the Skin List record (name column).
3. Select the List Reference tab.
4. Click New.
5. Complete at least the following essential fields:
   • Module = Skin: Blue - 1.0.0 - English (USA).
   • Search Key = org.openbravo.userinterface.skin.blue/Blue
   • Name = Blue
   • Select the Active checkbox.
6. You can also complete other optional fields, such as:
   • Description = Skin that provides the application a blue look&feel
7. Click Save.

Export the module

Read this article section: How To Create and Package a Module: Exporting a module

Package the module

Read this article section: How To Create and Package a Module: Packaging a module

Deploy/Compile the module

Read this article section: How To Create and Package a Module: Deploying/Compiling a module

Apply the skin

The Openbravo 3 components will be directly applied. In order to un-apply them, you should have to disable or uninstall the module.

In order to apply the classic (2.50 based) components, you should:

1. Log into Openbravo ERP as System Administrator.
2. From the General Setup, select General Setup > Application > Session Preferences.
3. Select Theme: Blue
4. Click Save Preferences