Évolution des objets de formulaire

Pour vous permettre de réaliser les plus belles interfaces, nous continuons à améliorer les objets de formulaires. Depuis 4D v19 R6, vous pouvez définir une bordure arrondie pour les objets formulaires de type texte statique et texte de saisie.

Avec 4D v20, de nouvelles possibilités sont offertes.

• Pour les boutons, les boutons radio et les cases à cocher, nous avons ajouté de nouveaux paramètres pour le texte et l’icône.
• Pour les boutons radio et les cases à cocher, le nombre d’états de l’icône a été amélioré afin de permettre un meilleur rendu pour l’utilisateur final.

Exemple HDI

Position du texte et de l’icône

Alignement du texte

La propriété « Alignement du texte » est désormais applicable aux boutons, boutons radio et cases à cocher. Vous pouvez définir l’alignement du texte à l’aide de la liste des propriétés, du CSS et de la commande OBJECT SET HORIZONTAL ALIGNMENT.

Liste des propriétés :

Exemple CSS :

.align {
    textAlign : right ;
}

Exemple de code :

A la commande OBJECT SET HORIZONTAL ALIGNMENT, vous pouvez passer l’une des trois constantes suivantes : Align left, Align right, et Align center.

OBJECT SET HORIZONTAL ALIGNMENT (* ; "button" ; Align center)

image collée au titre

La nouvelle propriété « Image hugs title » est ajoutée pour les boutons, les boutons radio et les cases à cocher.

Lorsque la valeur de cette propriété est false, l’image est positionnée en fonction de la propriété « Title/ImagePosition » sur le bord du bouton. Lorsque la valeur de cette propriété est true, l’image est positionnée directement à côté du titre en fonction de la propriété « Title/ImagePosition ».

Cette propriété peut être définie à l’aide de la liste des propriétés, du CSS et de la commande OBJECT SET FORMAT.

Liste des propriétés :

Exemple CSS :

.hug {
    imageHugsTitle : false ;
}

Exemple de code :

Pour formater les boutons, avec la commande OBJECT SET FORMAT, passez une chaîne de caractères respectant la syntaxe suivante : « title ; picture ; background ; titlePos ; titleVisible ; iconVisible ; style ; horMargin ; vertMargin ; iconOffset ; popupMenu ; hyperlink ; numStates ; imageHugsTitle« . Si vous ne souhaitez pas modifier une valeur, il n’est pas nécessaire de la transmettre.

Pour modifier uniquement la propriété imageHugsTitle:

OBJECT SET FORMAT (* ; "button" ; ";;;;;;;;;;;;;0")

Résultat

Voici différents exemples de ce que nous pouvons réaliser :

Nombre d’états des icônes

Pour les boutons radio et les cases à cocher, avant 4D v20, vous pouviez définir une icône à quatre états : Vrai, Faux, Survol et Désactivé.

Pour améliorer l’expérience de l’utilisateur final, dans certains cas, vous avez besoin que l’état de survol ou de désactivation prennent en compte l’état vrai ou faux. Vous pouvez donc désormais utiliser une icône avec 2 états jusqu’à 6 états.

Suivant…

Consultez cette fonctionnalité avec l’HDI et la documentation pour plus de détails ! Et comme toujours, je me réjouis de lire vos commentaires.