From FAQ Filemaker

Tutoriel-Filemaker: Outils graphiques

Il existe plusieurs outils graphiques, assez simples, en FileMaker Pro et il est intéressant de faire une revue détaillée des icônes de la zone d'état :

Outre les icônes que l'on a utilisées dans les pages précédentes, on y trouve également de quoi faire des lignes, des rectangles ou carrés, à bords droits ou arrondis, et des cercles ou ovales. L'icône "A" permet de placer des zones de texte sur les modèles. Petit truc :

• Pour faire un carré, utiliser l'icône du rectangle en maintenant la touche "shift" enfoncée (majuscule)
• Pour faire un cercle, utiliser l'icône de l'ovale en maintenant la touche "shift" enfoncée (majuscule)

On peut ainsi améliorer ses modèles, en respectant toujours les niveaux des couches. Il faut en effet savoir que tout nouvel élément est créé au dessus des précédents !

Icônes simples

Avec un peu de patience, on peut se fabriquer des icônes en FileMaker Pro. Voici deux exemples simples, pour indiquer les modèles Fiches et Listes.

La première chose à faire, généralement, est de zoomer à 200% (Menu, "Affichage", "Agrandir", ou bien les icônes en bas tout à gauche de l'écran), ce qui facilite grandement le travail.
Nous allons préparer deux icônes pour les modèles fiche et deux icônes pour les modèles liste. Pourquoi deux ? simplement parce que chaque icône sera utilisée différemment, justement suivant qu'on sera sur un modèle fiche ou liste : : si on est sur un modèle Fiche, l'icône Fiche est en "Empreinte", et inversement, si on est sur un modèle Liste, l'icône Liste est en "Empreinte"

• On dessine un rectangle. Idéalement, de la taille de nos précédents boutons. Et on s'assure qu'il est en "empreinte"

• On le duplique trois fois, puis on passe les deux derniers "sans effet"

• Au sein du premier et du troisième, on dessine un autre rectangle plus petit, sans effet, avec un trait gris de 1 point d'épaisseur, que l'on ajuste à l'aide des flèches et de la fenêtre "Infos" pour qu'il soit exactement au même endroit sur les deux. C'est l'icône du modèle Fiche

• En mettant un fond gris très clair au bouton en empreinte, on renforce l'effet.

• Au sein des deux autres, on dessine une ligne, que l'on recopie 4 fois, puis qu'on aligne et répartit verticalement. C'est l'icône du modèle Liste

Pour se mettre à l'abri de la destruction de ses œuvres picturales, il est bon de regrouper les divers éléments de chacune des icônes, afin qu'elles fassent chacune un objet complet. Pour ce faire, on sélectionne l'ensemble des éléments d'une icône, et, à l'aide du menu contextuel, on clique "Objet", puis "Associer" :

Il nous restera ensuite à les placer côte à côte, à la suite de nos boutons de navigation. Il faudra penser à les répartir en fonction des modèles et surtout à elur attribuer l'action adéquate, soit l'activation du bon modèle. Mais nous ferons cela un peu plus tard... Rangeons-les, pour le moment, sur notre modèle en cours (CLA_Fiche).

Plus de style...

Avec beaucoup plus de patience, en y regardant bien, il n'y a que l'imagination qui limite... Voici un exemple de réalisation possible. Ici, on ne travaille pas en 200%, mais en 400% ! D'abord un trait noir d'un pixel d'épaisseur :

Bizarrement, FileMaker Pro dit que l'épaisseur est de 0 pixel, mais bon : le trait est bien là ! Maintenant, on le recopie, la copie étant posée à exactement 1 pixel vers le bas, même distance de bord :

Tant que cette 2e ligne est sélectionnée, on en change la couleur en descendant d'une case dans les tons de gris :

On continue ainsi à recopier prudemment ligne par ligne, et en éclaircissant à chaque fois d'un ton de gris, jusqu'à arriver au blanc. Voici le résultat à 400% :

La même technique : ici, on part d'un rectangle gris, sur lequel on aligne des lignes partant noires du bord pour arriver au gris du rectangle, des deux côtés : on obtient un bouton.

Ce qui donne une barre latérale de boutons :

Tout ça avec les maigres outils offerts par FileMaker Pro !