Erstellen von Lightning-Webkomponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Beschreiben des Inhalts der einzelnen Komponentendateien.
Erstellen von JavaScript-Methoden für eine Lightning-Webkomponente.
Verwenden von Lebenszyklus-Hooks in JavaScript von Komponenten.

Zeit zum Spielen

Angenommen, Sie möchten ein Datenanzeigeelement erstellen, das unabhängig von einem bestimmten Objekt in Salesforce ist. Ein gutes Beispiel ist die productCard-Komponente im ebikes-Beispiel-Repository. Untersuchen wir zusammen diese Kartenkomponente und erstellen wir dann unsere eigene Version von Grund auf neu, damit Sie sehen, wie sie sich zu einer vollwertigen Lightning-Webkomponente entwickelt. Sie werden die Grundlagen schnell verstehen, wenn Sie die Teile einer Komponente zusammensetzen und weitere Beispiele erkunden.

Aufstieg zu einer Organisation

In dieser Lektion entwickeln wir eine Lightning-Webkomponente mithilfe von Visual Studio Code und der Salesforce-Erweiterung.

Was Sie brauchen

Wie bereits in der ersten Einheit erwähnt, ist eine gewisse Vertrautheit mit Salesforce DX erforderlich, um fortfahren zu können. Zum Absolvieren dieser Lektion benötigen Sie:

Visual Studio Code (VS Code) mit dem Salesforce Extension Pack
Salesforce CLI

Damit Sie diese Anforderungen erfüllen, führen Sie das Projekt Schnelleinstieg: Lightning-Webkomponenten durch.

Ein Blick in die HTML-Datei

Die HTML-Dateien von Lightning-Webkomponenten enthalten alle das template-Tag. Das template-Tag enthält den HTML-Code, der die Struktur der Komponente definiert. Sehen wir uns den HTML-Code für eine vereinfachte Version der productCard-Komponente aus dem ebikes-Repository an.

Begleiten Sie unsere Erläuterungen, indem Sie diese Beispiele in VS Code einfügen.

Erstellen Sie ein Projekt, indem Sie SFDX: Create template (Vorlage erstellen) auf der Befehlspalette in VS Code auswählen. Übernehmen Sie die Standardvorlage und geben Sie ihr den Projektnamen bikeCard.
Klicken Sie unter force-app/main/default mit der rechten Maustaste auf den Ordner lwc, und wählen Sie SFDX: Create Lightning Web Component (Lightning-Webkomponente erstellen) aus.
Geben Sie als Namen der neuen Komponente app (Anwendung) ein.
Drücken Sie die Eingabetaste und drücken Sie dann erneut die Eingabetaste, um den Standardwert force-app/main/default/lwc zu übernehmen.

Fügen Sie den folgenden Code in app.html ein (und ersetzen Sie jeglichen in der Datei bereits vorhandenen HTML-Code).

<template>
  <div>
    <div>Name: {name}</div>
    <div>Description: {description}</div>
    <div>Category: {category}</div>
    <div>Material: {material}</div>
    <div>Price: {price}</div>
    <div><img src={pictureUrl}/></div>
  </div>
</template>

Die Bezeichner in den geschweiften Klammern {} sind an die Felder gleichen Namens in der entsprechenden JavaScript-Klasse gebunden.

Fügen Sie den folgenden Code in app.js ein.

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  name = 'Electra X4';
  description = 'A sweet bike built for comfort.';
  category = 'Mountain';
  material = 'Steel';
  price = '$2,700';
  pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
}

Speichern Sie die Dateien.

Lassen Sie uns nun ein bisschen mit einem konkreten Beispiel spielen. Angenommen, Sie möchten Daten anzeigen, aber Sie wissen, dass das Laden einige Zeit dauern kann. Sie möchten verhindern, dass der Benutzer sich fragt, was los ist. Sie können in Ihrer Vorlage die Bedingungsanweisungen lwc:if und lwc:else verwenden, um zu bestimmen, welche visuellen Elemente gerendert werden.

Fügen Sie den folgenden Code in app.html ein. Der Inhalt im "Anzeige-Tag" div wird erst angezeigt, wenn der Wert von ready in der HTML-Datei true ist.

<template>
  <template lwc:if={ready}>
    <div id="display">
      <div>Name: {name}</div>
      <div>Description: {description}</div>
      <div>Category: {category}</div>
      <div>Material: {material}</div>
      <div>Price: {price}</div>
      <div><img src={pictureUrl}/></div>
    </div>
  </template>
  <template lwc:else>
    <div id="waiting">Loading…</div>
  </template>
