Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

44
Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone Guide pratique FileMaker

Transcript of Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Page 1: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Pratiques recommandées

de conception de solutions métiers personnalisées

pour iPad et iPhone

Guide pratique FileMaker

Page 2: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 2

Table des Matières

Guide pratique FileMaker ......................................................................................................... 3  A qui s'adresse ce guide ? ...................................................................................................... 3  Ce que vous allez apprendre ................................................................................................... 3  Etape 1 – Planification de votre solution ................................................................................. 4  Grille de décision de la solution ............................................................................................... 5  Etape 2 – Conception de votre solution .................................................................................. 7  Etape 3 – Développement de votre solution ............................................................................ 8  Configuration initiale .............................................................................................................. 10  Définir les cadres de votre solution FileMaker ....................................................................... 12  Gabarits d'écran .................................................................................................................... 12  Grille ..................................................................................................................................... 14  Règles .................................................................................................................................... 14  Guides .................................................................................................................................... 15  Guides dynamiques ............................................................................................................... 15  Créer votre modèle ................................................................................................................ 15  1.   Ajouter une barre d'outils de type iOS ........................................................................... 16  2.   Ajouter une liste d'articles à réapprovisionner ou en stock ........................................... 18  3.   Ajouter des boutons pour modifier les articles affichés dans la table externe .............. 27  4.   Ajouter un bouton pour accéder aux détails des articles .............................................. 28  5.   Ajouter la valeur totale de l'inventaire ............................................................................ 29  6.   Ajouter un graphique montrant les quantités d'articles dans chaque catégorie ........... 29  7.   Ajouter une carte indiquant l'emplacement actuel de l'utilisateur ................................. 31  8.   Modèle final .................................................................................................................... 33  9.   Que faire de l'espace restant ? ...................................................................................... 33  10.   Navigation automatique dans votre nouveau modèle ................................................... 34  Votre propre solution – Faire une dernière révision ............................................................... 34  Tester et déployer votre solution ........................................................................................... 35   ANNEXE – Se familiariser avec les outils de conception FileMaker ...................................... 36  Thèmes .................................................................................................................................. 34  Traitements de texte .............................................................................................................. 37  Fonds – Couleurs unies, dégradés et images ....................................................................... 38  Mise en forme des cadres et des angles ............................................................................... 39  Etats d'objet ........................................................................................................................... 41  Icônes et illustrations ............................................................................................................. 42  Accessibilité ........................................................................................................................... 43  

Ressources ............................................................................................................................ 44  

Page 3: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 3

Guide pratique FileMaker Pratiques recommandées d'utilisation de la technologie iOS dans le développement de solutions personnalisées avec FileMaker Pro Ce guide présente les pratiques recommandées de conception de solutions métiers personnalisées pour iOS. Les solutions créées le sont à l'aide de la plate-forme FileMaker dont les formulaires et les fonctions aident à concevoir des outils réellement utiles que les utilisateurs aiment utiliser. La plate-forme FileMaker comprend FileMaker Pro pour créer des solutions FileMaker, le client gratuit FileMaker Go pour exécuter ces solutions sur des appareils iOS, et enfin FileMaker Server pour distribuer ces mêmes solutions et permettre à de nombreux utilisateurs de partager des informations. A qui s'adresse ce guide ? Ce guide s'adresse à deux types de concepteurs de solution :

1. Les nouveaux utilisateurs de FileMaker – qui utilisent FileMaker Pro et

FileMaker Go pour la première fois afin de créer des solutions métiers personnalisées.

2. Les utilisateurs existants de FileMaker Pro – qui ont déjà conçu une version pour poste de travail de leur solution de base de données et qui sont prêts à créer des versions exécutables sur iPad et iPhone.

Ce que vous allez apprendre Vous allez apprendre à planifier, concevoir et développer des solutions métiers personnalisées pour appareils iOS, non seulement pour aider les utilisateurs dans leurs tâches, mais aussi pour le plaisir de les utiliser.

• Etape 1 – Planification de votre solution – Comprenez qui sont vos utilisateurs,

quelles sont les tâches qu'ils doivent accomplir, où ils comptent utiliser la solution et sur quels appareils. Telles sont les questions essentielles que vous devez vous poser pour proposer à vos utilisateurs les fonctions et fonctionnalités dont ils ont besoin.

• Etape 2 – Conception de votre solution – Soyez hautement sélectif dans le choix

des éléments que vous décidez d'afficher sur l'écran de petite taille et présentez-les de manière optimale pour rationaliser le flux de travail. Telle est la prochaine étape de la création d'une expérience utilisateur véritablement agréable.

• Etape 3 – Développement de votre solution – Cette section fournit des instructions de développement détaillées. Elle vous montre comment allier esthétisme et fonctionnalité pour rendre votre solution indispensable aux utilisateurs.

Si tout cela vous semble bien jusqu'ici, il est temps de commencer !

Page 4: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 4

Ressources et conseils Ce guide vous sert de point de départ, ainsi qu'il sert de point de départ à votre équipe de développement. Outre ce guide, vous sont également proposés de très nombreuses ressources d'apprentissage, d'autres meilleures pratiques, des conseils, des astuces et des techniques, dans le cadre du programme FileMaker TechNet. Partagez avec vos homologues via les forums des développeurs ou regardez des vidéos pour explorer et découvrir les capacités avancées de la plate-forme FileMaker. De plus, si vous n'êtes pas encore familiarisé avec les outils et options de conception FileMaker, reportez-vous à l'annexe de ce guide qui contient un didacticiel de base abordant les outils et options clés.

Etape 1 – Planification de votre solution Comprendre votre public pour lui proposer les fonctions et fonctionnalités qu'il attend Pour concevoir une solution utilisable et réellement utile dont vos utilisateurs ne pourront plus se passer, la première étape consiste à prendre le temps de comprendre votre public et ses besoins. Pour planifier les fonctions et fonctionnalités de votre solution, posez-vous et posez à votre équipe les questions suivantes :

• QUI - Qui va l'utiliser ? o Identifiez les groupes, les équipes, les titres et/ou les noms des personnes

qui utiliseront votre solution.

• QUOI – Quels sont ses objectifs prioritaires ? o Quelles sont les principales tâches que la solution doit aider les

utilisateurs à accomplir ? § Les groupes et équipes de votre entreprise ont peut-être des

attentes différentes de la solution. N'oubliez pas de répertorier les tâches prioritaires de chacun de ces groupes.

o Quelles sont les tâches que les utilisateurs doivent accomplir rapidement ?

o Certaines tâches doivent-elles intervenir dans un ordre spécifique ?

• OU – Où la solution sera-t-elle utilisée ? o Par exemple, sera-t-elle utilisée au bureau, sur le terrain, en plein soleil, de

nuit, dans une voiture, à proximité d'un point d'eau, etc. ? o Quelle posture les utilisateurs adopteront-ils durant son utilisation ?

Resteront-ils debout ? Seront-ils assis ? Se serviront-ils d'une main ou des deux mains ? De quelle précision les utilisateurs devront-ils faire preuve durant son utilisation ?

Connaître ces aspects peut vous aider à définir le contraste, les zones de contact, etc.

Page 5: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 5

• SUR QUOI – Sur quels appareils la solution sera-t-elle utilisée et pour quelles tâches ?

o Quelles sont les tâches dont l'accès doit être développé en priorité sur iPhone et non sur iPad ?

o Quelle orientation sera le plus utilisée ? Paysage, portrait ou les deux ? o Quels gestes et quelles fonctionnalités de dictée vocale et de capture

d'image seront utilisés sur iPhone et non sur iPad ?

• QUAND – Quand votre solution doit-elle être déployée ? o Cela vous aidera à démarrer et à créer pour commencer une solution

« facile à manipuler ». o Le développement d'une solution est parfois un processus répétitif. Il

vous permet de déployer, auprès des utilisateurs, de nouvelles versions de votre solution tout en continuant à l'améliorer et à la peaufiner. Si cela semble approprié dans le cadre de votre projet, décidez de la façon d'exécuter les mises à jour et du moment de leur exécution pour perturber aussi peu que possible vos utilisateurs.

• AUTRES APPLICATIONS – Quelles applications complémentaires utiliseront-

ils ou souhaiteraient-ils utiliser ? o Quelles seront les applications utilisées conjointement à la solution que

vous créez ? o Quelles applications vos utilisateurs aiment-ils utiliser ?

En répondant à ces questions, vous trouverez une source d'inspiration supplémentaire pour créer des applications que vos utilisateurs apprécient.

Grille de décision de la solution Après avoir répondu aux questions ci-dessus, vous pouvez prendre des décisions qui aideront à définir votre solution. Effectuez-en le suivi dans une simple grille. Vous aurez ainsi une vue d'ensemble de la définition de votre solution et des décisions la concernant. Voici un exemple pour une solution de statut de stock destinée à la direction : Infos

Décision

Qui

Hauts responsables

Rechercher la simplicité

Quoi • Nombre d'articles • Articles à

réapprovisionner • Valeur du stock • Unités disponibles

Ajouter un modèle avec récapitulatif Utiliser un déclencheur de script SurOuverturePremiereFenetre pour déterminer le système d'exploitation et rechercher le modèle approprié à l'ouverture du fichier par l'utilisateur

Page 6: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 6

Où Environnement de bureau Déplacement d'une salle à l'autre

Thème atténué

Quelles tâches sur iPhone Statut du stock en un coup d'œil

Mettre en avant les informations les plus importantes

Quelles tâches sur iPad

Tableau de bord des principales données avec recherches simplifiées

Créer un modèle adapté à l'iPad et doté d'une navigation conviviale

Quand déployer

10 jours Rationaliser les fonctionnalités Dans le script de connexion, insérer des étapes permettant d'avertir l'utilisateur de la mise à disposition d'une nouvelle version

Autres applications utilisées

Calendrier Cartes

Offrir à l'utilisateur une expérience similaire pour ne pas le perturber au moment où il passe d'une application à une autre Suivre les conventions iOS pour garantir une expérience utilisateur cohérente

Page 7: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 7

Etape 2 – Conception de votre solution

