Dessiner une application Studio

Objectif

Dessiner un écran sur le canevas, et dire ce qu’est chaque objet.

Où il s’ouvre

Ouvrez votre solution, choisissez Applications Studio, sélectionnez-en une et appuyez sur Conception. Le canevas s’ouvre sur place, sous le même fil d’Ariane et les mêmes sélecteurs d’environnement et de solution — le même canevas que celui qu’utilisent les concepteurs de rapports et de tableaux de bord : rien de ce que vous en savez déjà n’a changé.

Une application, c’est plusieurs écrans

Chaque cadre que vous balisez comme l’écran est un écran de cette application. Dessinez-en un second à côté du premier, balisez-le de la même façon, et votre application en a deux — sur un seul canevas, côte à côte, où vous pouvez les voir tous les deux à la fois.

Un écran s’appelle comme son cadre. Renommez le cadre dans la liste Calques et vous avez renommé l’écran. Ce nom n’est pas décoratif : c’est ce que la navigation demandera. Deux écrans portant le même nom sont donc refusés à l’enregistrement, avec le nom de celui à renommer.

Indiquez celui sur lequel elle s’ouvre. Dès qu’une application a deux écrans, un sélecteur S’ouvre sur apparaît dans la barre de titre. Choisissez l’écran sur lequel doit arriver la personne qui ouvre votre application. Avec un seul écran, il n’y a pas de sélecteur, car il n’y a rien à choisir.

Passer de l’un à l’autre, c’est pour la suite

Dessiner deux écrans fonctionne aujourd’hui, tout comme choisir celui qui s’ouvre. Ce qui n’est pas encore là, c’est navigate — l’action qui fait passer quelqu’un de l’un à l’autre — et les boutons qui l’appellent. C’est la prochaine étape, et elle est délibérément absente plutôt que présente et muette : une action qui ne fait rien est pire qu’une action qui n’est pas proposée.

La seule nouveauté : ce qu’un objet est

Sélectionnez un objet et ouvrez l’onglet Écran à côté de Graphique. Une seule question s’y trouve :

Cet objet est …

Répondez-y, et vous avez dit à la plateforme quelque chose qu’elle ne peut pas deviner seule. Un rectangle de texte qui est un titre et un rectangle de texte qui est un paragraphe sont identiques sur le canevas ; vous seul savez lequel est lequel, et la différence, c’est ce qu’un lecteur d’écran annoncera et l’aspect qu’aura l’écran final.

Réponse	À utiliser pour
L’écran	Le cadre à l’intérieur duquel tout le reste est dessiné. Sa taille est la taille de l’écran.
Une région	Une zone qui regroupe d’autres éléments — un bandeau d’en-tête, une barre latérale, une carte.
Un titre	Un titre.
Un paragraphe	Une suite de texte ordinaire.
Une liste / Un élément de liste	Une liste, et une entrée de celle-ci.
Un bouton	Quelque chose sur quoi appuyer.
Une image	Une image qui a un sens, par opposition à une décoration.
(laissé vide)	Le graphisme de l’écran — dessiné, mais sans rien dire de ce que contient l’écran.

Sous ces réponses, la même liste propose Contrôle : un Bouton, une Zone de texte, une Zone de texte multiligne, une Case à cocher, une Liste déroulante ou un Sélecteur de date. Voir plus bas — ce ne sont pas des dessins.

Vous remarquerez que la liste change selon ce que vous avez sélectionné. Un cadre peut être l’écran ; un objet texte ne le peut pas, car la taille de l’écran est la taille de l’écran. Une ligne ou une forme n’a aucune réponse, et l’onglet le dit plutôt que de vous montrer un panneau vide.

Commencez par dessiner un cadre et le marquer comme l’écran. Tout le reste va à l’intérieur, et les objets à l’intérieur d’un cadre peuvent être épinglés à ses bords pour suivre ses redimensionnements — le même épinglage que celui que vous utilisez déjà dans les deux autres concepteurs.

Dimensionner un texte

Sélectionnez n’importe quel texte : sa section Texte se termine par deux boutons.

• Taille définie — le comportement par défaut, et ce que le texte a toujours fait. La largeur vous appartient et les mots s’y replient. La hauteur vous appartient aussi, et c’est un plancher : agrandissez la zone si vous le souhaitez, elle ne sera jamais plus courte que le texte. (Auparavant, les poignées verticales bougeaient et la zone reprenait aussitôt sa taille, ce qui faisait du texte le seul objet qu’on ne pouvait pas redimensionner.)
• Ajuster au texte — la zone devient exactement le texte : aussi large que la plus longue ligne saisie et aussi haute que ces lignes. Rien ne se replie, et les poignées de redimensionnement disparaissent, car il ne leur reste rien à décider. Appuyez sur Taille définie pour les retrouver.

Il n’existe délibérément pas de troisième mode permettant à une zone d’être plus courte que son texte. Une zone qui cache derrière son propre bord ce que vous avez saisi est une erreur que vous ne pouvez pas voir, et un plancher vous donne tout ce dont « changer la taille » a besoin, sans elle.

Où se place le texte dans la zone

La rangée d’alignement de Texte comporte un second groupe de trois : Texte en haut, au milieu et en bas. Il indique à quel bord le texte est ancré lorsque la zone est plus haute que lui.

Le milieu est la valeur par défaut, et c’est ce dont a besoin une légende dans un bouton — une zone de légende dessinée dans un bouton de 40 px est délibérément plus haute que son unique ligne, et le centrage est ce qui place le texte là où vous avez dessiné le bouton.

