Le canvas

Les écrans d'une app se dessinent dans un éditeur visuel : vous faites glisser des widgets d'une palette vers un canvas, vous positionnez au pixel près à l'aide d'une grille et de guides intelligents, et vous affinez chaque détail dans un inspecteur à droite. Cette page explique cet environnement de travail — tout ce qui vient ensuite (widgets, données, événements) se passe à l'intérieur.

Les exemples viennent de l'app Gestion des Clients : un CRM avec des écrans de comptes, d'opportunités et de tableaux de bord.

#Ouvrir et créer des écrans

Les écrans vivent dans la sidebar de l'app, dans l'onglet UI, à l'intérieur de la section Écrans. Cliquer sur un écran l'ouvre dans un onglet de l'espace de travail — vous pouvez avoir plusieurs écrans ouverts côte à côte, et chaque onglet se souvient de ce qu'il était en train de faire.

Pour créer un écran :

1. Ouvrez l'app et choisissez l'onglet UI dans la sidebar.
2. Dans la section Écrans, cliquez sur le bouton Nouvel écran.
3. Donnez-lui un nom — par exemple, Fiche Client — et confirmez avec Créer.
4. L'écran s'ouvre aussitôt dans l'espace de travail, prêt à être dessiné.

La même section a des dossiers (Nouveau dossier) pour organiser l'arborescence, les écrans Système (connexion, récupération de mot de passe et inscription — avec route et paramètres fixes) et les layouts — des templates réutilisables qui restent pour le chapitre Layouts et design par appareil.

#Les trois zones du designer

Zone	Ce que c'est
Widgets (gauche)	Le catalogue de widgets. Faites glisser n'importe lequel vers le canvas — l'aide sur l'élément lui-même vous le dit : Faites glisser vers le canvas.
Canvas (centre)	La page de l'écran, dessinée à l'échelle réelle de l'appareil actif, avec le thème de l'app déjà appliqué. Ce que vous voyez est ce que l'app affiche.
Inspecteur (droite)	Les propriétés de ce qui est sélectionné — ou de l'écran lui-même, quand il n'y a pas de sélection. Il a deux onglets : Propriétés et Structure.

Au-dessus du canvas se trouve la barre d'outils : les trois appareils (Web (1280px), Tablette (768px), Mobile (390px)), annuler/rétablir, les plans, dupliquer, supprimer, aligner/distribuer, Prévisualiser et le zoom (Zoom avant, Zoom arrière, et le pourcentage cliquable pour Réinitialiser à 100%).

#La grille

Le canvas repose sur une grille qui garde les écrans en ordre sans vous enfermer :

• À l'horizontale, la page se divise en 48 colonnes. La position et la largeur d'un widget se comptent en colonnes — c'est ce qui fait qu'un écran dessiné en web reste proportionnel dans un modal plus étroit.
• À la verticale, l'accrochage se fait par pas de 8 pixels ; la position et la hauteur sont conservées au pixel près.

Pendant le glissement, le widget s'accroche à la colonne et au pas vertical les plus proches. Si vous avez besoin de le lâcher exactement là où est la souris, maintenez la touche Alt pendant le glissement — l'accrochage se désactive tant qu'elle est enfoncée.

Les mêmes valeurs peuvent s'écrire à la main : avec un widget sélectionné, la catégorie Layout de l'inspecteur affiche Col, Larg. (en colonnes), Y et Haut. (en pixels).

#Sélectionner, déplacer, redimensionner

• Le clic sélectionne un widget ; Maj+clic ajoute ou retire de la sélection ; glisser à partir d'une zone vide dessine un cadre de sélection qui attrape tout ce qu'il touche.
• Faites glisser un widget pour le déplacer ; tirez sur les poignées des coins et des arêtes pour le redimensionner.
• Les flèches du clavier déplacent la sélection : ←/→ d'une colonne, ↑/↓ d'un pixel — et Maj+↑/↓ de huit pixels à la fois.
• Lâcher un widget dans un Panneau, dans des Onglets ou dans une Barre fixe en fait un enfant de ce conteneur : il se déplace désormais avec lui et la position devient relative au conteneur.

#Guides intelligents

Pendant que vous glissez ou redimensionnez, le canvas compare le widget en mouvement avec ses voisins et suggère des accrochages — les guides se dessinent à la volée :

Guide	Quand il apparaît
Alignement	Une arête ou le centre du widget se retrouve aligné avec l'arête/le centre d'un voisin — le widget se colle à cette ligne.
Espacement égal	Vous lâchez le widget à la même distance que celle qui sépare déjà deux voisins — la file garde des intervalles justes.
Taille égale	Au redimensionnement, la largeur ou la hauteur devient égale à celle d'un voisin — cela colle à cette taille.

L'alignement l'emporte sur l'espacement, et l'espacement l'emporte sur la grille : quand vous cherchez visiblement à coller à une arête, c'est cela qui se produit.

