ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Skin templates and Skins
  • Overview
  • How to apply, create and delete a skin template?
  • Applying a skin template to a project
  • Applying a skin template to a window
  • Applying a skin template to a report
  • Creating a skin template of window
  • Modifying a skin template of window
  • Creating a skin template of report
  • Deleting a skin template
  • How to dynamically apply a skin template (through programming)?
  • Overview
  • How to?
  • Necessary files
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
Overview
WINDEV, WEBDEV and WINDEV Mobile allow you to customize the interface of your applications via several preset interfaces: the templates.
A skin template can be applied to your project (window or report) at any time during the development. Even if a skin template is already used, each window and each report can be customized individually.
A skin template can also be dynamically applied to the windows during the execution of your program. For more details, see "How to apply a skin template dynamically?".
Several skin templates are proposed by default. You also have the ability to create your own skin templates.
WEBDEV - Server code Only the skin templates on reports are available. To define the interface of the pages found in a site, use:
Notes: Skin templates and templates:
  • The skin templates are used to define the interface characteristics for a window or for a report: the style of controls, the images used, ...
  • The templates of window or reports are used to define the interface as well as the features (buttons, controls, code for example). These features will be applied to each element that uses the template and they can be overridden if necessary.
How to apply, create and delete a skin template?
WINDEVWINDEV Mobile

Applying a skin template to a project

To apply a skin template to a project:
  1. On the "Project" tab, in the "Other actions" group, click "Apply a skin template to the project".
  2. Select the skin template to apply.
  3. By default:
    • the selected skin template will be applied to:
      • all windows and reports found in the project.
      • all controls found in the windows and reports.
    • the controls used only for the interface of windows (layout controls used for to minimize or to close the window for example) will be deleted and replaced with the ones found in the new skin template.
    • the selected skin template is applied according to the name of styles. All style names found in the skin templates are standard names. This option is used to optimize the application of skin template. The style overloads (if they exist) are kept.
Remarks:
  • This method can be applied to a project with or without a skin template.
  • A skin template can also be associated with a project ("Project skin template" in the "Style" tab of the project description). The selected skin template will be proposed by default when creating a window or report.
WINDEVWINDEV Mobile

Applying a skin template to a window

To apply a skin template to a window:
  1. On the "Window" tab, in the "Style and skin templates" group, click "Apply a skin template".
  2. Select the skin template to apply. The selected skin template is automatically applied to the window opened in the editor. This allows you to immediately see the effect of the skin template.
  3. By default:
    • the selected skin template will be applied to:
      • the current window.
      • all controls found in the current window (whether they use a skin template or not).
    • the controls used only for the window interface (layout controls used for to minimize or to close the window for example) will be deleted and replaced with the ones found in the new skin template.
    • the selected skin template is applied according to the name of styles. All style names found in the skin templates are standard names. This option is used to optimize the application of skin template. The style overloads (if they exist) are kept.
  4. Depending on the preview, you can:
    • Validate the selected skin template: the skin template will be actually applied to the current window.
    • Change the skin template. The new selected skin template is automatically applied to the current window.
    • Cancel the change of skin template. The current window in the editeur keeps its initial aspect.
Remark: This method can be applied to a window with or without a skin template.

Applying a skin template to a report

To apply a skin template to a report:
  1. On the "Modification" tab, in the "Templates and skin template" group, click "Apply a skin template".
  2. Select the skin template to apply.
  3. Validate. The skin template is applied to the current report.
Remark: This method can be applied to a report with or without a skin template.
WINDEVWINDEV Mobile

Creating a skin template of window

You have the ability to create your own skin template if no default skin template suits you.
The creation of a window skin template can be broken down into several steps:
Remark: 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.
WINDEVWINDEV Mobile

Modifying a skin template of window

To modify an existing skin template, all you have to do is modify the skin-template file (.STY file) found in the directory where the skin template was generated.
WINDEVWEBDEV - Server codeWINDEV Mobile

Creating a skin template of report

You have the ability to create your own skin template if no default skin template suits you.
Several steps are required to create a skin template of report:
Remarks:
  • One of the methods for creating a skin template of reports is presented here. The method presented below is recommended but it is not mandatory.
  • No skin template of reports can be created in Reports & Queries.
WINDEVWINDEV Mobile

Deleting a skin template

To delete a skin template from a project, you must delete it from all the windows in the project:
  1. Open the project description window: on the "Project" tab, in the "Project" group, click "Description".
  2. In the "Style" tab, choose the "None" skin template.
  3. For each window in the project:
    • Open the window in the editor.
    • Open the window description (select "Description" in the context menu).
    • In the "Style" tab, select the "None" skin template.
    • Validate the description window.
    • In the window, modify the style of the controls so that they no longer use the skin template (it is possible to use the "Style used" button on the "Style" tab of the control description window).
  4. When all the windows have been processed, on the "Project" tab, in the "Project" group, expand "Recompile and synchronize" and select the option "Refresh style and skin template". If there is no link between the controls and the skin template, the skin template will be automatically removed from the project.
How to dynamically apply a skin template (through programming)?
WINDEV

Overview

This feature consists in applying a skin template to a window at runtime, when the window is displayed. This feature allows you to quickly standardize the windows coming from several applications for example.
Example: Your application uses one or more WINDEV components. To standardize the appearance of the windows at runtime, all you have to do is dynamically apply the skin template of your project.
WINDEV

How to?

To dynamically apply a skin template to the windows of your application (or to the windows of WINDEV components only), simply use ChangeSkinTemplate (in the project initialization code, for example) and specify:
  • the elements to which the new skin template will be applied (specific window, windows of components, all windows)
  • the name of skin template to use. This name corresponds to a "WDY" file, generated when the skin template was created. This file must be supplied with the application.
To avoid applying the skin template to one of the project windows:
  1. Open the description of the corresponding window.
  2. In the " Style" tab, check "Always keep the initial style/skin template".
  3. Validate.
WINDEV

Necessary files

To dynamically apply a skin template to one or more windows, the following elements must be supplied when deploying the application:
  • the application and the associated WINDEV components (if necessary).
  • the WDY files corresponding to the different skin templates to apply. These files can be included in the library of the application (WDL file). For more details, see Creating an executable.
Minimum version required
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help