PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Principle
  • Step 1: Creating the directory containing the sources of the skin template
  • Step 2: Customizing the elements found in the skin template
  • Step 3: Generating the 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
Overview
The development teams that have design expertise may want to create their own skin templates. From version 21, a skin-template generator is supplied with WINDEV and WINDEV Mobile.
Principle
To create a skin template, you must:
  1. Create the directory containing the sources of the 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 the skin template
To create the directory corresponding to the skin template:
  1. Start WINDEV or WINDEV Mobile.
  2. On the "Tools" pane, 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 wizard for generating a skin template 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 the skin template. The path of the working directory (containing the sources of the 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 the skin template
To generate the skin template:
  1. Start WINDEV or WINDEV Mobile.
  2. On the "Tools" pane, 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 wizard for generating a skin template starts.
  4. Select "Generate a custom skin template". Go to the next step via the arrow buttons.
  5. Select the requested 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 the skin template. In some cases, these colors will not be visible if the styles use images.
  7. The "Texts" step is used to select:
    • the character font:
      • The general font, used in all the styles.
      • The secondary font, used for some specific styles.
    • the colors of the font. 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 the Button control.
      • Title: Mainly used for the STC_Title style of the 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 the general color.
      • Sub-title: Mainly used for the STC_Sub_Title style of the 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 the 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 the 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, ...
    • Rollover: 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 the 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 the general bolder.
    • Button: Color for the border of buttons.
    • Input area: Color used for the border of the 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:
    • Color Various:
      • 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.
    • Colors Scrollbars: Used to define the colors of the different elements found in a Scrollbar control. You have the ability to choose whether arrows are displayed by the scrollbars or not.
    • Colors Progress bars: 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 The "Menu" step allows you to select the colors used by the menus. If the option "Customize the colors of menus" is not checked, the system colors will be used.
    • Main bar: Colors used for the menu bar.
    • Menu options: Colors used for the menu options.
    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 validate the wizard.
  14. The skin template is generated. It can be used in your WINDEV or WINDEV Mobile projects.
Note: the files of the custom skin template are located:
  • WINDEV In WINDEV: in the "Personal\Templates\WD" sub-directory.
  • WINDEV In WINDEV Mobile: in the "Personal\Templates\WM" sub-directory.
To use your skin template:
  • Create a new project the is using your skin template,
  • Open a project in WINDEV or WINDEV Mobile and apply the new skin template (on the "Project" pane, in the "Other actions" group, click "Apply a skin template to the project").
Minimum required version
  • Version 21
This page is also available for…
Comments
Click [Add] to post a comment