Réutiliser un design avec des composants

Objectif

Dessiner quelque chose une fois, l’utiliser partout, et qu’il ait le bon aspect en mode clair comme en mode sombre.

Trois choses, qui fonctionnent ensemble : le panneau Composants depuis lequel vous faites glisser, les états dans lesquels un composant peut être affiché, et les couleurs du thème qui suivent le lecteur plutôt que l’auteur.

Le panneau Composants

Le panneau à gauche du canevas contient deux listes à la fois : Calques en haut, que vous connaissez déjà, et Composants en dessous. Faites glisser la ligne qui les sépare pour donner plus de place à l’une — une arborescence profonde veut un partage, un design plein de composants veut l’autre — et faites glisser le bord extérieur du panneau pour élargir l’ensemble. Les deux lignes acceptent les touches fléchées aussi bien que la souris.

Appuyez sur l’en-tête d’une liste pour la replier, et l’autre occupe tout le panneau ; appuyez de nouveau sur l’en-tête pour la faire revenir, exactement là où vous aviez laissé la ligne. Une liste reste toujours ouverte : l’en-tête de la dernière liste ouverte ne réagit donc pas.

Composants contient ces listes :

Groupe	Ce que c’est
Contrôles	Ceux de la plateforme — un Bouton, une Zone de texte, une Zone de texte multiligne, une Case à cocher, une Liste déroulante, un Sélecteur de date, un Sélecteur de fichier
Éléments	Ce dont un écran est fait — L’écran, Une région, Une liste, Un élément de liste, Un titre, Un paragraphe, Un lien
D’autres applications	Les composants dessinés dans les autres applications de la solution apparaissent ici, prêts à être placés.
Composants	Ceux que vous avez créés dans ce design

Faites-en glisser un sur le canevas et il arrive là où vous l’avez déposé. Ou cliquez dessus (ou appuyez sur Entrée) et il arrive au milieu de ce que vous regardez — bon à savoir si vous travaillez sans souris.

Faire glisser un contrôle hors de ce panneau est le moyen rapide d’obtenir un vrai contrôle : il arrive déjà sous forme de Zone de texte, à peu près à la taille d’une zone de texte et peint comme elle, au lieu d’arriver sous la forme d’un rectangle qu’il vous faudrait ensuite classer dans l’inspecteur.

Faire glisser un élément est la façon de construire la forme de l’écran. Une région arrive déjà balisée : elle devient donc une vraie <section>, et un titre devient un vrai titre — c’est ce qui place votre écran dans le plan d’un lecteur d’écran et ce qui permet à Ctrl+F de trouver votre texte. Un simple rectangle peut être balisé après coup dans l’onglet Écran ; déposer l’élément vous évite d’avoir à y penser.

Il n’y a pas de formes dans ce panneau

Il y en avait, et elles sont retournées là où elles fonctionnent : le rail d’outils tout à gauche contient toutes les formes, et un outil est un mode — choisissez-le, puis faites glisser pour obtenir la taille voulue, ce qui convient à une ligne ou à un tracé à la plume, où le glissement est la forme. Ce panneau fait la moitié de la hauteur du rail et partage cette hauteur avec l’arborescence des objets : il contient donc ce que vous ne pouvez obtenir que là.

remarque

Contrôles et Éléments n’apparaissent que lorsque vous concevez un écran. Sur un rapport ou un tableau de bord, ni une zone de texte ni une région n’auraient de sens : ni l’un ni l’autre n’est donc proposé.

Créer un composant

Sélectionnez les objets que vous voulez réutiliser, faites un clic droit et choisissez Créer un composant. Ils deviennent le maître d’un composant — et le maître apparaît immédiatement dans le panneau Composants.

