Personnaliser les boutons, les boutons radio et les cases à cocher à l’aide des propriétés d’arrière-plan et de bordure

Imaginez que vous créiez une barre d’outils avec des boutons d’action colorés, ou un panneau de paramètres avec des boutons radio et des cases à cocher stylisés. Vous n’avez pas besoin d’illustrations personnalisées ni de graphismes complexes, juste d’un bouton bleu aux coins arrondis et doté d’une bordure discrète.

Jusqu’à présent, même une simple personnalisation visuelle nécessitait la création d’éléments graphiques dédiés.

À partir de la version 4D 21 R5, vous pouvez définir une couleur d’arrière-plan et les propriétés de bordure directement sur des boutons, boutons radio et cases à cocher personnalisés.

Colorez directement vos objets

Auparavant, la personnalisation de la couleur d’arrière-plan d’un bouton, d’un bouton radio ou d’une case à cocher au style personnalisé nécessitait l’utilisation d’une image d’arrière-plan. Désormais, vous pouvez définir une couleur d’arrière-plan dans l’éditeur de formulaire ou la modifier à l’exécution à l’aide de commandes 4D.

Pour les boutons, un nouveau style de bordure « custom » a été introduit afin de préserver la rétrocompatibilité. Il active la nouvelle propriété d’arrière-plan sans modifier l’apparence des boutons existants.

// Set a blue background on a custom-styled button
OBJECT SET BORDER STYLE(*; "myButton"; Border custom)
OBJECT SET RGB COLORS(*; "myButton"; 0xFFFFFF; 0x1E90FF)

// Set a blue background on a custom-styled check box
OBJECT SET RGB COLORS(*; "myCheckBox"; 0xFFFFFF; 0x1E90FF)

La valeur par défaut est « none », ce qui préserve l’apparence des formulaires existants. Lorsqu’une image d’arrière-plan est présente, elle est affichée par-dessus la couleur d’arrière-plan, ce qui vous permet de combiner des arrière-plans colorés avec des icônes ou des images transparentes.

Ajoutez des bordures en quelques secondes

Vous n’avez plus besoin de ressources graphiques dédiées uniquement pour ajouter une bordure. Les nouvelles propriétés de bordure vous permettent de personnaliser directement l’apparence de vos boutons, boutons radio ou cases à cocher au style personnalisé :

• Couleur de la bordure
• Largeur de la bordure
• Rayon des coins

Que vous préfériez des contours discrets ou des boutons d’action arrondis, tout peut désormais être configuré directement depuis l’éditeur de formulaires, le CSS ou le code 4D.

Et lorsque vous combinez des coins arrondis avec une image d’arrière-plan ou une couleur d’arrière-plan, 4D découpe automatiquement l’arrière-plan pour l’adapter à la bordure. Aucun masquage ni retouche d’image n’est nécessaire.

Pour les boutons, ces nouvelles propriétés ne sont disponibles que lorsque le style de bordure est défini sur « personnalisé », ce qui permet de conserver l’apparence des formulaires existants.

// Set a border radius on a custom-styled button 
OBJECT SET BORDER STYLE(*; "myButton"; Border custom) 
OBJECT SET CORNER RADIUS(*; "myButton"; 2) 

// Set a border radius on a custom-styled check box 
OBJECT SET CORNER RADIUS(*; "myCheckBox"; 2) 

Un seul style avec le CSS

Si votre application utilise déjà le CSS, ces nouvelles propriétés s’intègrent naturellement à votre style existant. Définissez un style une seule fois et appliquez-le partout où vous en avez besoin.

@media (prefers-color-scheme: light) {
    .custom-style-class {
        borderStyle: custom;
        borderRadius: 10;
        borderFillColor: #e0f7fa;
        borderColor: #00ACC1;
        customBorderX: 1;
        iconFrames: 4;
        textPlacement: right;
        imageHugsTitle: false;
        stroke: #00ACC1;
        textAlign: center;
    }
}
@media (prefers-color-scheme: dark) {
    .custom-style-class {
        borderStyle : custom ;
        borderRadius : 10 ;
        borderFillColor : #164B52 ;
        borderColor : #45A9B9 ;
        customBorderX : 1 ;
        iconFrames : 4 ;
        textPlacement : right ;
        imageHugsTitle : false ;
        stroke : #45A9B9 ;
        textAlign: center;
    }
}

Cela facilite la création d’une identité visuelle cohérente pour l’ensemble de vos formulaires, tout en réduisant le nombre d’images que vous devez gérer.

Une mise en forme plus simple, moins de maintenance

Les objets basés sur des images restent le meilleur choix lorsque vous avez besoin d’un aspect différent pour chaque état. Mais dans les nombreux cas où un simple bouton coloré, un bouton radio ou une case à cocher suffit, les propriétés d’arrière-plan et de bordure offrent une solution bien plus rapide et plus simple.

Que vous les configuriez dans l’éditeur de formulaires, que vous les stylisiez avec du CSS ou que vous les mettiez à jour via le code, le résultat est le même : moins de ressources graphiques à gérer et plus de temps consacré au développement de votre application plutôt qu’à la retouche graphique.