• 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

1. Click in the quick access buttons. The new element window appears.
2. Click "Project".
3. Enter the required information in the wizard.
   
   

   The two following conditions must be complied with:

   • 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 in SCM: remember to extract your style sheet (".STY" file) before creating the window containing field styles.

Creating a window containing the styles of controls

1. Create a blank window:
   • Click in the quick access buttons.
   • When the new element window appears, click "Window" then "Window". The window creation wizard opens.
   • 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 more easily identify the style of the current field, we recommend you use the following notation: "<NomDuGabarit>_<TypeDuChamp>".. 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 identify this window more quickly, we recommend using the following notation: <TemplateName>_Field". For example, "Caribbean_Field".

• standard buttons used for "Open", "OK" or "Print" buttons for example: create a button with dimensions 80 x 24.
  To identify the standard button, we recommend using the following notation: "<NomDuGabarit>_BtnStandard".. For example, "Caribbean_BtnStandard".
• the buttons used to browse the various records displayed in the window: create four buttons measuring 20 X 24.
  To identify path buttons, we recommend you use the following notation: "<NomDuGabarit>_Btn<FonctionBouton>". 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.
   • When the new element window appears, click "Window" then "Window". The window creation wizard opens.
   • 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 find out directly which skin template is being used, we recommend you use the following notation: "<NomDuGabarit>".. 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": Initial
     • "Max width" and "Max height": <Default>
   • the background image (if required) and its characteristics (position, symmetry, etc.) 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.
     We recommend you use the following notation for this image: "<NomDuGabarit>_Fond.<Extension>".. For example, "Caribbean_Background.BMP".
   • the desired style (background color, frame type, etc.) in the "Style" tab.
3. Save the window ().

To identify this window more easily, we recommend you use the following notation: "<NomDuGabarit>_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 "background images" for example), we recommend that you:

• use the following notation: "<TemplateName>_<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: under the "Home" pane, in the "General" group, scroll down to "Save" and select "Save as".. This new window automatically contains all characteristics of the template window.
   To more easily identify this skin template window, we recommend 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.
   Note: Three models are available for each type of window. The letter found after the window type indicates the position of 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 window type should not have a main menu, delete the window's main menu: under the "Window" pane, in the "Bars and menus" group, pull down "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 form
   • 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: under the "Home" pane, in the "General" group, scroll down to "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_tbl" 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 zones display the various fields (tables, buttons, path buttons, etc.) generated by RAD for the previously selected RAD window type..
   Remark: Three models are available for each type of window. The letter found after the window type indicates the position of 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. If necessary, use locators to position skin templates: in the "Display" pane, in the "Help for edit" group, check the "Rulers" option (Ctrl + R).. For more details on marks, see alignment rulers.
7. Define the anchoring of skin template zones in the skin template description window: under the "Modification" pane, in the "Editing help" group, click on "Description".. The anchoring of a skin template area is defined in relation to the window.
8. If the RAD window type should not have a main menu, remove the main menu from the window: under the "Window" pane, in the "Bars and menus" group, pull down "Main menu" and select "Remove 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: under the "Display" pane, in the "Options" group, click on "Skin template mode" (Alt + G).
2. Add a button to the window.
3. Define the characteristics of this button in its description window ("Description" in the context menu).
4. Switch the window to skin template mode: under the "Display" pane, in the "Options" group, click on "Skin template mode" (Alt + G).
5. Display the skin template description window: under the "Modification" pane, in the "Editing help" group, click on "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: The button associated with a skin template area is anchored to the skin template area, 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. Confirm to create the window. 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.
   • in the following notation: "RadFen_<N°Fenêtre>.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. This image must be named: "WinRad.GIF".
• The skin template can be edited directly by opening the STY file in the editor.