Faciliter la façon dont vos utilisateurs mènent à bien leurs tâches Concevoir une solution mobile pour iPhone et iPad signifie bien plus que créer une version réduite de la version pour poste de travail. Certes, la taille de l'écran est importante. Cependant, ce sont les éléments que vous affichez et la façon dont vous les présentez sur cet écran plus réduit qui peuvent faire de votre solution un outil indispensable... ou simplement un outil dont il convient d'ignorer l'existence. Quel que soit l'appareil utilisé, aucun effort ne doit être demandé aux utilisateurs. Voici donc quelques recommandations à suivre au moment où vous concevez votre solution pour iOS :

• Création de modèles pour chaque type d'appareil – En créant des modèles

séparés pour chaque appareil, vous garantissez l'adéquation parfaite de votre solution. Dans la plupart des cas, n'utilisez pas le même modèle pour iPhone et iPad, ni pour poste de travail et iPad.

• Principale utilisation – La principale utilisation de chaque modèle doit sembler

évidente à l'utilisateur. Prenez en charge quelques tâches rapides dans le modèle d'accueil et assurez-vous que les tâches fréquentes sont instantanément accessibles.

• Simplicité – Plutôt que de créer un modèle complexe unique, créez plusieurs

modèles simples et clairs dotés d'une navigation intuitive et laissez vos utilisateurs les parcourir à leur guise.

• Interface tactile – La taille des boutons doit être d'au minimum 44 pt x 44 pt et

les utilisateurs doivent pouvoir les toucher du bout des doigts.

• Groupement – Au moment d'afficher des données groupées dans un formulaire, assurez-vous d'ajouter les rubriques connexes et d'utiliser un rayon de 10 pt dans les angles des rubriques extérieures.

• Saisie minimale – Dans une interface tactile, la saisie n'est pas toujours la méthode la plus appropriée. A chaque fois que vous le pouvez, plutôt que de présenter le clavier, privilégiez les valeurs de rubrique avec entrée automatique, les listes de valeurs, les sélecteurs de date ou même la dictée. Utilisez des valeurs de rubrique par défaut intelligentes, des listes de valeurs, des sélecteurs de date et même la dictée pour exploiter au mieux les capacités uniques des appareils iOS.

• Couleur – L'interface utilisateur de votre solution ne doit pas nuire aux données

qu'elle présente. Choisissez une couleur de base et une couleur complémentaire, puis privilégiez cette palette. Evitez d'utiliser un trop grand nombre de couleurs différentes et réservez les couleurs hautement saturées aux éléments qui exigent une attention toute particulière, par exemple les données critiques ou les erreurs. Quoi de mieux pour commencer que d'utiliser l'un des thèmes intégrés de FileMaker. Ces thèmes utilisent en effet des palettes de couleurs qui fonctionnent bien ensemble.

Page 8: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 8

• Dégradés – Les dégradés servent à donner une dimension à vos modèles. Les dégradés sont idéaux pour mettre en avant des éléments interactifs d'un modèle, par exemple une barre d'outils ou un bouton. De même, appliqués à l'arrière-plan de manière radiale, ils créent une atmosphère. Evitez d'utiliser des dégradés sur des éléments de moindre importance ou sur des éléments situés derrière d'autres éléments.

• Fenêtres multiples – Evitez d'ouvrir plusieurs fenêtres dans votre solution. Au lieu de cela, faites en sorte que l'utilisateur puisse accéder simplement à un modèle au sein de la même fenêtre et accomplir la tâche souhaitée.

Lignes directrices [Apple] relatives à l'interface humaine Les lignes directrices relatives à l'interface humaine iOS décrivent les principes sous-tendant la conception d'une interface et d'une expérience utilisateur optimales pour votre solution iOS. Leur lecture vous inspirera et vous guidera dans la création d'un outil puissant et attractif. Ces lignes directrices sont disponibles sur le site d'Apple.

Etape 3 – Développement de votre solution Cette section propose des instructions détaillées sur l'utilisation de FileMaker Pro pour développer l'interface utilisateur d'une solution FileMaker adaptée. Vous apprendrez à allier esthétisme et fonctionnalité pour rendre votre solution indispensable aux utilisateurs. L'objectif est de créer un modèle optimisé pour iPad. Ce modèle sera doté d'une interface de type tableau de bord en mode portrait et paysage comme le montrent les Figures 1 et 2. Il mettra en avant des informations récapitulatives importantes tout en permettant de rechercher facilement d'autres types de données.

Page 9: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 9

Figure 1 : Modèle de type tableau de bord en mode portrait

Page 10: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 10

Figure 2 : Modèle de type tableau de bord en mode paysage Les instructions suivantes utilisent la solution de démarrage FileMaker appelée « Inventaire ». Il s'agit de l'une des nombreuses solutions de démarrage proposées avec FileMaker Pro. De même, si vous avez déjà défini les tables, rubriques et relations et si vous êtes prêt à concevoir l'interface utilisateur de votre solution, vous pouvez créer le modèle dans votre propre fichier. Dans ce cas, ignorez l'étape 1 et commencez à l'étape 2. Configuration initiale

1) Créer la solution de démarrage Inventaire a. Dans FileMaker Pro ou FileMaker Pro Advanced, sélectionnez

Fichier > Nouveau à partir d'une solution de démarrage. b. Choisissez le modèle Inventaire. c. Sélectionnez un emplacement pour stocker votre solution de démarrage,

puis cliquez sur Enregistrer.

Page 11: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 11

Figure 3 : Boîte de dialogue de sélection de la solution de démarrage

2) Créer une nouvelle table et un nouveau modèle pour le tableau de bord

a. Ouvrez Gérer la base de données à l'aide des combinaisons de touche Cmd+Maj+D ou Ctrl+Maj+D, ou sélectionnez Fichier > Gérer > Base de données….

b. Créez une nouvelle table appelée Tableau de bord. c. Cliquez sur OK pour fermer la boîte de dialogue Gérer la base de

données. d. Cliquez sur le bouton Modifier modèle dans la barre d'outils. e. Cliquez sur le bouton Nouveau modèle/rapport dans la barre d'outils. f. Sélectionnez Tableau de bord dans la liste déroulante Afficher les

enregistrements de : g. Appelez le modèle Tableau de bord d'inventaire iPad. h. Sélectionnez Standard comme type de modèle.

Figure 4 : Premier écran de la boîte de dialogue Nouveau modèle/rapport

Page 12: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 12

i. Cliquez sur Suivant. j. Cliquez sur Suivant sans spécifier les rubriques. k. Sélectionnez le thème Ambiance Rivière. l. Cliquez sur Terminer.

Figure 5 : Ecran de sélection du thème du modèle de la boîte de dialogue Nouveau

modèle/rapport

Vous venez de créer le modèle que vous allez utiliser pour votre tableau de bord iPad. Définir les cadres de votre solution FileMaker Les cadres sont la largeur et la hauteur de votre modèle à l'écran. Si votre solution va être utilisée sur plusieurs appareils, vous devez définir les cadres de chacun d'entre eux et donc prévoir des modèles séparés.

Orientation de l'appareil et dimensionnement automatique Les solutions proposées doivent fonctionner aussi bien en mode portrait qu'en mode paysage et leurs fonctionnalités principales être disponibles dans ces deux orientations. Par exemple, les éléments visibles sur la droite d'un modèle en mode paysage ne doivent pas disparaître ni être coupés lorsque vous pivotez l'écran en mode portrait. Pour maintenir l'attention sur la fonctionnalité principale, rien de mieux que le dimensionnement automatique. En effet, il permet de redimensionner les objets et de les recadrer en fonction de l'orientation. A mesure que nous ajouterons des éléments au modèle de cette section, nous utiliserons si besoin un redimensionnement automatique.

Gabarits d'écran FileMaker Pro intègre des gabarits d'écran pour définir plus facilement les cadres de votre solution. Chaque gabarit représente la surface disponible dans votre modèle, à savoir l'écran de l'appareil moins l'espace utilisé pour les éléments des applications iOS

Page 13: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 13

et Go, par exemple les barres d'outils. Vous pouvez activer n'importe quelle combinaison de gabarits d'écran, ainsi qu'opter pour une personnalisation. Dans le cadre de cet exercice, nous utiliserons à la fois l'iPad (en mode portrait) et l'iPad (en mode paysage) pour voir l'espace nécessaire dans ces deux orientations. • Pour définir les cadres du modèle à l'aide d'un gabarit d'écran :

a. Sélectionnez Affichage > Mode Modèle. b. Cliquez sur la flèche du bouton Gabarit d'écran dans la barre d'outils Modèle. c. Sélectionnez iPad : 768 x 929 (portrait) dans la liste déroulante pour afficher le

gabarit souhaité. d. Cliquez à nouveau dans la liste déroulante Gabarit d'écran et sélectionnez iPad :

1024 x 673 (paysage).

Figure 6 : Liste déroulante des gabarits d'écran Ensuite, toujours en mode Modèle, redimensionnez le corps de sorte que la partie inférieure du pied de page se trouve à 717 pt, juste au-dessous de la partie inférieure du gabarit d'écran iPad (portrait). (Dans la mesure où un script désactive les barres d'outils à l'ouverture du fichier, notre modèle peut avoir 44 pt de plus en longueur que le gabarit.) [Si l'unité de mesure actuellement utilisée dans l'onglet Position est le centimètre ou le pouce, commencez par la modifier et par adopter le point. Pour cela, cliquez sur une étiquette de mesure jusqu'à ce qu'elle affiche « pt ».] Vous pouvez redimensionner le corps en cliquant sur l'étiquette de sa partie et en donnant à la hauteur une valeur de 641 pt dans l'onglet Position d'un Inspecteur. Vous pouvez aussi cliquer sur la ligne entre le corps et le pied de page, puis la faire glisser. La méthode consistant à utiliser l'Inspecteur pour modifier la hauteur (et ensuite la largeur) est la plus précise de toutes celles permettant de définir la taille des objets et des parties du modèle. Ensuite, modifiez la largeur du modèle pour qu'elle soit parfaitement alignée sur le bord droit du gabarit d'écran iPad (paysage). Pour cela, ne sélectionnez rien et donnez à la largeur une valeur de 768 pt dans l'onglet Position d'un Inspecteur ou cliquez sur le bord droit du modèle et faites-le glisser. Il est important que les bords de votre modèle soient parfaitement alignés sur les gabarits d'écran (ou sur un point de la zone d'écran disponible lorsque les barres d'outils sont désactivées). Sans alignement correct, un défilement non souhaité et un redimensionnement erroné du modèle peuvent apparaître au moment de faire pivoter l'appareil.

Page 14: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 14

