Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Création et modification de composants Aura

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Créer et modifier des ressources de paquet de composants Aura dans la Developer Console
  • Créer une application « tremplin » pour tester les composants en cours de développement.
  • Effectuer les cycles d’édition et de recharge pour prévisualiser les composants en développement.
  • Répertorier les différentes ressources qui composent un paquet de composants Aura

Création et modification de composants Aura

Très bien ! C’est l’heure de coder ! #enfin!

La première étape de l’écriture d’un code de composant Aura consiste tout simplement à se préparer à écrire du code. Heureusement, c’est très simple. Dans votre organisation, ouvrez la Developer Console sous Votre nom ou dans le menu d’accès rapide (Icône d’engrenage de configuration).

Lightning Experience Salesforce Classic
Ouvrir la Developer Console.
Mode classique : Ouvrir la Developer Console.

Voilà, vous êtes prêt à écrire un code de composant Aura !

Voilà, vous pouvez commencer à coder

Création de composants Aura dans la Developer Console

Allez, il est temps d’écrire un peu de code. Pour créer un composant Aura, sélectionnez Fichier | Nouveau | Composant Lightning. Dans le panneau New Lightning Bundle, saisissez le nom de composant helloWorld, puis cliquez sur Submit.

Panneau New Lightning Bundle

Cela crée un nouveau paquet de composants helloWorld avec deux onglets ouverts. Fermez l’onglet helloWorld et gardez l’onglet helloWorld.cmp ouvert.

helloWorld.cmp contient les balises ouvrantes et fermantes d’un composant Aura, <aura:component>. Ajoutez le balisage suivant entre ces deux balises, puis enregistrez :

<p>Hello Lightning!</p>

Le balisage de votre composant devrait ressembler à ceci :

Balisage Lightning Hello

Génial ! Votre premier composant Aura ! Maintenant, comment voir ce que ça donne ?

Pour faire court : c’est compliqué. Il n’est pas possible d’exécuter directement votre composant pour voir son fonctionnement. À la place, votre composant doit être exécuté dans une application conteneur, que nous appellerons « conteneur » pour simplifier. Par exemple, les applications Lightning Experience ou Salesforce sont des conteneurs, ou une application que vous créez avec Lightning App Builder — en gros, tout ce que vous avez vue à la fin de la dernière unité. Vous ajoutez votre composant à l’un de ces conteneurs, puis vous y accédez depuis celui-ci.

Nous parlerons plus en détails des conteneurs plus tard, et dans d’autres modules concernant les composants Lightning. Pour l’instant, contentons-nous de créer notre propre conteneur simple.

Cliquez sur Fichier | Nouveau | Application Lightning pour créer une application Lightning. Dans le panneau Nouveau paquet Lightning, saisissez harnessApp comme nom d’application, puis cliquez sur Soumettre.

Le paquet harnessApp est créé avec deux onglets ouverts. Fermez l’onglet harnessApp et gardez l’onglet hanessApp.app ouvert.

harnessApp.app contient les balises ouvrantes et de fermantes d’une application Lightning, <aura:application>. Ajoutez le balisage suivant entre ces deux balises, puis enregistrez :

<c:helloWorld/>

Cela ajoute le composant helloWorld que nous avons créé tout à l’heure à l’application harnessApp.

Avant que nous expliquions cette application, qui est en fait très simple, comparez les deux onglets harnessApp.app et helloWorld.cmp dans la Developer Console. Vous voyez ce qui change, en plus de leur contenu ?

Qu’est-ce qui est différent ?

Facile : le bouton Aperçu. Les applications en ont un, les composants non. Cliquez dessus pour ouvrir une nouvelle fenêtre de navigateur qui contiendra votre application.

Prévisualiser l’application.

C’est parti... Bon d’accord pour l’instant c’est juste « hello world ». Mais il y a des choses intéressantes à remarquer, même si le balisage semble trivial.

Commençons par la Developer Console. Si vous avez déjà codé pour Visualforce ou Apex, vous avez sûrement remarqué les nouveaux contrôles dans une palette située à droite de la fenêtre d’édition de tous les paquets Lightning. Chaque bouton avec une étiquette Créer représente une ressource différente que vous pouvez ajouter au paquet. Nous parlerons des ressources et des paquets dans la prochaine section. Pour l’instant, souvenez-vous seulement que la Developer Console vous permet d’en créer et de passer facilement de l’un à l’autre.