Choisissez le haut pour tout ce qui pourrait grandir. Une zone centrée qui s’avère trop petite déborde dans les deux sens : une note repliée sur trois lignes remonte alors par-dessus le libellé situé au-dessus. L’ancrer en haut signifie qu’elle ne peut grandir que vers le bas, dans un espace que vous voyez. C’est aussi ce que le canevas a toujours dessiné : c’est donc le seul réglage où le dessin et l’écran concordent exactement.

Pour resélectionner plus tard le cadre de l’écran, cliquez une fois sur son fond vide — cliquer sur un cadre atteint généralement ce qui est dessiné à l’intérieur, et un simple clic sur une zone vide sélectionne le cadre lui-même, poignées comprises. Lorsqu’il ne reste plus de zone vide, faites clic droit → Sélectionner le calque, ou utilisez le panneau Calques. Redimensionnez-le en faisant glisser une poignée ou en saisissant une largeur et une hauteur dans l’inspecteur ; dans les deux cas, les objets épinglés à l’intérieur suivent.

Dessiner sur un élément quand plusieurs sont empilés

Un écran à onglets, ce sont plusieurs panneaux dessinés dans le même rectangle, un seul étant affiché à la fois. Sur le canevas, ils sont tous dessinés : seul celui du dessus peut donc être cliqué, déplacé ou redimensionné — et les autres sont quelque part en dessous, inaccessibles.

Appuyez sur le bouton cible sur la ligne d’un calque (à côté de l’œil et du cadenas) et tout le reste disparaît du canevas. Dessinez dessus, puis appuyez de nouveau — ou sur Tout afficher dans le bandeau en haut de la liste Calques, qui est là pour qu’un canevas à moitié vide dise toujours pourquoi.

Cela ne change rien à votre application. L’œil voisin dégagerait aussi la voie, mais l’œil est la visibilité propre du dessin : un calque que vous avez masqué est un calque qui n’apparaît pas du tout dans votre application, et masquer deux panneaux en oubliant de les réafficher publierait un écran auquel il manque deux panneaux. Ceci ne concerne que le canevas, n’est pas enregistré, et disparaît la prochaine fois que vous ouvrez le concepteur.

La liste Calques a le même menu contextuel

Faites un clic droit sur une ligne de l’arborescence Calques et vous obtenez le menu que vous donne le canevas : réordonner, grouper, masquer par un masque, retourner, créer un composant, verrouiller, dupliquer, supprimer — tout, appliqué à cette ligne.

Il sélectionne d’abord la ligne : le menu agit donc toujours sur ce que vous avez désigné plutôt que sur ce qui était sélectionné auparavant. Il n’y a pas ici de sous-menu Sélectionner le calque : celui-ci sert à lever l’ambiguïté d’un clic sur des formes empilées, et une ligne d’arborescence est déjà un seul objet.

C’est surtout utile pour les objets que le canevas rend difficiles d’accès — quelque chose enfoui dans un cadre, derrière autre chose, ou hors de la vue. Trouvez-le dans l’arborescence et agissez dessus depuis là.

Les touches pour la vue et les formes

• Zoomer avec Ctrl+= et Ctrl+- (⌘ sur Mac), ou avec Ctrl et la molette. Ctrl+0 revient à 100 %.
• Maj+1 montre tout le canevas. Maj+2 remplit la fenêtre avec la sélection.
• Se déplacer avec la molette (Maj pour aller de côté), en maintenant Espace et en faisant glisser, ou avec l’outil Main (H).
• Les flèches déplacent la sélection d’un pixel ; avec Maj, de dix. Chaque appui est une étape d’annulation.
• Une forme que vous venez de dessiner est sélectionnée et l’outil Sélection revient : vous pouvez la colorer et la nommer tout de suite.
• Saisir une Rotation fait tourner la forme autour de son centre, comme la poignée de rotation.
• Pendant un glisser, des repères alignent bords et centres sur ce qui est à l’écran. Maintenez Alt pour placer librement.
• Cliquez avec l’outil Texte et tapez. Le nouveau texte est sélectionné, son texte provisoire surligné : la première touche le remplace.
• Un clic sur une forme d’un groupe sélectionne tout le groupe. Un double-clic atteint la forme elle-même.
• Union, Soustraction, Intersection et Exclusion posent le résultat là où était la forme du dessous : dans le même cadre, sous son nom, avec ses coins arrondis s’ils l’étaient.
• Ctrl+D sur un élément d’une disposition automatique place la copie juste après, dans la rangée.

Prérequis

• L’écran existe — voir Créer une application Studio.

Étapes

1. Ouvrez votre solution, choisissez Écrans, sélectionnez-en un et appuyez sur Conception.
2. Dessinez un cadre. Avec ce cadre sélectionné, ouvrez l’onglet Écran et réglez Cet objet est sur L’écran.
3. Dessinez à l’intérieur : des cadres pour les régions, du texte pour les titres et la prose, des images là où vous voulez des illustrations.
4. Sélectionnez chaque élément et dites ce qu’il est. Laissez vides ceux qui sont purement décoratifs.
5. Appuyez sur Aperçu pour voir l’écran comme le verra un utilisateur.
6. Appuyez sur Enregistrer.

Rouvrir l’écran restitue votre dessin exactement tel que vous l’avez laissé.

L’aperçu vous montre la vraie chose

L’Aperçu remplace le canevas par l’écran lui-même — pas une image de celui-ci, ni le canevas sans ses repères. C’est le même composant que celui que monte le Shell de la plateforme : ce que vous voyez est donc ce qu’obtient un utilisateur. Sélectionnez-y du texte et vous verrez qu’il se sélectionne ; appuyez sur Ctrl+F et le navigateur le trouve.

Appuyez sur Conception pour revenir. L’aperçu affiche toujours ce qui est sur le canevas maintenant, y compris les modifications que vous n’avez pas enregistrées.