Figure 7 : Le bord droit du modèle s'aligne sur le bord droit du gabarit d'écran iPad : 767 x 929 (portrait)

Grille Avec une grille, vous avez l'assurance que tout est bien organisé et à sa place sur un écran de petite taille. La grille fait apparaître sur un modèle une série de lignes horizontales et verticales croisées non imprimables, que vous pouvez utiliser pour créer, redimensionner, positionner et aligner des objets. Pour afficher la grille, sélectionnez Affichage > Grille > Afficher la grille. Pour décider de la façon d'aligner et de positionner les objets dans votre modèle, utilisez la grille sous-jacente. Le modèle peut être configuré de sorte que les objets « s'alignent sur » les lignes de la grille. Un objet que vous déplacez ou redimensionnez s'accroche au quadrillage secondaire le plus proche. Tout nouvel objet que vous ajoutez s'aligne sur le quadrillage principal le plus proche. Pour activer ou désactiver l'effet d'« alignement sur la grille », sélectionnez Affichage >Grille > Aligner sur la grille. Il est également possible de modifier la distance entre les lignes de la grille. Pour cela, saisissez les valeurs souhaitées pour Espacement grille principale et Incréments grille secondaire dans la zone Grille de l'onglet Position de l'Inspecteur. Une astuce consiste à définir l'espacement de la grille principale sur la taille de l'appareil (ici, 768 pt) et les incréments de grille secondaire sur un diviseur pair, par exemple 32 pt ou 64 pt. Vous pouvez créer rapidement des modèles à 2, 3 et 4 colonnes en alignant les objets sur le quadrillage dans le sens horizontal et vertical, ainsi que tel que décrit dans les instructions ci-dessous. Règles Les règles horizontales et verticales affichent des repères pour suivre la position du pointeur dès que vous déplacez celui-ci sur le modèle. Lorsque vous déplacez un objet, par exemple une rubrique ou un bouton, les règles affichent également la zone de cet objet, ce qui vous aide à voir le volume qu'il occupe. Pour afficher les règles, sélectionnez Affichage > Règles.

Page 15: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 15

Guides Après avoir défini le pas de la grille pour votre modèle, placez des guides sur celui-ci pour indiquer les colonnes et les rangées, puis activez le partage des guides pour les réutiliser dans d'autres modèles. Pour ajouter des guides à votre modèle, cliquez sur la règle à gauche ou en haut du modèle, puis déplacez-la à l'emplacement souhaité. Pour ajuster la position des guides, cliquez sur un guide existant et déplacez-le. Sa position apparaît dans la règle correspondante, ainsi que dans l'onglet Position de l'Inspecteur. Vous pouvez partager les guides avec tous les modèles. Cela se révèle utile lorsqu'il vous faut positionner des éléments à l'identique dans plusieurs modèles. Vous pouvez également verrouiller ou supprimer des guides. Pour ce faire, sélectionnez un guide et cliquez sur le bouton droit de la souris ou cliquez sur le guide tout en maintenant la touche Ctrl enfoncée. Un menu contextuel apparaît dans lequel partager le guide, le verrouiller ou le supprimer. Vous pouvez également activer l'option Aligner sur les guides. Dans la mesure où les options Aligner sur la grille et Aligner sur les guides offrent des fonctions similaires, prenez en compte les points suivants :

• Choisissez entre Aligner sur les guides ou Aligner sur la grille mais n'utilisez pas ces deux options à la fois car vous ne parviendrez pas à discerner si vos éléments s'alignent sur un guide ou sur la grille.

• Utilisez la grille pour configurer vos guides, puis désactivez-la et utilisez l'option Aligner sur les guides uniquement pour créer votre modèle.

• Aidez-vous des guides pour indiquer les positions partagées sur les modèles et utilisez l'option Aligner sur la grille uniquement pour créer votre modèle.

Guides dynamiques Les guides dynamiques sont des lignes « à la volée » qui s'affichent lorsqu'un objet que vous déplacez, dessinez ou redimensionnez correspond à l'espacement, à l'alignement ou à la taille des autres objets du modèle. Ils vous aident à positionner et à redimensionner les objets en accord avec les autres éléments de votre modèle. Pour afficher ou masquer les guides dynamiques, sélectionnez Affichage > Guides dynamiques. Pour voir comment les guides dynamiques fonctionnent, activez-les, ajoutez plusieurs rubriques ou objets à un modèle, puis déplacez l'un des objets autour d'un autre objet. A mesure que l'objet déplacé s'aligne sur un autre objet, les guides dynamiques apparaissent et signalent l'alignement. Ensuite, redimensionnez un objet en déplaçant une zone de sélection. Les guides dynamiques apparaissent lorsque la taille de l'objet correspond à celle d'un autre objet ou lorsque l'un des bords s'aligne sur un autre objet.

Créer votre modèle Cette section décrit les étapes entrant dans la création d'un tableau de bord pour l'iPad. Tel que nous l'avons mentionné ci-dessus au sujet de l'orientation, il est essentiel de dimensionner automatiquement chaque élément pour que le modèle fonctionne comme prévu, à la fois en mode portrait et en mode paysage. Des conseils vous sont proposés ici pour le dimensionnement automatique.

Page 16: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 16

1. Ajouter une barre d'outils de type iOS

Dans iOS, la barre d'outils s'étend habituellement de manière horizontale, le long de la partie supérieure de la solution. Le calendrier ou l'application Mail de l'iPad fonctionnent ainsi. Pour ajouter à votre solution une barre d'outils de type iOS, modifiez l'en-tête qui a été automatiquement ajouté à la création de votre nouveau modèle. Cette section décrit comment modifier cette partie pour lui donner l'aspect et la convivialité d'une barre d'outils standard, comme celles que l'on trouve habituellement sur l'iPad.

Inspecteurs Pour simplifier l'utilisation d'un modèle, vous pouvez ouvrir plusieurs Inspecteurs en mode Modèle. Par exemple, affichez l'onglet Données d'un Inspecteur et l'onglet Apparence d'un autre Inspecteur pour accéder simultanément aux options de ces deux onglets. Pour ouvrir le premier Inspecteur, utilisez le raccourci clavier Cmd+I ou Ctrl+I, ou encore sélectionnez Affichage > Inspecteur. Pour ouvrir d'autres inspecteurs, sélectionnez Affichage > Nouvel inspecteur. De plus, vous pouvez travailler avec un seul Inspecteur et utiliser des raccourcis clavier (Cmd+1, Cmd+2 ou Cmd+3 sur Mac, ou Ctrl+1, Ctrl+2 ou Ctrl+3 sur Windows) pour accéder à chacun des onglets en fonction de vos besoins, ou encore ouvrir plusieurs Inspecteurs et utilisez ces mêmes raccourcis clavier pour passer de l'un à l'autre.

a. Redimensionner l'en-tête

Il existe deux manières de redimensionner l'en-tête : § Cliquez sur le bord inférieur de l'élément en-tête et déplacez-le en

surveillant la hauteur dans la zone Taille de l'onglet Position d'un Inspecteur. Choisissez ensuite une taille de 44 points.

§ Autre possibilité : cliquez sur l'étiquette de l'élément en-tête, à gauche du modèle, et modifiez la hauteur dans la zone Taille de l'onglet Position d'un Inspecteur.

b. Ajouter un titre à la barre d'outils

Il existe également deux manières d'ajouter un titre à la barre d'outils : § Sélectionnez l'outil Texte dans la barre d'outils, cliquez dans l'en-tête,

puis démarrez la saisie. Vous pouvez également sélectionner l'outil Texte, dessinez un rectangle dans l'en-tête, puis démarrez la saisie. Si votre texte est plus long que le rectangle, il s'étale sur une ou plusieurs lignes pour respecter la largeur définie.

§ Autre possibilité : activez l'outil de sélection et cliquez simplement dans l'en-tête pour démarrer la saisie.

Notez que si vous effectuez votre saisie dans une partie différente, par exemple le corps, la mise en forme par défaut du texte diffère de celle du texte saisi dans l'en-tête. Cette « prise de conscience » de l'endroit où vous effectuez votre saisie est une fonctionnalité des thèmes de FileMaker.

Page 17: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 17

Quelle que soit la méthode utilisée, centrez votre texte à la fois dans la zone de texte et sur le modèle : 1. Cliquez en dehors de la zone de texte (ou appuyez sur la touche Entrée de

votre clavier) pour revenir à l'outil de sélection. Ensuite, effectuez l'une des actions suivantes : § Utilisez le raccourci clavier Shift + Cmd + C ou Shift + Ctrl + C § Sélectionnez Format > Alignement > Centré. § Cliquez sur le bouton d'alignement centré dans la barre d'outils de

formatage. 2. Déplacez le titre au centre du modèle, tout en restant dans l'en-tête. Vous

pouvez calculer la position en soustrayant la largeur du titre de la largeur du modèle, en divisant par deux et en plaçant le bord gauche du titre sur la valeur obtenue. De même, alignez le titre sur un objet, par exemple une ligne ou un rectangle défini sur la même largeur que le modèle et se trouvant sur le bord gauche de celui-ci. Pour centrer le titre avec l'objet, déplacez le titre jusqu'à ce qu'un guide dynamique apparaisse pour indiquer que le centre du titre est aligné sur le centre de l'objet, ou sélectionnez à la fois l'objet et le titre et cliquez sur le bouton Centrer verticalement dans l'onglet Position de l'Inspecteur. Si vous déplacez le titre pour l'aligner sur l'objet et que d'autres objets se trouvent dans le modèle, des guides dynamiques peuvent apparaître. Assurez-vous d'aligner le titre sur le centre de l'objet et non sur les autres objets.

c. Ajouter un bouton à la barre d'outils

La plupart des applications iOS disposent de quelques boutons seulement dans la barre d'outils, par exemple un bouton pour ajouter un nouvel enregistrement et un bouton pour accéder à une zone différente ou une vue supérieure. Pour ce tableau de bord, ajoutez un bouton pour envoyer la liste de l'inventaire par email. Vous pouvez copier le bouton avec ce script dans le modèle Inventaire existant de la solution de démarrage Inventaire (dans le groupe de modèles Pro), ou suivre les étapes suivantes dans votre modèle :

1. A l'aide de l'outil Bouton de la barre d'outils, dessinez un bouton dans

l'angle supérieur droit de l'en-tête. 2. Paramétrez ce bouton pour exécuter le script Envoyer inventaire par email