En fait, la Developer Console dispose de nombreuses fonctionnalités permettant d’utiliser des composants Aura. Vous pouvez également vous servir de Fichier | Ouvrir | Ressources Lightning, afin d’ouvrir plusieurs ressources Lightning en même temps. Très utile !

La Developer Console est très pratique pour écrire un code Lightning, nous allons l'utiliser pour la suite de ce module. Mais comme les ressources Lightning sont accessibles via l’API Tooling, il existe d’autres manières de les créer et de les modifier. Salesforce DX offre une prise en charge solide pour tous les aspects concernant le développement de composants Lightning. De plus, les extensions Salesforce pour Visual Studio Code sont un excellent outil tiers. Ne vous croyez pas limité à la Developer Console.

Une dernière chose avant de nous mettre à coder. L’URL de notre « Aperçu » est en réalité l’adresse permanente de notre application (une fois qu’elle est ouverte à nos utilisateurs). Le format de l’URL est le suivant : https://<votreDomaine>.lightning.force.com/<votreEspaceDeNoms>/<nomDeVotreAppli>.app.

<nomDeVotreAppli> correspond au nom du paquet de votre application, ici harnessApp. Dans votre organisation Trailhead, aucun espace de noms ne doit être configuré, donc vous devriez avoir un « c » dans cette partie de l’URL. « c » correspond à l’espace de noms par défaut... et nous en reparlerons plus tard... Le reste du format de l’URL doit être évident.

Allez, il est temps de coder !

Qu’est-ce qu’un composant ?

Il n’arrive pas souvent qu’un hello world déclenche des questions existentielles, mais cette fois, c’est le cas. Parlons de ce qu’est un composant dans le cadre de notre exemple helloWorld. En pratique, un composant est un ensemble comprenant une ressource de définition sous forme de balisage, mais aussi des ressources facultatives supplémentaires, comme un contrôleur, une feuille de style, etc. Une ressource s’apparente à un fichier, sauf qu’elle est stockée dans Salesforce plutôt que dans un système de fichiers.

Notre ressource de définition de composant helloWorld.cmp est facile à comprendre.

<aura:component>
    <p>Hello Lightning!</p>
</aura:component>

Il y a les balises ouvrantes et fermantes <aura:component>, avec du HTML statique entre les deux. Difficile de faire plus simple, et vous pourriez croire qu’il s’agit d’une simple « page ». Ce n’est pas le cas. Nous y reviendrons bientôt.

Nous avons déjà mentionné les paquets de composants, mais en quoi consistent-ils vraiment ? Un paquet est une sorte de dossier. Il regroupe les ressources associées pour un seul composant. Les ressources d’un paquet sont automatiquement connectées grâce à une convention de nommage spécifique à chaque type de ressource. L’autoconnexion signifie qu’une définition de composant peut accéder à son contrôleur, son assistance, etc., tandis que ces ressources peuvent accéder à la définition de composant. Ces éléments sont connectés (pratiquement) automatiquement.

Voyons comment cela fonctionne. Avec helloWorld.cmp actif, cliquez sur le bouton STYLE de la palette de composants de droite. Un nouvel onglet s’ouvrira pour la ressource de style qui a été ajoutée au paquet helloWorld. Elle ne contient qu’un seul sélecteur vide, .THIS. Pour voir comment cela fonctionne, ajoutez un simple style aboutir au résultat suivant :

.THIS {
}
p.THIS {
    font-size: 24px;
}

Ensuite, rechargez votre fenêtre d’aperçu harnessApp.app. Et voilà, le texte est plus gros ! Mais comment fonctionne .THIS ? C’est la magie de l’autoconnexion ! Au moment de l’exécution, .THIS est remplacé par une chaîne de contrôle de style portant le nom de votre composant. Elle limite strictement les règles de style à ce composant, afin que vous puissiez créer des styles spécifiques à chaque composant, sans vous soucier de la manière dont ces styles pourraient affecter les autres composants.

