Aller au contenu principal
Version: v18

Case à cocher

Vue d’ensemble

Une case à cocher est un type de bouton utilisée pour saisir ou afficher une donnée binaire (vrai-faux). Elle peut être soit sélectionnée soit désélectionnée, mais un troisième état peut également être défini (voir ci-dessous).

L’effet d’une case à cocher est contrôlé par une méthode. Comme tous les boutons, une case à cocher est initialisée à la valeur zéro lorsque le formulaire est ouvert pour la première fois. La méthode associée à une case à cocher est exécutée lorsqu’elle est cochée.

Une case à cocher affiche généralement du texte en face de la case. Ce texte est défini dans la zone Titre du thème “Objets” de la Liste des propriétés. Vous pouvez saisir dans cette zone un libellé sous forme de référence XLIFF (cf. Annexe B : Architecture XLIFF).

Utiliser une case à cocher

Une case à cocher peut être associée à une variable ou expression de type entier ou booléen.

  • entier : si la case est cochée, la variable prend la valeur 1. Lorsqu'elle n'est pas cochée, elle porte la valeur 0. Si la case à cocher a un troisième état (voir ci-dessous), elle porte la valeur 2.
  • booléen : si la case est cochée, la variable prend la valeur Vrai. Lorsqu'elle n'est pas cochée, elle prend la valeur Faux.

Une partie ou la totalité des cases à cocher contenues dans un formulaires peut être cochée ou non cochée. Plusieurs cases à cocher permettent à l'utilisateur de cocher plusieurs options.

Cases à cocher à trois états

Les objets de type case à cocher de style Classique et A plat acceptent un troisième état. Ce troisième état représente un statut intermédiaire, généralement utilisé pour l’affichage. Il permet par exemple d’indiquer qu’une propriété est présente parmi une sélection d’objets mais pas dans chaque objet de la sélection.

Pour qu’une case à cocher prenne en charge ce troisième état, vous devez lui attribuer la propriété Trois états dans la Liste des propriétés, thème “Affichage” .

Cette propriété n’est disponible que pour les cases à cocher classiques et à plat associées à des variables ou expressions numériques — les cases à cocher de représentation des expressions booléennes sont exclues de ce principe (une expression booléenne ne pouvant pas se trouver dans un état intermédiaire).

La variable associée à la case à cocher retourne la valeur 2 lorsque celle-ci se trouve dans le troisième état.

En saisie, les cases à cocher à trois états affichent séquentiellement chaque état, dans l’ordre suivant : non coché / coché / intermédiaire / non coché, etc. L’état intermédiaire étant généralement inutile en saisie ; il vous suffit, dans le code, de “forcer” la valeur de la variable à 0 lorsqu’elle prend la valeur 2 afin de passer directement de l’état coché à l’état non coché.

Utiliser une action standard

Vous pouvez affecter une action standard à une case à cocher pour gérer les attributs des zones de texte. Par exemple, si vous sélectionnez l'action standard fontBold, à l'exécution la case à cocher permettra de gérer l'attribut "gras" du texte sélectionné dans la zone de texte courante.

Seules les actions qui peuvent représenter un statut vrai/faux (actions "à coche") sont prises en charge par cet objet :

Actions prises en chargeConditions d'utilisation (le cas échéant)
avoidPageBreakInsideEnabledZones 4D Write Pro uniquement
fontItalic
fontBold
fontLinethrough
fontSubscriptZones 4D Write Pro uniquement
fontSuperscriptZones 4D Write Pro uniquement
fontUnderline
font/showDialogMac uniquement
htmlWYSIWIGEnabledZones 4D Write Pro uniquement
section/differentFirstPageZones 4D Write Pro uniquement
section/differentLeftRightPagesZones 4D Write Pro uniquement
spell/autoCorrectionEnabled
spell/autoDashSubstitutionsEnabledMac uniquement
spell/autoLanguageEnabledMac uniquement
spell/autoQuoteSubstitutionsEnabledMac uniquement
spell/autoSubstitutionsEnabled
spell/enabled
spell/grammarEnabledMac uniquement
spell/showDialogMac uniquement
spell/visibleSubstitutions
visibleBackgroundZones 4D Write Pro uniquement
visibleFootersZones 4D Write Pro uniquement
visibleHeadersZones 4D Write Pro uniquement
visibleHiddenCharsZones 4D Write Pro uniquement
visibleHorizontalRulerZones 4D Write Pro uniquement
visiblePageFramesZones 4D Write Pro uniquement
visibleReferences
widowAndOrphanControlEnabledZones 4D Write Pro uniquement

Pour plus d'informations sur ces actions, veuillez vous reporter à la section Actions standard.

Styles des boutons "Case à cocher"

Les styles de bouton des cases à cocher contrôlent l'apparence générale d'une case à cocher ainsi que ses propriétés. Il est possible d'appliquer différents styles prédéfinis aux cases à cocher. Plusieurs variantes peuvent être obtenues en combinant ces propriétés/comportements.

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

