PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

  • Présentation
  • Images associées à un bouton dans une fenêtre
  • Présentation
  • Cas particulier : les états du bouton sont gérés via des images
  • Animation
  • Positionnement de l'image et du texte
  • Personnalisez la forme du bouton grâce au style
  • Images associées à un bouton dans une page
  • Configuration avancée des images
  • Configuration du mode d'affichage (bouton dans une fenêtre)
  • Image de bouton multilingue
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget iOSApple WatchCatalystUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Images et boutons
Présentation
Pour optimiser le look de vos écrans ou de vos sites, il est possible d'utiliser des images dans vos boutons.
Images associées à un bouton dans une fenêtre
AndroidWidget AndroidiPhone/iPadUniversal Windows 10 AppWindows Mobile

Présentation

Dans une fenêtre, deux types d'images peuvent être utilisés pour définir l'image associée à un bouton :
  • image : cette image sera superposée au bouton quelle que soit sa forme. Exemple : bouton avec une image et sans cadre :
    Conseil : Pour de meilleurs résultats, l'image doit être inférieure de 5 pixels à la taille du bouton (en largeur et en hauteur).
  • image du cadre du bouton : cette image permet de re-définir simplement la forme du bouton. Par exemple :
Ces images sont sélectionnées lors de la description du bouton (onglet "Général") :
Remarques :
  • Pour choisir des images (cadre et pictogrammes) parmi une bibliothèque d'images livrée avec WINDEV ou WINDEV Mobile, déroulez le bouton Bouton déroulant et sélectionnez l'option "Catalogue".
  • Pour éditer les options de l'image (mode d'affichage, symétrie, ...), déroulez le bouton Bouton déroulant et sélectionnez l'option "Options d'affichage, transparence, symétrie" (voir Configuration du mode d'affichage (bouton dans une fenêtre)).
  • Widget Android Seule l'image du cadre du bouton peut être paramétrée.
AndroidiPhone/iPadUniversal Windows 10 AppWindows Mobile

Cas particulier : les états du bouton sont gérés via des images

WINDEV et WINDEV Mobile permettent de gérer différents états du bouton : normal, enfoncé, grisé, en cours et survol. Pour plus de détails, consultez Les états d'un bouton.
Si les états du bouton sont gérés par des images, vous pouvez :
  • soit utiliser deux images (une image cadre et une image) comportant chacune 5 états. Cette solution permet de superposer l'image sur l'image cadre et de réutiliser l'image cadre avec une autre image.
  • soit incorporer l'image directement dans l'image cadre. Seule l'image cadre sera indiquée dans la description du champ Image.
