Navigation de l'app

Les écrans sont les pages ; la navigation est ce qui y conduit les gens. Dans Keplin, elle ne vit à l'intérieur d'aucun écran : c'est un document propre à l'app, dessiné dans un éditeur visuel et servi autour de n'importe quel écran ouvert.

Et elle se dessine par appareil : la barre supérieure de l'ordinateur, le tiroir du téléphone et la barre d'actions de la tablette sont trois designs indépendants, chacun avec ses menus.

#Ouvrir l'éditeur

Dans la sidebar de l'app, onglet UI, le premier élément s'appelle Navigation. Cliquez et il s'ouvre dans un onglet de l'espace de travail.

Ce que l'on voit au centre n'est pas un formulaire : c'est la page de l'app, dessinée telle qu'elle sera. La barre en haut, le contenu de l'écran en bas (Contenu de l'écran), la marque à gauche. Vous éditez en agissant dessus.

Sous le titre se trouvent les contrôles qui commandent ce que vous voyez :

Contrôle	Ce qu'il fait
Web (1280px) / Tablette (768px) / Mobile (390px)	Choisit l'appareil que vous êtes en train de dessiner.
Mode (tablette et téléphone seulement)	La forme de la navigation sur cet appareil.
Menu initial	Lequel des menus s'ouvre quand quelqu'un entre dans l'app.

#Les gestes

Geste	Ce qui se passe
Clic sur un menu	Le sélectionne (et, dans un contexte, affiche sa barre latérale).
Double clic sur un menu	Ouvre la fenêtre Élément sélectionné, où tout se modifie.
Glisser un menu	Le déplace de zone ou le réordonne. Il ne se lâche que là où c'est valide.
+	Ajoute un menu à cet endroit.
× dans le coin d'un menu	Le retire.
Clic sur la marque	Ouvre la fenêtre Logo de l'app.

#Les types de menu

Le bouton + de chaque zone montre les types que cet endroit accepte :

Type	Ce que c'est
Menu	Mène à un écran de l'app. C'est l'élément normal.
Sous-menu	Regroupe d'autres menus — dans le tiroir et dans les barres latérales.
Contexte (sidebar)	Un menu qui, une fois choisi, active une barre latérale propre avec ses enfants. C'est comme si l'app était divisée en domaines.
Séparateur	Une ligne de séparation.
Menu de l'utilisateur	L'avatar de la personne connectée, avec ses entrées et la Déconnexion.
Notifications	La cloche, avec le décompte automatique des non lues.
Langue	Le sélecteur de langue : les langues de l'app, chacune dans son propre nom.
Zone de widgets	Un écran de barre dessiné dans la barre : une liste pour choisir l'entreprise, un résumé, une recherche.

Tous les types ne conviennent pas à tous les endroits, et l'éditeur ne propose que les valides : un contexte ne peut pas contenir un autre contexte, un sous-menu n'accepte que des éléments, le menu de l'utilisateur n'accepte que des éléments, des séparateurs et la langue, et le tiroir du téléphone n'a pas de contextes (il utilise des sous-menus).

#Les zones de la barre

Dans la barre supérieure, les menus se rangent en trois zones, et l'aide dans l'éditeur dit l'essentiel : Faites glisser les menus entre les zones de la barre (gauche / centre / droite) pour créer des groupes.

Zone	Usage habituel
Groupe à gauche	La navigation principale, juste après la marque.
Groupe au centre	Un groupe mis en avant. Si elle reste vide, elle ne prend pas de place.
Groupe à droite	Le menu de l'utilisateur, la cloche, des raccourcis.

À l'intérieur de la barre latérale d'un contexte — et dans le tiroir — les zones sont deux : Groupe du haut et Bas (celle-ci se colle en bas, pour que « Paramètres » et « Aide » soient là où on les attend).

#Créer un menu

1. Choisissez l'appareil dans la barre de contexte.
2. Cliquez sur le + de la zone où vous le voulez.
3. Choisissez le type.
4. Le menu naît avec un nom générique et reste sélectionné — faites-lui un double clic pour ouvrir la fenêtre Élément sélectionné.
5. Remplissez :

Champ	Ce que c'est
Icône	Une icône de la bibliothèque ou un SVG des assets de l'app.
Nom du menu	Le texte qui apparaît. C'est une phrase de l'app — elle entre dans les traductions.
Écran…	L'écran de destination (seulement dans Menu).
(paramètres)	Si l'écran de destination a des paramètres de route, un champ apparaît par paramètre pour lui donner une valeur fixe.
Icône seule (le nom apparaît en tooltip)	Ne laisse que l'icône dans la barre.

6. Fermez avec Terminé et enregistrez avec Enregistrer.

Le bouton Supprimer l'élément, dans la même fenêtre, supprime le menu.

#Contextes et barres latérales

Un Contexte (sidebar) est la façon de donner à un domaine de l'app son propre menu : vous choisissez « Ventes » dans la barre supérieure et la barre latérale avec les écrans de vente apparaît à gauche. Les enfants du contexte sont les éléments de cette barre.

Dans la fenêtre du contexte, la section Sidebar de ce contexte l'affine :

Champ	Options
Comportement	Fixe (toujours ouverte) · Rétractable (un bouton la réduit aux icônes) · Mini (icônes ; se développe au survol de la souris) · Mini avec panneau (le survol ouvre l'arborescence du menu)
Largeur	Entre 180 et 400 pixels.
Lors du développement (mode mini seulement)	Se superpose au contenu ou Pousse le contenu.
Réduite au départ (mode rétractable seulement)	Comment elle s'ouvre la première fois.

La barre latérale reste ouverte pendant la navigation dans la zone, y compris sur les pages qui ne sont dans aucun menu (un détail ouvert depuis une liste), et aussi après un rechargement. Un écran d'un autre contexte la remplace, et un élément de la barre supérieure sans contexte la ferme. Pour qu'une page de détail mette en évidence le bon menu même avec un lien direct, choisissez l'Écran parent dans les propriétés de l'écran, catégorie Navigation.

#Le menu de l'utilisateur

Le Menu de l'utilisateur est un élément comme les autres : il peut être dans la barre supérieure, à l'intérieur d'un contexte, dans le tiroir ou dans la barre compacte. Le sélectionner ouvre son popup, et c'est là qu'on ajoute des entrées avec le + (Menu, Séparateur ou Langue).

Dans la fenêtre restent les options qui ne sont pas visuelles :

Option	Ce qu'elle fait
Afficher le nom	Le nom de la personne connectée apparaît dans l'en-tête du menu.
Afficher l'utilisateur (login)	Le nom d'utilisateur aussi.
Option « Déconnexion »	Inclut la sortie à la fin du menu.
Texte de « Déconnexion »	Un texte à vous ; vide, il utilise Celui du système (traduit).

Sans icône, l'avatar affiche les initiales du nom — et c'est ce que le sélecteur d'icône appelle Aucune icône (initiales).

#Notifications

L'élément Notifications est la cloche : icône seule, avec la pill des non lues qui se met à jour toute seule. Le clic ouvre les dernières notifications et le Voir plus ouvre le panneau avec toutes. Dans la fenêtre, Notifications dans la dropdown décide combien apparaissent à la fois (entre 1 et 20).

#Langue

L'élément Langue est le sélecteur de langue. Il affiche les langues de l'app, définies dans la section Traductions des paramètres, chacune dans son propre nom (« Português », « English »), pour que quelqu'un qui ne comprend pas la langue actuelle trouve la sienne. Choisir une langue change les textes de l'app sans recharger la page, et le choix est enregistré sur l'appareil.

Il peut se placer dans la barre supérieure, dans une barre latérale, dans le tiroir, dans la barre compacte et dans la barre d'actions. Dans le Menu de l'utilisateur, il apparaît comme l'entrée « Langue · Français », qui ouvre la liste sur place. Dans la fenêtre, Afficher la langue utilisée décide ce que montre le bouton : Nom (Français) ou Code (FR).

Dans une app avec une seule langue, le sélecteur n'apparaît pas.

À la première visite, avant tout choix, l'app s'ouvre dans la langue du navigateur ou du téléphone si l'app l'a ; sinon, dans la langue de base. Un écran sans menus, comme celui de connexion, peut proposer le choix avec un bouton qui appelle keplin.i18n.setLocale.

#Zones de widgets

Une Zone de widgets place des widgets dans une barre : une liste pour choisir l'entreprise dans la barre supérieure, ou un résumé en bas de la barre latérale d'un contexte. Le contenu de la zone est un écran de l'app, dessiné dans le designer comme n'importe quel autre, avec la présentation Barre (zone de widgets).

Pour créer une zone de widgets :

1. Dans la section Écrans, créez un écran.
2. Dans les propriétés de l'écran, dans la catégorie Présentation, choisissez Barre (zone de widgets) dans Mode.
3. Dans Largeur (px) et Hauteur (px), définissez la taille de la zone. Par défaut, elle mesure 320 sur 48 pixels.
4. Dessinez les widgets.
5. Dans Navigation, cliquez sur le + de la zone de la barre où vous voulez la zone de widgets et choisissez Zone de widgets.
6. Double-cliquez sur l'élément et, dans Écran de la zone, choisissez l'écran de barre.
7. Cliquez sur Enregistrer.

L'emplacement de l'élément décide où la zone apparaît et à quelle taille :

Où est l'élément	Où apparaît la zone
Groupe à gauche, Groupe au centre ou Groupe à droite de la barre supérieure	Dans la barre supérieure, avec la largeur et la hauteur de l'écran.
Groupe du haut ou Bas de la barre latérale d'un contexte	Dans la barre latérale, avec la largeur de la barre et la hauteur de l'écran.
Tiroir	Dans le tiroir, avec la largeur du tiroir et la hauteur de l'écran.
Header	À côté de la marque, avec la largeur et la hauteur de l'écran.

La zone ne va pas dans la barre d'actions ni dans le menu de l'utilisateur. Dans une barre latérale réduite aux icônes, elle n'apparaît pas.

La zone reste ouverte pendant la navigation : les données se chargent une fois et le choix fait est conservé au changement de page. Dans KeplinGo, la zone fonctionne de la même façon dans le header et dans le tiroir.

#Relier la zone aux pages

La zone et les pages communiquent par l'état de l'app : des valeurs nommées, les mêmes sur tous les écrans. Par exemple, pour qu'une liste dans la barre supérieure filtre les pages par l'entreprise choisie :

1. Dans la liste de la zone, dans Liaison de données, choisissez État et saisissez la Clé entreprise.
2. Dans les pages, dans un filtre du datastore, choisissez la source État et saisissez la même clé. La liste relit les données quand le choix change.
3. Pour afficher la valeur, liez un Libellé à la même clé.

Le code des événements lit et écrit les mêmes valeurs avec keplin.state.

#Hauteur de la barre

La barre supérieure mesure 48 pixels de haut par défaut. Pour qu'une zone plus haute y tienne, changez Hauteur de la barre, dans les contrôles sous le titre de l'éditeur, pour une valeur entre 40 et 96 pixels. Chaque appareil a sa propre hauteur, et dans les modes compacts elle s'applique au header.

#Pills de valeur

N'importe quel menu (sauf les séparateurs et la cloche) peut afficher une pill avec un nombre vivant — les commandes à traiter à côté de « Commandes », les demandes en attente à côté de « Approbations ».

1. Dans la fenêtre de l'élément, activez Afficher la pill avec la valeur.
2. Choisissez l'API qui apporte les données (Choisir une API…).
3. Dans Valeur, choisissez Comptage (nb d'enregistrements) ou Champ du 1er enregistrement — dans ce cas, indiquez aussi le Champ.
4. Masquer si la valeur est vide ou à zéro évite la pill qui dit « 0 ».

La pill se met à jour en temps réel : quand les données changent, le nombre change — sans que personne recharge la page.

#Le logo de l'app

Cliquez sur la marque, à gauche de la barre, pour ouvrir la fenêtre Logo de l'app :

Champ	Ce qu'il fait
Icône ou image	Choisit une icône de la bibliothèque ou un fichier des assets de l'app.
Afficher le nom de l'app	Le nom à côté de la marque.
Cadrage dans la barre	Pour les images des assets (SVG, PNG, JPG, GIF ou WebP) : Échelle, Largeur du cadre, Hauteur du cadre et le positionnement en faisant glisser l'image.
Ajuster au cadre	Rétablit l'échelle et la position.
Sans cadrage	Désactive le cadrage.

Le cadrage est la réponse au logo qui « ne rentre pas » : vous glissez et mettez à l'échelle jusqu'à ce qu'il soit bien dans la barre, et la boîte de dialogue elle-même garantit que le fichier reste intact — le recadrage est seulement visuel et réversible. Le cadre fait 32 pixels de haut par défaut, dans une barre de 48 : un logo horizontal ne grandit que si vous augmentez la Hauteur du cadre (jusqu'à 44) ; la Largeur du cadre seule laisse du vide autour d'un petit logo. Sans cadrage, l'image tient dans un cadre de 24 pixels.

La bande d'aperçu de la boîte de dialogue utilise les vraies couleurs de la barre de l'app. Si la barre est sombre, le fichier du logo doit être la version claire (blanche) de la marque — le logo en couleur prévu pour un fond blanc disparaît sur la barre.

La zone du logo peut avoir une couleur de fond différente du reste de la barre du haut : c'est la couleur Fond de la zone du logo, dans le groupe Navigation du Thème des paramètres de l'app. Il n'y a pas de séparateur entre la zone du logo et les menus ; quand les deux couleurs diffèrent, le changement de couleur est la frontière. Cela vaut pour la barre du haut sur web et tablette ; dans la barre compacte et dans le tiroir, le logo suit la couleur de la barre.

La zone du logo n'est jamais plus étroite que la marque : avec une barre latérale mini ou repliée, les menus du haut commencent après la marque, et non par-dessus.

L'onglet du navigateur affiche « Nom de l'écran · Nom de l'app », et seulement « Nom de l'app » sur un écran sans nom ; sur la page de connexion, il affiche « Se connecter · Nom de l'app ».

#Menu initial

Menu initial, dans le coin supérieur droit, décide par où l'app s'ouvre. On choisit l'un des menus (pas un écran isolé), et le choix se fait par appareil — le téléphone peut s'ouvrir sur un panneau différent de celui de l'ordinateur.

Si un appareil n'a pas de choix propre, il hérite de celui du suivant (téléphone → tablette → web) ; et s'il n'y en a aucun, l'app s'ouvre sur le premier menu qui mène à un écran.

#Un design par appareil

Le Web est toujours une barre supérieure. La tablette et le téléphone ont un sélecteur Mode :

Mode	Ce que cela donne
Barre supérieure (tablette seulement)	Comme sur l'ordinateur : marque, menus et contextes dans une barre.
Menu hamburger	Une barre compacte avec le bouton ☰, qui ouvre le tiroir avec l'arborescence des menus.
Barre d'actions	Une barre en bas, style application mobile, avec jusqu'à 5 entrées — et sans tiroir.

Dans les modes compacts, il y a encore deux rangées propres :

• Le Header — jusqu'à 4 actions à côté de la marque (le menu de l'utilisateur et la cloche y vivent bien).
• La Barre d'actions — jusqu'à 5 entrées en bas, chacune un Bouton ou un Menu d'actions.

Quand la limite est atteinte, la plateforme dit pourquoi : La barre d'actions a déjà 5 éléments (maximum). / Le header accepte au maximum 4 actions.

#Qui voit quoi

L'éditeur dessine ; celui qui décide qui voit chaque menu, c'est Paramètres de l'app ▸ Permissions, dans l'onglet Menus — par rôle et par appareil.

La règle vaut la peine d'être connue : contrairement aux écrans, un menu est visible par défaut. La porte, c'est l'écran, et celle-là est déjà fermée ; masquer le menu sert à retirer un groupe entier de la vue, ou à retirer la cloche à qui ne reçoit rien. Masquer un groupe emporte ses enfants, et un élément qui pointe vers un écran inaccessible disparaît tout seul.

#Pourquoi ne… ?

• Pourquoi mes modifications ont-elles disparu ? Elles n'ont pas été enregistrées. La navigation a un bouton Enregistrer — et elle avertit avant que vous fermiez un onglet avec des modifications non enregistrées.
• Pourquoi n'arrivé-je pas à lâcher le menu où je veux ? Cet endroit n'accepte pas ce type. Les cibles invalides ne s'allument même pas : un contexte dans un contexte, un sous-menu dans un menu d'utilisateur, un séparateur dans la barre supérieure.
• Pourquoi je ne vois pas les menus sur le téléphone ? Le téléphone a sa propre arborescence et elle peut être vide. Choisissez Mobile (390px) et dessinez-la.
• Pourquoi un menu a-t-il disparu dans l'app publiée ? Soit il a été masqué dans Paramètres ▸ Permissions ▸ Menus pour ce rôle, soit il pointe vers un écran auquel cette personne n'a pas accès.
• Pourquoi le logo apparaît-il coupé ? Il a un cadrage. Ouvrez la fenêtre et utilisez Ajuster au cadre, ou Sans cadrage.
• Pourquoi n'arrivé-je pas à changer le type d'un menu ? Cela ne se change pas. Supprimez et recréez avec le bon type — c'est la seule opération que la plateforme ne vous laisse pas faire en cours de route.
• Pourquoi la pill affiche-t-elle toujours 0 ? Activez Masquer si la valeur est vide ou à zéro, ou vérifiez que l'API choisie renvoie bien des enregistrements.
• Pourquoi le logo paraît-il petit, avec du vide autour ? Le cadre fait 32 pixels de haut par défaut et un logo horizontal y tient avec peu de largeur. Augmentez la Hauteur du cadre (jusqu'à 44) plutôt que la largeur.
• Pourquoi ne vois-je pas le logo dans la barre ? Si la barre est sombre et que le fichier est la version couleur pour fond blanc, chargez dans Assets la version blanche de la marque et choisissez-la dans la boîte de dialogue.
• Pourquoi mon écran n'apparaît-il pas dans Écran de la zone ? Seuls apparaissent les écrans avec la présentation Barre (zone de widgets). Changez le Mode dans la catégorie Présentation des propriétés de l'écran.
• Pourquoi la zone de widgets n'apparaît-elle pas dans la barre latérale ? La barre est réduite aux icônes, et la zone n'y tient pas. Déployez la barre.