Ce que fait réellement l’enregistrement

L’enregistrement stocke deux choses : votre dessin, et l’écran compilé en éléments web ordinaires. Un titre devient un vrai titre, un paragraphe un vrai paragraphe, un bouton un vrai bouton. C’est ce qui rend le texte sélectionnable et consultable par la recherche, donne au bouton un anneau de focus et permet à un lecteur d’écran d’annoncer correctement la page — rien de tout cela n’est possible pour un simple dessin.

Vos réponses dans la liste Cet objet est ne sont donc pas des étiquettes. Elles décident de ce que chaque objet devient.

Deux conséquences méritent d’être connues :

• Votre écran se met en miroir pour les lecteurs en persan et en arabe. Tout ce que vous avez épinglé à gauche apparaît à droite, et le texte aligné à gauche s’aligne sur le bord de lecture. Vous n’avez pas à le dessiner deux fois.
• Redimensionner ne coûte rien. Épingler un objet aux deux bords l’étire, et l’épingler en bas l’y maintient — c’est le navigateur qui s’en charge, si bien qu’un écran reste fluide quelle que soit la façon dont on le redimensionne. Suffisamment rétrécie, la page défile plutôt que de se réduire : un écran est quelque chose que l’on lit et dans lequel on saisit, et le réduire produit un texte que personne ne peut lire.

Si l’enregistrement vous signale quelque chose

L’enregistrement peut revenir avec une remarque. Aucune n’empêche l’enregistrement :

• Aucun objet n’est balisé comme l’écran — le dessin entier a été utilisé à la place. Balisez un cadre comme l’écran pour que les objets qu’il contient aient quelque chose auquel s’épingler.
• Un autre objet est aussi balisé comme l’écran — seul le premier est utilisé ; les autres sont devenus des zones ordinaires.
• Un bouton ne contient aucun texte — un lecteur d’écran n’a rien à annoncer. Dessinez un objet texte à l’intérieur du bouton.
• Un état a été dessiné pour un contrôle — il n’a pas été utilisé. Un contrôle sait déjà quel aspect il a lorsqu’on le survole, qu’on appuie dessus, qu’il a le focus ou qu’il est désactivé.

Quand vous voulez un vrai contrôle, pas le dessin d’un contrôle

Dessinez une zone, et dans l’onglet Écran, choisissez l’une des entrées Contrôle au lieu d’un élément. Ce qui apparaît sur l’écran final est le contrôle propre à la plateforme — le même sélecteur de date que celui des formulaires d’enregistrement, la même zone de texte, le même bouton.

C’est plus important qu’il n’y paraît. Un rectangle qui ressemble à un champ de date n’a pas de calendrier. Un rectangle qui ressemble à une zone de texte n’a pas de curseur, pas de sélection, pas de saisie automatique et pas de comportement au clavier. Et lorsqu’un utilisateur persan ouvre votre écran, le vrai sélecteur de date affiche un calendrier jalali — sans que vous ayez rien à faire, puisqu’il n’a jamais été redessiné.

Ce que vous conservez, et ce qui reste à la plateforme. L’endroit où vous l’avez dessiné, sa taille et la façon dont vous l’avez peint vous appartiennent — le remplissage, la bordure, le rayon des angles, ainsi que la couleur et la graisse du texte à l’intérieur. Ce qui reste à la plateforme, c’est tout ce qu’un dessin ne peut pas exprimer : le curseur, le calendrier, les chiffres, le comportement au clavier et l’anneau de focus que vous n’avez pas recouvert.

Tout ce que vous ne touchez pas reste à la plateforme, et c’est l’intérêt plutôt qu’une limitation. Un contrôle que vous n’avez jamais peint ressemble exactement à tous les autres contrôles du produit, et suit le thème quand il change. Ne peignez que la bordure, et seule la bordure vous appartient.

Peignez avec un jeton, pas avec une couleur

Choisissez une pastille dans la rangée de jetons sous le remplissage plutôt que de saisir une valeur hexadécimale. Primary est la couleur d’accent du locataire en mode clair et en mode sombre ; une valeur hexadécimale n’est juste que dans l’un des deux. Un contrôle déposé depuis la palette Contrôles arrive déjà peint avec des jetons, c’est pourquoi il est correct dans les deux modes.

Écrivez le libellé à l’intérieur de la zone. Le texte que vous y dessinez devient la légende d’un bouton, le libellé d’une case à cocher ou le texte indicatif grisé d’une zone de texte — il n’y a pas de champ distinct à remplir.

Ce que vous saisissez au lieu de le dessiner :

• Options, sur une liste déroulante, une par ligne. C’est la seule chose d’un contrôle que vous ne pouvez pas dessiner : une liste déroulante fermée affiche une valeur, jamais la liste.
• Accepte, sur une zone de texte — le type de valeur qu’elle contient : Du texte, Un mot de passe, Une adresse e-mail, Un nombre, Un numéro de téléphone, Une adresse web. Ce n’est pas décoratif : une zone de mot de passe masque ce qui est saisi et comporte le bouton d’affichage de la plateforme, une zone d’adresse e-mail ou web fait apparaître le bon clavier sur un téléphone, une zone de nombre un pavé numérique.
• Lecture seule, sur une zone de texte simple ou multiligne — elle peut être lue, sélectionnée et copiée, mais pas modifiée. À distinguer de Désactivé, présent sur tous les contrôles, qui signifie que le contrôle n’est pas du tout destiné à cet utilisateur : un contrôle désactivé est ignoré par le clavier et par un lecteur d’écran, contrairement à un contrôle en lecture seule.
• Nombre maximal de caractères, sur une zone de texte simple ou multiligne — le navigateur arrête la saisie à cette longueur.
• Accepte, sur un sélecteur de fichier — N’importe quel fichier ou Une image. Cela décide de deux choses à la fois : ce que propose la boîte de dialogue de fichier, et si ce qui a été choisi est affiché comme une image.
• Sélectionne, sur un sélecteur de date — Une date, Une date et une heure ou Une heure.
• Calendrier, sur un sélecteur de date — Le paramètre du locataire, Grégorien ou Persan. Laissez la première option sauf si le calendrier est une propriété des données plutôt que du lecteur : l’expiration d’un passeport est grégorienne pour tout le monde, alors que « la date d’approbation » doit s’afficher dans le calendrier qu’utilise la personne qui la lit.