et sélectionnez Quitter dans la liste déroulante Script actif :. Cliquez sur OK pour fermer la boîte de dialogue Configuration du bouton.

3. Saisissez Envoyer inventaire par email dans le nom du bouton. 4. Limitez la taille de la police à 14 pt, puis redimensionnez et positionnez le

bouton de sorte qu'il s'intègre dans l'en-tête et qu'il s'aligne sur les guides ou les objets appropriés du modèle.

5. Pour que votre bouton soit en accord avec le style de la barre d'outils, modifiez le dégradé du fond, ainsi que la couleur des lignes et du texte : a. Sélectionnez le bouton. Dans l'onglet Apparence de l'Inspecteur,

section Fond de la zone Graphismes, sélectionnez l'arrêt de dégradé situé à gauche et prélevez un échantillon ou positionnez-le sur la couleur supérieure de l'en-tête. (Pour obtenir un échantillon de la couleur, cliquez dans l'arrêt de dégradé et sélectionnez l'outil d'échantillonnage dans la palette de couleurs – cet outil ressemble à une loupe. Ensuite, déplacez la souris sur une zone. Celle-ci est agrandie dans l'outil d'échantillonnage. Dès que vous voyez la couleur que vous souhaitez utiliser, cliquez sur celle-ci. Ce faisant, vous définissez la couleur sélectionnée dans la zone dans laquelle vous

Page 18: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 18

travaillez. Dans le cas ci-présent, il s'agit de l'un des arrêts de dégradé.)

b. Sélectionnez l'arrêt de dégradé de droite et prélevez un échantillon ou appliquez-le à la couleur inférieure de l'en-tête.

c. Donnez à la ligne la couleur de la partie inférieure de l'en-tête. d. Donnez à la police la couleur de fond du corps de sorte qu'elle soit

bien visible sur les nouvelles couleurs du bouton.

A ce stade, votre en-tête ressemble à une barre d'outils iOS standard.

Figure 8 : En-tête avec titre et bouton

2. Ajouter une liste d'articles à réapprovisionner ou en stock Pour que le tableau de bord soit représentatif et utile, il doit fournir aux utilisateurs les informations dont ils ont immédiatement besoin, ainsi que les outils nécessaires pour réaliser leurs tâches, rapidement et simplement. Pour ce tableau de bord, il peut se révéler utile de voir une liste des articles à réapprovisionner ou en stock, ainsi qu'un graphique présentant un aperçu du stock. Création de la table et des liens Pour afficher la liste des articles à réapprovisionner ou en stock, nous devons tout d'abord ajouter une rubrique à la table Tableau de bord et un lien à la table Inventaire : 1. Ouvrez Gérer la base de données à l'aide des combinaisons de touche

Cmd+Maj+D ou Ctrl+Maj+D, ou sélectionnez Fichier > Gérer > Base de données….

2. Dans l'onglet Rubriques, créez une rubrique Texte stockée de manière globale dans la table Tableau de bord et appelez-la « DisponibilitéTableaudebord ».

3. Dans l'onglet Liens, créez un lien entre l'occurrence de table Inventaire et la nouvelle occurrence de table Tableau de bord : a. Cliquez et tracez une ligne allant de DisponibilitéTableaudebord dans

l'occurrence de table Tableau de bord à Disponibilité dans l'occurrence de table Inventaire (vous devrez peut-être faire défiler vers le bas la liste des rubriques dans l'occurrence de table Inventaire pour afficher Disponibilité).

b. Vous pouvez aussi sélectionner l'outil Créer un lien dans la partie inférieure gauche de la fenêtre Gérer la base de données, choisir les occurrences de table dans chaque colonne, puis sélectionner la rubrique Disponibilité dans la colonne Inventaire et DisponibilitéTableaudebord dans la colonne Tableau de bord.

4. Modifiez la relation et adoptez une relation cartésienne, à savoir le signe « x » situé dans la partie inférieure de la liste déroulante entre les colonnes des tables. (Si vous avez créé le lien à l'aide de l'étape 4a ci-dessus, double-cliquez tout

Page 19: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 19

d'abord sur la ligne du lien pour ouvrir la boîte de dialogue Modifier le lien, puis sélectionnez le signe « x » comme opérateur cartésien.)

Figure 9 : Sélection d'un lien cartésien

5. Cliquez sur OK pour fermer la boîte de dialogue Gérer la base de données.

Figure 10 : Occurrences de table avec liens sur graphe de liens

Page 20: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 20

Création d'une table externe Ensuite, ajoutez une table externe basée sur cette nouvelle relation : 1. En mode Modèle, ajoutez des guides si vous ne l'avez pas déjà fait. Placez-les à

15 pt, 500 pt, 515 pt et 751 pt. Cela vous permettra de diviser efficacement le modèle en 2/3 et 1/3 avec une bordure à 15 pt à gauche et à droite et un intervalle de 15 pt entre les « colonnes ».

2. Sélectionnez l'outil Table externe dans la barre d'outils, puis créez une table externe dans le modèle.

3. Lorsque la boîte de dialogue de configuration de la table externe apparaît, sélectionnez Inventaire dans la liste déroulante Afficher les enregistrements liés de :.

Figure 11 : Ajout d'une table externe au modèle

4. Cochez la case Barre de défilement vertical. 5. Cliquez sur le bouton Définir en regard de Filtrer les enregistrements de la table

externe. 6. Dans la zone Calcul, saisissez la formule suivante :

Tableau de bord::DisponibilitéTableaudebord = Inventaire::Disponibilité (Nous ajouterons ultérieurement des boutons pour définir la valeur de Tableaudebord::DisponibilitéTableaudebord.)

Page 21: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 21

Figure 12 : Calcul du filtre

7. Cliquez sur OK. 8. Dans Nombre de rangées, saisissez 7, puis cliquez sur OK.

Figure 13 : Boîte de dialogue Table externe

Page 22: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 22

9. Dans la boîte de dialogue Ajouter des rubriques à la table externe, déplacez les rubriques suivantes dans la colonne Rubriques incluses : • Image | Conteneur • Article • Unités en stock • Coût unitaire

Figure 14 : Sélection des rubriques de la table externe

10. Cliquez sur OK.

Dimensionnement de la table externe La nouvelle table externe figure à présent dans votre modèle. Vous devez sans doute l'aligner et la redimensionner. Tout d'abord, tout en surveillant l'onglet Position de l'Inspecteur pour référence, déplacez la table externe à 144 pt de la partie supérieure du modèle et à 15 pt de la partie gauche, tout en maintenant l'alignement sur le guide de gauche. Autre possibilité : plutôt que de déplacer la table externe, modifiez simplement les valeurs Haut et Gauche de l'Inspecteur. A présent, redimensionnez la table externe de sorte que le bord droit s'aligne sur le guide à 500 pt (ce qui donne à la table externe une largeur de 485 pt) et que le bord inférieur se trouve à 686 pt (ce qui lui donne une hauteur de 542 pt). A nouveau, vous pouvez saisir les valeurs appropriées dans l'onglet Position de l'Inspecteur, ou cliquer et déplacer les poignées de la table externe pour la redimensionner. Lorsque l'option Aligner sur les guides ou Aligner sur la grille est activée, il est parfois difficile de redimensionner la table externe aux dimensions exactes en déplaçant simplement les poignées. Mieux vaut alors modifier les valeurs dans l'Inspecteur.

Page 23: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 23

Figure 15 : Valeurs Position et Taille de la table externe dans l'Inspecteur Dimensionnement des rubriques Redimensionnez la rubrique Image | Conteneur pour qu'elle ait 70 pt de large et 70 pt de haut, puis redimensionnez les autres rubriques pour qu'elles puissent contenir dans la table externe. (Vous pouvez aussi définir Article sur une hauteur de 70 pt si vous prévoyez que les valeurs de cette rubrique vont nécessiter davantage d'espace.) De même, sélectionnez toutes les rubriques et supprimez le fond et la ligne (sélectionnez Aucun dans la liste déroulante Fond de l'onglet Apparence de l'Inspecteur, puis Aucune dans la liste déroulante Ligne ou cliquez sur la case Toutes les bordures située au-dessous de la liste déroulante Ligne). Vous obtenez un résultat similaire à celui présenté Figure 16 :

Page 24: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 24

Figure 16 : Paramétrage sur Aucun des attributs de ligne et de fond de la rubrique dans l'Inspecteur

Dimensionnement automatique de la table externe Pour que la table externe et son contenu s'étirent convenablement au moment où l'appareil pivote, nous devons configurer le dimensionnement automatique comme il se doit. Pour cela, sélectionnez la table externe (uniquement la table et non les rubriques), puis activez chaque verrou dans la zone Dimensionnement automatique de l'onglet Position de l'Inspecteur (un verrou activé prend la forme d'un verrou et un verrou désactivé est grisé et entouré d'une case vide).

Figure 17 : Paramètres Position et Dimensionnement automatique de la table externe dans l'Inspecteur

A présent, votre table externe va s'étirer et se contracter si besoin, à chaque fois que l'appareil va pivoter.

Page 25: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 25

Dimensionnement automatique des rubriques Le dimensionnement automatique des rubriques de la table externe diffère légèrement : La rubrique Image | Conteneur doit être ancrée en haut et à gauche. La rubrique Article au contraire doit être ancrée en haut et à la fois à gauche et à droite et les rubriques Coût unitaire et Unité en stock doivent être ancrées en haut et à droite. Lorsque la table externe s'étire, la rubrique Image | Conteneur conserve sa position tandis que la rubrique Article s'étire et que les rubriques Unité et Coût à l'unité opèrent un déplacement sur la droite pour prendre en compte la largeur de la rubrique Article. Pour toutes les rubriques de la table externe, désélectionnez la saisie de rubrique en mode Utilisation et Recherche (dans l'onglet Données de l'Inspecteur). Une fois la saisie de rubrique désactivée, les utilisateurs ne pourront plus entrer dans les rubriques ni modifier de valeur de rubrique lorsqu'ils toucheront une rangée. Ajout d'une ligne à la table externe Nous allons maintenant ajouter une ligne de séparation entre chaque rangée, ce qui rendra l'apparence du modèle encore plus appropriée sur iOS. Sélectionnez l'outil Ligne dans la barre d'outils, puis tracez une ligne le long de la partie inférieure des rubriques, dans la première rangée de la table externe. Maintenez la touche Maj enfoncée tout en effectuant le tracé pour forcer la ligne à être horizontale. (Pour forcer une ligne à être verticale, maintenez la touche Maj enfoncée tout en effectuant le tracé de la ligne dans le sens vertical.) Déplacez et redimensionnez la ligne si nécessaire pour qu'elle contienne dans la rangée de la table externe, mais pas dans sa barre de défilement. A l'aide des options de dimensionnement automatique de l'onglet Position de l'Inspecteur, ancrez la ligne en haut, à gauche et à droite. De la sorte, la ligne s'étirera avec la table externe à chaque changement d'orientation. Ajout de titres à la table externe Nous allons à présent ajouter des titres à la table externe. Double-cliquez sur l'outil Texte dans la barre d'outils (le fait de double-cliquer verrouille l'utilisation de l'outil indéfiniment) et cliquez au-dessus de la rubrique Image | Conteneur. Saisissez Image. Cliquez au-dessus de chacune des autres rubriques, puis saisissez le titre approprié. Après le dernier titre, cliquez sur l'outil de sélection dans la barre d'outils pour relâcher l'outil Texte (ou appuyez deux fois sur Entrée – et non sur Retour). Déplacez chaque titre sur son emplacement définitif en vous aidant des guides dynamiques pour les aligner sur les autres titres et sur les rubriques appropriées, puis positionnez chacun d'entre eux à 120 pt de la partie supérieure. Les rubriques de ce thème possèdent une marge intérieure de 5 pt de chaque côté. Assurez-vous d'aligner les titres en conséquence. Pour libérer de l'espace, les titres peuvent être définis avec une taille de police de 16 pt. Déplacez le pointeur de la souris sur tous les titres pour les sélectionner (notez que si vous touchez un autre élément, celui-ci sera intégré à la sélection). Modifiez la taille de la police en sélectionnant une taille personnalisée dans la barre d'outils de formatage ou en allant dans Format > Taille. (Il est également possible de définir la plupart des tailles de police à l'aide des raccourcis clavier Cmd+9 ou Ctrl+9 pour diminuer la taille ou Cmd+0 ou Ctrl+0 pour augmenter la taille.) Pour donner l'impression que les titres et la table externe appartiennent au même objet, sélectionnez l'outil Rectangle arrondi dans la barre d'outils, puis tracez un