Ce que vous avez sélectionné devient le composant. Si vous avez sélectionné un objet — une carte dessinée dans un cadre, une puce d’état dessinée comme un simple rectangle, un groupe contenant une icône et son libellé — cet objet est le maître, à l’endroit où il se trouvait déjà, et le composant prend son nom. Rien n’est ajouté au-dessus : l’arborescence ne gagne pas de niveau, et vous ne vous retrouvez pas avec un « Component » posé au-dessus du nom que vous avez choisi. Sélectionnez plusieurs objets à la fois et ils sont enveloppés dans un cadre, car un composant a besoin d’une racine unique et une sélection éparse n’en a pas.

Puisque le composant est l’objet, son nom le suit : renommez le calque et le composant est renommé avec lui, dans le panneau Composants et partout où il est proposé.

À partir de là :

• Faites-le glisser hors du panneau autant de fois que vous le souhaitez. Chaque exemplaire est une instance.
• Modifiez le maître et chaque instance change avec lui.
• Ajoutez-lui une partie plus tard. Sélectionnez le maître, appuyez sur Maj+2 pour l’amener à l’écran et placez-y un élément de la palette : un texte, un lien, un bouton. Il fait alors partie du composant, et chaque instance le reçoit.
• Choisissez ce qu’une instance peut changer. Sélectionnez un calque dans le maître et cochez les propriétés que les instances doivent pouvoir surcharger. Tout ce que vous ne cochez pas reste verrouillé sur le maître — c’est tout l’intérêt : un composant ne vaut la peine que s’il est réellement le même partout.

Distinguer le maître d’une instance

Dans la liste Calques, ils portent des pictogrammes différents, pour que vous sachiez d’un coup d’œil lequel est lequel sans cliquer sur quoi que ce soit : le quatre-losanges est le maître — l’unique définition — et le losange creux unique est une instance, une copie de celui-ci. Survolez l’un ou l’autre pour le voir écrit en toutes lettres. Seule la ligne la plus externe de chacun est marquée ; les calques à l’intérieur lui appartiennent et ne sont pas marqués de nouveau.

Atteindre le maître depuis une instance

Une instance ne peut pas être modifiée là où elle se trouve : lorsque vous voulez la changer, il faut aller à son maître. Deux façons, qui fonctionnent toutes deux depuis un calque à l’intérieur d’une instance comme depuis l’instance elle-même :

• Faites un clic droit dessus et choisissez Aller au composant principal.
• Dans l’inspecteur, appuyez sur Aller au composant principal dans le panneau Instance, sous le nom du composant.

L’une ou l’autre sélectionne le maître et l’amène dans la vue : le panneau décrit ainsi l’objet que vous vous apprêtez à modifier plutôt que la copie d’où vous venez.

Récupérer les formes : Dupliquer comme cadre

Dupliquer sur un composant fait ce qui est écrit et pas ce que vous vouliez peut-être dire : sur un maître, cela crée un second maître, et sur une instance une seconde instance. Les deux continuent de suivre quelque chose, ce qui est tout l’intérêt d’un composant — et la mauvaise réponse quand ce que vous voulez, c’est « cette carte est presque bonne, donnez-m’en une que je peux modifier librement ».

Faites un clic droit sur un composant ou une instance et choisissez Dupliquer comme cadre. Ce qui arrive est un cadre ordinaire rempli de formes ordinaires : le même dessin, qui ne suit plus rien, modifiable partout. Faites-en un composant plus tard s’il le mérite — et comme un cadre devient lui-même le composant, cela ne vous coûte aucun niveau supplémentaire dans l’arborescence.

Les états dessinés ne l’accompagnent pas. Un état est une image d’un composant, et une copie qui n’en est plus un n’a rien dont ces images pourraient être l’image.

Rendre une instance ordinaire : Détacher l’instance

Faites un clic droit sur une instance — ou sur quelque chose à l’intérieur — et choisissez Détacher l’instance. Elle devient un cadre ordinaire là où elle est : les mêmes formes, la même place, elle ne suit plus le maître, et chacune de ses parties est modifiable. Contrairement à Dupliquer comme cadre, rien n’est copié. Un maître ne peut pas être détaché ; supprimez-le plutôt.

Donner des propriétés à un composant

