2 - Création de l'interface utilisateur FileMaker

Vous venez de créer la structure de votre application avec une base de données composée d'une table Contact et d'une vingtaine de rubriques définissant vos contacts.

Vous allez ensuite créer les écrans — appelés modèles dans FileMaker — qui permettront à l'utilisateur de gérer les informations des contacts dans l'application.

Avant cela, vous allez :
1) décrire le cahier des charges de l'application pour vous aider à déterminer les modèles qui seront nécessaires
2) créer et organiser les modèles de l'application
3) choisir et préparer le thème de l'application
4) mettre en page le premier modèle d'administration
5) importer quelques données

Cahiers des charges

Ce titre un peu technique vous amène ici simplement à réfléchir aux différentes fonctionnalités que vous souhaitez mettre en place dans votre application et aux éventuelles spécifications techniques pour son utilisation.

Fonctionnalités :
- créer un nouveau contact
- saisir les informations d'un contact
- supprimer un contact
- rechercher un ou plusieurs contacts
- trier les contacts
- voir les informations d'un contact

Spécifications :
- mono-utilisateur
- utilisation iPhone ou iPad possible depuis FileMaker Go
- mode sombre

Vous aurez donc besoin d'un modèle fiche contact et d'un modèle liste contacts, en plus du modèle d'administration créé par défaut.

Modèles de l'application

Cliquez sur Fichier + Gérer + Modèles...

Ne vous souciez pas de ce que vous voyez à l'écran pour le moment, suivez simplement les directives pour créer et organiser vos modèles.

Création des modèles

Fiche contact

Cliquez sur Nouveau (en bas à gauche), puis dans la fenêtre qui s'ouvre "Nouveau modèle/rapport", indiquez le Nom du modèle "Fiche contact", puis cliquez sur le bouton Terminer.

Liste contacts

Cliquez sur Nouveau, puis indiquez le Nom du modèle "Liste contacts", puis cliquez sur le bouton Terminer.

Contact

Vous devriez avoir un modèle "Contact" créé automatiquement par FileMaker lorsque vous avez créé la table "Contact".
Vous utiliserez ce(s) modèle(s) afin d'administrer et contrôler facilement les données de chaque table.

Organisation des modèles

Même si votre application de contacts n'a qu'une seule table pour le moment, prenez la bonne habitude de ranger son modèle "Contact" dans un dossier de modèles que vous nommerez "Administration".

Toujours dans Fichier + Gérer + Modèles...

En bas à gauche, cliquez sur la petite flèche à droite du bouton "Nouveau", puis sélectionnez "Dossier...", dans la fenêtre qui s'ouvre indiquez le nom de dossier : "Administration", puis cliquez sur "OK".

Glissez maintenant le modèle "Contact" dans le dossier "Administration".

Vous devriez obtenir la figure suivante :

Création de l'interface tableau du modèle "Contact"

Vous pouvez fermer la fenêtre de gestion des modèles et afficher le modèle "Contact" en vue tableau.

Fermez la fenêtre "Gérer les modèles (Contacts)".

Cliquez sur Affichage + Activer le modèle + Administration + Contact.

Cliquez sur Affichage + Mode utilisation.

Cliquez sur Affichage + Afficher sous forme de tableau.

Si la barre d'outils ne s'affiche pas, cliquez sur Affichage + Barre d'outils

Vous allez maintenant revenir en mode modèle pour mettre en forme votre modèle "Contact".

Cliquez sur Affichage + Mode modèle

Comme d'habitude, pas d'affolement devant ce nouvel écran qui est très chargé avec une longue barre d'outils en haut, un panneau à gauche avec trois onglets, un autre à droite avec quatre onglets et au centre ce que l'on appelle le "modèle" composé d'éléments (navigation, corps, ...). Vous allez y aller pas à pas.

Préparation des éléments du modèle

Pour ce modèle d'administration, vous aurez besoin de deux éléments de modèle :
- une navigation de haut de page
- un corps
Selon la version de FileMaker, vous devriez avoir déjà ces deux éléments par défaut, sinon :

Cliquez sur Modèles + Eléments...

Pour supprimer un élément, sélectionnez-le puis cliquez sur le bouton Supprimer.
Pour en ajouter un, cliquez sur le bouton Créer..., puis sélectionnez "Navigation de haut de page" par exemple.

Cliquez sur le bouton Fin quand il ne reste plus que les éléments "Navigation de haut de page" et "Corps".

En oubliant la barre d'outils et les deux panneaux des côtés, il ne reste qu'un espace au centre sur lequel vous allez déposer des objets (rubriques, boutons, ...) qui permettront de construire l'interface de votre fiche contact.

Avant cela, il faut créer un nouveau thème pour votre application. En effet FileMaker a affecté un thème par défaut — dans ces lignes, il s'agit de "Thème : Bleu sommet", c'est indiqué dans la barre grise en haut à droite :

Création du thème

Sans rentrer trop dans le détail, un thème enregistre les paramètres de tous les objets de l'interface d'un fichier FileMaker. Vous modifierez ces paramètres à l'aide du panneau de droite. Afin de respecter un certain design entre les différents modèles de votre application, il est pratique de pouvoir sauvegarder et unifier ces modifications au sein d'un même thème.

Dans un premier temps vous allez choisir un thème qui vous convient dans ceux qui sont proposés par FileMaker, dont voici quelques exemples :