Un sélecteur de fichier garde le fichier ; un gestionnaire le stocke

Liez Valeur à un champ d’état et le fichier choisi y arrive. Un texte lié au même champ affiche le nom du fichier. Pour conserver le fichier, passez le champ à createRecord ou updateRecord comme valeur d’un champ Fichier ou Image — updateRecord("contact", id, { new_photo: getState("photo") }) — et il est stocké avec l’enregistrement. Tant qu’aucun gestionnaire ne le fait, le fichier reste dans la page et disparaît lorsque vous quittez l’écran. Un fichier de plus de 4 Mo est refusé dans le sélecteur, avant d’être lu.

remarque

Si vous avez lié Activé à une expression, la case Désactivé est grisée et indique pourquoi : l’expression décide déjà quand le contrôle peut être utilisé, et une case à côté serait une seconde réponse. Liez enabled ou cochez Désactivé, pas les deux.

Les contrôles acceptent aussi des états dessinés. Dessinez le contrôle, dupliquez-le, changez les couleurs de la copie et balisez la copie comme invalid — exactement comme pour une zone que vous avez dessinée. Ce qui voyage, c’est la différence, et elle s’applique au contrôle lui-même. Voir Réutiliser un design avec des composants pour la façon de déclarer un état.

Alors, lequel utiliser ? Dessinez quand l’aspect est l’essentiel — un appel à l’action dans vos propres couleurs, avec un survol que vous avez dessiné. Choisissez un contrôle quand le comportement est l’essentiel : un calendrier, un curseur, un clavier.

Créer un « bouton de danger »

Il n’y a pas de liste déroulante Apparence, et il n’en faut pas. Pour obtenir un bouton rouge :

1. Déposez un Bouton depuis la palette Contrôles.
2. Réglez son remplissage sur le jeton Erreur et la couleur de la légende sur blanc.
3. Sélectionnez-le et appuyez sur Créer un composant — le bouton lui-même devient le composant. Renommez le calque Danger button, et le composant est renommé avec lui.

Il figure maintenant dans la liste Composants, et chaque écran qui en place un obtient le même bouton rouge. Vous voulez un survol ? Ajoutez un état au composant et dessinez la copie plus foncée. Vous voulez aussi un bouton Succès ? Refaites la même chose — c’est un geste que vous connaissez déjà, plutôt qu’une cinquième entrée dans une liste déroulante que quelqu’un devrait ajouter pour vous.

Un lien vers ailleurs

Sélectionnez une zone ou un texte, et dans l’onglet Écran, choisissez Un lien. Deux champs suivent :

• Adresse — où il mène : https://example.com/docs, mailto:someone@example.com, tel:+441234567890, ou un chemin à l’intérieur de cette application comme /reports/monthly.
• S’ouvre — Dans cette fenêtre (le cas habituel) ou Dans un nouvel onglet.

Pour aller à un autre écran de l’application, saisissez son nom : Contacts. Le lien mène à cet écran partout où l’application est ouverte, seule ou dans une application pilotée par modèle, dont les adresses pour le même écran diffèrent. Un clic change d’écran dans l’application sans recharger la page, et un clic du milieu ouvre toujours l’écran dans un nouvel onglet.

Pourquoi c’est un lien et pas un bouton avec un gestionnaire. Un clic du milieu l’ouvre dans un onglet. Un clic droit propose Ouvrir le lien dans un nouvel onglet et Copier l’adresse du lien. Le survol affiche la destination dans la barre d’état du navigateur. Un lecteur d’écran peut lister tous les liens de l’écran et lire le vôtre parmi eux. Rien de tout cela ne vient d’un gestionnaire — tout vient du fait que l’élément est un vrai lien, et c’est toute la raison pour laquelle c’est quelque chose que vous balisez plutôt que quelque chose que vous scriptez.

Lorsque la destination est calculée, liez Adresse au lieu de la saisir — "https://example.com/" + state.topic. La liaison l’emporte, et le panneau grise la zone en le signalant. Voir Rendre un écran réactif.

Certaines adresses sont refusées, et le panneau devient rouge pendant que vous en saisissez une : seules les adresses web (http, https), les adresses e-mail, les numéros de téléphone et les chemins à l’intérieur de cette application sont autorisés. Un lien qui exécute un script n’est pas un lien, et un écran peut provenir d’une importation plutôt que de vos propres mains.

astuce

Lorsque c’est l’écran qui décide où aller — après un enregistrement, ou selon ce que quelqu’un a choisi — utilisez plutôt openUrl("…") dans un gestionnaire. Même règle pour les adresses ; voir Rendre un écran réactif.

Dessiner l’aspect au survol

Les états appartiennent à un composant. Sélectionnez ce à quoi vous voulez donner un état, faites un clic droit et choisissez Créer un composant — puis ajoutez ses états sur le composant, où ils sont listés ensemble. Démonstration complète : Réutiliser un design avec des composants.