</template>

Fügen Sie den folgenden Code in app.js ein. Er nimmt unsere Datenwerte auf und legt einen 3-Sekunden-Timer fest. Nach 3 Sekunden sollte der Inhalt angezeigt werden. (Natürlich dient dies nur Testzwecken.)

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  name = 'Electra X4';
  description = 'A sweet bike built for comfort.';
  category = 'Mountain';
  material = 'Steel';
  price = '$2,700';
  pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
  ready = false;
  connectedCallback() {
    setTimeout(() => {
      this.ready = true;
    }, 3000);
  }
}

Speichern Sie die Dateien.

Lightning Web-Basiskomponenten

Sie möchten ja nicht alle Ihre Komponenten von Grund auf neu erstellen. Lassen Sie uns also die Verwendung einer Lightning Web-Basiskomponente untersuchen. Und natürlich gibt es eine Vielzahl von Komponenten, darunter Feldtypen, Anzeigesteuerungen, Navigationselemente und vieles mehr. Sie sind alle in der Komponentenreferenz aufgeführt.

Lassen Sie uns die Details des Fahrrads hervorheben. Ersetzen Sie in der Datei app.html die div-Tags für Material und Kategorie aus dem letzten Beispiel durch eine Lightning-Badge-Komponente. So sieht unser HTML-Code jetzt aus.

<template>

  <template lwc:if={ready}>

    <div id="display">

      <div>Name: {name}</div>

      <div>Description: {description}</div>

      <lightning-badge label={material}></lightning-badge>

      <lightning-badge label={category}></lightning-badge>

      <div>Price: {price}</div>

      <div><img src={pictureUrl}/></div>

    </div>

  </template>

  <template lwc:else> 

    <div id="waiting">Loading…</div>

  </template>

</template>

Speichern Sie die Datei.

Die Wörter Steel (Stahl) und Mountain (Berg) werden als Badges angezeigt. So einfach ist das.

Struktur zur Komponentenerstellung

Eine Komponente benötigt lediglich einen Ordner und ihre Dateien mit demselben Namen. Sie sind automatisch durch Namen und Speicherort verknüpft.

Komponentendateien in einem Ordner

Alle Lightning-Webkomponenten verfügen über einen Namespace, der durch einen Bindestrich vom Ordnernamen getrennt ist. Das Markup für die Lightning-Webkomponente mit dem Ordnernamen "app" im Standard-Namespace "c" lautet zum Beispiel <c-app>.

Allerdings erlaubt die Salesforce-Plattform keine Bindestriche in den Namen von Komponentenordnern oder -dateien. Was kann man also tun, wenn der Name der Komponente aus mehr als einem Wort besteht, wie etwa "meinekomponente"? Sie können die Ordner und Dateien nicht mit "meine-komponente" benennen, aber wir haben eine praktische Lösung.

Verwenden Sie eine Binnenmajuskel (Camel Case), um Ihre KomponentemyComponent zu benennen. Die Namen von Komponentenordnern in Camel-Case-Schreibweise werden im Markup auf Kebab-Case (mit Bindestrichen) umgestellt. Wenn Sie in Markup auf eine Komponente mit dem Ordnernamen "meineKomponente" verweisen möchten, verwenden Sie <c-my-component>.

Beispielsweise enthält das LWC Samples-Repository den viewSource-Ordner, der die Dateien für die viewSource-Komponente enthält. Wenn die Hallo-Komponente auf die viewSource-Komponente in HTML verweist, verwendet sie c-view-source.

Okay. Sehen wir uns nun JavaScript an.

Arbeiten mit JavaScript

Hier geht es wirklich zur Sache. Wie Sie bisher schon erfahren haben, legen JavaScript-Methoden fest, was mit Eingaben, Daten, Ereignissen, Zustandsänderungen und vielem mehr geschehen soll, damit Ihre Komponente funktioniert.

Die JavaScript-Datei für eine Lightning-Webkomponente muss mindestens diesen Code enthalten, wobei MyComponent der Name ist, den Sie Ihrer Komponentenklasse zuweisen.

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {

}

Die export-Anweisung definiert eine Klasse zur Erweiterung der LightningElement-Klasse. Der bewährten Methode folgend, sollte der Name der Klasse üblicherweise mit dem Dateinamen der JavaScript-Klasse übereinstimmen, aber das ist nicht zwingend erforderlich.

Das LWC-Modul

