PC SOFT

ONLINE HELP
FOR WINDEV, WEBDEV AND WINDEV MOBILE

Home | Sign in | English US
  • Overview
  • Images associated with a button in a window
  • Overview
  • Special case: the button states are managed via images
  • Animation
  • Image and text positioning
  • Customize the shape of button via the style
  • Images associated with a button in a page
  • Buttons with fixed image or with rollover effect
  • Three-state button
  • Image of button and CSS style
  • Image of button and specific options
  • Advanced configuration of images
  • Configuring the display mode (button in a window)
  • Image of multilingual button
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
Images and buttons
Overview
To optimize the appearance of your screens or sites, you have the ability to use images in your buttons.
Images associated with a button in a window
WINDEVAndroidAndroid Widget iPhone/iPadWindows MobileUniversal Windows 10 AppJava

Overview

In a window, two types of images can be used to define the image associated with a button:
  • image: this image will be stacked on the button regardless of its shape. Example: button with an image and without border:
    Tip: For better results, the image must be 5 pixels smaller than the size of button (in width and in height).
  • image of button border: this image is used to easily redefine the shape of button. For example:
These images are selected during the button description ("General" tab):
Notes:
  • The "Catalog" button allows you to choose the images (border and pictograms) among a library of images supplied with WINDEV or WINDEV Mobile.
  • The button is used to edit the image options (see Configuring the display mode (button in a window)).
  • Android Widget Only the image of button border can be configured.
Notes:
  • To choose images (border and pictos) among a library of images supplied with WINDEV or WINDEV Mobile, expand the Drop-down button button and select "Catalog".
  • To edit the image options (display mode, symmetry, ...), expand the Drop-down button button and select "Display options, transparency, symmetry" (see Configuring the display mode (button in a window)).
  • Android Widget Only the image of button border can be configured.
WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 AppJava

Special case: the button states are managed via images

WINDEV and WINDEV Mobile allow you to manage the different button states: normal, pressed, grayed, current and rollover. See The states of a button for more details.
If the states of the button are managed by images, you can:
  • use two images (a border image and an image) each containing 5 states . This solution allows you to stack the image on the border image and to re-use the border image with another image.
  • include the image in the border image. Only the border image will be specified in the description of the image control.
Idle, pressed, grayed, selected, hovered button
Idle, pressed, grayed, selected, hovered button
If the image contains several states, WINDEV allows you to manage:
  • the image enlargement (if the button size is greater than the image for example). Several possibilities are available:
    • No stretching
    • Stretching in width (3 images). The dividing rule is as follows:
      • the image is divided into three sections
      • the section 1 corresponds to the left area
      • the section 3 corresponds to the right area
      • the section 2 corresponds to the middle area. The size of this section is equal to 16 pixels. This part will be repeated as many times as necessary in order for the button image to have the requested size.
    • Stretching in width and in height.
    • Versions 16 and later
      Adaptation of image via the 9-image mode.
      New in version 16
      Adaptation of image via the 9-image mode.
      Adaptation of image via the 9-image mode.
  • WINDEVWindows a halo around the button.
    To avoid the display problems when several buttons are positioned side by side, the size of halo must be defined in pixels (width and height).
WINDEVAndroidAndroid Widget Windows MobileJava

Animation

You also have the ability to animate the images of buttons. To do so, the button can:
  • use an animated image. In this case, the image of the button corresponds to an animated image format (animated Gif for example). The animation is automatically managed.
  • use an image that will be animated by WINDEV or WINDEV Mobile. In this case, the image contains all the drawings of the animation (the horizontal drawings represent the states of the button). The number of steps in the animation must be specified in the "General" tab of the description window of Button control.
WINDEVAndroidAndroid Widget Windows MobileJava

Image and text positioning

When an image contains a caption and a picto (image), you have the ability to configure the relative position of image and text in the control style:
  1. Display the description window of Button control ("Description" from the popup menu).
  2. Display the "Style" tab.
  3. Select the "Caption" element and configure the position of caption via the "Position" option.