Un composant vaut davantage quand chaque copie peut dire quelque chose de différent. C’est à cela que servent les propriétés, et il en existe deux sortes — la différence tient à l’endroit où se trouve la valeur.

remarque

Les propriétés et les événements se trouvent dans l’onglet Écran, sous Interface du composant — pas dans Graphique avec les remplissages et les rayons d’angle. Une propriété est ce qu’un écran définit et un événement ce qu’il entend ; ni l’un ni l’autre n’est un fait du dessin, et tous deux sont lus par les expressions de ce même onglet.

La sorte dessinée : cocher la propriété d’un calque

Sélectionnez un calque à l’intérieur du maître et cochez une propriété sous Exposer sur les instances — cette case se trouve dans l’onglet Graphique, avec les autres propriétés du calque. Elle déclare une propriété nommée d’après le calque — Caption + texte devient captionText — et celle-ci apparaît dans la liste Propriétés sous Interface du composant dans l’onglet Écran.

Une instance la définit en modifiant sa propre copie : cliquez dans l’instance, changez le texte ou la couleur, et la modification tient. Vous la voyez sur le canevas pendant que vous disposez l’écran, ce qui est tout l’intérêt de cette sorte.

La sorte valeur : en ajouter une vous-même

Sélectionnez le maître du composant, allez dans l’onglet Écran et appuyez sur ＋ Propriété sous Interface du composant → Propriétés. Donnez-lui un nom et un type (Texte, Nombre, Oui / non).

Une valeur par défaut, si vous en voulez une, s’écrit sur la page de code. Avec le maître toujours sélectionné, appuyez sur Écrire du code (le bouton </>), choisissez la propriété dans la liste à côté de l’éditeur, et écrivez l’expression : "Untitled", 0, false. C’est du BS comme tout le reste de cet écran : elle s’écrit donc là où se trouve le reste du BS.

Rien ne s’affiche encore, car rien n’est dessiné pour elle. Liez-y quelque chose : sélectionnez un calque à l’intérieur du maître, et sous Texte (ou Affiché, ou Activé), écrivez props.title. Voir Rendre un écran réactif pour le fonctionnement des liaisons.

Désormais, chaque instance peut recevoir sa propre valeur : sélectionnez-la, et le panneau Instance liste les mêmes propriétés. Une propriété valeur accepte une expression : ce peut donc être un littéral — "Standard" — ou suivre l’écran : state.chosenPlan. Quand l’état de l’écran change, la carte suit.

remarque

Seule la sorte valeur peut être lue avec props. Une propriété dessinée est définie sur la copie d’un calque propre à l’instance ; il n’y a rien qu’une expression puisse lire. Si vous voulez que l’intérieur d’un composant utilise une valeur, ajoutez une propriété ici et liez-vous à elle.

Déclencher un événement

Un composant doit dire ce qui s’est passé, pas décider de ce que cela signifie — c’est l’écran sur lequel il est placé qui en décide, et chaque écran peut en décider différemment.

1. Sélectionnez le maître, allez dans l’onglet Écran et appuyez sur ＋ Événement sous Interface du composant → Événements. Nommez-le : chosen, submitted.
2. À l’intérieur du composant, depuis n’importe quel gestionnaire, déclenchez-le : emit("chosen", props.title). Le second argument est facultatif.
3. Sélectionnez une instance et ouvrez son onglet Écran. Sa liste Événements comporte maintenant votre événement, avec une zone pour ce que cet écran en fait — du code de gestionnaire ordinaire, dans la portée propre de l’écran. Ce que le composant a envoyé est event.payload.

Le même composant placé deux fois sur le même écran peut répondre différemment, car le gestionnaire appartient à l’instance. C’est la différence entre un événement et un champ d’état partagé.

astuce

Essayez-le dans l’exemple Choose a plan : une carte, placée deux fois, avec des formules différentes et deux réponses différentes au même événement.

Donner des états à un composant

Un composant peut avoir un aspect différent selon ce qu’il est : une erreur, un avertissement, quelque chose de sélectionné, quelque chose encore en cours de chargement.