Lightning-Webkomponenten verwenden Module (integrierte Module wurden in ECMAScript 6 eingeführt), um Kernfunktionen zu bündeln und sie für den JavaScript-Code in Ihrer Komponentendatei zugänglich zu machen. Das Kernmodul für Lightning-Webkomponenten ist lwc.

Beginnen Sie das Modul mit der import-Anweisung und geben Sie die Funktionalität des Moduls an, das Ihre Komponente verwendet.

Die import-Anweisung gibt an, dass das JavaScript die LightningElement-Funktionalität aus dem lwc-Modul verwendet.

// import module elements 

import { LightningElement} from 'lwc';

// declare class to expose the component

export default class App extends LightningElement {

  ready = false;

  // use lifecycle hook 

  connectedCallback() {

    setTimeout(() => {

      this.ready = true;

    }, 3000);

  }

}

LightningElement ist die Basisklasse für Lightning-Webkomponenten, die es uns ermöglicht, connectedCallback() zu verwenden.
Die Methode connectedCallback() ist einer unserer Lebenszyklus-Hooks. Mehr zu Lebenszyklus-Hooks erfahren Sie im nächsten Abschnitt. An diesem Punkt brauchen Sie nur zu wissen, dass die Methode ausgelöst wird, wenn eine Komponente in das Dokumentobjektmodell (DOM) eingefügt wird. In diesem Fall startet sie den Timer.

Lebenszyklus-Hooks

Lightning-Webkomponenten bieten Methoden, die es Ihnen ermöglichen, Ihren Code an kritische Ereignisse im Lebenszyklus einer Komponente zu koppeln. Diese Ereignisse treten ein, wenn eine Komponente:

erstellt wird
dem DOM hinzugefügt wird
im Browser gerendert wird
Fehler bei ihr auftreten
sie aus dem DOM entfernt wird

Reagieren Sie auf alle diese Ereignisse im Lebenszyklus, indem Sie Rückrufmethoden verwenden. Beispielsweise wird der connectedCallback() aufgerufen, wenn eine Komponente in das DOM eingefügt wird. disconnectedCallback() wird aufgerufen, wenn eine Komponente aus dem DOM entfernt wird.

In der JavaScript-Datei, mit der wir unser bedingtes Rendering getestet haben, haben wir die connectedCallback()-Methode verwendet, um Code automatisch auszuführen, wenn die Komponente in das DOM eingefügt wird. Der Code wartet 3 Sekunden und legt ready dann auf true fest.

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

  ready = false;

  connectedCallback() {

    setTimeout(() => {

      this.ready = true;

    }, 3000);

  }

}

Wenn Sie dieses Beispiel in einem Editor wie VS Code verwenden, sehen Sie möglicherweise eine Lint-Warnung "Restricted async operation...." (Eingeschränkter asynchroner Vorgang...) für die Funktion setTimeout(). Diese Warnung weist darauf hin, dass Sie einen asynchronen Vorgang verwenden, der oftmals falsch verwendet wird. Er verzögert das Verhalten zeitbasiert, statt auf ein Ereignis zu warten. In diesem Fall ist setTimeout() geeignet, um eine beliebige Zeitverzögerung zu demonstrieren, und die Warnung sollte Sie nicht davon abhalten, sie zu verwenden.

Beachten Sie außerdem, dass wir das Schlüsselwort this verwendet haben. Sie sollten mit der Verwendung von Schlüsselwörtern vertraut sein, wenn Sie JavaScript geschrieben haben. Das Verhalten gleicht dem in anderen Umgebungen. Das Schlüsselwort this in JavaScript verweist auf die oberste Ebene des aktuellen Kontexts. Hier ist der Kontext diese Klasse. Die Methode connectedCallback() weist den Wert für die Variable "ready" der obersten Ebene zu. Das ist ein hervorragendes Beispiel dafür, wie Sie mithilfe von Lightning-Webkomponenten Features von JavaScript in Ihre Entwicklung einbeziehen können. Einen Link zu guten Informationen über this finden Sie im Abschnitt "Ressourcen".

Decorator

Decorator werden in JavaScript häufig verwendet, um das Verhalten einer Eigenschaft oder Funktion zu ändern.

Zum Verwenden eines Decorators importieren Sie ihn aus dem lwc-Modul und platzieren ihn vor der betreffenden Eigenschaft oder Funktion.

import { LightningElement, api } from 'lwc';

export default class MyComponent extends LightningElement{

  @api message;

}

