Aller au contenu principal

Utiliser un composant dans une autre application

Objectif​

Vous avez dessiné une carte dans l’application Products. Vous voulez la même carte dans Orders — la même, pour que la corriger une fois corrige les deux.

Une chose à configurer, une fois par application : cochez « Partager les composants de cette application » sur l’application qui les dessine. Tout ce qu’elle dessine est alors proposé à toutes les autres applications de l’environnement, dans leur panneau Composants sous Depuis d’autres applications.

La case est décochée par défaut, et c’est voulu — la plupart des applications ne sont pas des bibliothèques de composants, et une application qui publierait par accident mettrait ses formes à moitié dessinées dans la palette de tout le monde. Vous la trouvez dans Applications Studio → Nouveau, ou en sélectionnant une application et en appuyant sur Modifier ; la liste comporte une colonne indiquant quelles applications partagent.

Cela demandait une étape de plus, ce n’est plus le cas

Il existait une liste Composants Studio distincte dans le portail des créateurs, et un bouton Déplacer vers les partagés qui extrayait un composant de l’application où vous l’aviez dessiné pour en faire un enregistrement à part. Les deux ont disparu. Un composant vit là où il a été dessiné ; si vous cherchez la page, c’est le canevas de l’application qu’il vous faut.

En créer un​

Dans l’application qui contiendra vos composants, cochez Partager les composants de cette application — dans la boîte de dialogue Nouveau ou dans Modifier. Dessinez ensuite l’élément sur son canevas — à côté de l’écran, ou dessus — exactement comme vous dessineriez n’importe quoi d’autre. Vient ensuite l’étape qui compte :

Sélectionnez ce que vous avez dessiné et choisissez Créer un composant.

Le composant prend le nom de l’objet à partir duquel vous l’avez créé, et c’est ce nom que voient les autres applications. Renommez le calque, et le composant est renommé avec lui. Enregistrez.

C’est tout pour en créer un. Il figure désormais dans la palette de toutes les autres applications.

Le placer dans une autre application​

Ouvrez le concepteur de l’autre application et regardez le panneau Composants. Sous Depuis d’autres applications, vous trouverez chaque composant dessiné par les autres applications de la solution, chacun avec l’application d’origine à côté de son nom — car deux applications peuvent toutes deux avoir une « Carte », et une liste qui afficherait deux fois le même nom serait une liste dans laquelle on ne pourrait pas choisir.

Faites-en glisser un sur le canevas, ou sélectionnez la ligne et appuyez sur Entrée. Ce qui arrive est une instance : une instance de composant ordinaire, que vous pouvez positionner, redimensionner et surcharger exactement comme une instance que vous auriez dessinée vous-même.

Enregistrez.

Le modifier une seule fois​

Ouvrez l’application qui a dessiné le composant, modifiez-le et enregistrez.

Ouvrez maintenant l’application qui l’a placé. Elle vous indique que la copie a été mise à jour, et la modification est là. Enregistrez cette application pour la conserver. Ce second enregistrement est voulu : écrire dans le dessin de quelqu’un parce qu’il l’a ouvert n’est pas quelque chose qu’un concepteur a le droit de faire.

Pourquoi votre application garde une copie​

Ouvrez le document de l’application qui place le composant et vous y trouverez les nœuds du composant, sous des identifiants commençant par sc_, ainsi qu’une définition indiquant de quelle application il provient, comment il s’y appelle, et une révision.

Cette copie n’est pas une erreur, et vous n’avez jamais à l’entretenir. Elle apporte deux choses :

  • Votre application est autonome. Elle se valide, s’empaquette, s’importe et se compile seule. Un composant qui n’a pas voyagé laisse une application en retard, pas une application qui ne s’affiche pas.
  • Ce qui a été livré est ce qui s’affiche. Une application qui irait chercher ses composants au moment où quelqu’un l’ouvre ne pourrait pas le promettre.

La copie de l’original se trouve sur la gauche de votre dessin, sur une « étagère », et n’apparaît jamais sur un écran : c’est une définition, pas du contenu. Seules les instances que vous avez placées sont affichées.

Désactiver le partage​

Décochez la case et les composants de l’application cessent d’être proposés. Les applications qui en avaient déjà placé un le conservent : leur copie liée reste exactement telle qu’elle était, figée à la révision qu’elles ont copiée. C’est ce qui se passe quand une application est désinstallée, et pour la même raison — une application ne doit pas perdre une partie de son écran parce que quelqu’un d’autre a modifié un réglage.

Ce que ces applications perdent, ce sont les mises à jour : plus rien ne fait avancer leur copie, car la palette n’a plus rien à quoi la comparer.

Le seul composant que vous ne pouvez pas utiliser ailleurs​

Un composant qui lit l’état de l’écran de sa propre application. La ligne figure dans le panneau de l’autre application, grisée, et nomme l’expression — par exemple state.showCard.

Ce n’est pas une règle arbitraire. Votre composant atterrirait sur des écrans qui n’ont pas ce champ d’état : l’expression serait donc une dépendance à quelque chose qui n’existe peut-être pas, et échouerait sur l’écran qui ne l’a pas. Exposez plutôt ce dont il a besoin sous forme de propriété, et l’application qui le place la renseigne — voir Réutiliser un design avec des composants.

Dans l’application qui l’a dessiné, le même composant fonctionne exactement comme toujours. La restriction concerne le franchissement de la frontière, et elle ne se fait sentir qu’une fois, là où elle peut être expliquée.

En supprimer un​

Supprimez le composant sur le canevas de l’application qui l’a dessiné, puis appuyez sur Enregistrer.

Si d’autres applications le placent, une confirmation vous est d’abord demandée, et la question les nomme. Le supprimer le retire aussi de ces applications — l’autre solution serait de les laisser dessiner une carte que personne ne peut ouvrir, puisque la palette ne la proposera plus et qu’aucun concepteur ne peut l’atteindre.

Annuler n’écrit rien, d’un côté comme de l’autre. Votre canevas reste exactement tel qu’il est, suppression comprise : le retour en arrière passe donc par Annuler la dernière action.

Essayez​

Importez l’exemple studio-shared-components. Il contient deux applications : Products, qui dessine une carte Stat, et Orders, qui la place. Modifiez la carte dans Products, enregistrez, et ouvrez Orders.

Voir aussi​