Bouton au repos, enfoncé, grisé, sélectionné, survolé
Bouton au repos, enfoncé, grisé, sélectionné, survolé
Si l'image contient plusieurs états, WINDEV permet de gérer :
  • l'agrandissement de l'image (par exemple si la taille du bouton est supérieure à l'image fournie). Il existe plusieurs possibilités :
    • Pas d'étirement
    • Etirement en largeur (3 images). La règle de découpage est la suivante :
      • l'image est découpée en trois parties
      • la partie 1 correspond à la zone de gauche
      • la partie 3 correspond à la zone de droite
      • la partie 2 correspond à la zone du milieu. La taille de cette partie est égale à 16 pixels. Cette partie sera répétée autant de fois que nécessaire pour que l'image du bouton soit à la taille voulue.
    • Etirement en largeur et en hauteur.
    • Versions 16 et supérieures
      Adaptation de l'image grâce au mode 9 images.
      Nouveauté 16
      Adaptation de l'image grâce au mode 9 images.
      Adaptation de l'image grâce au mode 9 images.
AndroidWidget AndroidWindows Mobile

Animation

Il est également possible d'animer les images des boutons. Pour cela, le bouton peut :
  • utiliser une image animée par défaut. Dans ce cas, l'image du bouton correspond à un format d'image animée (Gif animé par exemple). La gestion de l'animation est automatique.
  • utiliser une image qui sera animée par WINDEV ou WINDEV Mobile. Dans ce cas, l'image contient tous les dessins de l'animation en planche (les dessins horizontaux représentent les états du bouton). Le nombre d'étapes de l'animation doit être spécifié dans l'onglet "Général" de la fenêtre de description du champ Bouton.
AndroidWidget AndroidWindows Mobile

Positionnement de l'image et du texte

Lorsqu'une image contient un libellé et un picto (une image), il est possible de paramétrer la position relative de l'image et du texte dans le style du champ :
  1. Affichez la fenêtre de description du champ Bouton (option "Description" du menu contextuel).
  2. Affichez l'onglet "Style".
  3. Sélectionnez l'élément "Libellé" et paramétrez la position du libellé grâce à l'option "Position".
AndroidWidget AndroidiPhone/iPadUniversal Windows 10 AppWindows Mobile

Personnalisez la forme du bouton grâce au style

Il est possible de paramétrer la forme du bouton grâce aux options de style.
Pour paramétrer la forme du bouton :
  1. Affichez l'onglet "Style" de la fenêtre de description du bouton.
  2. Sélectionnez l'élément "Cadre extérieur".
  3. Dans la zone "Cadre", sélectionnez le cadre voulu.
  4. Utilisez le bouton fléché pour configurer le cadre (les options de configuration sont différentes selon le type de cadre choisi).
  5. Validez.
Remarques :
  • Certaines options ne sont pas visibles si le bouton possède une image de cadre/fond.
  • Versions 21 et supérieures
    Le cadre "Rond" permet d'obtenir un bouton rond.
    Dans ce cas :
    • la transparence est gérée automatiquement.
    • Le clic est adapté à la forme : si l'utilisateur clique dans un coin du champ, en dehors du rond, le clic n'est pas pris en compte.
    Nouveauté 21
    Le cadre "Rond" permet d'obtenir un bouton rond.
    Dans ce cas :
    • la transparence est gérée automatiquement.
    • Le clic est adapté à la forme : si l'utilisateur clique dans un coin du champ, en dehors du rond, le clic n'est pas pris en compte.
    Le cadre "Rond" permet d'obtenir un bouton rond.
    Dans ce cas :
    • la transparence est gérée automatiquement.
    • Le clic est adapté à la forme : si l'utilisateur clique dans un coin du champ, en dehors du rond, le clic n'est pas pris en compte.
Images associées à un bouton dans une page
Configuration avancée des images
AndroidiPhone/iPadUniversal Windows 10 AppWindows Mobile

Configuration du mode d'affichage (bouton dans une fenêtre)

Lors de la description des images utilisées pour un bouton, il est possible de configurer le mode d'affichage des images :
  1. Cliquez sur le bouton Bouton déroulant.
  2. Dans le menu qui s'affiche, sélectionnez l'option "Options d'affichage, transparence, symétrie".
  3. Dans la fenêtre qui s'affiche, vous pouvez configurer :
    • le mode d'affichage de l'image
    • sa rotation
    • sa transparence
    • sa symétrie.
Remarque : Si l'image est multilingue, cette configuration s'applique à toutes les langues.

Image de bouton multilingue

Si votre site ou votre application est multilingue, il est possible de sélectionner une image de bouton différente pour chaque langue. Cette option est intéressante par exemple lorsque les images associées au bouton contiennent le libellé du bouton.
Pour gérer des images multilingues :
  1. Affichez la description du champ Bouton.
  2. Cliquez sur le bouton Bouton déroulant située à côté du chemin de l'image.
  3. Sélectionnez l'option "Multi-langues".
  4. La fenêtre de gestion des images multilingues apparaît. Par défaut, le même fichier est associé à toutes les langues gérées par la fenêtre ou la page.
  5. Pour chaque langue, cliquez sur le bouton Bouton déroulant. Vous pouvez :
    • Sélectionner l'image correspondant à la langue directement sur votre poste (option "Parcourir").
    • Sélectionner l'image correspondant à la langue dans le catalogue d'images (option "Catalogue").
    En exécution, en fonction de la langue choisie par la fonction Nation, l'image de bouton correspondante sera affichée.
  6. Validez. Le libellé "Valeur multi-langue" apparaît dans le nom de l'image.
Voir Aussi
Version minimum requise
  • Version 9
Documentation également disponible pour…
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire