Donnez à vos objets de formulaire la couleur de bordure qu’ils méritent

Une couleur de bordure bien choisie peut rendre un formulaire plus lisible et lui conférer un aspect plus soigné et cohérent. Que vous souhaitiez mettre en évidence un champ important, distinguer un groupe d’objets ou simplement respecter l’identité visuelle de votre application, les bordures peuvent constituer un élément efficace de la conception de votre interface utilisateur.

À partir de 4D 21 R5, vous pouvez définir la couleur de la bordure indépendamment de la couleur de la police pour les objets contenant du texte, tels que le texte statique et les objets de saisie. La couleur de bordure est également disponible pour les objets qui ne possèdent pas de couleur de texte, tels que les sous-formulaires et les sélecteurs, ce qui vous offre un contrôle cohérent sur les bordures pour un plus large éventail d’objets de formulaire. Configurez-la dans l’éditeur de formulaire, mettez-la à jour dynamiquement à l’aide de code 4D ou appliquez-la via CSS.

Définir la couleur de la bordure dans l’éditeur de formulaires

La nouvelle propriété «border color » attribue à chaque objet pris en charge une couleur de bordure spécifique. Sélectionnez un objet, puis choisissez la couleur dans la section Bordure de l’Inspecteur.

Pour les objets dotés d’une couleur de police, tels que le texte statique ou les objets de saisie, la couleur de la bordure peut désormais être définie indépendamment. Pour les objets sans couleur de texte, tels que les sous-formulaires ou les curseurs, cette propriété vous permet simplement de contrôler directement la bordure.

Cette propriété fonctionne avec les styles de bordure « unie » et « pointillée ». Pour les objets dotés d’une couleur de police, sa valeur par défaut est « Identique à la police ». Pour les objets sans couleur de texte, la valeur par défaut est « Automatique ». Ces valeurs par défaut préservent l’apparence des formulaires existants tout en vous permettant de définir une couleur de bordure distincte chaque fois que vous en avez besoin.

Par exemple, vous pouvez conserver une couleur de texte prononcée tout en utilisant un contour plus discret, attribuer à un groupe de champs de saisie une couleur d’accent commune, ou appliquer une couleur de bordure cohérente à différents types d’objets de formulaire sans modifier leurs autres propriétés visuelles.

Mise à jour des bordures lors de l’exécution

L’état de votre application peut désormais influencer la bordure indépendamment des autres couleurs de l’objet. Vous pouvez mettre en évidence le champ de saisie actif, signaler un problème de validation ou attirer l’attention sur une liste nécessitant une action. La même approche peut être utilisée avec des objets qui ne possèdent pas de couleur de texte. Par exemple, vous pouvez utiliser une couleur de bordure spécifique pour distinguer visuellement un sous-formulaire ou mettre en évidence un sélecteur lorsqu’il nécessite une attention particulière.

Par exemple, lorsqu’un utilisateur valide un formulaire, vous pouvez immédiatement signaler une valeur non valide en modifiant la couleur de la bordure du champ de saisie et en affichant un message supplémentaire à côté de celui-ci.

// Example called when the user validates the form.
If (Not(Is valid email(Form.email)))
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#D34145"; ""; ""; "#F89794")
    OBJECT SET VISIBLE(*; "labelEmailError"; True)
Else
    // Restore the application's normal input border color.
    OBJECT SET BORDER STYLE(*; "email"; Border plain)
    OBJECT SET RGB COLORS(*; "email"; "#FFFFFF"; ""; ""; "#BEDAFF")
    OBJECT SET VISIBLE(*; "labelEmailError"; False)
End if

Vous pouvez également utiliser la couleur de la bordure pour harmoniser la bordure extérieure de la zone de liste avec ses lignes de grille intérieures, créant ainsi un aspect cohérent sur l’ensemble de la liste.

// Set the list box's border color.
OBJECT SET BORDER STYLE(*; "ordersList"; Border dotted)
OBJECT SET RGB COLORS(*; "ordersList";""; ""; ""; "#336699")
// Use the same color for the inner grid lines.
LISTBOX SET GRID COLOR( *; "ordersList"; "#336699"; True; True)

Vous pouvez également récupérer la couleur de bordure actuelle lorsque la logique de votre formulaire doit conserver ou réutiliser l’état visuel d’un objet.

// Read the current colors of a hierarchical list.
OBJECT GET RGB COLORS(*; "categories"; $fontColor; $backgroundColor; $alternateColor; $borderColor)

Assurez la cohérence du style avec le CSS

Si votre projet utilise déjà des classes CSS pour la mise en forme des formulaires, « borderColor » s’intègre parfaitement dans ce même flux de travail. Définissez ensemble le style et la couleur de la bordure, puis réutilisez la classe sur tous les objets qui doivent partager le même langage visuel.

input {
    borderStyle: plain;
    borderRadius: 4;
    borderColor: #0093F5;
}

.secondary-list {
    borderStyle: dotted;
    borderColor: #336699;
}

Le CSS facilite la gestion des règles de présentation « clair » et « foncé » ou l’application d’un style visuel cohérent à l’ensemble de vos formulaires sans avoir à modifier chaque objet individuellement.

Un langage visuel plus clair pour les formulaires

La nouvelle propriété « border-color » vous offre un contrôle plus précis sur les objets de vos formulaires :

• Définissez une couleur de bordure spécifique pour les objets du formulaire, indépendamment de la couleur de leur police le cas échéant.
• Configurez cette propriété dans l’éditeur de formulaire ou via le CSS.
• Lisez et mettez à jour les couleurs de bordure lors de l’exécution à l’aide des commandes «OBJECT SET RGB COLORS » et «OBJECT GET RGB COLORS ».
• Conservez l’apparence existante des formulaires grâce aux valeurs par défaut « likeFont » et « automatic ».

Vous pouvez désormais utiliser les bordures comme un élément à part entière du langage visuel de votre formulaire, qu’elles soient configurées dans l’éditeur de formulaire, définies via CSS ou mises à jour dynamiquement par la logique de votre application.