Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Découverte de la syntaxe et du code

Objectifs de formation

Une fois cette unité terminée, vous pourrez :
  • Implémenter correctement des gestionnaires d’action et des fonctions d’assistance de contrôleur, et appeler les fonctions d’assistance depuis le code du contrôleur.
  • Expliquer la différence entre des expressions liées et libres.
  • Expliquer en quoi les variables globales Visualforce et les fournisseurs de valeurs globales pour composants Aura sont différents
  • Objectif supplémentaire : Expliquer la différence entre « c. », « c. », et « c: ». (Non, il n’y a pas d’erreur.)

Syntaxe du contrôleur

Nous avons abordé ce sujet de façon conceptuelle dans le module Concepts de base des composants Aura. Toutefois, nous souhaitons revenir sur quelques détails de la syntaxe utilisée dans les contrôleurs JavaScript côté client. Voici un exemple de contrôleur.
({
    myAction : function(component, event, helper) {
        // add code for the action
    },

    anotherAction : function(component, event, helper) {
        // more code
    },
})
Nous voulons vous faire comprendre trois choses précises à propos de cette syntaxe. Les trois sont différentes de ce à quoi vous êtes habitués dans les contrôleurs Apex.
  1. Toboggan !Ce n’est pas une classe. C’est un objet JSON qui contient une série de paires nom:valeur. Elle ne peut contenir que des gestionnaires d’action, que vous n’invoquerez jamais directement.
  2. Vos gestionnaires d’action sont déclarés sous forme de fonctions anonymes affectées au nom de l’action (ici, myAction et anotherAction). Vos fonctions peuvent accepter jusqu’à trois paramètres, et seulement ces paramètres (composant, événement et assistant, mais vous pouvez leur donner le nom que vous voulez). Le framework les fournit lorsqu’il appelle le gestionnaire.
  3. Important : vous devez séparer vos paires nom:valeur par des virgules, comme le montre cette version visuelle du même code. Conseil : Ajoutez une virgule après chaque gestionnaire d’action. Une des particularités de la syntaxe du JavaScript est que la première virgule de cet exemple est obligatoire, tandis que la deuxième (qui ressemble à une erreur) est autorisée, mais optionnelle.

    Échelle ! C’est une bonne pratique de toujours placer la virgule optionnelle après le dernier gestionnaire d’action, même si elle n’est pas nécessaire, et même si elle risque d’agacer certains puristes. En effet, vous ajouterez probablement un autre gestionnaire d’action plus tard, et vous ne penserez pas forcément à ajouter la virgule. (La personne qui écrit ces lignes a commis cette erreur bien trop souvent.) Vous verrez alors une erreur incompréhensible, et vous perdrez du temps à la résoudre. C’est une perte de temps qui peut totalement être évitée.

Syntaxe des assistants

Insérez les fonctions que vous souhaitez réutiliser dans l’assistant du composant. Les fonctions d’assistance permettent aussi la spécialisation des tâches, telles que le traitement des données et le déclenchement d’actions côté serveur. Appelez les fonctions d’assistance grâce à une référence dans le paramètre helper passé à votre fonction d’action.
myAction : function(component, event, helper) {
    helper.aHelperFunction(component, 42);
},
Les assistants des composants sont déclarés avec une syntaxe similaire aux contrôleurs, c’est-à-dire en tant qu’objet contenant une série de paires nom:valeur. (Comme vous l’avez deviné, elles sont séparées par des virgules, exactement comme le contrôleur.)
({
    aHelperFunction : function(component, value) {
        // helper code here
    },
})
Cependant, il existe quelques différences que vous devez apprendre.
  • Les fonctions d’assistance peuvent être déclarées de manière à accepter tout paramètre de votre choix. C’est vous qui appelez les assistants, pas le framework.
  • Par convention, passez une référence au composant qui appelle l’assistant comme premier paramètre de l’assistant.
  • Les assistants sont des singletons et sont partagés par toutes les instances de composants. Ne stockez pas d’état de composant dans votre assistant. Voyez plutôt les assistants comme des méthodes statiques de vos contrôleurs Apex.
  • Vous pouvez ajouter autre chose que des fonctions à un assistant, pour que les données soient accessibles aux gestionnaires d’action de votre contrôleur (par exemple, des identifiants d’API que vous ne voulez charger qu’une fois). Souvenez-vous que c’est une variable partagée, et que rien ne la protège d’un accès indésirable. Réfléchissez bien avant d’utiliser cette stratégie.

