— Aller plus loin : Améliorer l’interface
Historique
4D est connu pour avoir été le premier environnement de base de données à offrir une interface entièrement graphique, tant pour le développeur que pour l’utilisateur final. C’était en 1984, avec les premières machines Macintosh. Depuis lors, les capacités graphiques se sont considérablement améliorées au fil des décennies, mais l’esprit graphique de 4D a toujours été et est toujours présent.
Ne pas franchir les limites
Après avoir positionné le séparateur, il est nécessaire de prévenir les réactions de l’utilisateur. Il faut donc indiquer les limites à ne pas dépasser. Pour cela, nous pouvons profiter des objets graphiques de type « Rectangle » qui nous serviront de butée :
Pour identifier ce rectangle, la coloration peut entrer en jeu en fixant sa propriété fill color à fill :
Nous avons choisi le jaune car c’est une couleur primaire forte !
Comme notre rectangle reste immobile pour l’instant, lorsque le formulaire sera redimensionné, nous mettrons à jour ses options de redimensionnement horizontal et vertical :
Une fois que les deux propriétés sont définies sur « Move » ou « Move » en anglais, elles seront déplacées vers la gauche ou la droite en fonction de la variation de la largeur lorsque l’utilisateur redimensionne la fenêtre.
Il est maintenant temps d’adapter les coordonnées inférieures du séparateur pour tenir compte du rectangle :
Voilà, nous sommes prêts à exécuter notre formulaire !
En poussant le séparateur vers la gauche, nous constatons que le rectangle remplit correctement sa fonction :
Nous cherchions à avoir un arrêt, mais qui soit invisible pour l’utilisateur final. Nous allons donc fixer la propriété « Visible » du rectangle à la valeur « Caché » :
Cependant, après avoir caché le rectangle, nous constatons que la butée n’est plus prise en compte :
Il faut donc fixer la taille de la forme. Pour cela, 4D permet de définir la taille du formulaire et de la fenêtre. Les options de taille dépendent de la valeur de l’option « Taille basée sur » :
En remplaçant la valeur « Taille automatique » par « Définir la taille », la taille du formulaire sera alors basée sur les valeurs saisies (en pixels) dans les champs Largeur et Hauteur. Nous allons maintenant déplacer le rectangle hors du formulaire et le rendre à nouveau visible.
Remarquez que dans les propriétés du séparateur, nous avons fixé le bas à 600 pixels. Une fois que la partie gauche est prête, nous pouvons dupliquer le rectangle pour gérer la partie droite du formulaire :
Voici à quoi devrait ressembler l’interface :
Testez-la ! Nous voyons clairement qu’après avoir poussé le séparateur vers la droite, il fonctionne parfaitement :
Poussez vers la gauche pour vérifier que le rectangle jaune vous permet de respecter les limites du séparateur ainsi que l’affichage de la zone de liste :