C’est un seul endroit plutôt que deux. Il y avait auparavant aussi une zone Dessiner un état dans cet onglet, qui demandait un nom et une interaction avant que vous ayez dessiné quoi que ce soit et qui figurait sur des objets sans liste d’états à laquelle ajouter ; l’onglet Écran indique désormais où vivent les états.

Un composant avec une seule instance est un composant parfaitement valable. Si tout ce que vous voulez, c’est un survol sur un bouton, faites-en un composant et donnez-lui l’état — c’est le prix à payer, et c’est aussi ce qui vous permettra de placer ce bouton deux fois demain.

Ce qu’est le nom d’un état, et ce qu’est Pendant

Un état a deux moitiés, et vous les indiquez à deux endroits :

• Le nom vous appartient — invalid, overBudget, awaitingApproval. Sélectionné, Coché, Non valide, Succès, Avertissement, Chargement et Lecture seule ne sont que des suggestions.
• Pendant — dans le panneau propre de la variante : Toujours, ou Survol, Appuyé, Focus. Ces trois-là appartiennent au navigateur : ce sont donc ceux que vous ne pouvez pas inventer.

remarque

Désactivé est un nom, pas un Pendant. Il figurait auparavant dans ce sélecteur, et il n’y a pas sa place : Survol, Appuyé et Focus décrivent ce que quelqu’un est en train de faire, et chacun s’arrête dès que la personne s’arrête. Désactivé est ce que le contrôle est — votre écran l’a décidé — c’est donc un nom d’état comme un autre, saisi sous la forme disabled.

Vous n’avez pas à dire quand il est actif. L’écran le sait déjà, grâce à la case Désactivé du contrôle ou à son expression Activé, et il active l’état pour vous. Dessinez une variante, nommez-la disabled, et un contrôle qui ne peut pas être utilisé la porte.

Réglez les deux et vous obtenez une combinaison — Non valide pendant le survol. Vous n’avez jamais à dessiner toutes les combinaisons : si un utilisateur survole un élément dans l’état Non valide et que vous n’avez dessiné que Non valide, il obtient Non valide.

Utilisez des lettres, des chiffres, - et _, en commençant par une lettre. Un nom qui ne pourrait pas être un état grise le bouton et le dit, plutôt que de vous laisser en dessiner quatre et de rencontrer le refus à l’enregistrement.

Trois choses méritent d’être connues :

• Seules les différences sont conservées. Si vous changez l’arrière-plan de la copie, seul l’arrière-plan est retenu. Redimensionner l’original ou modifier sa légende n’a donc pas à être répété dans chaque état — c’est ce qui évite un bouton qui saute lorsqu’on le survole.
• Déplacez la copie où vous voulez. L’endroit où se trouve la copie sur le canevas ne fait pas partie de l’état ; c’est juste un endroit où la regarder.
• Mais déplacer quelque chose à l’intérieur de la copie, si. Faites glisser le bouton d’un interrupteur à l’autre bout de sa glissière dans la copie, et le bouton de l’interrupteur glisse lorsque l’état s’active — il se déplace en douceur plutôt que de sauter. C’est ainsi que l’on dessine un interrupteur, un compteur ou une surbrillance qui se déplace. Redimensionner quelque chose à l’intérieur de la copie compte aussi, et cela se fait d’un coup plutôt qu’en douceur : agrandir une zone réorganise ce qui l’entoure, et l’animer est ce qui fait saccader un écran.
• Rien ne s’exécute. Le navigateur fait tout : un écran avec cinquante états de survol est donc exactement aussi rapide qu’un écran qui n’en a aucun.

Ajoutez ou supprimez un objet dans la copie et l’état cesse de fonctionner, et l’enregistrement le signale, en le nommant. Un état doit avoir la même forme que ce qu’il reflète. Pour afficher quelque chose de plus au survol, dessinez-le dans l’original, masquez-le à cet endroit, et rendez-le visible dans l’état — masqué ou visible est une différence d’aspect, ce qu’un état sait faire.

Y mettre une icône

Composants → Icône… ouvre le sélecteur d’icônes propre à la plateforme — tout le jeu Lucide, consultable par recherche selon ce qu’une icône signifie plutôt que selon son nom exact. Choisissez-en une et elle arrive sur le canevas.

Ce qui arrive est un objet dessiné ordinaire, pas un type d’objet particulier :

• il est peint avec les mêmes remplissages que tout le reste : donnez-lui donc un jeton de design et il suit le mode clair/sombre du lecteur ;
• il accepte des états dessinés : il peut donc changer de couleur au survol en même temps que la carte qui le contient ;
• il peut lier Affiché, ce qui permet à un bouton de porter deux pictogrammes et d’afficher celui qui convient — le bouton de mode de couleur de l’exemple dessine une lune et un soleil et affiche celui qui ne correspond pas au mode actuel.

Il arrive tracé plutôt que rempli, peint en color.text, en 24 sur 24. Redimensionnez-le, changez sa couleur, déposez-le dans un bouton à côté de la légende. Il n’a plus rien de particulier ensuite.

Un bouton qui ne contient qu’une icône est refusé. L’enregistrement avertit qu’il ne contient aucun texte, si bien qu’un lecteur d’écran n’a rien à annoncer — placez le texte à côté du pictogramme, comme le fait le contrôle Dark mode de l’exemple Support desk. C’est aussi le contrôle le plus convivial : tout le monde n’a pas appris qu’une lune signifie sombre.

La ligne fonctionne uniquement au clic et ne se fait pas glisser, car un glissement doit savoir ce qu’il transporte, et celui-ci transporterait une boîte de dialogue.

Vous avez choisi la mauvaise ? Changez-la