#Aligner et distribuer

Avec deux widgets ou plus sélectionnés, la barre d'outils active les boutons d'alignement : Aligner à gauche, Centrer horizontalement, Aligner à droite, Aligner en haut, Centrer verticalement et Aligner en bas. À partir de trois, s'y ajoutent Distribuer horizontalement et Distribuer verticalement, qui égalisent les intervalles en gardant le premier et le dernier en place.

Avec plusieurs widgets sélectionnés, l'inspecteur résume : N widgets sélectionnés — utilisez la barre pour aligner/distribuer.

#Les plans

Des widgets peuvent se superposer — un Libellé par-dessus une Image, par exemple. L'ordre se contrôle dans la barre d'outils : Mettre au premier plan, Avancer d'un plan, Reculer d'un plan et Mettre à l'arrière-plan.

#Ancres — amarrer aux marges

Par défaut, un widget reste là où vous l'avez posé. Les ancres amarrent des arêtes du widget aux marges de la page (ou du conteneur où il se trouve) : sélectionnez un widget et cliquez sur les épingles qui apparaissent au milieu de chaque arête — Ancrer en haut, Ancrer à gauche, Ancrer à droite, Ancrer en bas.

• Ancrer gauche + droite fait s'étirer le widget avec la largeur de la page — le classique en-tête sur toute la largeur.
• Ancrer en bas colle le widget au bas de la page — une barre de boutons qui reste en bas, quelle que soit la hauteur de la page.

#La hauteur de la page

