Le formatage de modèle est une pente glissante
Créer un modèle parfait au pixel près est difficile. Il est encore plus difficile de le conserver dans toutes les versions futures. J’ai passé des tonnes de temps à positionner soigneusement chaque objet pour que la mise en page soit parfaite. Puis, dès que je mets à jour le contenu d’une étiquette ou que je modifie l’orientation du texte d’une paire étiquette-rubrique, la perfection disparaît.
Savez-vous ce qu’il y a de plus fou à maintenir un modèle au pixel près ? Une fois que vous avez laissé la mise en page glisser une fois, de façon consciente, c’est fini. Vous ne vous en souciez plus. Elle ne sera plus jamais parfaite. Nous avons tous de nombreuses tâches à accomplir, nous sommes tous fatigués et nous avons tous tendance à oublier une ou deux choses. C’est tout à fait normal.
Quelle est la meilleure façon de s’assurer que nous ne laisserons pas tomber la mise en page ? Je dirais que le meilleur moyen est de minimiser le travail de maintenance que nous devons effectuer. Moins il y a d’étapes à exécuter pour maintenir la perfection et plus ces étapes sont simples, moins il y a de chances que nous laissions tomber la mise en page.
Dans cet article, j’aimerais donc partager avec vous quelques conseils de base mais utiles qui vous aideront à minimiser les étapes nécessaires à la création et, plus important encore, au maintien d’une mise en page parfaite au pixel près, en particulier avec le patron de modèle le plus courant : une paire étiquette-rubrique disposé verticalement.
1. Veillez à ce que l’alignement du texte soit identique pour l’étiquette et le champ
Dans le cas d’une paire étiquette-rubrique à la verticale, en règle générale, votre étiquette doit être alignée à gauche si votre rubrique est alignée à gauche. Si votre rubrique est alignée à droite, votre étiquette doit être alignée à droite.
Vous ne voulez pas que votre rubrique soit alignée à gauche mais que l’étiquette soit alignée à droite, et que vous positionniez méticuleusement l’étiquette pour qu’elle ait l’air alignée avec le champ, comme illustré ci-dessous. C’est ce que je vois souvent dans les anciennes applications.
Ne faites pas cela
Si votre alignement ressemble à l’image ci-dessus, vous devrez repositionner l’étiquette pour réaligner le texte lorsque vous la mettrez à jour.
Le simple fait de remplacer le L majuscule par un L minuscule gâche tout
En conservant le même alignement du texte, vous vous épargnez beaucoup de travail lorsque vous devez procéder à des ajustements, surtout si vous combinez cette astuce avec la suivante.
2. Utiliser une largeur et un rembourrage (“padding”) égaux ; rendre le rembourrage symétrique
Cette astuce est utile lorsque vous avez un mélange de rubriques alignés à gauche et à droite, comme dans une liste.
Le fait de donner à votre étiquette et à votre rubrique les mêmes rembourrages facilite l’alignement de leur contenu textuel, car maintenant, tant que leurs bords s’alignent, leur texte s’aligne (en supposant que vous ayez également adopté le conseil #1 et qu’il n’y ait pas de bordures super larges).
Pourquoi leur donner la même largeur et un rembourrage symétrique ? Ces deux habitudes sont utiles lorsque vous travaillez avec une liste, que ce soit dans la vue Liste ou dans une table externe. Il est courant d’avoir des rubriques alignées à gauche et à droite dans une liste.
Il est courant d’avoir une liste avec des rubriques alignées à gauche et à droite
Il est très courant de copier une paire étiquette-rubrique pour en créer plusieurs, ou d’utiliser le sélecteur de rubrique sur la gauche pour faire glisser et déposer plusieurs rubrique ensemble sur le modèle. Quoi qu’il en soit, votre texte sera aligné de la même manière avec ces deux méthodes.
Supposons que toutes vos étiquettes et rubriques soient désormais alignées à gauche, mais que vous souhaitiez en modifier certaines pour les aligner à droite. S’ils ont déjà la même largeur et un rembourrage symétrique, il vous suffit de modifier l’alignement de leur texte, et le tour est joué.
Une action, changer l’alignement du texte, et c’est fait
Dans le cas contraire, considérez le cas suivant (très courant) : l’étiquette est plus courte que la rubrique, le remplissage gauche est supérieur à 0, mais le remplissage droit est égal à 0. En mode navigation, ce cas de figure est identique au scénario ci-dessus. Mais pour modifier l’alignement du texte à droite, je dois.. :
- Mettre à jour l’alignement du texte pour qu’il soit aligné à droite.
- Aligner le bord droit de l’étiquette sur le bord droit du champ.
- Ajouter un remplissage à droite de l’étiquette et de la rubrique.
Pour modifier l’alignement du texte à droite, nous devons procéder en trois étapes
Comme je l’ai mentionné au début de l’article, moins il y a d’étapes à effectuer, plus vous avez de chances de conserver une mise en page au pixel près. Une seule étape est donc préférable à trois.
3. Évitez de centrer l’étiquette ou la rubrique verticalement3. Évitez de centrer l’étiquette ou la rubrique verticalement
L’objectif est de minimiser le mouvement du texte lorsque nous agrandissons une étiquette ou une rubrique.
Par défaut, de nombreux thèmes FileMaker utilisent l’alignement vertical pour le texte et les rubriques. Remplacez-les par un alignement par le haut à moins que vous n’ayez un cas d’utilisation spécifique pour l’alignement central.
Lorsque l’objet est aligné verticalement au centre, l’étirement de l’objet en hauteur entraîne le déplacement du texte vers le bas.
Dans le cas d’une étiquette, étant donné que l’étiquette se trouve au-dessus du champ, le fait de rendre l’étiquette plus grande modifie la position relative de son texte par rapport au texte du champ. Vous avez maintenant une paire d’objets dont l’aspect est différent des autres.
Mais si l’étiquette est alignée en haut, le fait de l’étirer ne modifie pas son aspect en mode Utilisation.
Une rubrique texte alignée par le haut peut servir à la fois à saisir une ligne de données (par exemple un nom) ou plusieurs lignes de données (par exemple une description). Il vous suffit de l’étirer en hauteur pour qu’elle conserve son positionnement relatif par rapport à tous les autres objets de la mise en page.
4. Dans la vue formulaire, ajustez la hauteur de l’étiquette pour toucher la rubrique
Cette astuce s’inscrit dans le prolongement de l’astuce n° 3. L’un des grands défis auxquels j’ai vu des développeurs débutants être confrontés est de maintenir le positionnement d’une étiquette et d’un champ cohérent sur de nombreuses paires, que ce soit sur le même modèle ou sur plusieurs modèles différents.
De nombreux développeurs font des calculs mentaux lorsqu’ils positionnent ces paires étiquette-rubrique pour qu’elles restent cohérentes. Vous pouvez aussi le dire à voix haute : « Le bas de cette étiquette est à 576 pt. Il est censé être à 4 pt au-dessus du champ. Le haut du champ devrait donc être à 580 pt. Il est actuellement à 578, je vais donc devoir appuyer deux fois sur la touche flèche vers le bas… »
Avez-vous fait cela ? Vous savez que vous l’avez fait 
.
Quelle est la meilleure solution ? En supposant que vous ayez suivi le conseil n° 3, si vous souhaitez que la distance verticale entre le texte de l’étiquette et le texte de la rubrique soit cohérente, il vous suffit de trouver une paire et de la positionner de manière à ce qu’elle soit correcte, puis d’ajuster la hauteur de l’étiquette jusqu’à ce que son bord inférieur touche le bord supérieur de la rubrique.
Pourquoi le bord inférieur doit-il toucher le bord supérieur de la rubrique ? Parce que FileMaker dispose d’une fonction géniale appelée Guides dynamiques. Grâce aux guides dynamiques, il est facile de faire en sorte que le bord inférieur de l’étiquette touche le bord supérieur d’une rubrique. Vous pouvez le faire par glisser-déposer sans avoir à ajuster précisément les pixels ; elles s’emboîtent comme des aimants.
Comment activer les guides dynamiques
Si vous disposez d’un grand nombre de paires étiquette-rubrique et qu’une paire semble correcte et touche le bord, vous pouvez sélectionner toutes les étiquettes du modèle et leur donner la même hauteur que l’étiquette de la première paire. Ensuite, faites de même pour les rubriques. Maintenant, grâce aux guides dynamiques, il sera très facile de déplacer ces étiquettes et ces rubriques pour qu’elles s’emboîtent les uns dans les autres, ou de savoir si elles sont décalées lorsque vous déplacez accidentellement un objet.
Conclusion
Travaillez dur, mais aussi intelligemment. Grâce aux quatre conseils ci-dessus, vous pouvez minimiser les étapes à effectuer lors de la création ou de la maintenance des paires d’étiquettes et de rubriques dans les modèles.
Vous avez une solution FileMaker personnalisée dont vous assurez la maintenance et vous souhaitez bénéficier d’autres astuces de ce type pour vous simplifier la vie ? N’hésitez pas à nous contacter. Nous offrons des services de coaching et de développement qui répondront à vos besoins d’une manière ou d’une autre.
J’espère que cet article vous a plu. Je vous donne rendez-vous dans le prochain !