Wikiadmin: Created page with "== 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 calle..."

2021-12-16T03:30:16Z

Created page with "== 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 calle..."

New page

== 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 [[ERP/2.50/Developers_Guide/Concepts/UI/Look_and_feel| ''Look and feel'']] article.

For more extensive documentation about Openbravo 3 UI components personalization, consult the [[Skins| ''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| ''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 ==
# Log into Openbravo ERP as System Administrator.
# From the Application dictionary, select '''Application Dictionary > Module'''.
# Click '''New'''
# 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
# 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)
# Click '''Save'''.
# Select the '''Dependency''' tab.
# Click '''New'''
# 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
# Click '''Save'''

If the skin contains Openbravo 3 based components, also:

# Click '''New'''
# 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
# Click '''Save'''
# Click '''New'''
# 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
# Click '''Save'''
# Click '''New'''
# 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
# Click '''Save'''
# Click '''New'''
# 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
# Click '''Save'''

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

# From the Application menu, select '''Application Dictionary > Reference'''.
# In grid view, select the '''Skin List''' record ('''name''' column).
# Select the '''List Reference''' tab.
# Click '''New'''.
# 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.
# You can also complete other optional fields, such as:
#* Description = Skin that provides the application a blue look&feel
# Click '''Save'''.

==Export the module==
Read this article section: [http://wiki.openbravo.com/wiki/How_To_Create_and_Package_a_Module#Exporting_a_Module ''How To Create and Package a Module: Exporting a module'']

==Package the module==
Read this article section: [http://wiki.openbravo.com/wiki/How_To_Create_and_Package_a_Module#Packaging_a_module ''How To Create and Package a Module: Packaging a module'']

==Deploy/Compile the module==
Read this article section: [http://wiki.openbravo.com/wiki/How_To_Create_and_Package_a_Module#Deploying.2FCompiling_a_module ''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:
# Log into Openbravo ERP as System Administrator.
# From the General Setup, select '''General Setup > Application > Session Preferences'''.
# Select '''Theme''': '''Blue'''
# Click '''Save Preferences'''

[[Category:HowTo]]

How to create a New Skin - Revision history

Wikiadmin: Created page with "== 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 calle..."