Donc maintenant, notre paquet helloWorld comprend deux ressources, la définition de composant, helloWorld.cmp, et la feuille de styles, helloWorld.css. Vous pouvez l’envisager comme étant un dossier ou un plan :

  • helloWorld : le paquet de composants
    • helloWorld.cmp : la définition du composant
    • helloWorld.css : les styles du composant

Comme vous pouvez le voir sur la Developer Console, il y a un certain nombre d’autres types de ressources que vous pouvez ajouter à un paquet de composants. Continuez et cliquez sur les options CONTROLLER et HELPER pour ajouter ces ressources au paquet. Votre paquet devrait maintenant ressembler à ce qui suit, et vous pouvez commencer à observer le système de dénomination.

  • helloWorld : le paquet de composants
    • helloWorld.cmp : la définition du composant
    • helloWorldController.js : le contrôleur du composant, ou le fichier JavaScript principal
    • helloWorldHelper.js : l’assistance du composant, ou le fichier JavaScript secondaire
    • helloWorld.css : les styles du composant

Dans ce module, nous ne travaillerons qu’avec ces quatre types de ressource. Nous parlerons beaucoup plus des ressources Contrôleur et Assistance lorsque nous commencerons véritablement à développer du code pour elles. Pour le moment, vous pouvez vous contenter des implémentations par défaut. Après tout, ce n’est qu’un hello world !

Qu’est-ce qu’une application ?

Nous savons ce qu’est un composant. Il est désormais aisé de présenter une application : il s’agit simplement d’un type de composant spécial ! Dans le cadre de ce module, vous pouvez retenir qu’une application n’a qu’une différence avec un composant :

  • Une application utilise des balises <aura:application> au lieu de balises <aura:component>.
  • Seule une application a un bouton Preview dans la Developer Console.

Nous avons terminé !

À quoi servent les applications ?

Aussi simple que cette question puisse sembler, il y a quelques détails pratiques qui distinguent la manière dont vous pouvez utiliser une application plutôt qu’un composant. Voici les principaux points.

  • Lorsque vous écrivez du balisage, vous pouvez ajouter un composant à une application, mais vous ne pouvez pas ajouter une application à une autre application, ou une application à un composant.
  • Une application a une URL autonome, à laquelle vous pouvez accéder durant le test, et que vous pouvez publier pour vos utilisateurs. Nous désignerons souvent ces applications autonomes par « my.app ».
  • Vous ne pouvez pas ajouter d’applications à Lightning Experience ou à l’application Salesforce, vous pouvez uniquement leur ajouter des composants. Après cette dernière unité, cela peut vous sembler étrange ; qu’ajoutez-vous exactement à l’App Launcher, si ce n’est une application ? Ce que vous ajoutez au lanceur d’application, c’est une application Salesforce qui englobe un composant Aura et qui est définie dans une balise <aura:component>. Une application dotée de composants Aura, c’est-à-dire définie dans une balise <aura:application>, ne peut pas être utilisée pour créer des applications Salesforce. Un peu bizarre, mais c’est ainsi.

Donc, dans quels cas une application est-elle adaptée ? Pourquoi continueriez-vous même à en utiliser ? Nous avons déjà répondu à cette question précédemment. Vous publiez les fonctionnalités intégrées aux composants Lightning dans des conteneurs. Les applications à composants Lightning constituent un type de conteneur pour nos composants Lightning.

Une fois encore, gardons l’esprit pratique. Cela signifie généralement que vous intégrez toutes les fonctionnalités de votre « application » à un composant de niveau supérieur. Puis, à la fin, vous collez ce composant dans un conteneur : application Composants Lightning, application Salesforce ou autre. Si vous utilisez une my.app, le conteneur peut configurer des services pour votre composant principal, mais sinon, il n’est là que pour l’héberger.

Examinons à nouveau l’application que nous avons créée. Ici encore, il y a la ressource de définition harnessApp.app :

<aura:application>
    <c:helloWorld/>
</aura:application>

Quel que soit le nombre de fonctionnalités que nous décidons d’ajouter à notre « application » helloWorld, tout se trouvera dans le composant helloWorld. Un éditeur de style Quip peut être incorporé pour réviser le message d’accueil, mais notre définition harnessApp.app restera simple.

