ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Skin templates and Skins
  • Overview
  • Principle
  • Step 1: Creating the directory containing the sources of skin template
  • Step 2: Customizing the elements found in the skin template
  • Step 3: Generating 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
Overview
Development teams that have design expertise sometime want to be able to create their own skin templates. From version 21, a skin template generator is provided with WINDEV and WINDEV Mobile.
Principle
To create a skin template, you must:
  1. Create the directory containing the sources of skin template. This step is performed via a wizard.
  2. Customize the images, the window templates and the report templates found in the skin template.
  3. Generate the custom skin template. This step is performed via a wizard.
The custom skin template is automatically proposed along with the standard skin template when creating projects or when applying a skin template.
Step 1: Creating the directory containing the sources of skin template
To create the directory corresponding to the skin template:
  1. Start WINDEV or WINDEV Mobile.
  2. On the "Tools" tab, in the "Skin templates" group, click "Skin template generator".
    Caution: No project must be opened in the editor because several operations are performed by the generator (compilations, synchronization of styles and templates, ...).
  3. The skin template generation wizard starts.
  4. Select "Generate the sources of a new skin template". Go to the next step via the arrow buttons.
  5. Specify the name of skin template. The path of working directory (containing the sources of skin template) is automatically proposed. This path can be modified if necessary.
  6. Go to the next step. The source files of the skin template have been automatically generated in the specified working directory. Several directories are created. These directories contain the images and templates that will be used to generate the final skin template.
You have the ability to customize the images and the window templates found in the skin template (step 2).
Step 2: Customizing the elements found in the skin template
Before generating the skin template, you have the ability to customize:
  • the different images used to define the style of controls in the skin template.
  • the window templates.
  • the report templates.
For more details, see:
Step 3: Generating skin template
To generate the skin template:
  1. Start WINDEV or WINDEV Mobile.
  2. On the "Tools" tab, in the "Skin templates" group, click "Skin template generator".
    Caution: No project must be opened in the editor because several operations are performed by the generator (compilations, synchronization of styles and templates, ...).
  3. The skin template generation wizard starts.
  4. Select "Generate a custom skin template". Go to the next step via the arrow buttons.
  5. Select the desired skin template and its directory.
    If the name of the skin template is not displayed in the list, click the "Load a skin template from disk..." button. Go to the next step via the arrow buttons.
  6. The following steps allow you to customize the colors used in the different styles of skin template. In some cases, if the styles use images, these colors will not be visible.
  7. The "Texts" step is used to select:
    • the character font:
      • The general font, used in all styles.
      • The secondary font, used for some specific styles.
    • the font colors. These colors are used according to the type of text:
      • General: Used for the captions of controls.
      • Link: Mainly used for the BTN_Link style of Button control.
      • Title: Mainly used for the STC_Title style of Static control.
      • Input area: Mainly used for the text area found in the edit controls and in the combo boxes.
      • Light: Used in some cases as a variation of general color.
      • Subtitle: Mainly used for the STC_Sub_Title style of Static control.
      • Selected: Used to show a selection in a control.
      • Gray: Used to get a "grayed" text.
      • Title of radio button: Used for the title of Radio Button and Check Box controls.
      • Button/Title bar: Used for the captions of buttons ans for the header captions in the Scheduler, Table and Organizer controls, ...
      • Negative: Used as negative color of general color.
  8. The "Backgrounds" step is used to select the colors for:
    • Window/Even rows: Background color of windows and colors of even rows in the Table, Looper, Scheduler and Organizer controls
    • Controls/Odd rows: Background color of some controls and colors of odd rows in the Table, Looper, Scheduler and Organizer controls
    • Input area: Background color of input area found in the edit controls and in the combo boxes.
    • Button/Title bar: Used for the backgrounds of buttons ans for the header backgrounds in the Scheduler, Table and Organizer controls, ...
    • Hover: Background color displayed when hovering a control. Used for all the controls that support the rollover (except for the buttons).
    • Selection: Background color used to show that the control is selected. Does not affect the buttons.
    • Light: Background color used in some cases as a variation of the background color of window.
  9. The "Borders" step is used to select the colors for:
    • General: Color for the borders of controls.
    • Secondary: Color for the borders of controls used as a variation of general border.
    • Button: Color for the border of buttons.
    • Input area: Color used for the border of input area (edit control and combo box).
    • Radio button/Check box: Color used the checkmark border.
  10. The "Other colors" step is used to select the colors:
    • Various Colors:
      • Note: Background color of a note. The color of caption will be the "General" text color.
      • Caution: Background color of warning. The color of caption will be the "General" text color.
      • Gradient start and gradient end: Used for some colored backgrounds of controls.
    • Scrollbar Colors: Used to define the colors of different elements found in a Scrollbar control. You have the ability to choose whether arrows are displayed by the scrollbars or not.
    • Progress Bar colors: Used to define the colors of the different elements found in a progress bar.
    • Colors Sliders: Used to define the colors of the different elements found in a Slider control.
  11. WINDEV Mobile The "Action Bar" step is used to select the colors used by the Action Bar control.
    • If the option "Apply the font color to the icons" is checked, the text color will be used for the text of images in the Action Bar.
    • iPhone/iPad You have the ability to specify the colors for the system bar with transparent background (iOS 7).
  12. The "Reports" step allows you to select the colors used for the reports generated with the report editor:
    • Text colors: Colors used for the automatically generated captions.
    • Background colors: Background colors of the different areas found in a report.
  13. Go to the next step and finish the wizard.
  14. The skin template is generated. It can be used in your WINDEV or WINDEV Mobile projects.
Remark: the files of the custom skin template are located:
  • WINDEV Mobile In WINDEV Mobile: in the "Personal\Templates\WM" subdirectory.
To use your skin template:
  • Create a new project the is using your skin template,
  • Open a new project in WINDEV or WINDEV Mobile and apply the new skin template ("Project" tab, "Other actions" group, "Apply a skin template to the project").
Minimum version required
  • Version 21
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 09/18/2023

Send a report | Local help