Sélectionnez l’icône : le panneau des propriétés affiche un champ Icône sous son nom, avec le même sélecteur. Choisissez-en une autre et seul le dessin est remplacé — sa taille, sa couleur, ses états et ses liaisons restent exactement tels que vous les avez réglés.

C’est toute la raison de la changer à cet endroit plutôt que de la supprimer et d’en placer une nouvelle : une nouvelle icône arrive en 24 sur 24, en color.text, et ne sait rien du bouton dans lequel vous aviez placé l’ancienne.

Une icône que vous avez dessinée vous-même avec la plume n’a pas de champ Icône, et ne doit pas en avoir : il n’y a derrière elle aucun nom à échanger, et la seule chose qu’un sélecteur pourrait faire serait de jeter votre dessin.

Mettre une icône dans un bouton

Sélectionnez un bouton et le panneau des propriétés affiche un champ Icône du bouton, avec le même sélecteur. Choisissez une icône et elle est dessinée dans le bouton : au centre s’il n’a pas de texte, devant le texte sinon, à la moitié de la hauteur du bouton et à sa place quand le bouton est redimensionné. Choisissez-en une autre pour l’échanger, ou videz le champ pour la retirer.

Une liste, un tableau ou un menu : peindre les lignes

Dessinez une zone, placez-y les lignes, et les champs Lignes de la zone les peignent — par-dessus ce que vous avez dessiné pour chaque ligne. Il y en a quatre :

• Une ligne sur deux — l’effet zébré. La première ligne garde ce que vous avez dessiné : ce que vous voyez en dessinant est donc l’aspect de la première ligne.

• Ligne sous le pointeur — la surbrillance qui suit la souris le long d’une liste. Elle ne coûte rien : c’est le navigateur qui s’en charge, si bien qu’un tableau de deux cents lignes est aussi rapide qu’un tableau vide.

• Ligne choisie — la ligne que quelqu’un a choisie. Voir plus bas comment une ligne indique qu’elle est la ligne choisie.

• Bord de la ligne choisie — une barre sur cette même ligne, et La barre se place indique sur quel bord :

  • Le long du bord de début — la gauche en anglais, la droite en persan et en arabe, sans rien à régler deux fois. Ce que veut un rail de navigation.
  • Sous la ligne, comme un onglet — ce que veut une bande d’onglets, car c’est ainsi qu’un onglet choisi est marqué dans tous les produits qui existent. Une rangée d’onglets s’étend en largeur : une barre le long de la gauche du premier onglet est un contrôle que personne ne reconnaît.

  C’est la couleur d’accent par défaut, car sur une liste sobre, une ligne choisie et une ligne survolée sont deux nuances d’un même gris, et c’est la barre qui dit vous êtes ici au premier coup d’œil.

Lorsque deux couleurs peindraient la même ligne, la dernière dans cette liste l’emporte : le pointeur recouvre le zébrage, et la ligne choisie garde sa propre couleur même sous le pointeur. Donner à une ligne choisie un aspect non choisi juste au moment où quelqu’un tend la main vers elle serait pire que la surbrillance qui se tait le temps d’une ligne. Le bord n’est pas une couleur de la ligne et n’entre pas dans cette compétition — il se peint en plus de ce qui l’a emporté, et il ne déplace rien sur la ligne : rien ne saute donc de côté quand la sélection change.

astuce

Ne dessinez pas la barre. Un rectangle à côté d’un élément ne peut pas bouger : appuyer sur un autre élément le laisse là où il était — c’est l’image d’une sélection plutôt qu’une sélection. Réglez Bord de la ligne choisie et il suit la même réponse que le remplissage.

Ils s’appliquent aux zones directement à l’intérieur de celle sur laquelle vous les réglez, et pas plus profondément — une liste de cartes zèbre donc les cartes, pas les zones à l’intérieur de chaque carte.

Choisissez une couleur du thème plutôt qu’une couleur à vous chaque fois que possible. Un gris que vous avez prélevé est juste en mode clair et faux en mode sombre, et il est faux sans que cela se voie : le dessin ressemble toujours au dessin d’un écran clair.

Quand il y a plus de lignes que la zone n’est haute

Une zone que vous avez dessinée pour contenir six lignes en contient cent dès qu’une vraie table se trouve derrière : chaque liste doit donc répondre à cette question. C’est la liste déroulante Contenu qui ne tient pas du cadre qui s’en charge :

• L’afficher — il déborde est ce que fait un dessin, et convient à une carte avec une ombre. Sur une liste, c’est ce qui fait descendre les lignes par-dessus le pagineur et tout ce qui est en dessous.
• Le masquer les coupe. La septième ligne est alors inaccessible, ce qui est rarement ce que l’on voulait.
• Y accéder par défilement est la réponse pour une liste : la zone garde la taille que vous lui avez donnée et son contenu défile à l’intérieur. Une liste assez courte pour tenir n’affiche aucune barre de défilement.

Indiquez ensuite le sens du défilement. Une seconde liste déroulante, Sens de défilement, apparaît dès que vous avez choisi Y accéder par défilement :

• Dans les deux sens est ce que veut une liste.
• Vers le bas — le texte passe à la ligne est ce que veut une colonne de prose. L’axe sur lequel vous ne faites pas défiler est coupé, et couper l’horizontale est exactement ce qui fait qu’un paragraphe revient à la ligne au lieu de dépasser sur le côté de la zone. Choisissez ce réglage dès que la zone contient un long champ de texte.
• En travers — les lignes restent sur une ligne est ce que veut un large tableau à colonnes, pour qu’une ligne reste une ligne.

Un long champ de texte, c’est un cadre que vous dessinez autour du texte

