Layouts et design par appareil
Des templates réutilisables derrière les écrans, et un design propre pour le web, la tablette et le téléphone — sans héritage, avec des règles claires.
Deux choses de cette page se ressemblent et ne sont pas la même :
- Un layout est un design partagé par plusieurs écrans — l'en-tête, le cadre, le pied de page qui se répètent. On le fait une fois et on l'utilise partout.
- Un appareil est un design du même écran pour une autre taille — le web, la tablette, le téléphone. Chacun est indépendant.
L'un porte sur la réutilisation entre écrans ; l'autre sur le fait de servir le même écran sur des écrans de tailles différentes.
Layouts
Un layout est un document comme un écran — il a des widgets et peut avoir des datastores — mais sans route, sans paramètres et sans règles d'accès. On ne navigue pas vers un layout : il est le fond de celui qui l'utilise.
Créer un layout
- Dans la sidebar, onglet UI, section Écrans.
- Cliquez sur le bouton Nouveau layout, dans l'en-tête de la section (ou, dans le menu ⋯ d'un dossier, pour le créer à l'intérieur).
- Écrivez le Nom du layout — le champ suggère ex. : Base avec en-tête.
- Créer.
Le layout reste dans la même arborescence que les écrans (la note le dit : Le layout se place dans l'arborescence des écrans — faites-le glisser où vous voulez), avec une icône propre, et s'ouvre immédiatement dans un onglet.
Dessiner un layout
L'éditeur est le même que celui des écrans — palette, canvas, inspecteur, les mêmes gestes et les mêmes raccourcis (voir Le canvas). Les différences sont volontaires :
| Dans le layout | Pourquoi |
|---|---|
Le badge de l'en-tête affiche /layout. |
Un layout n'a pas de route. |
| Il n'y a ni Paramètres de route, ni Présentation, ni Événements de l'écran. | Rien de tout cela n'appartient au layout. |
| Au lieu de Template de l'écran, l'inspecteur a Template de base, avec la ligne Base. | Un layout peut reposer sur un autre. |
Nota
Les widgets d'un layout n'ont pas d'événements. Le layout est structure et apparence ; le comportement appartient à chaque écran — et c'est là qu'il s'écrit, même pour les widgets qui viennent du layout.
Mettre un layout sur un écran
- Ouvrez l'écran et cliquez sur une zone vide du canvas (l'inspecteur se met à montrer l'écran).
- Ouvrez la catégorie Template de l'écran.
- Sur la ligne Layout, choisissez le layout. Pour l'enlever, choisissez — sans layout —.
L'aide de la catégorie résume le contrat : Template derrière le contenu : les widgets du layout apparaissent verrouillés ; les propriétés et les événements se configurent par écran.
Ce qui change dans l'écran
Les widgets du layout se mettent à apparaître dans le canvas de l'écran, derrière son contenu, et avec un cadenas dans le coin. Ce que l'on peut et ne peut pas faire avec eux est une règle fixe :
| Dans l'écran, sur un widget du layout | |
|---|---|
| Déplacer, redimensionner, supprimer, dupliquer | Non. La position se modifie dans le layout lui-même. |
| Changer des propriétés (textes, couleurs, options) | Oui — et la modification n'appartient qu'à cet écran. |
| Visible / Actif | Oui, par écran. |
| Événements | Oui — le comportement appartient toujours à l'écran. |
| Accès et Valeurs de la phrase | Non. Ils se définissent dans le layout. |
L'inspecteur vous dit dans quelle situation vous êtes : Widget du layout : la position se modifie dans le layout ; les propriétés, la visibilité et les événements appartiennent à CET écran.
Sans « zones de contenu »
Il n'y a ni slots ni zones réservées : le contenu de l'écran est toujours dessiné par-dessus le layout. C'est celui qui dessine le layout qui laisse l'espace libre là où les écrans vont écrire — un en-tête en haut, une barre en bas, et le milieu vide.
Dica
Dessinez le layout avec le cœur vide et une marge généreuse. Un layout qui occupe le centre oblige tous les écrans à l'éviter pour toujours.
Collisions et chaînes
Deux règles que la plateforme vérifie et refuse d'enfreindre :
- Des ids et des noms uniques. Un écran et son layout ne peuvent pas avoir le même id de widget ni le même nom de datastore — Collision avec le layout : l'id de widget "…" existe dans les deux. Il n'y a pas de préfixes automatiques : le nom que vous avez choisi est le nom qui reste.
- Au maximum 3 niveaux, et sans boucles. Un layout peut reposer sur un autre (Template de base), mais la chaîne s'arrête à trois — La chaîne de layouts dépasse 3 niveaux. — et un cycle est refusé.
Quand le layout change
L'écran ne conserve que quel est le layout et les modifications qu'il a faites à ses widgets. Le design n'est pas copié — c'est pourquoi changer le layout change tous les écrans qui l'utilisent, sur-le-champ, dans l'app publiée.
Deux conséquences pratiques :
- Dans le constructeur, un onglet d'écran qui était déjà ouvert ne se met pas à jour tout seul quand vous enregistrez le layout : fermez et rouvrez l'écran pour le voir avec la nouvelle version.
- Supprimer un layout en usage n'est pas empêché. Les écrans qui l'utilisaient s'ouvrent désormais sans lui, avec l'avertissement Le layout associé n'existe plus. — ils ne cassent pas, mais ils se retrouvent sans le cadre.
Design par appareil
Un écran a trois designs possibles, un par appareil :
| Appareil | Largeur de référence |
|---|---|
| Web (1280px) | Ordinateur. |
| Tablette (768px) | Tablette, et fenêtres étroites. |
| Mobile (390px) | Téléphone. |
Ils se commutent avec les trois boutons à gauche de la barre du designer.
La grille est la même sur les trois — 48 colonnes — et ce qui change est la largeur de chaque colonne. Un widget de 24 colonnes occupe la moitié de la page sur n'importe quel appareil ; la hauteur, elle, se compte toujours en pixels.
Il n'y a pas d'héritage
C'est la règle qui explique tout le reste : chaque appareil a son arborescence de widgets, complète et indépendante. Il n'existe pas de « masquer sur le web et afficher sur le téléphone » entre arborescences — ce qui n'est pas dans l'arborescence d'un appareil n'existe pas sur cet appareil.
Le web existe toujours. La tablette et le téléphone peuvent être à dessiner — et dans ce cas l'app sert le design web, comprimé à la largeur réelle. C'est un repli pour servir, pas un héritage : ce sont toujours des designs séparés au moment de les modifier.
Commencer le design d'un appareil
Choisissez Tablette (768px) ou Mobile (390px) sur un écran qui ne les a pas encore et le designer affiche la carte Cet appareil n'a pas encore de design, avec l'explication — Chaque appareil a son propre design. Tant que celui-ci n'existe pas, le runtime sert le design web. — et deux chemins :
| Bouton | Ce qu'il fait |
|---|---|
| Copier depuis le web | Duplique le design web comme point de départ. Les ids des widgets restent les mêmes (les liaisons de données et le code continuent de les trouver) et les largeurs se réajustent parce qu'elles sont en colonnes. |
| Partir de zéro | Une feuille blanche, pour dessiner à partir de rien. |
La copie a lieu une fois. À partir de là, les designs suivent des vies séparées : toucher au web ne touche pas au téléphone.
Atenção
Tant que l'appareil a un design, la barre affiche Supprimer le design de cet appareil. La confirmation est claire — Le design de cet appareil disparaît et le runtime revient à servir le web. Il n'y a pas de retour en arrière. — et c'est bien le cas : il n'y a pas d'Annuler pour cette opération.
Masquer des widgets sur cet appareil
À l'intérieur d'un appareil, l'onglet Structure de l'inspecteur a un œil sur chaque widget : Masquer sur cet appareil / Afficher sur cet appareil. Un widget masqué reste dans l'arborescence et reste modifiable depuis la Structure — il ne sort simplement pas à l'écran.
Si ce qui est masqué est le conteneur, les enfants partent avec lui — et leur œil l'explique : Masqué par un conteneur parent.
La hauteur de la page
La hauteur est par appareil : un téléphone peut avoir une page beaucoup plus haute que le web pour le même écran. Faites glisser le bord inférieur du canvas (Hauteur de la page — faire glisser pour ajuster) pour la changer.
Quand la page est plus haute que l'appareil, le canvas dessine une ligne pointillée avec l'étiquette bas du viewport — c'est là que se termine ce que l'on voit sans faire défiler. Tout ce qui est sous cette ligne n'apparaît qu'à qui fait défiler la page.
Ce que l'app sert
Dans l'app publiée, l'appareil est choisi d'après la largeur de la fenêtre : en dessous de 640 px c'est un téléphone, en dessous de 1024 px une tablette, au-dessus c'est le web. Redimensionner la fenêtre change le design servi, sur place.
Sans design pour l'appareil détecté, c'est le web qui est servi. Dans l'application mobile native, ce repli est annoncé — Cet écran n'a pas de design pour téléphone — affichage du design web.
Le bouton Prévisualiser ouvre l'écran dans la vraie app ; pour voir ce que cela donne dans une autre taille, changez la taille de la fenêtre du navigateur.
Événements, ids et appareils
Comme chaque appareil est une arborescence, le même id de widget peut exister
dans les trois — c'est exprès, c'est « le même widget logique dans une autre
taille ». Mais chacun a ses propriétés et son code : changer le onClick du
bouton sur le web ne change pas celui du téléphone.
En écrivant du code (voir
Événements et le SDK), souvenez-vous
que keplin.widgets.get("...") ne trouve que les widgets de l'appareil en
cours d'exécution. Un widget qui n'existe que sur le web donne une erreur sur
le téléphone.
Layouts et appareils, ensemble
Les deux choses se combinent selon la même règle : le layout est composé par appareil. Un layout dessiné uniquement sur le web apparaît aussi dans les arborescences tablette et téléphone des écrans qui l'utilisent, en servant son propre design web — et un layout avec un design propre pour téléphone sert celui-là.
Nota
La barre de navigation de l'app ne vient pas du layout : elle est dessinée dans l'éditeur de Navigation et l'app la dessine autour de l'écran. Un layout peut avoir une barre à lui — mais celle-là est du contenu d'écran et ne sait pas naviguer toute seule.
Comment décider
| Situation | Le chemin |
|---|---|
| Le même en-tête sur 20 écrans. | Un layout. |
| Un écran complexe qui, sur le téléphone, doit être autre chose. | Un design de téléphone propre. |
| Un bouton qui n'a pas de sens sur le téléphone. | L'œil de la Structure sur l'appareil téléphone. |
| Un menu différent sur le téléphone. | L'éditeur de Navigation, sur l'appareil téléphone. |
| Une app qui ne sera utilisée que sur l'ordinateur. | Dessinez seulement le web et n'y pensez plus. |
Pourquoi ne… ?
- Pourquoi n'arrivé-je pas à toucher à ce widget ? Il a un cadenas : il vient du layout. Ouvrez le layout et touchez-y là — dans l'écran, vous ne changez que les propriétés, la visibilité et les événements.
- Pourquoi cela ne me laisse-t-il pas choisir le layout ? Il y a une collision : l'écran et le layout ont le même id de widget ou le même nom de datastore. Renommez l'un des deux.
- Pourquoi l'écran n'affiche-t-il pas les modifications que j'ai faites au layout ? L'onglet de l'écran était ouvert. Fermez et rouvrez.
- Pourquoi le téléphone affiche-t-il le design du web tout serré ? Cet écran n'a pas de design de téléphone. Choisissez Mobile (390px) et utilisez Copier depuis le web ou Partir de zéro.
- Pourquoi ai-je touché au web et le téléphone n'a pas changé ? Parce que ce sont des designs indépendants. La copie n'a lieu qu'au moment où vous créez l'appareil.
- Pourquoi le cadre a-t-il disparu de tous les écrans ? Le layout a été supprimé. Les écrans avertissent Le layout associé n'existe plus. — recréez-le et rechoisissez-le dans Template de l'écran.