3 - Création du modèle fiche contact FileMaker

Ce modèle va permettre d'opérer les quatre actions principales sur les données :
- la création
- la consultation
- la modification
- la suppression

Vous présenterez sur ce modèle :
- les rubriques du contact
- un bouton pour créer un nouveau contact
- un bouton pour supprimer le contact en cours
- un bouton pour retourner à la liste des contacts

Création de l'interface

Placez-vous, en mode modèle, sur le modèle "Fiche contact" que vous avez créé précédemment.


         Cliquez sur Affichage + Activer le modèle + Fiche contact.

Cliquez sur Affichage + Mode modèle.

Avant tout, appliquez votre thème sur le modèle.


         Cliquez sur Modèles + Modifier le thème..., sélectionnez tout en haut "Mon style tactile", puis cliquez sur "OK".

Préparez ensuite les éléments dont vous aurez besoin :
- une navigation de haut de page pour les boutons d'ajout et de suppression d'un contact
- un corps pour les rubriques du contact
- une navigation de bas de page pour le bouton de retour à la liste des contacts


         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", "Corps" et "Navigation de bas de page".

Augmentez la hauteur des éléments de navigation haute et basse pour y placer vos boutons.


         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.

Recommencez avec "Navigation de bas de page", en indiquant la même hauteur de 70 pt.

Fixer la hauteur du corps également.


         Cliquez sur la barre latérale le long à gauche où est inscrit "Corps", puis indiquez Position - Taille - Hauteur 520 pt, puis appuyez sur la touche Entrée du clavier.

Appliquez le style "Fond" aux trois éléments


         Faites un clic-droit sur chaque barre latérale, puis sélectionnez "Style élément", puis "Fond".

Taille minimale du modèle

Les objets d'un modèle peuvent s'agrandir automatiquement, mais ils ne peuvent pas se réduire par rapport à leur taille d'origine. Aussi toujours dans l'optique d'utiliser votre modèle sur un iPhone, vous allez le dimensionner avec une largeur de 320 points, ce qui vous permettra d'être compatible à partir d'un iPhone 4S (c'est vieux, mais ça fonctionne encore). N'hésitez pas à augmenter cette largeur selon vos besoins — la mise en page est plus facile plus la largueur est élevée.


         Cliquez n'importe où sur le modèle, puis indiquez Position - Taille - Largueur 320 pt.

Vous devriez obtenir la figure suivante :

Mise en place des rubriques

Glissez sur le corps du modèle les rubriques situées entre 2 et 3 dans la liste des rubriques du panneau à gauche :


         Sélectionnez les rubriques :
 Cliquez sur la rubrique Civilite.
 En maintenant la touche majuscule enfoncé, cliquez sur la rubrique Remarques

Glissez-les ensuite au centre du Corps, un rectangle se dessine, puis lâchez les.

Vous devriez obtenir la figure suivante :

Vous distinguez les intitulés à gauche et les rubriques à droite. Puisque votre modèle est destiné à une utilisation sur iPhone, vous allez supprimer les intitulés pour gagner de la place.


         Cliquez pour tout désélectionner — quelque part où il n'y a pas d'objet sur le modèle.

Sélectionnez ensuite tous les intitulés, puis supprimer les.

Positionnement des rubriques

Vous allez maintenant positionner et mettre en forme vos rubriques pour s'adapter au corps du modèle.


         Cliquez sur la rubrique "Civilite", puis indiquez Position - Gauche 20 pt - Haut 85 pt - Largeur 75 pt - Hauteur 44 pt.

La rubrique "Civilite" s'est déplacée comme sur la figure suivante :

Poursuivez avec les rubriques "Nom" et "Prenom :


         Déplacez "Nom" à Gauche 98 pt - Haut 85 pt - Largeur 100 pt - Hauteur 44 pt.
Déplacez "Prenom" à Gauche 202 pt - Haut 85 pt - Largeur 98 pt - Hauteur 44 pt.

Continuez avec les autres rubriques qui seront plus simples car elles occuperont toute la largeur à chaque fois. Vous les positionnerez à 20 pt du bord gauche et 6 pt en dessous des rubriques précédentes. Les hauteurs seront adaptées en fonction du contenu à saisir.


         Déplacez les autres rubriques :
"Adresse" à Gauche 20 pt - Haut 135 pt - Largeur 280 pt - Hauteur 84 pt.

"Telephone" à Gauche 20 pt - Haut 225 pt - Largueur 280 pt - Hauteur 50 pt.

"Email" à Gauche 20 pt - Haut 281 pt - Largueur 280 pt - Hauteur 60 pt.

"Web" à Gauche 20 pt - Haut 347 pt - Largueur 280 pt - Hauteur 60 pt.

"Remarques" à Gauche 20 pt - Haut 413 pt - Largueur 280 pt - Hauteur 166 pt.

Vous devriez obtenir la figure suivante :

Toutes vos rubriques sont proportionnellement réparties sur le modèle avec un espace en haut et un autre en bas pour positionner vos autres objets (boutons, ...).

Sauvegarde et premiers tests

C'est l'occasion pour vous de sauvegarder le travail que vous venez de réaliser. En effet FileMaker effectue une sauvegarde dès que vous sortez du mode modèle. Une fenêtre vous demandera si vous souhaitez enregistrer les modifications, vous pouvez cochez l'option Enregistrer automatiquement.


         Cliquez sur Affichage + Mode utilisation, puis cliquez sur Enregistrer.

Comme vous pouvez le constater sur la figure suivante, en mode utilisation vous voyez bien quelques rectangles blancs joliment placés, mais c'est un peu loin d'une fiche contact comme vous auriez pu vous l'imaginer...

Vous allez donner du style aux rubriques et ajouter des intitulés à l'intérieur.

Mise en place du style

Adoucissez les rubriques avec un léger bord arrondi et un fond de couleur en dégradé. Commencez par le dégradé :


         Cliquez sur Affichage + Mode modèle.

Cliquez sur la rubrique "Civilite".

Cliquez, dans le troisième onglet du panneau de droite, sur "Couleur unie" et sélectionnez "Dégradé".

Cliquez sur la petite boîte de gauche du dégradé.

Saisissez "CFC9C3" à la place de "DCDCDC", puis appuyez sur la touche Entrée.

Re-cliquez sur la même petite boîte.

Glissez le rectangle de couleur qui se trouve entre la loupe et le texte CFC9C3 sur la première colonne du quadrillage qui se trouve en dessous.

Rouvrez la boîte et sélectionnez la couleur qui se trouve maintenant en haut de la première colonne.

Cliquez sur l'autre boîte à droite, puis sélectionnez la couleur en bas de la première colonne.

Occupez-vous des bords arrondis qui se configurent dans le même panneau sous l'intitulé "Ligne" :


         Si besoin, sélectionnez à nouveau la rubrique "Civilite".

Dans Graphismes - Ligne - indiquez Rayon d'angle : 7, puis appuyer sur la touche Entrée.

Cliquez ailleurs dans le noir pour libérer la rubrique et voir le résultat.

Pas mal tout cela, mais vous n'avez vraiment pas envi de recommencer pour chaque rubriques, non ?
Vous allez donner un nom de style pour votre rubrique, puis vous le sauvegarderez dans le thème, afin de le réutiliser sur vos autres rubriques.


         Sélectionnez à nouveau la rubrique "Civilite".

Cliquez sur la petite flèche rouge du bas et sélectionnez "Enreg. sous Nv style".
Indiquez "Saisie" 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".

Appliquez ce style à vos autres rubriques.


         Sélectionnez vos autres rubriques, puis faites un clic-droit et sélectionnez Style d'objet + Saisie.

Vous devriez obtenir la figure suivante :

Ajoutez maintenant des intitulés pour distinguer vos rubriques :


         Cliquez sur la rubrique "Civilite".

Cliquez sur le quatrième onglet du panneau de droite.

Dans Rubrique - Texte de l'espace réservé, saisissez "Civilité" , puis appuyez sur la touche Entrée.

Procédez de même pour les autres rubriques :


         Indiquez les intitulés suivants pour les autres rubriques :
 "Nom" pour Nom
 "Prénom" pour Prenom
 "Adresse" pour Adresse
 "Téléphone" pour Telephone
 "Email" pour Email
 "Site internet" pour Web