La page d'un écran a une hauteur fixe par appareil — elle ne grandit jamais toute seule avec le contenu. Le bord inférieur du canvas est une poignée : faites-la glisser pour ajuster (Hauteur de la page — faire glisser pour ajuster). Sous le contenu, le fond de l'écran continue jusqu'au bout (le fond continue jusqu'au bas de l'écran). Si le contenu dépasse la hauteur, l'utilisateur fait défiler — sauf si vous le désactivez (voir les propriétés de l'écran).

#Annuler, rétablir et les raccourcis

Chaque geste — lâcher, déplacer, redimensionner, changer une propriété, supprimer — est un pas d'historique. Annuler (Ctrl+Z) et Rétablir (Ctrl+Shift+Z) sont dans la barre ; les mouvements au clavier qui se suivent fusionnent en un seul pas, pour que l'annulation n'ait pas à reculer touche par touche.

Raccourci	Action
Ctrl+Z / Ctrl+Shift+Z (ou Ctrl+Y)	Annuler / Rétablir
Ctrl+C / Ctrl+X / Ctrl+V	Copier / Couper / Coller (la copie arrive décalée d'une colonne)
Ctrl+D	Dupliquer la sélection
Ctrl+A	Sélectionner tous les widgets de l'appareil actif
Suppr ou Retour arrière	Supprimer la sélection
Échap	Effacer la sélection
Flèches / Maj+↑↓	Déplacer la sélection (colonne par colonne ; 1 px ; 8 px)
Ctrl+molette de la souris	Zoom

Sur Mac, utilisez ⌘ là où on lit Ctrl.

#Enregistrement automatique et prévisualisation

Il n'y a pas de bouton d'enregistrement : les modifications s'enregistrent toutes seules. Le coin supérieur droit dit où cela en est — Enregistrement…, Enregistré, ou Échec de l'enregistrement — réessayez si quelque chose s'est mal passé (il suffit de bouger à nouveau pour retenter).

Le bouton Prévisualiser enregistre ce qui est en attente et ouvre l'écran dans la vraie app, dans un nouvel onglet du navigateur — vous passez par la connexion comme n'importe quel utilisateur et vous voyez l'écran fonctionner avec de vraies données.

#L'inspecteur

L'inspecteur a deux onglets :

• Propriétés — tout ce qui est modifiable sur ce qui est sélectionné.
• Structure — l'arborescence de widgets de l'appareil actif.

#Propriétés d'un widget

Avec un widget sélectionné, le haut de l'inspecteur affiche le type et l'id du widget (en caractères à chasse fixe) — c'est cet id que vous utilisez dans le code des événements. Les propriétés s'organisent en catégories ; chaque widget n'affiche que celles qui le concernent :

Catégorie	Ce qu'elle contient
Layout	Col, Larg., Y, Haut., et les interrupteurs Visible et Actif (un widget inactif devient gris et sans interaction).
Accès	Exige l'action — une action déclarée dans Paramètres ▸ Permissions ; qui ne l'a pas n'utilise pas le widget. Dans Sans l'action, vous choisissez Masquer ou Afficher désactivé.
Contenu	Textes, libellés, icônes — et les Valeurs de la phrase (voir plus bas).
Données	La liaison aux données du widget (voir Datastores et données).
Comportement	Options de fonctionnement — vues, glissements, actions au clic.
Validation	Sur les champs de formulaire : Obligatoire, règles standard et script (voir Widgets).
Interaction	Actions de clic de widgets comme le Bouton.
Apparence	Style visuel (voir plus bas).
Événements	Les événements du widget (voir Événements et le SDK).

Certains widgets ont des éléments internes modifiables — une colonne de la Table, un champ de la Liste, un onglet des Onglets. Cliquez sur l'élément directement dans le canvas pour le modifier ; l'inspecteur bascule sur cet élément et le bouton revenir au widget vous ramène.

#Apparence

La catégorie Apparence est identique sur (presque) tous les widgets : Fond, Bordure avec Trait de la bordure (Continu, Tirets, Pointillés), rayon, padding, Ombre (Sans ombre, Légère, Moyenne, Forte, Extra), et les options de Texte — couleur, Taille, Graisse, Aligner le texte. Les couleurs acceptent les tokens du thème de l'app ou des valeurs hex — utilisez les tokens chaque fois que c'est possible, pour que le widget suive le thème.

Les widgets avec un en-tête propre (panneaux, tables, graphiques…) ajoutent ici Afficher le titre et Afficher la description, avec les textes correspondants.

#Règles de formatage

Toujours dans l'Apparence, les Règles de formatage changent le style selon les données : peindre en rouge les lignes en retard, masquer un bouton selon la session, mettre un KPI en vert au-dessus de la cible.

1. Cliquez sur Nouvelle règle.
2. Choisissez la portée — Le widget, Chaque ligne ou Une cellule (ligne/cellule n'existent que sur les widgets qui dessinent des lignes, comme la Table).
3. Dans Quand, ajoutez des conditions (champ, opérateur, valeur — la valeur peut venir d'un paramètre, de la session, de l'état…). Sans conditions, la règle s'applique toujours.
4. Dans Alors, choisissez ce qui change : Fond, Couleur du texte, Gras, Italique, Souligné, Alignement, Format ou Masquer.

L'ordre compte — la dernière règle qui correspond l'emporte. L'interrupteur Active désactive une règle sans la supprimer, pour faire des essais. Et le code des événements a toujours le dernier mot sur les règles.

#Valeurs de la phrase

N'importe quel texte d'un widget peut avoir des trous : écrivez {n} dans le texte (par exemple, « {n} comptes actifs ») et la section Valeurs de la phrase apparaît dans la catégorie Contenu, pour dire d'où vient chaque valeur — d'un datastore, d'un paramètre, de la session, de l'état ou d'un autre widget. C'est la façon de mettre des nombres vivants dans des phrases traduisibles sans écrire de code.

#L'onglet Structure

L'onglet Structure liste tous les widgets de l'appareil actif, en arborescence (conteneurs avec les enfants dedans). Il sert à sélectionner ce qui est recouvert, à voir ce qui est masqué (Masqué par un conteneur parent) et à basculer la visibilité initiale de chaque widget avec l'œil — Masquer sur cet appareil / Afficher sur cet appareil.

#L'écran et ses propriétés

Cliquez sur une zone vide du canvas (ou appuyez sur Échap) et l'inspecteur se met à montrer l'écran lui-même :

Section	Ce qu'elle définit
Écran	Le nom et la Route — le chemin de l'écran dans l'adresse de l'app (minuscules, chiffres et tirets).
Paramètres de route	Les paramètres que l'écran reçoit dans l'adresse (ex. : l'id du compte dans /fiche-de-compte/:id). Chacun peut être Obligatoire ; l'ordre s'ajuste avec Monter/Descendre.
Comportement	Défilement de l'écran — Automatique ou Sans défilement.
Accès	Écran public (sans session) — l'écran s'ouvre sans connexion ; les données viennent uniquement d'APIs publiques.
Apparence	Le fond de la page : Couleur, Image (assets) et Ajustement (Couvrir, Contenir, Étirer, Centrer, Répéter).
Présentation	Si l'écran est une page normale, un Modal (centre) ou un Panneau latéral (droite) — détaillé dans Événements et le SDK.
Template de l'écran	Le Layout associé — voir Layouts et design par appareil.
Données	Les datastores de l'écran — voir Datastores et données.
Événements	Les événements de l'écran (onLoad, onParamsChange, onUnload) — voir Événements et le SDK.

#Pourquoi ne… ?

• Pourquoi n'arrivé-je pas à déplacer un widget ? S'il apparaît avec un cadenas, il vient d'un layout — la position se modifie dans le layout lui-même, pas dans l'écran. Voir Layouts et design par appareil.
• Pourquoi le widget ne s'accroche-t-il pas où je veux ? Les guides et la grille l'emportent sur votre geste — maintenez Alt pour désactiver l'accrochage pendant le glissement.
• Pourquoi le widget a-t-il disparu du canvas ? Regardez la Structure : il peut être masqué (œil), à l'intérieur d'un onglet qui n'est pas actif, ou derrière un autre widget (utilisez les plans).