Les états appartiennent au composant, et c’est sur le composant que vous les déclarez. Sélectionnez le maître du composant et le panneau Composant de l’inspecteur les liste :

• Normal est en tête de liste, et il n’y a rien à dessiner pour lui — le maître est Normal.
• En dessous, chaque état que vous avez ajouté. Appuyez sur l’un d’eux pour aller directement à son dessin.

Pour en ajouter un :

1. Sélectionnez le maître du composant.
2. Dans le panneau Composant, sous États, saisissez un État — tout ce que votre écran a réellement : invalid, overBudget, awaitingApproval — ou choisissez l’une des suggestions. Appuyez sur ＋ État.
3. Une variante apparaît directement sous le composant, dans le même cadre que le composant, nommée <Composant> — <état>. Changez ses couleurs. C’est l’état.

astuce

Les variantes vivent à côté du composant, pas dans une boîte à part. Elles s’empilent dans la colonne propre du composant — la deuxième sous la première, et ainsi de suite — et si le composant se trouve dans un cadre, ce cadre s’agrandit vers le bas pour faire de la place ; rien de ce qu’il contient déjà ne bouge.

Il y avait auparavant une boîte autour d’elles, appelée <Composant> variants. Elle a disparu : les états d’un composant sont ses variantes, et une boîte entre un composant et ses propres états ajoutait un niveau dans l’arborescence des calques et faisait lire les états comme une liste distincte rangée ailleurs. Si vous avez un écran qui en contient encore une, elle se défait la prochaine fois que vous ouvrez cet écran — les variantes restent exactement là où elles sont dessinées, et la boîte vide disparaît.

Rien de ce que dessine une variante n’est rendu sur la page. Une variante est une image d’un composant, pas une partie de l’écran, et le compilateur l’ignore où que vous la placiez — c’est ce qui permet sans risque qu’une variante se trouve à l’intérieur de votre mise en page.

Il y a trois cadres qu’une variante ne rejoindra pas, chacun pour une raison : le cadre de l’écran, car sa taille est la taille de l’écran et l’agrandir redimensionnerait votre écran chaque fois que vous dessinez un état ; un cadre en disposition automatique, car elle serait intégrée à votre flux et bousculerait votre dessin ; et un composant qui ne se trouve dans aucun cadre. Dans les trois cas, elle va sur le canevas, sous le composant.

Le nom que vous donnez à la variante est le nom de l’état. C’est tout : il n’y a pas de seconde liste à maintenir en phase avec les dessins.

C’est le seul endroit où l’on ajoute un état. Un objet ordinaire n’en a aucun : son onglet Écran le dit et renvoie vers Créer un composant. Un seul geste, à un seul endroit, à côté de la liste des états qui existent déjà — et un composant avec une seule instance est un composant parfaitement valable si tout ce que vous vouliez était un survol sur un bouton.

Le pointeur lui-même

Une zone dessinée qui fait quelque chose ressemble exactement à une zone dessinée qui ne fait rien, et le pointeur de la souris est la seule chose qui indique laquelle est laquelle — avant que l’on clique.

Sélectionnez n’importe quel objet : son onglet Écran comporte un sélecteur Pointeur : Main, Texte, Déplacer, Saisir, Non autorisé, Occupé ou Flèche. Réglez-le sur une variante et il ne s’applique que dans cet état, ce qui est généralement ce que vous voulez : une Main sur la variante de survol est la façon dont une carte dessinée indique qu’on peut appuyer dessus.

Cela ne coûte rien. Le pointeur fait partie du dessin : il entre donc dans la feuille de style de l’écran avec toutes les autres différences que cet état apporte — aucun gestionnaire, et rien ne s’exécute quand vous bougez la souris.

L’option vide est Tel quel, et ce n’est pas la même chose que Flèche. Non défini signifie « ce que cela aurait été de toute façon », ce qui pour un vrai bouton est déjà une main ; Flèche, c’est vous qui demandez la flèche même à cet endroit.