La liste déroulante se trouve sur un cadre. Un texte n’a rien de propre contre quoi se couper, car il grandit pour contenir ses mots — dessinez donc un cadre de la taille que la note doit occuper, placez le texte à l’intérieur, et réglez ce cadre sur Y accéder par défilement et Vers le bas — le texte passe à la ligne.

Ce que vous voyez d’un coup dépend de la taille à laquelle vous avez dessiné le cadre. Agrandir l’objet texte ne change rien de visible, car c’est le cadre qui délimite la vue. La boîte de dialogue de détails de l’exemple Support desk fait exactement cela, sur un champ Notes de deux mille caractères.

Deux choses à faire en même temps :

• Épinglez la zone en haut et en bas dans Contraintes, pour qu’une fenêtre plus haute affiche davantage de lignes au lieu de davantage d’espace vide en dessous.
• Gardez l’en-tête à l’extérieur de la zone. Un en-tête dessiné comme première ligne de la liste défile avec les lignes ; dessiné comme un cadre séparé au-dessus, il reste en place. Le tableau de l’exemple Support desk fait exactement cela.

Dessiner une ligne, en obtenir une par enregistrement

Les lignes d’un tableau ne sont pas vingt zones que vous avez dessinées. Dessinez-en une, et indiquez sur quoi elle se répète :

1. Chargez les enregistrements. Dans le gestionnaire Chargé de l’écran, écrivez loadRecords("par_account", "accounts") — le nom de la table, et un champ d’état où placer les lignes. Un troisième argument indique le nombre maximal, ou pose une question plus complète : { top: 20, where: { par_status: "Open" }, orderBy: "par_name" }. Voir Lire et écrire des enregistrements.
2. Indiquez ce qui se répète. Sélectionnez la ligne que vous avez dessinée et renseignez Un de ceux-ci par avec state.accounts.
3. Indiquez ce que montre chaque cellule. Liez une légende à l’intérieur de la ligne à row.par_name — row est cet enregistrement. rowIndex est sa position, en comptant à partir de zéro.

Deux choses concernant la zone autour de la ligne :

• Elle doit empiler ses enfants — activez la disposition automatique. Chaque copie d’une zone que vous avez placée garde la position où vous l’avez placée : les quarante se superposeraient donc à la première. L’enregistrement le signale si vous oubliez.
• Tout le reste de cette zone est laissé tel quel. Une ligne d’en-tête dessinée au-dessus du corps ne se répète pas, car la répétition porte sur la ligne et non sur la zone.

Vous pouvez répéter un contrôle aussi facilement qu’une zone — une case à cocher par ligne est la façon de sélectionner plusieurs enregistrements, et c’est une case à cocher ordinaire avec row.id dans le gestionnaire.

Une limite à connaître avant de vous y heurter : une répétition ne peut pas se trouver dans une répétition. row signifierait deux choses différentes au même endroit : l’enregistrement refuse donc la répétition intérieure et indique laquelle.

Quelle ligne est la ligne choisie

Deux moitiés, et aucune ne dépasse une ligne :

1. Dites laquelle — liez la propriété Choisie de chaque ligne à une comparaison, comme row.id == state.picked. C’est une liaison plutôt qu’un réglage que l’on active, et c’est ce qui fait que la ligne précédente cesse d’être choisie au même moment : chaque ligne répond de nouveau à la question lorsque l’état change.
2. Réglez-la quand on appuie sur une ligne — setState("picked", "…") dans le gestionnaire Appuyé de la ligne.

Si vous avez aussi dessiné une variante Choisie de la ligne, la même liaison l’active également. Il n’y a ici qu’une seule idée de « choisi », pas deux : le remplissage et la variante lisent la même réponse.

Remplir la ligne, et un menu pour téléphone

Chaque objet à l’intérieur d’un cadre en disposition automatique a la longueur que vous lui avez dessinée — une ligne ne peut donc jamais être plus étroite que ce qu’elle contient, et sur un téléphone elle dépasse sur le côté. Sélectionnez l’objet et, sous Redimensionnement dans l’onglet Graphique, cochez Remplir la ligne (ou Remplir la colonne) : il prend la longueur que les autres laissent, et la rend quand il y en a moins.

C’est ainsi que l’on dessine la barre supérieure d’un site web : le nom du site remplit la ligne, si bien que les liens restent contre le bord opposé quelle que soit la largeur.

Un formulaire qui occupe toute la largeur d’un téléphone, et une carte sur un ordinateur. Sélectionnez un cadre dans une disposition automatique verticale et réglez Largeur max. sous Redimensionnement : la colonne l’étire sur un écran étroit et, sur un écran plus large, s’arrête à ce nombre de pixels et le centre. Une carte de connexion ou un formulaire de contact se dessine ainsi une seule fois — pas une fois par largeur. Vide signifie sans limite.

Trois cartes côte à côte sur un ordinateur, les unes sous les autres sur un téléphone. Sélectionnez une disposition automatique horizontale et cochez Renvoyer à la ligne sous Disposition automatique. Chaque élément de la rangée commence à la largeur à laquelle vous l’avez dessiné ; lorsque l’écran est trop étroit pour tous, ceux qui ne tiennent plus passent à la ligne suivante. Donnez à chaque carte Remplir la ligne et elle s’étire aussi sur ce qui reste de sa ligne — trois cartes se partagent un ordinateur, une tablette place la troisième sur sa propre ligne, et un téléphone en affiche une par ligne. Dessinées une seule fois : il n’y a pas de seconde copie des cartes à masquer. Le canevas montre la ligne unique que vous avez dessinée ; le renvoi à la ligne est ce qu’un écran plus étroit en fait.