Page 26: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 26

rectangle autour des titres. Redimensionnez le rectangle dessiné pour qu'il ait la même largeur que la table externe et donnez-lui une hauteur de 34 pt. Positionnez-le à 112 pt de la partie supérieure et alignez-le sur la gauche de la table externe, entre les guides. Placez le rectangle à l'arrière, derrière les titres. Ensuite, copiez le style de la table externe. Pour cela, cliquez sur le bouton Copier le style de l'objet dans la section Style de l'onglet Apparence, puis appliquez-le au rectangle dessiné en sélectionnant le rectangle et en cliquant sur le bouton Coller le style. Les titres ressortiront davantage si une couleur de fond est appliquée au rectangle. Essayez une couleur en accord avec la couleur du corps mais avec une saturation légèrement plus faible et une luminosité légèrement plus forte. Enfin, désactivez l'angle inférieur gauche et l'angle inférieur droit du rectangle à l'aide des paramètres de rayon d'angle de l'onglet Apparence de l'Inspecteur. Sélectionnez ensuite la table externe, puis désactivez son angle supérieur gauche et son angle supérieur droit.

Angles Dans ces instructions, nous utilisons la valeur 5 par défaut pour les angles. Essayez des valeurs inférieures et supérieures dans votre modèle pour voir ce qui convient le mieux, tout particulièrement avec les groupes de rubriques. Les valeurs supérieures fonctionnent mieux sur iPad que sur iPhone, par exemple.

Alignement des titres et des rubriques Pour rendre la table externe encore plus attrayante d'un point de vue visuel, alignez les rubriques Unités en stock et Coût unitaire ainsi que les titres sur la droite, puis alignez physiquement chaque titre sur le bord droit de sa rubrique moins 5 pt (correspondant à la marge intérieure des rubriques de ce thème). A ce stade, votre modèle doit ressembler à celui présenté Figure 18 :

Figure 18 : Alignement des rubriques sur les titres

Page 27: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 27

Données Pour afficher les données de la table externe, ajoutez des enregistrements à la table Inventaire à l'aide du modèle Détails du produit du groupe de modèles Pro. Veillez à bien renseigner la catégorie, l'article et le coût unitaire. De même, ajoutez une image à chaque enregistrement. Sur la plupart des enregistrements mais pas sur tous, cliquez sur Ajouter une transaction pour ajouter au moins une entrée avec la date, le numéro du lot, la description, la quantité entrante et/ou la quantité sortante. Certains enregistrements auront ainsi un statut « En stock » et d'autres, un statut « Réapprovisionnement nécessaire » (le calcul étant effectué dans la rubrique Disponibilité, d'après les rubriques Unités en stock et Niveau de réapprovisionnement). Après avoir créé les enregistrements d'inventaire, retournez dans Tableau de bord d'inventaire iPad pour poursuivre la création de votre modèle.

3. Ajouter des boutons pour modifier les articles affichés dans la table externe

Dans la mesure où la table externe possède un filtre basé sur la valeur de la rubrique DisponibilitéTableaudebord, les utilisateurs doivent pouvoir définir la valeur sur « Réapprov. nécessaire » ou sur « En stock » qui sont les valeurs possibles de la rubrique Disponibilité dans la table Inventaire. Pour aider les utilisateurs, créez deux boutons au-dessus de la table externe. Le premier bouton doit exécuter l'action Définir rubrique pour définir DisponiblitéTableaudebord sur « Réapprov. nécessaire ». Appelez-le « Réapprov. nécessaire ». De même, le deuxième bouton doit exécuter l'action Définir rubrique pour définir DisponiblitéTableaudebord sur « En stock ». Appelez-le « En stock ». Pour que vos boutons aient l'air d'appartenir à un seul et même objet, faites en sorte que leur largeur soit exactement la moitié de celle de la table externe (dans le cas ci-présent, chaque bouton a une largeur de 242,5 pt). Alignez le premier bouton sur le guide de gauche situé à 15 pt et le bord droit du deuxième bouton sur le guide situé à 500 pt. Alignez ensuite les deux boutons à la même hauteur sur le modèle, à 59 pt de la partie supérieure. Cela permet de placer les boutons dans l'espace situé au-dessus de la table externe et de les aligner les uns par rapport aux autres, sans espace. Redimensionnez les boutons et donnez-leur une hauteur de 38 pt. Ensuite, à l'aide des paramètres de rayon d'angle de l'onglet Apparence de l'Inspecteur, désélectionnez l'angle supérieur droit et l'angle inférieur droit du premier bouton (côté gauche). Continuez en sélectionnant le deuxième bouton uniquement, puis désélectionnez l'angle supérieur gauche et l'angle inférieur gauche. Enfin, définissez le dimensionnement automatique des deux boutons et ancrez-les uniquement dans la partie supérieure. Cela permet aux boutons de flotter à gauche et à droite et d'être centrés sur la table externe, pendant le changement d'orientation. Pour une réelle créativité et des points supplémentaires, définissez la mise en forme conditionnelle de chaque bouton si la rubrique DisponibilitéTableaudebord contient la valeur définie par le bouton. Etant donné que le texte se positionnera plus bas sur le bouton s'il est défini en gras par la mise en forme conditionnelle, choisissez plutôt de modifier la couleur du texte, les cadres ou le fond de l'arrière-plan.

Page 28: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 28

Configuration de DisponibilitéTableaudebord sur fichier ouvert Vous voulez que les utilisateurs puissent voir les articles définis sur Réapprovisionnement requis ou En stock lorsqu'ils accèdent au tableau de bord pour la première fois. Ajoutez donc une action au script qui exécute SurOuverturePremiereFenetre pour configurer la rubrique DisponibilitéTableaudebord sur la valeur appropriée.

4. Ajouter un bouton pour accéder aux détails des articles

Pour aider les utilisateurs à rechercher les détails de chaque article dans la table externe, ajoutez un bouton pour accéder à l'enregistrement lié : 1. Sélectionnez l'outil Bouton dans la barre d'outils, puis dessinez un bouton sur la

première rangée de la table externe (ne vous préoccupez pas de la taille à ce stade).

2. Dans la boîte de dialogue Configuration du bouton, sélectionnez Activer enregistrements liés.

3. Cliquez sur Définir et choisissez Inventaire dans la liste déroulante Obtenir l'enregistrement lié de :.

4. Dans la liste déroulante Afficher enreg. en utilisant le modèle :, sélectionnez Modèle, puis choisissez Détails du produit | iPad dans la boîte de dialogue Spécifier un modèle.

5. Cliquez sur OK pour fermer la boîte de dialogue Spécifier un modèle. 6. Cochez la case située en regard de l'option Afficher uniquement enreg. liés. 7. Cliquez sur OK pour fermer la boîte de dialogue Options "Activer enregistrements

liés". 8. Cliquez sur OK pour fermer la boîte de dialogue Configuration du bouton. 9. Cliquez en dehors du bouton pour le valider sans ajouter de titre. A ce stade, il se peut que le bouton cache la plupart des rubriques. Il vous faut le déplacer derrière les rubriques puis le mettre en forme pour qu'il ne détourne pas l'attention du reste du modèle. Pour déplacer le bouton derrière les rubriques, commencez par modifier sa taille de sorte qu'il remplisse la table externe et qu'il recouvre entièrement les rubriques sans empiéter sur la barre de défilement. Sélectionnez ensuite Organiser > Arrière-plan. Pour que le bouton se fonde dans l'arrière-plan, supprimez le fond, la ligne et les rayons d'angle du bouton dans l'onglet Apparence de l'Inspecteur. De même, ancrez le bouton en haut, à gauche et à droite de sorte qu'il puisse être recadré et agrandi avec la table externe lorsque l'orientation change. N'oubliez pas que vous avez désélectionné la saisie de rubrique en mode Utilisation et Recherche concernant les rubriques de la table externe. Par conséquent, les utilisateurs ne peuvent pas entrer dans les rubriques lorsqu'ils touchent une rangée. Ils doivent toujours déclencher le bouton. Du fait que le bouton doit automatiquement être enfoncé, celui-ci s'affiche désormais dans toute la rangée de la table externe, derrière les rubriques, dès qu'un utilisateur touche la rangée (et ainsi le bouton). Notez que vous devrez ajouter un bouton au modèle Détails du produit | iPad pour retourner au modèle Tableau de bord.

