• Step 1: Creating a project that groups the different window skin templates.
• Step 2: Creating a window containing the styles of controls.
• Step 3: Creating a reference window.
• Step 4: Creating a skin template window for all types of windows.
• Step 5: Generating the skin template and creating the preview of the skin template (optional preview).

• 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.

Overview

• 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.

Creating a skin template project

• Click in the quick access buttons.
• The new element window appears: click "Project".

• the project must be linked to no analysis.
• the project must not use any skin template.

Overview

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

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".

• 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".

Overview

Creating 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.

Overview

Creating 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)

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 ().

Adding additional buttons (RAD kept for backward compatibility)

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)

Overview

1. the window containing the styles of the controls,
2. then all the skin template windows that were created beforehand.

Creating 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 window	Identification #
     Blank window	00
     Menu window	01
     Simple form window	10
     Form with browse window	02
     Form with linked table window	06
     Form with relation table window	07
     Form with linked form window	11
     Simple table window	03
     Table with detailed form window	05
     Table with linked table window	09
     Relation table window	08
     Vision Plus window	04

   • 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.

Creating 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 window	Identification #
     Blank window	00
     Menu window	01
     Simple form window	10
     Form with browse window	02
     Form with linked table window	06
     Form with relation table window	07
     Form with linked form window	11
     Simple table window	03
     Table with detailed form window	05
     Table with linked table window	09
     Relation table window	08
     Vision Plus window	04

• 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.