Pour un téléphone, dessinez les liens et un bouton Menu, et donnez à chacun une liaison Affiché sur la largeur de la page :

screen.width >= 720      on the links
screen.width < 720       on the Menu button

screen.width est la largeur de la zone dans laquelle l’écran est affiché, et elle change avec la fenêtre. Placez le bouton Menu au début de la barre et faites-lui exécuter openStartDrawer("Site menu"), où Site menu est une carte superposée contenant les mêmes liens — le menu s’ouvre ainsi du côté où se trouve son bouton (la gauche en anglais, la droite en persan). Donnez à chaque lien Choisie screen.name == "Home", et à la rangée qui les contient un remplissage de survol et un remplissage de ligne choisie, et le menu indique où vous êtes. L’exemple portal-pages-and-navigation en dessine un pour vous.

Dessinez la barre une seule fois. Une barre présente sur chaque écran est un composant : dessinez-la, faites-en un composant, et placez une instance sur chaque écran — modifiez le maître et chaque page suit. Comme un lien lit screen.name, une instance n’a besoin qu’on lui dise rien sur la page où elle se trouve.

Un cadre à l’intérieur d’un cadre manuel (disposition automatique désactivée) a des Contraintes à la place — épinglez-le à des bords, et il garde sa distance avec eux lorsque le cadre change de taille. À l’intérieur d’une disposition automatique, c’est la disposition qui décide où vont les éléments : Redimensionnement est donc la seule question qui reste.

Ce qui n’est pas encore là

Délibérément, et chacun dans sa propre version :

• Les vues enregistrées, et les parties d’un filtre qui ne tiennent pas en une ligne. Un écran nomme une table, avec des paires d’égalité, des paires « contient », un tri et une page — voir Afficher une liste page par page. Il ne peut pas nommer l’une des vues enregistrées de la plateforme : un filtre que vous y avez déjà dessiné est donc redessiné ici. Et il n’y a ni ou, ni plage, ni imbrication : c’est là qu’un filtre cesse d’être une ligne dans un gestionnaire et devient le concepteur de requêtes.
• Les sommes et les moyennes. Un écran compte des lignes — c’est ce que sont les vignettes de l’exemple de tableau de bord — mais il ne peut pas totaliser une colonne ni regrouper par colonne.
• Un contrôle de recherche. Les autres sont arrivés : une grille et un formulaire rapide constituent le contrôle Vue de table ou formulaire (Placer un tableau de bord sur un écran dessiné), une boîte de dialogue est une carte superposée, les onglets sont une valeur choisie et une liaison Affiché par panneau, et passer d’un écran à l’autre se fait avec navigate. Ce qui n’a toujours pas de contrôle propre, c’est le sélecteur d’enregistrement — la bibliothèque de composants en a un dessiné, que l’exemple Support desk place et auquel il donne son propre état.
• Les emplacements (slots). Un composant accepte des propriétés et déclenche des événements ; ce qu’il ne sait pas encore faire, c’est laisser un trou que l’écran qui le place viendrait remplir.
• Le clavier, et tout ce qui dépend d’un minuteur. Il y a huit événements, et le seul qui concerne la vie propre de l’écran est Chargé.

L’onglet ne propose que ce qui a un sens aujourd’hui. Un contrôle qui ne ferait rien vous apprendrait un geste qui ne fait rien.

Dépannage

• L’onglet Écran dit que mon objet fait partie du graphisme. — les lignes, les formes et les chemins n’ont pas de signification à recevoir. Ce sont les cadres, les textes et les images pour lesquels vous pouvez répondre.
• « L’écran » n’est pas proposé. — vous avez sélectionné un objet texte ou une image. Seul un cadre peut être l’écran.
• Mon contrôle ne ressemble en rien à la zone que j’ai dessinée. — c’est voulu : un contrôle apporte son propre aspect. Seules sa position et sa taille viennent de votre dessin. Si vous vouliez les couleurs que vous avez choisies, laissez-le sous forme de zone et donnez-lui plutôt l’élément Un bouton.
• Il n’y a nulle part où dessiner un état. — les états appartiennent à un composant. Faites un clic droit sur l’objet, choisissez Créer un composant, et ajoutez l’état sur le composant. (Si l’objet est un contrôle, il n’en a aucun par conception : il sait déjà quel aspect il a dans chaque état.)
• Enregistrer est grisé. — rien n’a changé depuis le dernier enregistrement.
• L’aperçu est vide. — rien n’est balisé comme l’écran, ou le cadre de l’écran ne contient rien. Dessinez un cadre, marquez-le comme l’écran, et placez-y quelque chose.
• Mon état ne fait rien. — soit la copie est identique à l’original (il n’y a aucune différence à conserver), soit vous l’avez seulement déplacée, ce qu’un état ignore délibérément. Changez une couleur.
• L’enregistrement dit qu’un état change la structure. — la copie contient plus ou moins d’objets que l’original. Voir plus haut.
• L’objet à partir duquel j’ai copié a disparu. — l’enregistrement le signale : un état qui n’est l’état de rien ne dessine rien. Supprimez la copie, ou redessinez l’objet.
• Mon écran n’apparaît pas dans une application. — un écran doit y être placé ; voir Ouvrir une application Studio depuis une application pilotée par modèle.
• Mon dessin est correct mais l’écran paraît terne. — vérifiez sur quoi chaque objet est réglé. Un objet laissé vide fait partie du graphisme ; il est dessiné, mais il ne dit rien de ce que contient l’écran.

Scénarios associés

• Rendre un écran réactif — l’état et les liaisons, pour que le dessin fasse quelque chose.
• Créer une application Studio.
• Réutiliser un design avec des composants.
• Ouvrir une application Studio depuis une application pilotée par modèle.