Page 29: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 29

Pour avoir la garantie que les utilisateurs visualisent bien les données les plus récentes via le tableau de bord, créez un nouveau script appelé Actualiser et doté d'une seule action – Rafraîchir fenêtre [Vider résultats de jointure en mémoire cache]. Dans le modèle Tableau de bord d'inventaire iPad, activez les déclencheurs de script SurChargementEnregistrement et SurEntreeModele pour exécuter le script Actualiser. L'action Rafraîchir fenêtre possède des implications sur le Web Viewer ajouté à l'étape 7 ci-dessous. Reportez-vous à cette section pour en savoir plus.

5. Ajouter la valeur totale de l'inventaire Pour montrer aux utilisateurs la valeur totale de l'inventaire, créez une rubrique calcul dans la table Tableau de bord et insérez-y le calcul suivant :

Somme(Inventaire::Valeur du stock) Ajoutez la nouvelle rubrique au modèle, à droite de la table externe, et donnez-lui pour titre Valeur totale de l'inventaire. Dans l'onglet Données de l'Inspecteur, section Formatage des données, formatez la rubrique pour qu'elle accepte les devises, puis appliquez d'autres options en fonction de vos besoins (par exemple, un nombre fixe de 2 décimales et un séparateur des milliers). Redimensionnez la rubrique pour qu'elle contienne entre les guides qui forment la « colonne » droite du modèle, avec le bord gauche à 515 pt et le bord droit à 752 pt (ce qui conduit à une rubrique de 237 pt de large). Alignez la partie supérieure de la rubrique sur la table externe à 144 pt, puis le titre de la rubrique sur les titres situés au-dessus de la table externe. Ensuite, formatez la rubrique et le titre pour les centrer. Centrez-les l'un par rapport à l'autre, puis ancrez-les en haut et à droite uniquement. Ce faisant, vous maintenez le titre et la rubrique à droite de la table externe lorsque l'orientation change. Enfin, dans l'onglet Données de l'Inspecteur, décochez les options de saisie de rubrique en mode Utilisation et en mode Recherche. Pour que le titre et la rubrique ressemble à la table externe, dupliquez la case située derrière les titres de la table externe, puis redimensionnez-la pour que sa largeur corresponde à celle de la rubrique Valeur totale. Alignez cette case entre les guides, centrez-la avec le texte et la rubrique et adoptez la même position en haut que la case d'origine (122 pt). Envoyez cette case à l'arrière-plan pour qu'elle figure derrière le titre et ancrez-la en haut et à droite.

6. Ajouter un graphique montrant les quantités d'articles dans chaque catégorie Un snapshot d'inventaire aidera les utilisateurs à comprendre la manière dont leur système fonctionne. Ce graphique est basé sur une nouvelle rubrique statistique dans Inventaire qui calcule le total de la rubrique Unités en stock. Créez cette rubrique dans Inventaire avant d'ajouter le graphique au modèle (cette rubrique s'appelle sUnitésdisponibles dans la liste ci-dessous). Pour ajouter le graphique en mode Modèle, sélectionnez l'outil Graphique dans la barre d'outils, puis dessinez un rectangle à droite de la table externe. Dans la boîte de dialogue Configuration du graphique, formatez la zone graphique de la manière suivante :

• Titre du graphique : Quantité par catégorie • Type de graphique : Barres • Titre de l'axe des abscisses : Quantité

Page 30: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 30

• Données de l'axe des abscisses, indiquez le calcul : Recapitulatif(Inventaire::sUnitésdisponibles; Inventaire::Catégorie)

• Titre de l'axe des ordonnées : Catégorie • Données de l'axe des ordonnées, indiquez le nom de la rubrique :

Inventaire::Catégorie • Afficher les points de données sur le graphique

Cliquez sur la zone Styles et modifiez la Taille de texte relative, tout en bas. Donnez-lui la valeur -1. Cliquez sur Source de données et sélectionnez les options suivantes :

• Données de graphique : Enregistrements liés • Table liée : Inventaire • Définissez Ordre de tri des enregistrements liés comme catégorie • Affichage du graphique après le tri : Groupes récapitulatifs des

enregistrements

Figure 19 : Les trois sections de la boîte de dialogue Configuration du graphique

Page 31: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 31

Cliquez sur Terminé pour fermer la boîte de dialogue Configuration du graphique. A présent, redimensionnez le graphique pour qu'il contienne dans la deuxième « colonne » créée par les guides dans votre modèle, avec le bord gauche aligné sur le guide à 515 pt et le bord droit aligné à 752 pt. La hauteur souhaitée dépendra en partie du nombre de catégories affectées aux articles du stock, ainsi que de l'espace disponible. Pour l'instant, donnez au graphique une hauteur de 229 pt. Alignez le bord supérieur à 192 pt (cela crée un intervalle de 15 pt entre la partie inférieure de la rubrique total d'inventaire et la partie supérieure du graphique, tout comme cela reflète l'intervalle entre les boutons et la case du titre, au-dessus de la table externe).

7. Ajouter une carte indiquant l'emplacement actuel de l'utilisateur

Pour donner à l'utilisateur encore plus d'informations et lui permettre de profiter de la fonction Emplacement de FileMaker Go, ajoutez un Web Viewer qui signale l'emplacement actuel de l'utilisateur sur une carte. Pour ajouter un Web Viewer, sélectionnez l'outil Web Viewer dans la barre d'outils, puis dessinez un rectangle en direction de la partie inférieure de la deuxième « colonne ». Dans la zone Adresse Web de la boîte de dialogue Web Viewer, indiquez le calcul suivant : Definir(p = Obtenir(PlateformeSystème); Si(p = 3; "https://maps.google.com/maps?q=" & MotsDebut ( Substituer(Emplacement(10; 5); " "; "") ; 4 ); "data:text/html, <body>Vous utilisez un " & Si(p > 0; "Mac"; "ordinateur sous Windows") & "... Ouvrir ce fichier sur un appareil iOS pour afficher une carte de votre emplacement. </body>" ) ) Ce calcul permet, sur un appareil iOS, de pointer vers l'adresse URL d'une carte Google Maps indiquant la latitude et la longitude de l'appareil utilisé, avec une précision de 10 mètres. Notez que les fonctions Emplacement et ValeursEmplacement n'entraînent aucun calcul dans FileMaker Pro lorsque l'application est utilisée sur un ordinateur de bureau ou un ordinateur portable. Le reste du calcul affiche un message au lieu d'appeler une adresse URL qui ne serait pas correcte. Cliquez sur OK pour fermer la boîte de dialogue Configuration du Web Viewer, puis redimensionnez le Web Viewer en lui donnant une largeur identique à celle du graphique (237 pt) et une hauteur de 217 pt. Alignez ensuite le bord gauche à 515 pt et la partie supérieure à 468 pt. Ancrez le Web Viewer en haut et à droite, de sorte qu'il reste accroché au graphique, sur le bord droit, lorsque l'orientation change. Pour plus d'harmonie avec la table externe et la rubrique Valeur totale, dupliquez le titre et la case située au-dessus de la rubrique Valeur totale, puis placez-les à 436 pt de la partie supérieure (groupez-les pour voir la valeur supérieure, puis dégroupez-les pour continuer à travailler). A nouveau, cela laisse un espace de 15 pt entre le graphique et la case de titre de la carte, reflétant ainsi les autres intervalles horizontaux et verticaux. Modifiez le titre et saisissez Votre emplacement.

Page 32: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 32

Il s'agit d'une carte. Les utilisateurs voudront y cliquer dessus et l'agrandir. La carte Google Maps inclut des boutons pour la gestion. Il serait donc contre-productif d'ajouter un bouton directement dans la carte. Au lieu de cela, transformez en bouton la case de titre située au-dessus de la carte. Cliquez sur la case avec le bouton droit de la souris et sélectionnez Configuration du bouton. Définissez le bouton pour qu'il exécute l'action de script Ouvrir URL, sans boîte de dialogue, et indiquez l'URL suivante :

Definir ( L = MotsDebut ( Substituer(Emplacement(10; 5); " "; "") ; 4 ); Si(Obtenir(VersionSystème) ≥ 6; "maps://?ll="; "https://maps.google.com/maps?q=") & L )

Ce calcul démarre avec la fonction Définir qui déclare la variable L (pour l'emplacement) suite au résultat de la fonction Emplacement. Il teste ensuite la version du système pour lier les cartes d'Apple sur iOS 6 ou toute version supérieure aux cartes Google Maps sur des versions iOS antérieures à la version 6. Pour obtenir un zoom sur la carte différent du niveau de zoom par défaut (qui est de 15 sur les cartes Apple et Google Maps), ajoutez l'instruction suivante à la fin de l'URL :

& “&z=19” //pour effectuer un zoom avant (plus le nombre est important, plus le zoom est élevé) – ou – & “&z=10” //pour effectuer un zoom arrière

Pour indiquer aux utilisateurs qu'ils peuvent toucher la barre de titre pour afficher une carte plus grande, ajoutez un rectangle de 30 pt de large et de 30 pt de haut. Placez-le à 438 pt de la partie supérieure et à 720 pt de la partie gauche, soit à 2 pt du bord supérieur et du bord droit de la case de titre. Appliquez un fond d'image au rectangle dans la section Graphismes de l'onglet Apparence de l'Inspecteur et sélectionnez un graphique de carte. (Des graphiques de carte sont disponibles en ligne si vous n'en disposez d'aucun ou vous pouvez capturer une image d'une partie de la carte correspondant à l'emplacement de votre société.) Choisissez Sélectionner pour ajuster dans la liste déroulante située sous l'aperçu de l'image. Ancrez le rectangle en haut et à droite pour qu'il se déplace avec la case de titre. Vous pouvez attacher le bouton au rectangle, mais sa taille est plus petite que la taille de 44 pt x 44 pt recommandée pour les dispositifs tactiles. Le graphique carte invite l'utilisateur à interagir. Grâce au bouton attaché à la barre de titre, l'utilisateur peut déclencher le script, même s'il touche le graphique latéralement. Une dernière remarque au sujet des performances : Le Web Viewer utilise une URL calculée englobant la fonction Emplacement. Il est donc actualisé en fonction d'un certain nombre d'événements : au moment d'accéder au modèle ou de l'actualiser, lorsque l'appareil iOS est réorienté, lorsque les utilisateurs retournent à la solution, lorsqu'ils actualisent l'écran manuellement, etc. Si vous préférez une actualisation moins fréquente, utilisez un script qui renvoie une URL avec l'emplacement actuel au moment où la carte doit être actualisée. Insérez-le dans le script Actualiser appelé par les déclencheurs de script du modèle, dans un script attaché à un bouton que les utilisateurs touchent pour mettre la carte à jour ou encore dans un script programmé avec une action de script Sur temporisation.

Page 33: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 33

8. Modèle final

Le modèle final doit ressembler à celui présenté Figure 20 :

Figure 20 : Modèle final

9. Que faire de l'espace restant ?

N'oubliez pas que, de par leur définition, les éléments de ce modèle s'étirent et font l'objet d'un recadrage en fonction de l'orientation. En mode portrait, vous disposez de suffisamment de place sous le Web Viewer pour afficher un autre élément de petite taille. Ajoutez par exemple :

• un graphique indiquant l'activité des ventes (d'après la rubrique Transactions de Stock::Unités Sortantes) au cours de l'heure, du jour ou de la semaine écoulée ;

• une table externe liée à la table Transactions de stock pour voir les enregistrements récemment ajoutés ;

• un Web Viewer affichant un graphique des prix du stock pour l'entreprise de l'utilisateur ;

• un panneau avec des onglets pour les remarques des clients, les rendez-vous et une liste des choses à faire (ce qui vous obligera à créer des tables et un autre schéma).

Page 34: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 34

Pour faire apparaître un élément dans cet espace, dimensionnez-le pour que sa largeur ne soit pas supérieure à celle du Web Viewer et que son titre ne soit pas plus grand que l'espace situé entre les parties inférieures des gabarits d'écran iPad (mode paysage) et iPad (mode portrait). En réalité, il doit être inférieur de 30 pt à cet espace pour maintenir un espace de 15 pt au-dessus et au-dessous. Ancrez l'élément en bas et à droite, puis placez-le derrière le Web Viewer et le titre pour le masquer entièrement. Faites en sorte que la partie inférieure de l'élément soit alignée sur la partie inférieure du Web Viewer. Lorsque l'iPad est en mode portrait, cet élément glisse vers le bas et reste visible sous la carte. En mode paysage, il est masqué derrière la carte.

10. Navigation automatique dans votre nouveau modèle Dans la solution de démarrage Inventaire, le fichier est défini pour exécuter un script appelé Déclencheur | sur ouverture première fenêtre lorsque l'utilisateur ouvre le fichier. Ce script intègre un test permettant de connaître la plate-forme utilisée et d'accéder au modèle approprié. A présent que vous avez créé un tableau de bord pour les utilisateurs d'iPad, modifiez ce script en intervenant sur la première action Activer modèle, après Si [Occurrences ( Obtenir ( VersionApplication ) ; "iPad" )], pour accéder à votre nouveau modèle. De plus, tel que nous l'avons suggéré plus haut, ajoutez une action pour définir la rubrique Tableau de bord::DisponibilitéTableaudebord avec Réapprov. nécessaire ou En stock, en fonction des produits que vous souhaitez que les utilisateurs affichent lorsqu'ils accèdent pour la première fois au modèle Tableau de bord d'inventaire iPad. Si vous utilisez un fichier différent, assurez-vous d'utiliser un déclencheur de script SurOuverturePremiereFenetre, dans Fichier > Options de fichier… > Déclencheurs de script. Configurez le tout pour exécuter un script qui permet de connaître la plate-forme utilisée, de naviguer jusqu'au modèle approprié et de définir la rubrique.

Votre propre solution – Faire une dernière révision Une fois la conception de votre solution terminée, demandez à un concepteur professionnel d'en assurer la révision avec vous. Posez-vous alors les questions suivantes : • Votre conception est-elle équilibrée ?

o Un côté de la page est-il plus dense ou plus sombre que l'autre ? Que dire de la partie supérieure et de la partie inférieure ? Le passage d'un modèle à l'autre est-il correct ? Si oui, cela aide-il l'utilisateur à comprendre la page ? Cela le gêne-t-il au contraire ?

o Avez-vous limité le nombre de couleurs pour n'utiliser que celles qui représentent vos informations et/ou votre marque ?

o Avez-vous utilisé les cases et les lignes avec modération ? Certaines d'entre elles ne pourraient-elles pas être remplacées par un espace uniquement ?

• La hiérarchie utilisée est-elle claire d'un point de vue visuel ? o Plissez les yeux. Vers quelle partie votre œil est-il attiré en premier ? Quels sont

les éléments qui se détachent sur la page ? S'agit-il des éléments les plus importants pour les tâches que l'utilisateur effectue en priorité ?

o Les instructions sur la page sont-elles claires ? Correspondent-elles au flux de tâches de votre utilisateur ?

• La navigation est-elle cohérente et facile à comprendre ?

Page 35: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 35

o Avez-vous utilisé des éléments similaires de manière identique dans les modèles et d'un modèle à l'autre ?

o Vos icônes et vos éléments d'interface utilisateur ressemblent-ils à ceux d'autres logiciels utilisés ?

• Les icônes et la langue de l'interface utilisateur sont-elles claires, cohérentes et exemptes de fautes ?

Tester et déployer votre solution

Au moment de tester votre solution, il est aussi temps de voir comment elle sera déployée. Sera-t-elle hébergée sur FileMaker Server pour un accès à distance par les utilisateurs ? Fonctionne-t-elle comme une solution autonome à installer sur les appareils de chaque utilisateur ? Si oui, comment les utilisateurs obtiendront-ils une copie : via un lien sur une page Web, par email ou depuis un serveur ? Pour des instructions sur le déploiement, consultez le Guide de procédure FileMaker – Déploiement iOS simplifié, disponible sur le site TechNet de FileMaker.

Page 36: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 36

ANNEXE – Se familiariser avec les outils de conception FileMaker Si vous ne connaissez pas bien FileMaker Pro, il est important d'en comprendre les principes de base pour savoir utiliser les options et outils de conception proposés. Les options et outils de conception suivants sont disponibles dans FileMaker Pro. Chacun fait l'objet d'une démonstration ci-dessous à l'aide de la solution de démarrage FileMaker Gestion du contenu :

o Thèmes o Traitements de texte o Fonds – Arrière-plans de couleur unie, dégradés et images o Cadres et angles o Etats d'objet o Icônes et illustrations o Options d'accessibilité

Thèmes La solution FileMaker Pro est dotée de plusieurs thèmes tout spécialement conçus pour iPhone et iPad. Il s'agit des thèmes « Ambiance ». Ils incluent des arrière-plans coordonnés, des cadres, des polices, des effets d'ombre, etc. Voyons comment différents thèmes affectent la convivialité d'une solution :

1. Démarrez FileMaker Pro.

2. Allez dans Fichier > Nouveau à partir d'une solution de démarrage…

3. Sélectionnez Gestion du contenu.

4. Sélectionnez Affichage > Mode Modèle.

5. Sélectionnez Modèles > Modifier le thème…

6. Sélectionnez plusieurs thèmes dans la liste Thèmes de modèle pour afficher un aperçu de chaque thème.

7. Sélectionnez un thème commençant par «Ambiance» parmi ceux proposés pour voir les thèmes spécialement conçus pour une utilisation sur des applications iPhone et iPad. Notez ceux que vous préférez pour pouvoir les appliquer à votre solution à l'étape 4.

Figure 21 : Ambiance Onyx : thème utilisé dans la solution de démarrage Gestion du contenu.

Figure 22 : Thème Ambiance Gris glacé : thème tout spécialement conçu pour iPhone et iPad.

Page 37: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 37

Traitements de texte Pour votre solution, vous avez le choix entre de nombreuses options de police, de taille, de style, d'alignement, d'orientation et de couleur de texte. Pour essayer différents traitements de texte :

1. Sélectionnez Affichage > Mode Modèle.

2. Sélectionnez Affichage > Activer modèle > iPad > Détails du contenu | iPad.

3. Cliquez sur l'élément texte <<Titre>> pour le sélectionner.

4. Choisissez Format > Police, puis la police que vous préférez. Les solutions de démarrage FileMaker utilisent habituellement la police Helvetica Neue, une police qui s'affiche bien sur iPad et iPhone. Nous avons répertorié ici une courte liste de polices qui fonctionnent bien sur ces types d'appareil :

o Helvetica Neue o Verdana o Gils Sans o Times New Roman o Georgia o Courier New

5. Sélectionnez Format > Taille, Style, Alignement, Interligne, Orientation et Couleur de texte pour voir tous les attributs de texte avec lesquels travailler.

Figure 23 : Changement de la taille du texte

Page 38: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 38

Fonds – Couleurs unies, dégradés et images On entend par fonds des arrière-plans de couleur unie, des dégradés et des images, le tout applicable au texte, aux boutons, aux rubriques, aux objets, etc. Suivez les étapes ci-dessous pour tester les fonds disponibles :

1. Cliquez sur l'élément texte <<Titre>> pour le sélectionner.

2. Sélectionnez Affichage > Inspecteur (ou utilisez le raccourci clavier Cmd+I ou Ctrl+I) si l'Inspecteur n'est pas déjà affiché à l'écran.

3. Cliquez sur l'onglet Apparence.

4. Cliquez dans la liste déroulante Fond de la section Graphismes de l'Inspecteur.

Figure 24 : Ajout d'une couleur de fond

5. Sélectionnez un fond de couleur unie pour l'arrière-plan. Cliquez sur le sélecteur de couleur au-dessous et choisissez la couleur que vous préférez.

6. Sélectionnez un fond Dégradé pour voir l'effet produit, puis déplacez la glissière et intervenez sur les autres options disponibles pour modifier l'aspect du dégradé. Par exemple, regardez les boutons et les en-têtes des thèmes Onyx et Gris glacé. Ils sont conçus pour produire des effets différents.

Page 39: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 39

Utilisez un contraste plus fort entre les points d'arrêt de couleur de la barre de dégradé pour ajouter davantage de profondeur aux barres d'outils et aux boutons. Cependant pour les arrière-plans, sur l'objet de modèle lui-même, utilisez un contraste minimal entre les points d'arrêt de couleur pour un dégradé linéaire, ou encore un dégradé radial avec une distance très importante entre les points de départ et d'arrêt.

Mise en forme des cadres et des angles Il est possible d'appliquer un grand nombre de couleurs, de largeurs et de motifs différents aux cadres qui entourent le texte, les boutons, les rubriques, les objets, etc. Vous pouvez également modifier le rayon des angles de rubrique. Suivez les étapes ci-après pour modifier la mise en forme des cadres et des angles :

1. Cliquez sur la rubrique Type pour la sélectionner.

2. Ouvrez un Inspecteur si cela n'est pas déjà fait.

3. Cliquez sur l'onglet Apparence.

4. Cliquez dans la liste déroulante Ligne de la section Graphismes de l'Inspecteur.

Figure 25 : Modification des cadres

5. Sélectionnez Aucun, Continue, Pointillée (tirets) et Pointillée (points) pour observer la différence.

Page 40: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 40

6. Modifiez la taille de point de la ligne pour l'affiner ou l'épaissir.

7. Cliquez sur le sélecteur de couleur et choisissez la couleur que vous voulez pour le cadre.

8. Cliquez sur la rangée d'icônes située juste au-dessous pour voir la façon dont le cadre peut entièrement entourer la rubrique ou simplement apparaître à gauche, en haut, à droite ou en bas.

9. Pour changer le rayon d'angle, modifiez la valeur de la rubrique correspondante. Faites-la passer de 5 à 20 pour voir la façon dont la valeur la plus élevée arrondie l'angle. Testez des valeurs différentes pour voir les effets produits.

Figure 26 : Modification des angles

Page 41: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 41

Etats d'objet Pour donner à vos utilisateurs des commentaires visuels sur les actions qu'ils entreprennent en mode Utilisation, il est possible de mettre en forme les objets et de faire en sorte qu'ils affichent des attributs différents. Par exemple, vous pouvez mettre en forme un bouton pour qu'il affiche une couleur de fond différente (et toute autre mise en forme comme un cadre différent) lorsqu'un utilisateur appuie sur celui-ci. Pour définir un état d'objet :

1. Cliquez sur le texte Liste du contenu dans l'angle supérieur gauche du modèle.

2. Ouvrez un Inspecteur si cela n'est pas déjà fait.

3. Cliquez sur l'onglet Apparence.

4. Cliquez sur Etat normal et sélectionnez Survolé.

5. Sélectionnez un fond de couleur unie, puis la couleur que vous préférez. De même, vous pouvez modifier la luminosité de la couleur par tranche de 25 %, ou encore accroître la bordure de 1 à 2 points pour la rendre plus lumineuse.

Figure 27 : Modification de l'état d'un objet

Page 42: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 42

Figure 28 : Bouton affichant des paramètres survolés

Cela permet de modifier la couleur du texte Liste de contenu lorsqu'un utilisateur le survole en mode Utilisation.

6. Choisissez chacune des options proposées dans la liste déroulante, puis testez-les avec plusieurs mises en forme :

a. État normal : L'objet est à la disposition de l'utilisateur, mais n'est pas actuellement sélectionné.

b. Sélectionné : L'objet a été activé.

c. Survolé : L'utilisateur marque une pause sur l'objet avec son pointeur (Mac et Windows uniquement, pas iOS).

d. Cliqué : L'utilisateur a cliqué sur l'objet ou l'a touché mais il n'a pas relâché la pression.

Icônes et illustrations Les icônes vous permettent d'économiser de l'espace et fonctionnent dans plusieurs langues. Effectuez une recherche d'images sur Internet. Vous allez trouver de nombreux exemples qui représentent une action en particulier. Outre les icônes, un logo d'école ou de société rendra la solution plus personnelle et renforcera l'idée de marque. Ceci étant dit, utilisez des icônes et des images à chaque fois que possible. Faites en sorte qu'elles soient cohérentes avec les attentes de l'appareil sur lequel la solution sera principalement utilisée. Elles doivent prendre en charge les tâches tout en les facilitant. Elles ne doivent jamais détourner votre attention de l'objectif de la solution.

Page 43: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 43

De même, méfiez-vous de certains symboles couramment utilisés. Ils sont parfois mal interprétés dans certains contextes. Pour ne pas tomber dans ce piège, testez vos icônes auprès d'un public varié. Les icônes pour iOS disposent habituellement d'une source d'éclairage, située directement au-dessus du centre. Par exemple, voici l’icône FileMaker Go pour iPad et iPhone, ainsi que l'icône de l’application iOS Météo :

Figure 29 : Icônes iOS avec impression d'éclairage vertical Si vous créez vos propres icônes et graphiques, pensez à appliquer des effets pour simuler une impression d'éclairage vertical. Avec un écran Retina, la résolution de toutes vos illustrations et images doit être suffisamment élevée pour éviter tout effet de flou. Toutefois, n'oubliez pas que plus l'image est grande, plus elle est longue à charger. En règle générale, utilisez des images de 144 ppp. Positionnez les icônes de manière cohérente sur les modèles. Les utilisateurs s'attendent à trouver les éléments et les objets d'action plus ou moins au même endroit d'un modèle à l'autre. Même si deux modèles ont des données et des objectifs radicalement différents, le positionnement cohérent des boutons de navigation, des icônes, etc. aidera les utilisateurs à comprendre à ce qu'ils voient, ainsi qu'à utiliser la solution efficacement. Ouvrez différentes solutions de démarrage FileMaker et observez le positionnement, la mise en forme et le dimensionnement des icônes en fonction de l'appareil utilisé. De plus, Apple propose des instructions sur la création d'icônes et d'images personnalisées dans sa Bibliothèque du développeur iOS. Accessibilité Pour la plupart des utilisateurs, verrouillez le niveau de zoom à 100 % car vous avez déjà tout dimensionné pour un fonctionnement correct sur l'appareil. Il est possible d'autoriser les personnes malvoyantes à utiliser un niveau de zoom plus élevé. Auquel cas, vous devez activer le zoom pour ces utilisateurs. Pour définir, verrouiller ou déverrouiller le niveau de zoom, utilisez l'action de script Agrandir/réduire et ses options. Il peut se révéler utile d'inclure une table des utilisateurs dans votre système pour savoir si le zoom doit ou non être activé pour certains. Dès qu'un utilisateur se connecte, un script compare son nom de compte aux noms stockés dans la table des utilisateurs. Le script doit ensuite définir le niveau de zoom et les options d'après les paramètres stockés pour l'utilisateur concerné. De même, le premier modèle auquel les utilisateurs accèdent en se connectant pourrait contenir un bouton qu'ils leur faudraient toucher ou sur lequel ils devraient cliquer pour

Page 44: Pratiques recommandées de conception de solutions métiers personnalisées pour iPad et iPhone

Guide pratique FileMaker – Conception de solutions métiers personnalisées pour iPad et iPhone 44

choisir si travailler ou non avec le zoom. Bien entendu, ce bouton serait mis en forme pour aider les utilisateurs malvoyants. Ressources Voici la liste des ressources que nous avons utilisées dans la rédaction de cet article :

• Lignes directrices relatives à l'interface humaine iOS • Mobile First par Luke Wroblewski

D'autres guides pratiques FileMaker abordant un vaste choix de sujets, notamment le déploiement de la solution, la sécurité du groupe de travail et la synchronisation, sont disponibles au téléchargement sur le site : https://fmdev.filemaker.com/community/fr/ Les rubriques d'aide suivantes de l'application FileMaker Pro peuvent également vous aider dans la conception d'objets de modèle :

• Sélection d'objets • Utilisation de l'Inspecteur pour mettre en forme des objets • Copie, duplication et suppression d'objets • Copie d'attributs de style entre objets ou éléments de modèle • Déplacement d'objets sur un modèle • Redimensionnement et modification de la forme des objets • Configuration d'options de redimensionnement automatique pour les objets de

modèle • Définition du fond, du style de ligne et des cadres des objets • Définition de l'état d'affichage d'un objet • Remplissage d'un objet ou d'un élément de modèle à l'aide d'un dégradé de

couleurs • Remplissage d'un objet ou d'un élément de modèle à l'aide d'une image • Formatage de graphiques dans un modèle • Protection des objets contre les modifications • Appellation des objets • Définition de la mise en forme conditionnelle des objets de modèle

© 2014 FileMaker, Inc. Tous droits réservés. FileMaker est une marque de FileMaker, Inc. déposée aux Etats-Unis et dans d'autres pays. Le logo en forme de dossier est une marque de FileMaker, Inc. Toutes les autres marques sont la propriété de leurs détenteurs respectifs. Les caractéristiques et la disponibilité des produits sont sujettes à modification sans préavis. LE PRESENT DOCUMENT EST FOURNI « TEL QUEL », SANS GARANTIE D'AUCUNE SORTE, ET FILEMAKER DECLINE TOUTE GARANTIE, EXPLICITE OU IMPLICITE, Y COMPRIS, MAIS SANS QUE CETTE LISTE SOIT EXHAUSTIVE, TOUTE GARANTIE IMPLICITE DE QUALITE MARCHANDE OU D'ADEQUATION A UN USAGE PARTICULIER, OU TOUTE GARANTIE DE NON-CONTREFAÇON. EN AUCUN CAS FILEMAKER, INC. OU SES FOURNISSEURS NE SAURAIENT ETRE TENUS RESPONSABLES DE DOMMAGES, QUELLE QU'EN SOIT LA NATURE, Y COMPRIS DE DOMMAGES DIRECTS, INDIRECTS, FORTUITS, CONSECUTIFS A L'UTILISATION DU PRODUIT, AINSI QUE DE LA PERTE DE PROFITS, DE LA CESSATION D'ACTIVITE, OU DE DOMMAGES EN REPARATION OU SPECIAUX, MEME SI FILEMAKER, INC OU SES FOURNISSEURS ONT EU CONNAISSANCE DE LA POSSIBILITE DE TELS DOMMAGES. CERTAINS ETATS N'AUTORISENT PAS L'EXCLUSION OU LA LIMITATION DE RESPONSABILITES. FILEMAKER PEUT APPORTER DES MODIFICATIONS AU PRESENT DOCUMENT A TOUT MOMENT, SANS PREAVIS. LE PRESENT DOCUMENT N'EST PEUT-ETRE PAS A JOUR ET FILEMAKER NE S'ENGAGE PAS A METTRE A JOUR CES INFORMATIONS.