Pendant que le pointeur est dessus

Sélectionnez une variante : son onglet Écran comporte un sélecteur Pendant : Toujours, ou Survol, Appuyé, Focus.

C’est la seconde moitié de ce qu’est un état, et elle se trouve sur le dessin parce que c’est là que la réponse est évidente : ceci est l’image de Non valide, et voici l’aspect de Non valide sous le pointeur. Elle peut aussi être modifiée après coup — un Non valide dessiné la semaine dernière devient Non valide + Survol sans être ressaisi ni redessiné.

Deux choses qu’il ne fera pas, et il dit pourquoi dans les deux cas :

• Il n’y aura pas de collision. Si vous avez déjà un Non valide + Survol, le sélecteur refuse d’en créer un second — un dessin par état, sinon rien ne peut dire lequel des deux était voulu.
• Son Toujours est grisé sur un état qui n’est qu’une interaction. Une variante nommée hover est l’état de survol ; lui retirer l’interaction la laisserait sans nom. Si vous voulez un état qui n’est pas lié à une interaction, dessinez-en un avec un nom à vous — overBudget.

Régler un Pendant sur un état désépingle aussi toute instance qui l’affichait, car seul un état sans interaction peut être épinglé — rien ne peut déclarer qu’un élément est survolé en permanence.

remarque

Vous ne pouvez pas dessiner un état sur une instance, et l’inspecteur le dit lorsque vous en sélectionnez une. Un état sur une copie serait un état que seule cette copie possède — invisible depuis le composant, absent de toutes les autres instances, et perdu dès que l’instance est réinitialisée. Allez au composant principal et ajoutez-le là : chaque instance pourra alors être affichée dans cet état.

Le nom de l’état vous appartient. Non valide, Succès et les autres ne sont que des suggestions : saisissez awaitingApproval, overBudget ou ce que cet écran a réellement, et il se comporte exactement comme les suggestions. Utilisez des lettres, des chiffres, - et _, en commençant par une lettre.

Les interactions sont fixes, et c’est le seul endroit où vous ne pouvez pas inventer de nom : Survol, Appuyé et Focus appartiennent au navigateur, c’est pourquoi ils ne coûtent rien et fonctionnent sans que vous écriviez quoi que ce soit. Ils ne se saisissent pas non plus dans le nom — c’est le sélecteur Pendant de la variante qui indique lequel s’applique.

remarque

Désactivé est un nom, pas un Pendant. C’était auparavant une quatrième entrée de ce sélecteur, et elle n’y a pas sa place : les trois ci-dessus 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 ordinaire, saisi sous la forme disabled.

C’est aussi le seul nom pour lequel vous n’avez jamais à dire quand il est actif. L’écran le sait déjà, grâce à la case Désactivé du contrôle ou à son expression Activé. Nommez une variante disabled et un contrôle qui ne peut pas être utilisé la porte, sans expression à écrire.

Désormais, sur n’importe quelle instance de ce composant, l’inspecteur propose Affiché dans l’état. Choisissez Non valide et cette instance est dessinée comme l’erreur, directement sur le canevas, pendant que vous disposez l’écran. Les autres restent en Normal.

Normal, c’est le maître. Il n’y a rien à dessiner pour lui, et rien à choisir — laisser Affiché dans l’état sur Normal signifie « tel que vous l’avez dessiné ».

Seule la liste de gauche peut être affichée. Affiché dans l’état propose Non valide, Succès et les autres, mais pas Survol — c’est au navigateur d’en décider, et un écran qui prétendrait qu’un élément est survolé en permanence serait un écran qui ment. Dessinez l’état de survol et il fonctionne quand même ; vous ne le choisissez simplement pas.

Deux autres choses méritent d’être connues :