Vous allez préférer un thème minimaliste et comme vous souhaitez que votre application de contacts soit utilisable sur iPhone ou iPad, vous prendrez sans hésiter le thème "Minimaliste tactile".

Cliquez sur Modèles + Modifier le thème...

Sélectionnez "Minimaliste tactile", puis cliquez sur le bouton OK

Vous allez dupliquer ce thème de base pour ne pas l'altérer, en le renommant "Mon style tactile" par exemple.

Cliquez sur Fichier + Gérer + Thèmes...

Dans la fenêtre qui s'ouvre, sélectionnez "[Minimaliste tactile]", puis cliquez sur le bouton Dupliquer.

Cliquez sur le bouton Renommer...
Saisissez "Mon style tactile", puis cliquez sur OK, puis à nouveau sur OK.

Retournez maintenant choisir votre thème pour le modèle Fiche contact :

Cliquez sur Modèles + Modifier le thème...

Sélectionnez "Mon style tactile" tout en haut, puis cliquez sur le bouton OK

Il faudra répéter cette dernière opération à chaque nouveau modèle de votre application.

Réglage du style

Augmentez la hauteur de la navigation haute pour y mettre un bouton de retour à la liste des contacts.

Cliquez sur la barre latérale le long à gauche où est inscrit "Na..." — pour "Navigation de haut de page".

Dans le premier onglet du panneau de droite, indiquez Position - Taille - Hauteur 70 pt, puis appuyez sur la touche Entrée du clavier.

Modifiez également la couleur du fond de la navigation haute.

Cliquez sur le troisième onglet du panneau à droite.

Cliquez sur le grand rectangle blanc qui se trouve dans Graphismes - Fond - Couleur unie.

Sélectionnez le gris foncé avant le noir à droite.

Vous remarquerez en haut à droite la petite flèche en rouge qui indique que vous avez modifié le style, mais que vous ne l'avez pas sauvegardé dans votre thème.
Vous allez enregistrer ce style en le nommant "Fond" afin de le réutiliser par la suite.

Cliquez sur la petite flèche rouge et sélectionnez "Enreg. sous Nv style".
Indiquez "Fond" pour le nom du style, puis cliquez sur OK.

Cliquez sur la flèche rouge du haut et sélectionnez "Enreg. modif. dans thème".

Mise en place d'un bouton

Vous allez ajouter un bouton pour revenir à la liste des contacts.

Cliquez sur Insertion + Bouton, puis dans la fenêtre "Configuration du bouton" qui s'ouvre :

Sélectionnez le deuxième onglet qui représente un carré pour afficher une icône uniquement.

Choisissez l'icône en forme de flèche qui renvoie en haut et à gauche — elle se trouve en bas dans le tableau des icônes.

Indiquez une taille de 30 pt.

Cliquez sur l'action "Aucune action", puis sélectionnez "Action unique".
Dans la fenêtre qui s'ouvre, tapez "activer", puis sélectionnez "Activer modèle".
Cliquez sur "Modèle d'origine" puis "Modèle...", puis sélectionnez le modèle "Liste contacts", puis cliquez sur le bouton OK, puis cliquez à nouveau sur OK.

Cochez "Transformer en curseur une main sur le bouton" dans les Options en bas.

Vous devriez avoir un rectangle blanc sélectionné quelque part sur votre modèle, vous allez vous occuper maintenant de sa position (premier onglet à droite) et de son style (troisième onglet).

Indiquez Position - Gauche 10 pt - Haut 10 pt - Largeur 50 pt - Hauteur 50 pt.

Dans le style, indiquez :
Graphismes - Fond Aucun et Ligne Aucune.
Graphismes avancés - Espacement - Haut 0 - Gauche 0 - Droite 0 - Bas 0 .
Texte sélectionnez la couleur blanche.
Paragraphe - Alignement centre et milieu.

Revenez en haut, puis cliquez sur la liste indiquant "Bouton" et sélectionnez "Bouton : Icône".
Changez la couleur de fond en blanc.

Enregistrez sous nouveau style en entrant le nom "Bouton", puis enregistrez dans le thème.

Mise en place des rubriques

Ajoutez uniquement les rubriques qui ont du sens pour vous sur ce modèle — pas besoin des séparateurs, de la rubrique "un", des rubriques calculées ou statistiques.

Sélectionnez, dans le panneau de gauche, les rubriques ID, Civilite à Remarques, creationLe à modifPar, puis glissez-les sur le corps.

Peu importe le positionnement des rubriques sur le modèle, car en mode utilisation, les rubriques seront affichées en colonnes comme dans un tableur.

Adaptez les paramètres d'affichage de la vue en tableau.

Cliquez sur Modèles + Format de modèle..., puis dans la fenêtre qui s'ouvre, cliquez sur l'onglet "Vues", puis cliquez sur le bouton "Propriétés..." de Tableau.

Cochez "Navigation de haut de page" et "Hauteur personnalisée" et indiquez 50 points, puis cliquez sur le bouton "OK", puis à nouveau sur le bouton "OK".

Cliquez sur Affichage + Mode utilisation.

Si tout s'est bien passé, vous devriez obtenir la figure suivante en mode utilisation.

Vous pourriez commencer à saisir vos contacts directement dans ce tableau, mais pour une utilisation sur un iPhone, il est préférable de mettre en forme des modèles spécifiques : "Fiche contact" et "Liste contacts".

Commencez par vous occuper du modèle "Fiche contact".

Étape 3 : création du modèle fiche contact