PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • The different steps
  • 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 the 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/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Others
Stored procedures
The different steps
Several steps are required to create a skin template of window:
Notes:
  • 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, all you have to do is modify the skin-template file (.STY file) found 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. See Creating a skin template from an existing skin template for more details.
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 the controls.
  • a window used as "reference window" for the skin template window to create.
  • a skin template window for each type of window.
Note: If skin templates are used to customize your reports, your report skin-templates can be created in this project. See Creating a skin template of report for more details.

Creating a skin-template project

To create a skin-template project:
In WINDEV/WINDEV Mobile, create a new project ("File .. New .. Project"). In WINDEV/WINDEV Mobile, create a new project:
  • Click among the quick access buttons.
  • Click "Project" in the wheel that is displayed.The window for creating a new element is displayed: 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, we recommend that you 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.
Notes:
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 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 the controls:
  1. Create a blank window ("File .. New .. Window ", "Blank" type).Create a blank window:
    • Click among the quick access buttons.
    • Click "Window" in the wheel that is displayed. The wizard for window creation starts. The window for creating a new element is displayed: click "Window" then "Window". The wizard for window creation 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" from the popup menu). Modify the color of the input area for example.
  4. Specify the name of the control in the "General" tab of the description window ("Description" from the popup menu).
    To easily identify the style of the current control, we recommend that you 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 easily identify this window, we recommend that you use the following notation: <NameOfSkinTemplate>_Control". For example, "Caribbean_Control".
Note: 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 identify the standard button, we recommend that you 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 identify the browse buttons, we recommend that you 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 be using common characteristics (background image, dimension, type of border, ...). 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 ("File .. New .. Window ", "Blank" type).Create a blank window:
    • Click among the quick access buttons.
    • Click "Window" in the wheel that is displayed. The wizard for window creation starts. The window for creating a new element is displayed: click "Window" then "Window". The wizard for window creation starts.
    • In the wizard, click "Blank" and validate.
  2. In the description of the window ("Description" from the popup menu), specify:
    • the title of the window in the "General" tab.
      To easily identify the skin template used, we recommend that you use the following notation: "<NameOfSkinTemplate>". For example, "Caribbean".
    • the characteristics of the window in the "Details" 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-image mode. The 9-image mode is used to optimize all the possibilities for maximizing the background image.
      We recommend that you 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 easily identify this window, we recommend that you 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. Tips for a simplified 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.
Note: If your projects is using windows created by the RAD version kept for backward compatibility (windows generated with a version earlier than version 12 or window generated in version 12 with the "11-compatible RAD" pattern), several skin-template windows are required. 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 ("File .. Save as"). This new window automatically contains all the characteristics of the template window.Save the window under a different name: on the "Home" pane, in the "General" group, expand "Save" and select "Save as". This new window automatically contains all the characteristics of the template window. To easily identify this skin-template window, we recommend that you use the following notation: "BlankWindow".
  3. Select "Display .. Skin-template mode" ([Alt]+[G]). The window for editing a skin template is displayed.On the "Display" pane, 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.
    Note: Three templates are proposed for each type of window. The letter found after the window type indicates the position of the buttons in the window:
    • D: Buttons found in the right section of the window.
    • G: Buttons found in the left section of the window.
    • B: Buttons found in the bottom section of the 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 ("Insert .. Delete the main menu").If the type of the window must contain no main menu, delete the main menu from the window: on the "Window" pane, in the "Bars and menus" group, expand "Main menu" and select "Delete the 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 ("File .. Save as"). This new window automatically contains all the characteristics of the template window.Save the window under a different name: on the "Home" pane, in the "General" group, expand "Save" and select "Save as". This new window automatically contains all the characteristics of the template window. To easily identify the different skin-template windows, we recommend that you use a window name corresponding to the associated RAD window. For example: "Form_linked_table" for a form window with linked table.
  4. Select "Display .. Skin-template mode" ([Alt]+[G]). The window for editing a skin template is displayed.On the "Display" pane, 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.
    Note: Three templates are proposed for each type of window. The letter found after the window type indicates the position of the buttons in the window:
    • D: Buttons found in the right section of the window.
    • G: Buttons found in the left section of the window.
    • B: Buttons found in the bottom section of the 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 ("Display .. Rulers", [Ctrl]+[R]). See the alignment rulers for more details.Use (if necessary) the positioning markers to position the skin-template areas: on the "Display" pane, in the "Help for edit" group, check "Rulers" ([Ctrl]+[R]). See the alignment rulers for more details.
  7. Define the anchoring of the skin-template areas in the description window of the skin template ("Display .. Description of the selection"). The anchoring of a skin-template area is defined in relation to the window.Define the anchoring of the skin-template areas in the description window of the skin template: on the "Modification" pane, in the "Help for edit" 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 ("Insert .. Delete the main menu").If the type of the RAD window must contain no main menu, delete the main menu from the window: on the "Window" pane, in the "Bars and menus" group, expand "Main menu" and select "Delete the 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 ( ).
Note: 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 follow the default style of buttons (defined in the description window of controls).
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 ("Display .. Skin-template mode" or [Ctrl]+[G]).Switch the window to edit mode: on the "Display" pane, 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 ("Display .. Skin-template mode" or [Ctrl]+[G]).Switch the window to skin-template mode: on the "Display" pane, in the "Options" group, click "Skin-template mode" ([Alt]+[G]).
  5. Display the description window of the skin template ("Display .. Description of the selection") and select the "Controls" tab.Display the description window of the skin template: on the "Modification" pane, in the "Help for edit" 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.
    Note: A control associated with a skin-template area is anchored in relation to this area (and not in relation 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 the 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 the 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.
Note: 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. Select "File .. Export .. To a skin template".On the "Home" pane, 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\SkinTemplate" directory of WINDEV.
    • a skin template style sheet ("<NameOfSkinTemplate>.STY") is created in the "<NameOfSkinTemplate>" directory.
    • a style sheet that can be used at run time ("<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. The operations 1 to 3 must be performed for all the skin-template windows by selecting the skin template that was previously entered.
    When exporting the skin-template windows, the following elements will be copied into the "Personal\SkinTemplate\<NameOfSkinTemplate>" directory:
    • 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. See Using a skin template in your applications for more details.
Note: 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\SkinTemplate\<NameOfSkinTemplate>" directory of WINDEV.
    • 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
Notes:
  • 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 required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment