Aller au contenu principal
Version: v20 R4 BETA

Button

Un bouton est un objet actif auquel une action peut être assignée (ex : une tâche de base de données ou une fonction d'interface) pour qu'elle soit réalisée lorsque l'utilisateur clique dessus.

Les boutons peuvent répondre à divers besoins qui dépendent du style et de l'action qui leur est affecté(e). Par exemple, les boutons peuvent amener l'utilisateur à faire des choix ou à compléter un questionnaire ou formulaire. En fonction de leurs propriétés, les bouton peuvent être destinés à être cliqués une fois seulement et à exécuter une commande, ou à être cliqués plusieurs fois pour obtenir le résultat escompté.

Gestion des boutons​

Les actions assignées aux boutons peuvent provenir d'actons standard ou de méthodes objet personnalisées. Les actions typiques peuvent consister à laisser l'utilisateur accepter, annuler ou supprimer des enregistrements, à copier ou coller des données, à passer d'une page à l'autre dans un formulaire de plusieurs pages, à ouvrir, supprimer ou ajouter des enregistrements dans un sous-formulaire, à gérer les attributs de police dans les zones de texte , etc.

Les boutons avec des actions standard sont grisés le cas échéant lors de l'exécution du formulaire. Par exemple, si le premier enregistrement d'une table est affiché, un bouton avec l'action standard firstRecord apparaît grisé.

Si vous souhaitez qu'un bouton exécute une action qui n'est pas disponible en tant qu'action standard, laissez le champ d'action standard vide et écrivez une méthode objet pour spécifier l'action du bouton. Pour plus d'informations sur les méthodes d'objet et comment les créer et les associer, voir Utilisation de méthodes objet. En règle générale, vous activez l'événement Sur clic et la méthode s'exécute uniquement lorsque vous cliquez sur le bouton. Vous pouvez associer une méthode à n'importe quel bouton.

La variable associée à un bouton est automatiquement définie sur 0 lorsque le formulaire est exécuté pour la première fois en mode Développement ou Application. Lorsque l'utilisateur clique sur un bouton, sa variable est définie sur 1.

Il est possible d'affecter à la fois une action standard et une méthode à un bouton. Dans ce cas, si le bouton n'est pas désactivé par l'action standard, la méthode est exécutée avant l'action standard.

Styles de bouton​

Les styles de bouton contrôlent l'apparence générale d'un bouton ainsi que ses propriétés. Il est possible d'appliquer différents styles prédéfinis aux boutons ou de leur associer des pop-up menus. Plusieurs variantes peuvent être obtenues en combinant ces propriétés/comportements.

À l'exception des propriétés disponibles, de nombreux objets bouton sont structurellement identiques. La différence réside dans le traitement de leurs variables associées.

4D propose des boutons dans les styles prédéfinis suivants :

Classique​

Le style de bouton Classique est un bouton système standard (c'est-à-dire un rectangle avec un libellé descriptif) qui exécute le code lorsqu'un utilisateur clique dessus.

Par défaut, le style Classique a un fond gris clair avec un libellé au centre. Lorsque le curseur survole le style de bouton Classique, la bordure et la l'arrière-plan changent de couleur. En plus de lancer l'exécution de code, le style de bouton Classique imite un bouton mécanique en changeant rapidement la couleur d'arrière-plan lorsque vous cliquez dessus.

Exemple JSON :​


    "myButton": {
        "type": "button",   //définit le type d'objet
        "style":"regular",  //définit le style du bouton
        "defaultButton":"true"  //définit le bouton comme choix par défaut
        "text": "OK",   //texte à faire apparaître dans le bouton
        "action": "Annuler", //Action à exécuter
        "left": 60,  //Position gauche dans le formulaire  
        "top": 160, //Position supérieure dans le formulaire  
        "width": 100,  //largeur du bouton
        "height": 20 //hauteur du bouton
        }

Seuls les styles Classique et A plat proposent la propriété Bouton par défaut.

A plat​

Le style de bouton A plat est un bouton système standard (c'est-à-dire un rectangle avec un libellé descriptif) qui exécute le code lorsqu'un utilisateur clique dessus.

Par défaut, le style A plat a un arrière-plan avec un libellé au centre, des bords arrondis et un design minimaliste. Le style graphique du bouton A plat est particulièrement utile pour les formulaires à imprimer.

Exemple JSON :​


    "myButton": {
                "type": "button",   
                "style":"flat", 
                "defaultButton":"true"  
                "text": "OK",   
                "action": "Annuler", 
                "left": 60,         
                "top": 160,         
                "width": 100,   
                "height": 20    
                }

Seuls les styles Classique et A plat proposent la propriété Bouton par défaut.

Toolbar (Barre d’outils)​

Le style du bouton Barre d'outils est initialement destiné à être intégré dans une barre d'outils. Il inclut l'option à ajouter à un pop-up menu (indiqué par un triangle inversé) généralement utilisé pour afficher des choix de sélection supplémentaires pour l'utilisateur.

Par défaut, le style bouton Barre d'outils a un fond transparent avec un libellé au centre. En fonction du système d'exploitation, le design du bouton peut changer lorsque la souris le survole :

  • Sous Windows - le contour du bouton apparaît lorsqu’il dispose de la propriété “Avec pop-up menu”, et un triangle est affiché à droite et au centre du bouton.

  • Sous macOS - le contour du bouton n’apparaît jamais. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et en bas du bouton.

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"toolbar",  
                "text": "OK",       
                "popupPlacement":"separated"    
                "action": "Annuler",     
                "left": 60,             
                "top": 160,             
                "width": 100,           
                "height": 20        
                }

Bevel​

Le bouton barre d'outils combine l'apparence du style Classique (c'est-à-dire un rectangle avec un libellé descriptif) et la propriété de pop-up menu du style Barre d'outils.

Par défaut, le style Bevel a un fond gris clair avec un libellé au centre. En fonction du système d'exploitation, le design du bouton peut changer lorsque la souris le survole :

  • Sous Windows - le contour du bouton apparaît. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et au centre du bouton.

  • Sous macOS - le contour du bouton n’apparaît jamais. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et en bas du bouton.

Exemple JSON :​

    "myButton": {
                "type": "button",
                "style":"bevel",    
                "text": "OK",       
                "popupPlacement":"linked"   
                "action": "Annuler", 
                "left": 60,     
                "top": 160,     
                "width": 100,   
                "height": 20    
                }

Bevel arrondi​

Le style du bouton Bevel arrondi est presque identique au style Bevel, à l'exception des coins du bouton qui peuvent, selon le système d'exploitation, être arrondis. Comme pour le style Bevel, le style Bevel arrondi combine l'apparence du style Classique et du style Barre outils.

Par défaut, le style Bevel arrondi a un fond gris clair avec un libellé au centre. En fonction du système d'exploitation, le design du bouton peut changer lorsque la souris le survole :

  • Sous Windows - le bouton est identique au style Bevel. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et au centre du bouton.

  • Sous macOS - les coins du bouton sont arrondis. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et en bas du bouton.

Exemple JSON :​

    "myButton": {
                "type": "button",
                "style":"roundedBevel", 
                "text": "OK",   
                "popupPlacement":"none" /
                "action": "Cancel", 
                "left": 60,         
                "top": 160, 
                "width": 100,   
                "height": 20    
                }

OS X Gradient​

Le style du bouton OS X Gradient est presque identique au style Bevel. Comme pour le style Bevel, le style OS X Gradient combine l'apparence du style Classique et du style Barre outils.

Par défaut, le style OS Gradient a un fond gris clair avec un libellé au centre. En fonction du système d'exploitation, le design du bouton peut changer lorsque la souris le survole :

  • Sous Windows - le bouton est identique au style Bevel. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite du bouton.

  • Sous macOs - le bouton s'affiche comme un bouton à deux tons. Lorsqu’il dispose de la propriété “Avec pop up menu”, un triangle est affiché à droite et en bas du bouton.

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"gradientBevel",
                "text": "OK",   
                "popupPlacement":"linked"
                "action": "Cancel",     
                "left": 60,     
                "top": 160, 
                "width": 100,   
                "height": 20    
                }

OS X Texture​

Le style de bouton OS X Textured est presque identique au style Bevel mais avec une taille plus petite (la taille maximale est celle d'un bouton système standard de macOS). Comme pour le style Bevel, le style OS X Textured combine l'apparence du style Classique et du style Barre outils.

Par défaut, le style OS X Textured apparaît comme :

  • Sous Windows - un bouton système standard avec un fond gris clair et un libellé au centre. Il a la particularité d'être transparent dans Vista.

  • Sous macOS - un bouton système standard affichant un changement de couleur du gris clair au gris foncé. Sa hauteur est prédéfinie : il n'est pas possible de l'agrandir ou de la réduire.

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"texturedBevel",    
                "text": "OK",   
                "popupPlacement":"separated"    
                "action": "Cancel", 
                "left": 60,         
                "top": 160,     
                "width": 100,   
                "height": 20    
                }

Office XP​

Le style de bouton Office XP combine l'apparence du style Classique et du style Barre outils.

Les couleurs (surbrillance et arrière-plan) d'un bouton au style Office XP sont basées sur les couleurs du système. En fonction du système d'exploitation, le design du bouton peut changer lorsque la souris le survole :

  • Sous Windows - son arrière-plan n'apparaît que lorsque la souris le survole.

  • Sous macOS - son arrière-plan est toujours affiché.

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"office",
                "text": "OK",
                "popupPlacement":"none" 
                "action": "Cancel", 
                "left": 60,     
                "top": 160, 
                "width": 100,
                "height": 20    
                }

Aide​

Le style du bouton Aide peut être utilisé pour afficher un bouton d'aide système standard. Par défaut, le style Aide s'affiche sous la forme d'un point d'interrogation dans un cercle.

Exemple JSON :​

    "myButton": {
                "type": "button",
                "style":"help",     
                "text": "OK",   
                "dropping": "custom", 
                "left": 60, 
                "top": 160,     
                "width": 100,   
                "height": 20    
                }

Le style Aide ne prend pas en charge les propriétés basiques du nombre d'états, du chemin d'accès image et de la position Titre/Image.

Rond​

Le style de bouton Rond apparaît comme un bouton système circulaire. Ce style de bouton est conçu pour macOS.

Sous Windows, il est identique au style «Aucun» (le cercle en arrière-plan n'est pas pris en compte).

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"circular", 
                "text": "OK",   
                "dropping": "custom", 
                "left": 60, 
                "top": 160,     
                "width": 100,
                "height": 20    
                }

Personnalisé​

Le style de bouton Personnalisé accepte une image d'arrière-plan personnalisée et permet de gérer des paramètres supplémentaires tels que la marge et le décalage d'icône.

Exemple JSON :​

    "myButton": {
                "type": "button",   
                "style":"custom",   
                "text": "", 
                "customBackgroundPicture": "/RESOURCES/bkgnd.png",
                "icon": "/RESOURCES/custom.png",  
                "textPlacement": "center",
                "left": 60, 
                "top": 160,     
                "width": 100,   
                "height": 20
                }

Propriétés prises en charge​

Tous les boutons partagent une même série de propriétés de base :

Bold - Border Line Style - Bottom - Button Style - Class - Droppable - Focusable - Font - Font Color - Font Size - Hauteur - Help Tip - Horizontal Alignment - Horizontal Sizing - Italic - Image hugs title(1) - Left - Not rendered - Nombre d'états(1) - Nom de l'objet - Chemin d'accès à l'image(1) - Droite - Raccourci - Action standard - Titre - Position du titre/de l'image(1) - Haut - Type - Souligné - Variable ou expression - Dimensionnement vertical - Visibilité - Largeur - Avec menu contextuel(2)

(1) Non pris en charge par le style Help .
(2) Non pris en charge par les styles Help, Flat et Regular .

Des propriétés spécifiques supplémentaires sont disponibles, en fonction du style de bouton :