ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Skin templates and Skins
  • Steps to follow
  • Step 1: Creating a skin template project
  • Overview
  • Creating a skin template project
  • Step 2: Creating a window containing the styles of controls
  • Overview
  • Creating a window containing the styles of controls
  • Step 3: Creating a reference skin template window
  • Overview
  • Creating a reference window in your skin template project
  • Adding elements to the reference window
  • Step 4: Creating a skin template window
  • Overview
  • Creating a skin template window for the "Blank" windows
  • Creating a skin template window for the RAD windows (RAD kept for backward compatibility)
  • Adding additional buttons (RAD kept for backward compatibility)
  • Initial width of the window (RAD kept for backward compatibility)
  • Step 5: Final creation of skin template
  • Overview
  • Creating a skin template
  • Creating a preview of skin template
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Steps to follow
The creation of a window skin template can be broken down into several steps:
Remarks:
  • One of the methods for creating a skin template of window is presented here. The method presented below is recommended but it is not mandatory.
  • The icon indicates a tip. The instructions described in these tips are not mandatory but they will help you create the window skin template.
  • To modify an existing skin template, simply modify the skin template file (.STY file) in the directory where the skin template was generated. This file can be opened in the editor and saved.
  • You also have the ability to create a skin template from an existing skin template. For more details, see Creating a skin template from an existing skin template.
Step 1: Creating a skin template project

Overview

In most cases, a skin template includes several windows (between 1 and 12). To simplify the creation and the modification of your skin templates, we recommend that you use a project for each skin template.
This project will group the different windows corresponding to a skin template.
The skin template project will group:
  • a window containing the styles of controls.
  • a window used as "reference window" for the skin template window to create.
  • a skin template window for each type of window.
Remark: If skin templates are used to customize your reports, your report skin templates can be created in this project. For more details, see Creating a skin template of report.

Creating a skin template project

To create a skin template project: In WINDEV/WINDEV Mobile, create a new project:
  • Click in the quick access buttons.
  • The new element window appears: click "Project".
The two following conditions must be complied with:
  • the project must be linked to no analysis.
  • the project must not use any skin template.
To easily identify your skin template projects, it is recommended to use the following notation: "SkinTemplate_<NameOfSkinTemplate>". For example, if the skin template is named Caribbean, the project will be named "SkinTemplate_Caribbean".
Step 2: Creating a window containing the styles of controls

Overview

Creating a skin template consists in defining the characteristics of the windows (background image, type of border, ...) as well as the characteristics of the controls (font used, dimensions, ...).
To define the characteristics of the controls in a skin template, create a window containing the styles used by the different types of controls. The style sheet of the skin template will be created from this window.
Remarks:
You only have to define the styles for the types of controls that will be used in your application. For example, if your applications do not use any Spin controls, there is no need to define a style for this type of control. The default style will be defined in the skin template file (".STY" extension).
Several styles can be defined for the same type of control.
Working with the SCM: don't forget to extract your style sheet (".STY" file) before you create the window containing the styles of controls.

Creating a window containing the styles of controls

To create a window containing the styles of controls:
  1. Create a blank window:
    • Click in the quick access buttons.
    • The new element window appears: click "Window" then "Window". The window creation wizard starts.
    • In the wizard, click "Blank" and validate.
  2. Insert a type of control. An "Edit control" for example.
  3. Modify the aspect of this control in the "Style" tab of the description window ("Description" in the context menu). Modify the color of input area for example.
  4. Specify the control name in the "General" tab of the description window ("Description" in the context menu).
    To easily identify the style of the current control, it is recommended to use the following notation: "<NameOfSkinTemplate>_<ControlType>". For example, "Caribbean_StandardEditControl".
  5. Modify (if necessary) the other characteristics of this control in the description window (dimensions and alignment for example.
  6. Repeat the operations 2 to 5 for all the types of controls used in your skin template.
  7. Save the window ().
To quickly identify this window, it is recommended to use the following notation: <NameOfSkinTemplate>_Control". For example, "Caribbean_Control".
Remark: To customize:
  • the standard buttons used for the "Open", "OK" or "Print" buttons for example: create a button whose dimensions are 80 x 24.
    To easily identify the standard buttons, it is recommended to use the following notation: "<NameOfSkinTemplate>_BtnStandard". For example, "Caribbean_BtnStandard".
  • the browse buttons used to browse the different records displayed in the window: create four buttons whose dimensions are 20 x 24.
    To easily identify the browse buttons, it is recommended to use the following notation: "<NameOfSkinTemplate>_Btn<ButtonFunction>". For example, "Caribbean_BtnFirst", "Caribbean_BtnPrevious", "Caribbean_BtnNext" and "Caribbean_BtnLast".
Step 3: Creating a reference skin template window

Overview

All the windows found in the same skin template will use common characteristics (background image, dimension, type of border, etc.). To avoid having to define these characteristics in each new skin template window, we recommend that you create a base skin template window.
This window will be used as "reference window": the skin templates of window will be created from this window.

Creating a reference window in your skin template project

To create a reference window in your skin template project:
  1. Create a blank window:
    • Click in the quick access buttons.
    • The new element window appears: click "Window" then "Window". The window creation wizard starts.
    • In the wizard, click "Blank" and validate.
  2. In the description of the window ("Description" in the context menu), specify:
    • the title of the window in the "General" tab.
      To directly identify the skin template used, it is recommended to use the following notation: "<NameOfSkinTemplate>". For example, "Caribbean".
    • the characteristics of the window in the "UI" tab.
      All the characteristics can be configured for a skin template window.
      We recommend that you specify the following values for the window size:
      • "Min width" and "Min height" options: Initial
      • "Max width" and "Max height" options: <Default>
    • the background image (if necessary) and its characteristics (position, symmetry, ...) in the "Image" tab.
      If the window can be resized, we recommend that you use the 9-slice scaling. The 9-slice scaling is used to optimize all the possibilities for maximizing the background image.
      It is recommended to use the following notation for this image: "<NameOfSkinTemplate>_Background.<Extension>". For example, "Caribbean_Background.BMP".
    • the style (background color, type of border, ...) in the "Style" tab.
  3. Save the window ().
To identify this window more easily, it is recommended to use the following notation: "<NameOfSkinTemplate>_Reference". For example, "Caribbean_Reference".

Adding elements to the reference window

Controls can be added to the reference window (mainly static controls and image controls). For example, the name and the logo of a company can be displayed in the windows.
These controls are called "Layout images". These controls belong to the interface of the windows.
Some tips to simplify the use of "Layout images":
  • anchor these controls if the window is resizable. Therefore, all the possibilities for maximizing these controls will be optimized.
  • if these controls are image controls, uncheck "With management of mouse click" in the "Details" tab of the control description. Therefore, these image controls will not react to the mouse.
If menus are used in your applications, you have the ability describe and add a main menu into the reference window ("Insert .. Add the main menu").
Using image files: If images are used in your reference window (images used in the "layout images" for example), we advise you to:
  • use the following notation: "<NameOfSkinTemplate>_<ImageName>.<Extension>. For example, "Caribbean_Beach.BMP".
  • group these files in the "Element_<NameOfSkinTemplate>" directory ("Element_Carribean" for example), in the directory of the skin template project.
Step 4: Creating a skin template window

Overview

To use the skin template on the windows of your application, a skin template window must be created. By default, a single window is required: the "Blank" window.
Remark: Several skin template windows are required if your projects use windows created with a RAD version kept for backward compatibility (windows generated with version 12 earlier; or windows generated in version 12 with the "11-compatible RAD" pattern). Each skin template window will correspond to a type of RAD window.

Creating a skin template window for the "Blank" windows

To create a skin template window for the "Blank" windows:
  1. Open the reference window of the skin template. If you have used the recommended notations, this window is named "<NameOfSkinTemplate>_Reference".
  2. Save the window under a different name: on the "Home" tab, in the "General" group, expand "Save" and select "Save as". This new window automatically contains all characteristics of the template window.
    To easily identify this skin template window, it is recommended to you use the following notation: "BlankWindow".
  3. On the "Display" tab, in the "Options" group, click "Skin template mode" (Alt + G). The window for editing a skin template is displayed.
  4. Select the "Blank window (D)" template and validate your choice.
    Remark: Three templates are proposed for each type of window. The letter found after the window type indicates the position of buttons in the window:
    • D: Buttons on the right section of the window.
    • G: Buttons found in the left section of window.
    • B: Buttons found in the bottom section of window.
      We advise you to select a pattern name followed by with the letter "D".
  5. If the type of the window must contain no main menu, delete the main menu from the window: on the "Window" tab, in the "Bars and menus" group, expand "Main menu" and select "Delete main menu".
  6. Save the window ().

Creating a skin template window for the RAD windows (RAD kept for backward compatibility)

To create a skin template window for the RAD windows (RAD kept for backward compatibility):
  1. Define the window to create. The different types of RAD windows are as follows:
    • Menu window
    • Form window: simple, with browse, with linked table, with relation table, with linked file
    • Table window: simple, with detailed form, with linked table, of relation
    • Vision Plus window
  2. Open the reference window of the skin template. If you have used the recommended notations, this window is named "<NameOfSkinTemplate>_Reference".
  3. Save the window under a different name: on the "Home" tab, in the "General" group, expand "Save" and select "Save as". This new window automatically contains all characteristics of the template window.
    To easily identify the different skin template windows, it is recommended to use a window name corresponding to the associated RAD window. For example: "Form_linked_table" for a form window with linked table.
  4. On the "Display" tab, in the "Options" group, click "Skin template mode" (Alt + G). The window for editing a skin template is displayed.
  5. Select the RAD pattern associated with the skin template window currently created (name of the template followed by the letter 'D') and validate your choice. Several areas appear on the skin template window. These areas are used to display the different controls (tables, buttons, browse buttons, ...) generated by RAD for the type of RAD window that was selected beforehand.
    Remark: Three templates are proposed for each type of window. The letter found after the window type indicates the position of buttons in the window:
    • D: Buttons on the right section of the window.
    • G: Buttons found in the left section of window.
    • B: Buttons found in the bottom section of window.
      We advise you to select a pattern name followed by with the letter "D".
  6. Use (if necessary) the positioning markers to position the skin template areas: on the "Display" tab, in the "Help for edit" group, check "Rulers" (Ctrl + R). For more details on marks, see alignment rulers.
  7. Define the anchoring of the skin template areas in the skin template description window: on the "Modification" tab, in the "Editing help" group, click "Description". The anchoring of a skin template area is defined in relation to the window.
  8. If the type of the RAD window must contain no main menu, delete the main menu from the window: on the "Window" tab, in the "Bars and menus" group, expand "Main menu" and select "Delete main menu".
  9. If the window corresponds to the menu window generated by RAD, check "MDI parent" in the "Details" tab of the window description.
  10. Save the window ().
Remark: These operations must be performed for all the RAD windows used in your applications.

Adding additional buttons (RAD kept for backward compatibility)

When creating a RAD window, WINDEV automatically creates all the buttons required for using the window. These buttons adopt the default button style (defined in the control description window).
To use a different button style, add a button and define its style in the skin template window. For example, in a given skin template window, you have the ability to use browse buttons other than the ones defined by default.
If additional buttons are added into a skin template window, these buttons will be automatically used by WINDEV when creating the RAD window.
To add an additional button:
  1. Switch the window to edit mode: on the "Display" tab, in the "Options" group, click "Skin template mode" (Alt + G).
  2. Add a button to the window.
  3. Define the characteristics of this button in its description window ("Description" from the popup menu).
  4. Switch the window to skin template mode: on the "Display" tab, in the "Options" group, click "Skin template mode" (Alt + G).
  5. Display the description window of the skin template: on the "Modification" tab, in the "Editing help" group, click "Description". Select the "Controls" tab.
  6. Select the added button.
  7. Define the type, the anchoring and the skin template area associated with this button.
    Remark: A control associated with a skin template area is anchored in relation to this area (and not to the window).
  8. Validate the description of the skin template.

Initial width of the window (RAD kept for backward compatibility)

The initial width of the window must be large enough to display all buttons associated with each button area. When creating a RAD window, the buttons will be displayed vertically if they cannot be displayed horizontally.
Step 5: Final creation of skin template

Overview

To use a custom skin template in your applications, you must create the final skin template. To do so, you must export to a skin template:
  1. the window containing the styles of the controls,
  2. then all the skin template windows that were created beforehand.
Caution: The order for exporting the windows is important.
To simplify the use of a custom skin template, we advise you to create previews. These previews will be used when applying a skin template to a window or to a project.
Each type of window is associated with a preview. We recommend that you create a window preview for each type of window used.
Remark: Creating a window preview is an optional step. In this case, no preview of skin template is displayed in the "Preview" area.

Creating a skin template

To create a skin template:
  1. Open the window containing the styles of controls. If you have used the recommended notations, this window is named "<NameOfSkinTemplate>_Control".
  2. On the "Home" tab, in the "General" group, expand "Save" and select "Export .. To a skin template".
  3. Enter the name of the skin template ("Caribbean" for example) and validate the input.
    When exporting the window containing the styles of controls:
    • the "<NameOfSkinTemplate>" directory is created in the "Personal\Templates" subdirectory of the WINDEV installation directory.
    • a skin template style sheet ("<NameOfSkinTemplate>.STY") is created in the "<NameOfSkinTemplate>" directory.
    • a style sheet that can be used at runtime ("<NameOfSkinTemplate>.WDY") is created in the "<NameOfSkinTemplate>" directory. This style sheet will be automatically installed along with your project. This style sheet is required to dynamically apply a skin template to a window (ChangeSkinTemplate).
  4. Operations 1 to 3 must be performed for all the skin template windows by selecting the skin template that was previously entered.
    When exporting skin template windows, the following elements are copied to the "Personal\Templates\<NameOfSkinTemplate>" subdirectory:
    • the window exported as "<NameOfSkinTemplate><Window#>.WDW",
      where <Window#> corresponds to the identification number of the associated window.
      Type of windowIdentification #
      Blank window00
      Menu window01
      Simple form window10
      Form with browse window02
      Form with linked table window06
      Form with relation table window07
      Form with linked form window11
      Simple table window03
      Table with detailed form window05
      Table with linked table window09
      Relation table window08
      Vision Plus window04
    • the files used in the exported window (background image for example).
  5. The custom skin template can now be used. For more details, see Using a skin template in your applications.
Remark: in order for the skin template to be used by WINDEV, WINDEV must be restarted.

Creating a preview of skin template

To create a preview of skin template:
  1. In a project associated with an analysis, create a new window. Create a "Form with browse" window for example.
  2. Select the skin template of window that was created beforehand. No preview of skin template is displayed in the "Preview" area.
  3. Validate the window creation. The created window becomes the current window.
  4. Perform a copy of the created window (Ctrl + C).
  5. Paste the clipboard content in a drawing software (Ctrl + V in "Paint" for example).
  6. Save the image:
    • in the "Personal\Templates\<SkinTemplateWindow>" subdirectory of the WINDEV installation directory.
    • according to the following notation: "RadWin_<Window#>.GIF",
      where <Window#> corresponds to the identification number of the associated window.
      Type of windowIdentification #
      Blank window00
      Menu window01
      Simple form window10
      Form with browse window02
      Form with linked table window06
      Form with relation table window07
      Form with linked form window11
      Simple table window03
      Table with detailed form window05
      Table with linked table window09
      Relation table window08
      Vision Plus window04
Remarks:
  • A specific image is used when the skin template is applied to a project. The name of this image must be: "RadWin.GIF".
  • The skin template can be edited directly by opening the STY file in the editor.
Minimum version required
  • Version 9
Comments
Click [Add] to post a comment

Last update: 09/12/2023

Send a report | Local help