Contrôleurs et assistants

Que mettre dans la fonction gestionnaire d’action d’un contrôleur et que mettre dans un assistant ?

De nombreuses personnes préfèrent avoir des gestionnaires d’action aussi simples et clairs que possible, et abstraire les détails dans l’assistant. C’est une approche raisonnable, mais ce n’est pas la seule.

Notre conseil est de mettre dans l’assistant le code que vous voulez réutiliser dans plusieurs gestionnaires d’action. Il s’agit cependant d’une affaire de goût et de style, et des règles de code de votre organisation.

Expressions

La syntaxe des expressions est identique et dans le balisage des composants Aura et de Visualforce. Voici un exemple :

The message: {! messageText }

S’agit-il d’un balisage de composant Aura ou Visualforce ? Il s’agit de Visualforce. Le même balisage produirait une erreur s’il était utilisé dans un composant Aura.*

Comment faire la différence ? L’expression fait référence à messageText, qui est vraisemblablement une propriété ou une méthode du contrôleur de la page, ou peut-être une extension du contrôleur. La valeur vient « de quelque part », mais il y a beaucoup de possibilités. Avec Visualforce, on ne peut pas vraiment savoir.

Les composants Aura ne vous laissent pas récupérer une valeur provenant de « quelque part ». Voici le balisage de composant Aura correspondant le plus probable.

The message: {! v.messageText }

La principale différence, le « v. », semble subtile quand vous commencez à vous familiariser avec les composants Aura. C’est le fournisseur de valeur de la vue, qui est le composant lui-même, et c’est ainsi qu’on fait référence aux attributs d’un composant. Nous aborderons les fournisseurs de valeurs dans la section suivante. Pour l’instant, sachez simplement que si vous oubliez le fournisseur de valeurs, vous obtiendrez une erreur.

Toboggan ! Ce sera particulièrement important lorsque vous convertirez du balisage de Visualforce en composants Aura. Le balisage est similaire, et il est tentant de le copier-coller. N’oubliez pas d’ajouter un fournisseur de valeurs à chaque expression.