À ce stade, nous supposerons que vous utilisez effectivement un paquet d’applications Lightning sous la forme d’un seul conteneur ou tremplin, réunissant les composants que vous avez créés. Vous pouvez continuer à utiliser harnessApp.app ! Mais lorsque nous parlons de la création d’applications, nous parlons vraiment de l’intégration de fonctionnalités à un paquet de composants, et non d’un paquet d’applications, car c’est ainsi que l’on conçoit des « applications » dans le monde réel.

Composants contenant des composants qui contiennent… des composants !

La définition harnessApp.app est également intéressante, car à la place d’un code HMTL statique, nous pouvons y trouver notre composant helloWorld. Ici, on dit que harnessApp contient le composant helloWorld. Approfondissons ce principe en compliquant un peu helloWorld.

Dans la Developer Console, créez un composant Aura nommé helloHeading. Pour son balisage, collez le code suivant :

<aura:component>
    <h1>W E L C O M E</h1>
</aura:component>

Maintenant, cliquez à nouveau sur helloWorld.cmp, et ajoutez-y <c:helloHeading/>, au-dessus de la ligne « Hello Lightning ». Votre définition de composant helloWorld devrait maintenant ressembler à ce qui suit :

<aura:component>
    <c:helloHeading/>
    <p>Hello Lightning!</p>
</aura:component>

Rechargez l’application pour observer la modification apportée. Hiérarchiquement parlant, votre structure de composant devrait ressembler à ce qui suit :

  • harnessApp.app
    • helloWorld.cmp
      • helloHeading.cmp
      • (HTML statique)

Ici, on peut dire que helloHeading est un composant enfant de helloWorld, ou que helloHeading est imbriqué dans helloWorld, etc. En fait, il existe une multitude de manières d’exprimer le fait que helloWorld contient helloHeading. De plus, vous pouvez continuer à imbriquer des composants dans d’autres composants jusqu’au niveau que vous voulez. Vous aurez du mal à garder les idées claires avant de manquer de composants Lightning !

Ce processus d’imbrication des composants est fondamental au développement d’applications à composants Lightning. Vous commencez avec, ou développez, des composants simples et bien délimités, chacun d’entre eux offrant un ensemble défini de fonctionnalités autonomes. Ensuite, vous assemblez ces composants en de nouveaux composants offrant des fonctionnalités de plus haut niveau. Et après, vous utilisez ces composants, et vous « montez à nouveau d’un niveau ».

Exprimons-le avec une métaphore qui nous est familière, hors du contexte des logiciels. Imaginez une maison. Encore mieux, nous allons vous en montrer une.

Animation de maison

Que voyez-vous lorsque vous observez cette maison ? Si vous cessez d’y penser en termes de « maison » pour y penser en termes de composants de maison, vous commencez à imaginer les pièces et agencements qui la constituent.

À plus grande échelle, cette maison est composée de trois structures similaires. Ces trois composants sont conçus de manière similaire, mais pas identique. Chacun d’entre eux peut encore être subdivisé en composants encore plus petits, par exemple les fenêtres, qui peuvent quant à elles être subdivisées en vitres individuelles. L’agencement, ou la composition, de ces composants de petite taille définit les différences entre les trois structures de taille plus conséquente.

Les trois structures sont réunies par deux structures/composants plus petits/étroits, qui peuvent quant à eux être subdivisés en plus petits modèles réutilisables. Ces composants liants réunissent les trois structures distinctes en un ensemble plus grand : la maison.

Ces principes architecturaux s’appliquent également aux applications Web. Plus loin dans ce module, nous emploierons des composants d’entrée détaillés pour créer un composant formulaire. Ensuite, vous placerez ce composant formulaire dans un autre composant, pour constituer les fonctionnalités au niveau Application.

Composition de l’application Expenses

Ce n’est pas rigoureusement identique à une maison, mais les principes sur lesquels repose le processus de composition sont très similaires. Savoir penser en termes de Composants et de Composition est une compétence fondamentale que vous développerez tout au long de ce module, et dès que vous concevrez des applications avec les composants Lightning.

Vous l’avez déjà un peu fait ici, mais avant que nous ne puissions véritablement concevoir des composants faisant quelque chose, nous devons nous familiariser avec les attributs, types, valeurs et expressions. Avant cela cependant, il est temps de passer à votre premier défi code !