• Seules les différences sont conservées. Changez la couleur de bordure de la copie, et la couleur de bordure est ce que signifie l’état. Redimensionnez ensuite le maître et chaque état suit, car un état ne change jamais la taille ni la position.
• Les combinaisons se replient d’elles-mêmes. Si vous dessinez Succès et Succès + Survol, un utilisateur qui le survole obtient le second et un utilisateur qui ne le survole pas obtient le premier. Si vous n’avez dessiné que Succès, le survoler affiche toujours Succès. Vous n’avez jamais à dessiner toutes les combinaisons.

Activer un état depuis le code

Choisir un état pendant la conception n’est qu’une moitié. L’autre, c’est l’écran en cours d’exécution qui le change, et cela tient en une ligne dans un gestionnaire :

setVisualState("invalid");

setVisualState("") revient à Normal. Écrivez-le partout où l’écran apprend ce qu’il faut — le clic d’un bouton, le changement d’une zone — sur la page Code, là où s’écrivent tous les autres gestionnaires. Voir Rendre un écran réactif pour ce que peut faire un gestionnaire.

Il ne nomme aucun objet, et n’en a pas besoin. L’état qu’il change est celui de l’élément le plus proche, au niveau du gestionnaire ou au-dessus, sur lequel un état est dessiné. Dessinez un état d’une carte, câblez un gestionnaire sur un bouton à l’intérieur de cette carte, et l’appel concerne la carte — ce qui est la bonne réponse dans tous les dessins, puisqu’un état est dessiné sur l’objet qu’il change et que le gestionnaire est câblé sur quelque chose à l’intérieur.

L’état appartient à l’objet sur lequel il a été dessiné, et il atteint l’intérieur de celui-ci : dessinez un état d’une carte, et le libellé, la bordure et tout ce que vous avez changé dans la copie suivent ensemble. Un appel, un seul endroit où regarder lorsqu’un état est actif alors qu’il ne devrait pas l’être.

Les états d’interaction ne se définissent pas depuis le code, et le panneau le dit : le navigateur décide déjà quand un élément est survolé, appuyé ou a le focus.

Un état que rien ne définit jamais fonctionne quand même — c’est ce sur quoi Affiché dans l’état épingle une instance pendant que vous disposez un écran. Quand le code s’exprime, il remplace l’épinglage.

remarque

Il y avait ici un bouton Ajouter une condition, et il n’existe plus. Il prenait une expression que l’écran revérifiait en permanence, ce qui signifiait qu’un écran avait deux façons de décider de l’aspect de quelque chose — une variante qui s’activait toute seule, à côté de gestionnaires qui ne pouvaient pas y toucher, et rien sur le canevas pour dire laquelle une variante donnée utilisait. Un écran décide désormais des choses à un seul endroit.

Le coût est réel et mérite d’être connu : une condition s’activait d’elle-même dès le chargement de l’écran, alors qu’un gestionnaire ne s’exécute que lorsqu’il se passe quelque chose. Si un état doit être actif avant que quiconque ait fait quoi que ce soit, épinglez-le avec Affiché dans l’état — c’est à cela qu’a toujours servi un épinglage, et le code le remplace la première fois qu’un gestionnaire s’exprime.

Couleurs du thème

Sous les sélecteurs de couleur Remplissage et Contour se trouve une rangée de pastilles rondes. Ce sont les couleurs du thème de la plateforme — Arrière-plan, Surface, Texte, Texte secondaire, Bordure, Principale, Erreur, Succès.

Choisissez-en une au lieu d’une couleur, et l’objet cesse d’être de cette couleur pour devenir ce rôle. Ce qui compte, car :

• Il suit le thème du lecteur. Une personne qui utilise Parsware en mode sombre voit votre écran en sombre : les surfaces s’assombrissent, le texte s’éclaircit, les bordures s’ajustent. Vous ne le dessinez pas deux fois.
• Il suit la couleur d’accent du locataire. Principale est la couleur d’accent qui a été choisie, quelle qu’elle soit, et non un bleu que vous avez choisi en 2026.

Appuyez sur la lune dans la barre d’outils pour voir votre dessin en sombre, et sur le soleil pour revenir. Ce bouton ne change que ce que vous regardez — il ne change pas le thème de l’application elle-même, qui se trouve dans les Paramètres.