Modifiez votre style "Saisie" avec une couleur un peu plus sombre pour le "Texte de l'espace réservé".


         Cliquez sur une rubrique, puis dans le troisième onglet pour le Style "Saisie".

À la place de "Normal", sélectionnez "Texte de l'espace réservé".

Un peu plus bas dans Texte, cliquez sur le petit carré de couleur et à la place de "CCCCCC" indiquez "56492B", puis appuyez sur Entrée.

Pour enregistrer cette modification dans le style :


         Cliquez sur la petite flèche rouge et sélectionnez "Enregistrer modif. dans style actuel".

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

Pour la rubrique "Remarques", vous allez simplement la différencier avec une couleur de fond jaune :


         Cliquez sur la rubrique "Remarques".

Cliquez sur le troisième onglet, puis sélectionnez Graphismes - Fond - Couleur unie.

Changez la couleur de fond par le dernier jaune en bas à droite.

Vous remarquerez sur la figure précédente la petite flèche rouge du style. Attention car vous ne souhaitez pas enregistrer cette modification pour le style "Saisie". Vous souhaitez enregistrer un nouveau style "Remarques".


         Si besoin, cliquez à nouveau sur la rubrique "Remarques".

Cliquez sur la petite flèche rouge et sélectionnez "Enreg. sous Nv style".
Indiquez "Remarques" 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".

Test de saisie et réglages

Repassez maintenant en mode utilisation pour vérifier si cela se présente mieux que lors de vos premiers tests.


         Cliquez sur Affichage + Mode utilisation.

Vous identifiez maintenant clairement vos rubriques de saisie avec une zone de note jaune en bas pour saisir d'autres informations sur un contact.

Saisissez un premier contact pour voir.


         Si besoin, cliquez sur Enregistrements + Nouvel enregistrement ou utiliser le bouton dans la barre d'outils.

Saisissez les informations de votre contact.

Selon la longueur des informations saisies, vous vous rendez compte qu'il faut faire quelques réglages.

1) ajuster la hauteur de certaines rubriques en jouant sur l'espacement.


         Repassez en mode modèle (Affichage + Mode modèle).

Cliquez sur "Civilite", puis dans le troisième onglet à droite, dans la partie Graphismes avancés, saisissez les espacements suivants : Haut 3 - Gauche 10 - Droite 6 - Bas 2

Dans la partie Paragraphe en dessous, sélectionnez l'alignement vertical au milieu (avant dernier bouton à droite).

Remontez en haut du panneau, puis cliquez sur la petite flèche rouge et sélectionnez "Enregistrer modif. dans style actuel".

2) agrandir la rubrique remarques en réduisant la typo et en proposant un ascenseur vertical.


         Cliquez sur la rubrique "Remarques".

Depuis le troisième onglet, indiquez 0 dans le Rayon d'angle, puis sélectionnez 12 dans la taille du Texte plus bas (il devrait y avoir 16 par défaut).

Enregistrez le style "Remarques" en cliquant sur la petite flèche rouge et en sélectionnant "Enregistrer modif. dans style actuel".

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

Re-cliquez sur la rubrique "Remarques".

Cliquez sur le quatrième onglet, puis dans la partie Rubrique cochez Afficher la barre de défilement vertical (Systématiquement).

Voici le résultat en mode utilisation :

Mise en place des boutons

Afin de masquer la barre d'outils, vous allez ajouter vos propres boutons pour créer et supprimer un contact directement sur l'interface de votre application.


         Passez en mode modèle.

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 plus rond, puis indiquez une taille de 30 pt.

Cliquez sur Aucune action et sélectionnez "Action unique".

Dans la fenêtre qui s'ouvre, tapez "nouv" et sélectionnez "Nouvel enreg./requête", puis appuyer sur la touche Entrée, puis cliquez sur le bouton OK.

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

Fermez la fenêtre de Configuration du bouton.

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


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

Faites un clic-droit sur le bouton, puis sélectionnez "Style d'objet", puis "Bouton".

Le bouton supprimer est un peu particulier, car il est préférable de demander une confirmation lors de son utilisation pour éviter tout clic hasardeux. Vous allez donc utiliser un bouton popover, c'est un bouton qui ouvre une petite bulle dans laquelle vous pourrez placer vos boutons de confirmation ou d'annulation.


         En mode modèle, cliquez sur Insertion + Bouton popover.