Deux autres points sont à signaler concernant les expressions des composants Aura et de leur syntaxe. D’abord, il existe en réalité deux types d’expressions dans les composants Aura : liées et libres, qui utilisent des délimiteurs d’expression différents.

  • Expression liée : {! v.messageText }
  • Expression libre : {# v.messageText }

La différence de syntaxe porte sur un seul caractère, un point d’exclamation ou un dièse. La différence de comportement peut être invisible ou profonde, selon le contexte. La version libre se comporte globalement comme une expression Visualforce. Toboggan ! Une syntaxe différente produit un comportement similaire. Très intuitif, non ?

Les expressions liées ajoutent un peu de la magie des composants Aura en créant une liaison bidirectionnelle entre toutes les utilisations de la valeur. Si vous changez la valeur quelque part, vous la changez partout. Pour en savoir plus, consultez Liaison des données entre les composants.

Ensuite, il y a deux expressions dans l’exemple suivant.
<aura:component ...>
    ...

    The message: {!v.message}

    <lightning:button label="Acknowledge"
        onclick="{!c.acknowledgeMessage}"/>

    ...
</aura:component>

La différence la plus manifeste est le fournisseur de valeurs, « v. » ou « c. ». Comme nous l’avons dit plus haut, « v. » correspond à la vue. « c. » représente le contrôleur. Vous utilisez « c. » pour faire référence à des actions du contrôleur. Ici, nous lions une action à l’événement de clic sur le bouton.

Même s’il est possible d’utiliser directement un attribut d’un composant, comme nous le faisons ici avec l’attribut chaîne de caractères {!v.message}, vous faites référence aux fonctions du contrôleur. Cela signifie qu’on ne peut pas appeler ces fonctions directement. Le résultat de l’évaluation de l’expression {!c.acknowledgeMessage} est une référence à la fonction, et non pas un résultat que vous pourriez utiliser directement. Ajouter un fournisseur de valeurs n’y changera rien.

____________________

* Il existe une exception, si messageText est une variable locale <aura:iteration>, mais pour l’instant restons-en au cas général.

Fournisseurs de valeur

Après la section précédente, que reste-t-il à dire sur les fournisseurs de valeur ? Beaucoup de choses. Commençons par lever une source de confusion possible. Encore un toboggan.

Certaines des fonctionnalités importantes des composants Aura sont implémentées grâce à des fournisseurs de valeurs. Dans les exemples d’expressions précédents, nous avons utilisé plusieurs fois v. et c.. Ce sont des fournisseurs de valeurs qui relient automatiquement le balisage du composant, les attributs et le contrôleur. En plus de les utiliser dans le balisage, vous pouvez également les utiliser dans le code du contrôleur. Voici quelques lignes d’un gestionnaire d’action qui utilise les fournisseurs de valeurs « v. » et « c. ».
({
    "echo" : function(cmp) {
        // ...
        var action = cmp.get("c.serverEcho");
        action.setParams({ echoString : cmp.get("v.message") });

        // ...
    }
})

Il y a deux points à noter. La première est la méthode employée pour accéder au fournisseur de valeurs. Vous devez appeler get() avec le nom de l’attribut auquel vous voulez accéder, en incluant le fournisseur de valeurs. Donc, cmp.get("v.message").

Toboggan ! La seconde est le toboggan. Regardez à nouveau la première ligne de la fonction. Qu’obtient cmp.get("c.serverEcho") ? Elle obtient une référence à une action côté serveur. Dans le balisage d’un composant, « c. » représente le contrôleur côté client. Dans le JavaScript du même composant (gestionnaire d’action ou fonction d’assistance), « c. » représente le contrôleur côté serveur.

Alors, un peu désorienté ? Ce n’est pas fini. Toboggan ! Vous verrez aussi « c: » dans le balisage et dans le JavaScript. C’est à dire c deux-points, au lieu de c point. « c: » est l’espace de nom de par défaut. Il représente le code de composant Aura que vous avez ajouté à votre organisation.

Nous sommes conscients que cela peut prêter à confusion, c’est pourquoi nous en parlons ici. Faites attention au « c » sous toutes ses formes : « c. », « c. » et « c: ».

Fournisseurs de valeurs globales

Il existe un type de fournisseur de valeurs pour composants Aura (les fournisseurs de valeurs globales) qui ressemble à des variables globales Visualforce. Par exemple, les composants Aura et Visualforce disposent des éléments $Label et $Resource. Il y a deux toboggans sur lesquels vous pourriez glisser.

  • Toboggan ! Toutes les variables globales présentes dans Visualforce ne sont pas disponibles en tant que fournisseurs de valeurs globales dans les composants Aura.
  • Toboggan ! Certaines variables globales et certains fournisseurs de valeurs globales ont le même nom. Pourtant, ils se comportent différemment. (Si vous ne voyez pas pourquoi, consultez de nouveau le module Concepts de base des composants Aura pour vous rafraîchir la mémoire. Avant de tenter le défi. Ça ne peut pas vous faire de mal !)

N’essayez pas d’utiliser un fournisseur de valeurs globales avant d’avoir lu la documentation associée dans le Guide du développeur des composants Aura Lightning.