Cliquer sur la pastille déjà choisie la détache, et la couleur qu’elle affichait devient une couleur ordinaire. C’est le moyen de revenir en arrière si vous décidez finalement que vous vouliez exactement ce gris.

astuce

Le cadre Styles d’un nouveau design est déjà construit à partir des couleurs du thème. Faites pointer vos formes vers ces pastilles et tout suit le thème, gratuitement.

Styles partagés

Un style partagé est une forme que les autres suivent. Sélectionnez une forme et appuyez sur Enregistrer comme couleur (son remplissage) ou Enregistrer comme forme (remplissage, bordure, rayon des coins, opacité et ombre) ; un texte a Enregistrer comme texte. La forme reste sur le canevas, et sa section Style indique combien de formes la suivent.

Pour en suivre un, ouvrez la liste au-dessus de Uni, Linéaire et Radial dans la section Remplissage, la liste Style en haut pour un style de forme, ou la liste Style de texte dans la section Texte. Modifiez la forme du style lui-même et tout ce qui le suit change. Donnez à une forme qui le suit une valeur à elle et elle cesse de le suivre ; Retirer refait du style une forme ordinaire, et les formes qui le suivaient gardent leurs valeurs. Insérer → Styles par défaut ajoute un jeu tout prêt.

Ces listes s’utilisent au clavier : Entrée ou Espace l’ouvre, les flèches s’y déplacent et Échap la ferme.

Prérequis

• Un écran sur lequel dessiner — voir Créer une application Studio.

Étapes

1. Dessinez ce que vous voulez réutiliser — une puce d’état, un champ avec son libellé, une carte.
2. Sélectionnez-le, faites un clic droit, Créer un composant.
3. Faites-le glisser deux fois hors de la liste Composants.
4. Sélectionnez le maître, et sous États, saisissez invalid, puis appuyez sur ＋ État.
5. Changez la bordure de la variante pour la couleur du thème Erreur.
6. Sélectionnez la seconde instance et réglez Affiché dans l’état sur Non valide. Elle change sur le canevas.
7. Appuyez sur la lune dans la barre d’outils. Tout ce qui est peint avec une couleur du thème suit.
8. Appuyez sur Enregistrer.

Dépannage