Sie können mehrere Decorator importieren, eine einzelne Eigenschaft oder Funktion kann jedoch jeweils nur einen Decorator aufweisen. Beispielsweise kann eine Eigenschaft nicht zugleich die Decorator @api und @wire annehmen.

Zu den Beispielen für Decorator in Lightning-Webkomponenten gehören:

@api: Markiert ein Feld als öffentlich. Öffentliche Eigenschaften definieren die API für eine Komponente. Eine Inhaberkomponente, die die Komponente in ihrem HTML-Markup verwendet, kann auf die öffentlichen Eigenschaften der Komponenten zugreifen. Alle öffentlichen Eigenschaften sind reaktiv, was bedeutet, dass das Framework die Eigenschaft auf Änderungen überwacht. Wenn sich der Wert der Eigenschaft ändert, reagiert das Framework und stellt die Komponente neu dar.

Die Begriffe Feld und Eigenschaft sind nahezu austauschbar. Ein Verfasser einer Komponente deklariert Felder in einer JavaScript-Klasse. Eine Instanz der Klasse hat Eigenschaften. Für Verbraucher von Komponenten sind Felder Eigenschaften. In einer Lightning-Webkomponente sind nur Felder, die der Verfasser einer Komponente mit @api dekoriert, öffentlich für Verbraucher als Objekteigenschaften verfügbar.

@track: Weist das Framework an, Änderungen an den Eigenschaften eines Objekts oder an den Elementen eines Arrays zu beobachten. Im Fall einer Änderung wird die Komponente vom Framework neu berechnet. Alle Felder sind reaktiv. Wenn sich der Wert eines Felds ändert und das Feld in einer Vorlage – oder in der Getter-Methode einer in einer Vorlage verwendeten Eigenschaft – verwendet wird, stellt das Framework die Komponente erneut dar. Sie brauchen das Feld nicht mit @track zu dekorieren. Verwenden Sie @track nur, wenn ein Feld ein Objekt oder ein Array enthält und Sie möchten, dass das Framework Änderungen an den Eigenschaften des Objekts oder den Elementen des Arrays beobachtet. Wenn Sie den Wert der gesamten Eigenschaft ändern möchten, brauchen Sie @track nicht zu verwenden.

Vor der Version Spring '20 mussten Sie @track verwenden, um Felder (auch als private Eigenschaften bezeichnet) als reaktiv zu kennzeichnen. Dies ist nicht mehr erforderlich. Verwenden Sie @track nur, um das Framework anzuweisen, auf Änderungen an den Eigenschaften eines Objekts oder den Elementen eine Arrays zu achten. In einigen Legacy-Beispielen wird @track möglicherweise noch an Stellen verwendet, an denen es nicht erforderlich ist, aber das spielt keine Rolle, da die Verwendung des Decorators weder die Funktionalität ändert noch zu einem Codefehler führt.

@wire: Bietet Ihnen eine einfache Möglichkeit, Daten aus einer Salesforce-Organisation abzurufen und anzubinden.

Hier sehen Sie ein Beispiel, in dem der @api-Decorator verwendet wird, um einen Wert aus einer Komponente (bike) in einer anderen Komponente (app) zu rendern. Die Dateistruktur sieht wie folgt aus:

Dateistruktur der Beispielanwendung.

Die app-Komponente verwendet den folgenden HTML-Code.

<!-- app.html -->

<template>

  <div>

    <c-bike bike={bike}></c-bike>

  </div>

</template>

Die app-Komponente verwendet das folgende JavaScript.

// app.js

import { LightningElement } from 'lwc';

export default class App extends LightningElement {

  bike = {

    name: 'Electra X4',

    picture: 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg'

  };

}

Die bike-Komponente verwendet den folgenden HTML-Code.

<!-- bike.html -->

<template>

  <img src={bike.picture} alt="bike picture" />

  <p>{bike.name}</p>

</template>

Die bike-Komponente verwendet das folgende JavaScript.

// bike.js 

import { LightningElement, api } from 'lwc';

export default class Bike extends LightningElement {

  @api bike;

}

Wir kommen schnell voran, und Sie konnten schon mit etwas Code in VS Code arbeiten. In der nächsten Einheit stellen wir etwas Code bereit und erörtern in stärkerem Maß die Umgebung, die Heimat der Komponenten ist.

Ressourcen

Entwicklerhandbuch für Lightning-Webkomponenten: Reaktivität
Entwicklerhandbuch für Lightning-Webkomponenten: Referenz (enthält Anweisungen für HTML-Vorlagen, Decorator und mehr)
MDN web docs: this