Comme précédemment, choisissez l'icône seule en sélectionnant la poubelle cette fois-ci.
Indiquez une taille de 30 pt, choisissez la bulle à gauche et décochez "Afficher barre de titre".
Fermez la fenêtre de configuration.

Faites un clic-droit sur le bouton et sélectionnez Style d'objet "Bouton".

Indiquez Position - Gauche 250 pt - Haut 10 pt - Largueur 50 pt - Hauteur 50 pt.

Travaillez maintenant la bulle du popover.


         Cliquez sur la bulle pour la sélectionner.

Indiquez Position - Largueur 130 pt - Hauteur 60 pt.

Vous souhaitez simplement mettre deux boutons dessus : un bouton pour confirmer la suppression avec à nouveau une icône de poubelle et un bouton pour annuler en forme de croix.

Pour vous simplifier la vie, vous allez dupliquer le bouton plus et changer juste l'icône et l'action.


         Cliquez sur le bouton plus, puis cliquez sur Edition + Dupliquer.

Double-cliquez sur le nouveau bouton, puis sélectionnez l'icône de la poubelle.

Cliquez sur l'action "Nouvel enreg./requête", puis dans la fenêtre qui s'ouvre, recliquez sur "Nouvel enreg./requête", puis appuyez sur la touche Supprimer (comme pour supprimer un caractère au clavier).

Tapez "suppr" et sélectionnez "Supprimer enreg./requête", puis appuyer sur la touche Entrée.
Dans [ Avec boîte de dialogue: oui ], cliquez sur le "oui" pour le transformer en "non", puis cliquez sur le bouton OK.

Fermez la fenêtre de Configuration du bouton.

Glissez-déplacez le bouton sur le popover à environ x: 120 pt - y: 10 pt.
Dans le style, cliquez sur la liste indiquant "Bouton" et sélectionnez "Bouton : Icône" en fond noir.

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

Recommencez pour le bouton annuler. Vous constaterez lors de la duplication que le bouton dupliqué ira se placer sous le pop-over. Pour le ramener dessus, il faudra cliquer plusieurs fois sur la touche flêche du haut du clavier.


         Cliquez sur bouton poubelle que l'on vient de créer, puis dupliquez-le.

Cliquez sur la flêche du haut du clavier jusqu'à ce que le bouton repasse sur le popover, puis glissez le bouton à environ : x: 180 pt - y: 10 pt.

Double-cliquez sur le nouveau bouton, puis sélectionnez une icône de croix.

Cliquez sur l'action "Supprimer enreg./requête", puis dans la fenêtre qui s'ouvre, recliquez sur "Supprimer enreg./requête", puis appuyez sur la touche Supprimer.

Tapez "fermer" et sélectionnez "Fermer popover", puis appuyer sur la touche Entrée, puis cliquez sur le bouton OK.

Fermez la fenêtre de configuration du bouton.

Testez vos deux boutons :


         Passez en mode utilisation.

Cliquez sur le plus => un nouveau contact est créé.

Cliquez sur la poubelle, puis choisissez d'abord la croix pour annuler => le contact n'est pas supprimé.
Recommencez en cliquant cette fois sur la poubelle pour supprimer => le contact est supprimé.

Vous pouvez aller copier le bouton de retour à la liste que l'on a mis sur le modèle "Contact" ou bien le recréer depuis un bouton déjà présent sur ce modèle.


         En mode modèle.

Cliquez sur le bouton plus, puis dupliquez-le — Edition + Dupliquer.

Glissez-le dans la navigation de bas de page : x: 10 pt - y: 600 pt.

Double-cliquez dessus, puis sélectionnez la flèche de retour.

Cliquez sur l'action "Nouvel enreg./requête", puis dans la fenêtre qui s'ouvre, cliquez sur "Nouvel enreg./requête", puis appuyer sur la touche du clavier pour supprimer.
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.

Fermez la fenêtre de configuration du bouton.

Vous pouvez repasser en mode modèle et tester votre bouton de retour, car vous allez maintenant vous occuper du modèle "Liste contacts".

Étape 4 : création du modèle liste contacts