• La liste Composants est vide. — rien dans ce design n’est encore un composant. Sélectionnez des objets et choisissez Créer un composant.
• Affiché dans l’état n’est pas proposé. — soit l’objet sélectionné n’est pas une instance (sélectionnez sa zone la plus externe), soit son composant n’a pas encore d’états : sélectionnez le maître et ajoutez-en un sous États.
• Il n’y a pas de bouton ＋ État. — l’objet sélectionné n’est pas le maître d’un composant. Sélectionnez la zone la plus externe du composant, ou appuyez sur son nom sur une instance pour y aller.
• Il n’y a plus de bouton ＋ Instance. — placer un nouvel exemplaire est le rôle de la liste Composants : faites glisser le composant exactement là où vous le voulez. Clic droit → Instance fonctionne toujours aussi.
• J’ai épinglé une instance sur un état et rien n’a changé. — la copie de l’état est identique au maître. Changez une couleur sur la copie.
• Le glissement ne fait rien. — déposez-le sur le canevas lui-même, pas sur un panneau. Ou cliquez simplement sur la ligne : il arrive au milieu de la vue.
• L’aperçu sombre a le même aspect. — le dessin utilise des couleurs ordinaires plutôt que des couleurs du thème. Choisissez parmi les pastilles rondes sous le sélecteur de couleur.
• Mon contrôle ignore la couleur du thème que je lui ai donnée. — l’aspect d’un contrôle appartient à la plateforme : il suit donc déjà le thème ; seules sa position et sa taille viennent de votre dessin.
• J’ai modifié une instance et elle est revenue en arrière. — cette propriété est verrouillée sur le maître. Sélectionnez le calque correspondant à l’intérieur du maître et cochez-la sous Exposer sur les instances.
• J’ai ajouté une propriété et rien n’a changé. — une propriété valeur n’a rien de dessiné pour elle. Liez quelque chose à l’intérieur du maître à props.<name>, sinon c’est une valeur que personne ne lit.
• props.something est vide dans une expression. — soit le composant n’a aucune propriété de ce nom, soit celle qu’il a est de la sorte dessinée, qu’une expression ne peut pas lire. Ajoutez une propriété valeur et liez-vous à celle-ci.
• Mon événement ne fait rien. — vérifiez trois choses : le composant le déclare (Événements, sur le maître), un gestionnaire à l’intérieur du composant appelle réellement emit("name"), et l’instance a un gestionnaire pour celui-ci. Un composant qui déclenche un événement auquel personne ne répond n’est pas une erreur.
• J’ai supprimé un état et les instances qui l’utilisaient ont de nouveau l’aspect normal. — c’est voulu, et la confirmation l’a dit : une instance épinglée sur un état qui n’existe plus revient à Normal plutôt que de disparaître.
• J’ai fait glisser la légende à l’intérieur d’un bouton et elle a quitté le composant. — corrigé. Une partie d’un composant ne peut plus en être extraite par glissement ; la légende va là où vous la placez, y compris au-delà du bord du bouton, et reste une partie du bouton. Seul le propre cadre du composant entre dans les cadres qui l’entourent et en sort.
• J’ai supprimé un composant et des dessins ailleurs sur l’écran sont partis avec lui. — c’est également voulu, et également indiqué dans la confirmation : une instance est une copie du composant, et un composant qui n’existe plus n’a donc plus de copies. Le nombre affiché dans la boîte de dialogue indique combien il y en avait.

Supprimer un état, ou tout un composant

Les deux demandent d’abord confirmation — et seulement lorsqu’il y a quelque chose à perdre.

• Supprimer un état (le ✕ à côté de lui dans la liste États) retire son dessin, et toute instance affichée dans cet état revient à Normal. Si rien n’y était épinglé, il est supprimé sans question.
• Supprimer un composant (sélectionnez son maître et appuyez sur Suppr) emporte avec lui ses instances et chaque état dessiné pour lui, et la boîte de dialogue compte les deux. C’est celle-là qu’il faut lire : les instances peuvent se trouver dans une autre partie de l’écran que le maître sélectionné, et les états dessinés sont à côté de lui. Un composant qui n’a ni l’un ni l’autre est supprimé sans question.
• Supprimer quelque chose à l’intérieur duquel un composant a été dessiné — un cadre contenant une carte dont vous avez fait un composant — supprime aussi ce composant, et demande d’abord confirmation, en indiquant combien disparaissent. C’est la perte que vous ne pouvez pas voir venir à partir de ce que vous avez sélectionné : le cadre ressemble à un cadre.

Ce dernier cas se produisait auparavant en silence, et il méritait une correction à lui seul. Le composant était retiré du canevas et sa définition restait, pointant vers un dessin qui n’existait plus — la palette continuait donc de le lister et le faire glisser ne faisait rien du tout. Si vous avez un composant dans cet état, ouvrir l’application efface maintenant le fantôme, et vous verrez honnêtement qu’il n’y a rien à placer.

Aucune boîte de dialogue n’apparaît pour un geste qui ne touche que ce que vous avez sélectionné, car une confirmation qui vous demande si vous vouliez bien faire ce que vous venez de faire est un clic qui vous apprend à ne plus lire.

Une suppression pose bien une question, et elle la pose à l’enregistrement : celle d’un composant que d’autres applications placent. Vos composants sont proposés à toutes les autres applications de l’environnement : en supprimer un modifie donc les leurs — la question les nomme, et annuler laisse votre canevas exactement tel qu’il est. Voir Utiliser un composant dans une autre application.

Scénarios associés

• Utiliser un composant dans une autre application.
• Dessiner une application Studio.
• Créer une application Studio.