AYUDA EN LÍNEA
 WINDEV, WEBDEV Y WINDEV MOBILE
Este contenido se ha traducido automáticamente.  Haga clic aquí  para ver la versión en inglés.
Ayuda / Desarrollar una aplicación o un sitio web / Controles, ventanas y páginas / Controles: tipos disponibles / Control Botón
  • Overview
  • Images associated with a Button control in a window
  • Overview
  • Special case: images to manage button field states
  • Animations in the Button control
  • Image and text positioning
  • Customize the shape of the Button control via the style options
  • Images associated with a button in a page
  • Advanced configuration of images
  • Configuring the display mode (button in a window)
  • Image of multilingual button
WINDEV
WindowsLinuxJavaReportes y ConsultasCódigo de Usuario (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Código Navegador
WINDEV Mobile
AndroidWidget Android iPhone/iPadIOS WidgetApple WatchMac Catalyst
Otros
Procedimientos almacenados
Images and buttons
Overview
WINDEV, WEBDEV and WINDEV Mobile include many features to improve the appearance of applications and sites.
WINDEVJava In a window, you can:
  • use images in Button controls. These images can:
    • define the different states of the control.
    • be animated.
    • be positioned relative to the text displayed in the control.
    • be used to define the shape of the control.
  • Define shadows on the boders of Button controls.
Most of these options can be defined in the "General" and "Style" tabs of the control description window.
WINDEVJava
Images associated with a Button control in a window

Overview

In a window, you have two options to define the image associated with a Button control:
  • image: this image will be superimposed on the button regardless of its shape.
    Example: Button field with an image and no frame:
    Tip: For best results, the image should be 5 pixels smaller than the size of the Button field (in width and height).
  • button frame image: this image allows you to simply redefine the shape of the button. For example:
These images are selected in the control description window ("General" tab):
Remarks:
  • The image library included with WINDEV or WINDEV Mobile allows you to choose the images (border and image) associated with the control. To open this library, 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)).

Special case: images to manage button field states

WINDEV and WINDEV Mobile can manage different button states: normal, Pushed, grayed, in progress and hover.. For more details, see States of a Button control.
If the states of a Button control are defined using images, you can:
  • use two images (image displayed in the control and image in the frame), each with 5 states. With this solution, you can use the same border image for multiple Button controls and use another image on top.
  • include the image displayed in the control directly in the border image. In this case, specify only the border image in the control description.
Idle, pressed, grayed out, selected, hovered button
Idle, pressed, grayed out, selected, hovered button
For a border image (and/or image displayed in the button) with multiple states, WINDEV allows you to:
  • stretch the image (if the Button control is larger than the image, for example). Several possibilities are available:
    • No stretching.
    • Stretch horizontally (3 images). The following criteria are used:
      • the image is divided into three sections
      • section 1 corresponds to the left area
      • section 3 corresponds to the right area
      • section 2 corresponds to the middle area. The size of this section is 16 pixels. This section will be repeated as many times as necessary until the button image reaches the desired size.
    • Stretch horizontally and vertically.
    • Custom stretch with 9-slice scaling.
  • WINDEVWindows a halo around the Button field.
    To avoid display problems when several buttons are placed side by side, it is necessary to define the size of the halo in pixels (width and height).

Animations in the Button control

You can also animate the images of Button controls. To do so, the Button control can:
  • use an animated image. In this case, the image displayed in the control will be animated (e.g., animated GIF). The animation is automatically managed.
  • use an image that will be animated by WINDEV or WINDEV Mobile. In this case, the image displayed in the control contains a set with 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.
WINDEVJava

Image and text positioning

When an image contains a caption and an icon (image), you have the ability to configure the relative position of image and text in the control style:
  1. Display the Button field description window ("Description" option in the context menu).
  2. Go to the "Style" tab.
  3. Select the "Caption" element and configure the caption position via the "Position" option.
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. It is possible to:
  • 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.
Remarks:
  • the free positioning can only be used if the button used a specific icon. If the icon is included in the background image, the free positioning is not available.
  • Once the free positioning is defined for a button, you can open the position settings by selecting the "Edit caption and icon position" option (context menu of the button).
  • The arrow buttons offer various options for simple manipulation of the image or label: Position at top, Position at bottom, Center, ...
WINDEV

Customize the shape of the Button control via the style options

You can configure the shape of the Button control via the style options.
To configure the shape of the Button control:
  1. Go to the "Style" tab of the control description window.
  2. Select the "Outside border" element.
  3. In "Border", select the desired border.
    • Click to configure the border (the configuration options are different depending on the type of border chosen).
    • Click (to the right of the "Border" option) to configure the shadow of the border. If a shadow is used, you can choose:
      • the X and Y offset of the shadow,
      • the percentage of opacity,
      • the blur radius,
      • the color of the shadow.
        Note: It is not possible to set a shadow on button fields using the XP theme..
  4. Validate.
Remarks:
  • Some options are not visible if the button includes a border/background image.
  • It is possible to choose a specific frame for each state of the button field: resting, hovering, pressed, focus, grayed..
  • The "Round" border is used to get a round button. In this case:
    • the transparency is automatically supported.
    • Clicking is adapted to the shape: if the user clicks in a corner of the field, outside the circle, the click is not taken into account.
  • The "Custom" option allows you to fully customize the borders by clicking the icon:
Images associated with a button in a page
Advanced configuration of images
WINDEVJava

Configuring the display mode (button in a window)

When describing the images of a button, you can configure the image display mode:
  1. Click Drop-down 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 image display mode
    • its rotation
    • its transparency
    • its symmetry.
Note: If the image is multilingual, this setting 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 the Drop-down button button next to the image path.
  3. Select "Multilingual".
  4. The multilingual image management window opens. 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 runtime, the corresponding button image will be displayed depending on the language selected by Nation.
  6. Validate. The "Multilingual value" caption appears in the image name.
Ver también
Versión mínima requerida
  • Versión 9
Esta página también está disponible para…
Comentarios
Haga clic en [Agregar] para publicar un comentario

Última modificación: 30/09/2024

Señalar un error o enviar una sugerencia | Ayuda local