Versions 19 and later
WINDEV The "Free positioning" option allows you entirely manage the position of image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You can:
  • Configure one of the button states or all button states.
  • Specify the exact position of image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, the free positioning is not available.
  • Once the free positioning was defined for a button, the option "Edit the position of the caption and picto" (popup menu of button) allows you to display the window for configuring the positioning.
  • The arrow buttons propose several options allowing you to easily handle the image or caption: Snap up, Snap down, Center, ...
New in version 19
WINDEV The "Free positioning" option allows you entirely manage the position of image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You can:
  • Configure one of the button states or all button states.
  • Specify the exact position of image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, the free positioning is not available.
  • Once the free positioning was defined for a button, the option "Edit the position of the caption and picto" (popup menu of button) allows you to display the window for configuring the positioning.
  • The arrow buttons propose several options allowing you to easily handle the image or caption: Snap up, Snap down, Center, ...
WINDEV The "Free positioning" option allows you entirely manage the position of image and caption. The arrow beside the option allows you to access the configuration window:
The red section corresponds to the caption area and the blue section corresponds to the image area. You can:
  • Configure one of the button states or all button states.
  • Specify the exact position of image and caption (to the pixel).
  • Specify a different anchoring for the image and caption.
Notes:
  • the free positioning can only be used if the button used a specific pictogram. If the pictogram is included in the background image, the free positioning is not available.
  • Once the free positioning was defined for a button, the option "Edit the position of the caption and picto" (popup menu of button) allows you to display the window for configuring the positioning.
  • The arrow buttons propose several options allowing you to easily handle the image or caption: Snap up, Snap down, Center, ...
WINDEVAndroidAndroid Widget iPhone/iPadWindows MobileUniversal Windows 10 App

Customize the shape of button via the style

You have the ability to configure the shape of button via the style options.
To configure the shape of button:
  1. Display the "Style" tab in the description window of button.
  2. Select the "Outside border" element.
  3. In the "Border" section, select the requested border.
  4. Use the arrow button to configure the border (the configuration options differ according to the type of selected border).
  5. Validate.
Notes:
  • Some options are not visible if the button includes a border/background image.
  • Versions 21 and later
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
    New in version 21
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
    The "Round" border is used to get a round button.
    In this case:
    • the transparency is automatically supported.
    • The click is adapted to the shape: if the user clicks the corner of control, outside the circle, the click is ignored.
Images associated with a button in a page
WEBDEV - Server code Two types of buttons can be used in a page:
  • Button with fixed image or with rollover effect
  • 3-state button
The aspect of the button is selected in the "General" tab of control description.
The corresponding images are selected in the "Details" tab of the description window of control.
The aspect of the button is selected in the "Style" tab of the description window of control ("Button image" element). The corresponding images are also selected in this tab.
WEBDEV - Server code

Buttons with fixed image or with rollover effect

The image of the control can be defined in the "Details" tab of the description window of control:In the "Style" tab of the description window of control, you have the ability to define the image of control:
  • image: this image will be used to represent the button.
  • rollover image: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
For the buttons with fixed image or with rollover effect, the 3-image mode can be used for the image of the border. In this case, the image is automatically divided into 3 parts and it is adapted in width to the button size.
Note: The "Catalog" button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
  1. Click the "Catalog" button.
  2. Select the "<All>" theme.
  3. Select "Graphic buttons".
  4. Select the requested button.
  5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
WEBDEV - Server code

Three-state button

WEBDEV allows you to manage the different states of the button (normal, pressed, rollover) via a JAVA applet.
To use this type of button:
  1. Create an image containing the three states of the button. For example:
  2. In the "Details" tab of Button control, select the corresponding image file in the "Image" control.In the "Style" tab of Button control, select the corresponding image file in the "Image" control.
Note: The "Catalog" button allows you to choose a 3-state image among a library of images supplied with WEBDEV. All you have to do is:
  1. Click the "Catalog" button.
  2. Select the "<All>" theme.
  3. Select "Graphic buttons".
  4. Select the requested button.
  5. Validate and specify the characteristics of the image to generate. The image is automatically copied into your project and assigned to the button.
Versions 19 and later
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
New in version 19
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
WEBDEV - Server code In a page, the images associated with a button can be defined in the style of button:
  • via the CSS style ("CSS button" element of "Style" tab in the control description).
  • via the image options ("Button (Images)" element of "Style" tab in the control description).
Versions 19 and later
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
New in version 19
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
WEBDEV - Server code

Image of button and CSS style

To define the image associated with the button via the CSS style:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (CSS)" element.
  3. Display the advanced options ("More options" link).
  4. In the "Background" tab, you have the ability to define the image used and its characteristics.
Versions 19 and later
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the "Catalog" button.
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
        The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Note: The "Stretch" option is used to manage the stretching of the images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-image mode to configure the stretching.
New in version 19
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the "Catalog" button.
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
        The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Note: The "Stretch" option is used to manage the stretching of the images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-image mode to configure the stretching.
WEBDEV - Server code

Image of button and specific options

To define the image associated with the button via the WEBDEV options:
  1. Display the "Style" tab in the description window of control.
  2. Select the "Button (Images)" element.
  3. Two types of images can be used:
    • An image sheet.
      This image sheet contains:
      • horizontally: the different states of the button: idle, pressed, grayed, selected, hovered.
      • vertically: the different states for the button animation (5 or 6 steps are recommended).
    • Independent images. In this case, only the image of normal status and the image of hovered status are supported.
      • Normal: this image will be used to represent the button.
      • Rollover: this image will be displayed when the button is hovered by the mouse cursor. If this image is not specified, no rollover effect will be available.
      • The "Catalog" button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the "Catalog" button.
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
        The "Catalog" option of Drop-down button button allows you to choose the two types of images among a library of images supplied with WEBDEV. All you have to do is:
        1. Click the Drop-down button button and select "Catalog".
        2. Select the "<All>" theme.
        3. Select "Graphic buttons".
        4. Select the requested button.
        5. Validate, specify the characteristics of the image to generate and validate. The two images are automatically copied into your project and assigned to the button.
      • The option "Merge the images in a sheet" is used to avoid the blinking effect when changing image during the rollover.
Note: The "Stretch" option is used to manage the stretching of the images associated with the button when the button is resized in the editor. You can:
  • stretch the image in width,
  • stretch the image in width and height,
  • use the 9-image mode to configure the stretching.
Advanced configuration of images
WINDEVAndroidiPhone/iPadWindows MobileUniversal Windows 10 AppJava

Configuring the display mode (button in a window)

When describing the images used for a button, the display mode of images can be configured via the button. You have the ability to manage:
  • the display mode of image
  • its rotation
  • its transparency
  • its symmetry.
Note: If the image is multilingual, the configuration of display mode applies to all selected image files.When describing the images used for a button, you have the ability to configure the display mode of images:
  1. Click the Drop-down button button.
  2. In the menu that is displayed, select "Display options, transparency, symmetry".
  3. In the window that is displayed, you can to configure:
    • the display mode of image
    • its rotation
    • its transparency
    • its symmetry.
Note: If the image is multilingual, this configuration applies to all languages.

Image of multilingual button

If your site or application is multilingual, a different button image can be selected for each language. This option is useful when the images associated with the button contain the caption of the button.
To manage the multilingual images:
  1. Display the description of Button control.
  2. Click found beside the image path. The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
  3. For each language, click the [...] button and select the image corresponding to the language. At run time, the corresponding button image will be displayed according to the language chosen by Nation.
  4. Validate. The "Multilingual value" caption appears in the image name.
To manage the multilingual images:
  1. Display the description of Button control.
  2. Click the Drop-down button button found beside the image path.
  3. Select the "Multilingual" option.
  4. The window for managing multilingual images is displayed. By default, the same file is associated with all the languages supported by the window or by the page.
  5. For each language, click the Drop-down button button. You can:
    • Select the image corresponding to the language on your computer ("Browse" option).
    • Select the image corresponding to the language in the image catalog ("Catalog" option).
    At run time, the corresponding button image will be displayed according to the language chosen by Nation.
  6. Validate. The "Multilingual value" caption appears in the image name.
See also
Minimum required version
  • Version 9
This page is also available for…
Comments
Click [Add] to post a comment