4D propose des cases à cocher avec les styles prédéfinis suivants :

Classique

Le style Classique de case à cocher correspond à un système de case à cocher standard (i.e., un rectangle avec un titre descriptif) :

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"regular",
"text": "Cancel",
"action": "Cancel",
"left": 60,
"top": 160,
"width": 100,
"height": 20
"dataSourceTypeHint":"boolean"
}

A plat

Le style A plat a un design minimaliste. Le graphisme du style A plat est particulièrement utile pour les formulaires à imprimer.

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"flat",
"text": "Cancel",
"action": "cancel",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Bouton barre outils

Le style du bouton Barre outils est initialement destiné à être intégré dans une barre d'outils.

Le style Barre outils possède un fond transparent et un titre. Il est généralement associé à une image à 4 états.

Exemples avec les états coché / non coché / surligné :

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"toolbar",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Bevel

La case à cochre Bevel combine l'apparence du style Classique (c'est-à-dire un rectangle avec un libellé descriptif) et Barre d'outils.

Le style Bevel possède un fond gris clair et un titre. Il est généralement associé à une image à 4 états.

Exemples avec les états coché / non coché / surligné :

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"bevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Bevel arrondi

Le style de case à cocher 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.

Le style Bevel arrondi possède un fond gris clair et un titre. Il est généralement associé à une image à 4 états.

Exemple sous macOS :

Sous Windows, le style Bevel arrondi est identique au style Bevel.

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"roundedBevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

OS X Gradient

Le style de case à cocher OS X Gradient est presque identique au style Bevel, à l'exception de son apparence qui peut, en fonction du système d'exploitation, avoir deux tons. Comme pour le style Bevel, le style OS X Gradient combine l'apparence du style Classique et du style Barre outils.

Le style Gradient OS X a un arrière-plan gris clair et un titre et s'affiche sous la forme d'un bouton système bicolore sur macOS. Il est généralement associé à une image à 4 états.

Sous Windows, ce style est identique au style Bevel.

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"gradientBevel",
"text": "Checkbox",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

OS X Texture

Le style de case à cocher OS X Textured est presque identique au style Bevel, à l'exception de son apparence qui peut, en fonction du système d'exploitation, être différente. 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 :

  • Windows - un bouton système standard avec un fond bleu clair et un libellé au centre.

  • 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

 "myCheckBox": {
"type": "checkbox",
"style":"texturedBevel",
"text": "Checkbox",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Office XP

Le style de case à cocher 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. Exemples avec les états coché / non coché / surligné :

  • Sous macOS - son arrière-plan est toujours affiché. Exemples avec les états cochés / non cochés :

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"office",
"text": "Checkbox",
"action": "fontBold",
"icon": "/RESOURCES/File.png",
"iconFrames": 4
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Contracter/Déployer

Ce style de case à cocher peut être utilisé pour ajouter une icône standard contracter/déployer. Ces boutons sont utilisés nativement dans les listes hiérarchiques.

  • Sous Windows - le bouton est semblable à [+] ou à [-]

  • Sous macOS - il ressemble à un triangle pointant sur vers la droite ou vers le bas.

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"disclosure",
"method": "m_collapse",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Bouton disclosure

Sous macOS et Windows, une case à cocher avec le style "Disclosure" apparaît comme un bouton disclosure standard, généralement utilisé pour afficher/masquer des informations supplémentaires. Lorsqu'il est utilisé comme bouton radio, le symbole du bouton pointe vers le bas avec la valeur 0 et vers le haut avec la valeur 1.

  • Windows

  • macOS

Exemple JSON

 "myCheckBox": {
"type": "checkbox",
"style":"roundedDisclosure",
"method": "m_disclose",
"left": 60,
"top": 160,
"width": 100,
"height": 20
}

Personnalisé

Le style de case à cocher personnalisé accepte une image d'arrière-plan personnalisée et permet de gérer des propriétés spécifiques:

Il est généralement associé à une image à 4 états, qui peut être utilisée conjointement avec une image d'arrière-plan à 4 états.

Exemple JSON

 "myCheckbox": {
"type": "checkbox",
"style":"custom",
"text": "OK",
"icon": "/RESOURCES/smiley.jpg",
"iconFrame": 4,
"customBackgroundPicture": "/RESOURCES/paper.jpg",
"iconOffset": 5, //custom icon offset when clicked
"left": 60,
"top": 160,
"width": 100,
"height": 20,
"customBorderX": 20,
"customBorderY": 5
}

Propriétés prises en charge

Toutes les cases à cocher partagent une même série de propriétés de base :

Gras - Bas - Style de bouton - Class - Focusable - Police - Couleur de la police - Taille de la police - Hauteur - Message d'aide - Dim. horizontal - Italique - Gauche - Nom - Droite - Raccourci - Action standard - Titre - Haut - Type - Souligné - Variable ou expression - Dim. vertical - Visibilité - Largeur

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