Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Erstellen und Bearbeiten von Aura-Komponenten

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Erstellen und Bearbeiten von Ressourcen im Aura-Komponentenpaket in der Entwicklerkonsole
  • Erstellen einer Containeranwendung zum Testen von sich in der Entwicklung befindenden Komponenten
  • Ausführen des Bearbeitungs- und Neuladezyklus zum Anzeigen einer Vorschau auf sich in der Entwicklung befindende Komponenten
  • Auflisten der Ressourcen, die ein Aura-Komponentenpaket bilden

Erstellen und Bearbeiten von Aura-Komponenten

Okay! Zeit, etwas Code zu schreiben! #endlich!

Der erste Schritt zum Schreiben von Code für Aura-Komponenten ist die entsprechende Einrichtung für das Schreiben von Code. Zum Glück ist das wirklich einfach. Öffnen Sie in Ihrer Organisation die Entwicklerkonsole unter Ihr Name oder im Schnellzugriffsmenü (Setup-Zahnradsymbol).

Lightning Experience Salesforce Classic
Öffnen der Entwicklerkonsole
Klassischer Modus: Öffnen der Entwicklerkonsole

Jetzt können Sie mit dem Schreiben von Code für Aura-Komponenten beginnen!

Sie können mit dem Schreiben von Lightning Components-Code beginnen

Erstellen von Aura-Komponenten in der Entwicklerkonsole

Lassen Sie uns mit dem Schreiben von Code beginnen. Wählen Sie File | New | Lightning Component, um eine neue Aura-Komponente zu erstellen. Geben Sie im Bereich New Lightning Bundle als Komponentennamen helloWorld ein und klicken Sie auf Submit.

Bereich 'New Lightning Bundle'

Hierdurch wird das neue Komponentenpaket helloWorld erstellt (mit zwei offenen Registerkarten). Schließen Sie die Registerkarte helloWorld und lassen Sie die Registerkarte helloWorld.cmp geöffnet.

helloWorld.cmp enthält das öffnende und schließende Tag für eine Aura-Komponente, <aura:component>. Fügen Sie dazwischen das folgende Markup ein und speichern Sie:

<p>Hello Lightning!</p>

Das Markup Ihrer Komponente sollte wie folgt aussehen.

Markup für 'Hello Lightning'

Hurra, Ihre erste Aura-Komponente! Wie können wir nun prüfen, wie sie aussieht?

Die kurze Antwort ist: schwierig. Sie können Ihre Komponente nicht direkt ausführen und prüfen, wie sie sich verhält. Stattdessen muss Ihre Komponente in einer Containeranwendung ausgeführt werden, die wir kurz Container nennen. Beispiele für Container sind Lightning Experience- oder Salesforce-Anwendungen oder Anwendungen, die Sie mit dem Lightning-Anwendungsgenerator erstellen, also im Wesentlichen die Dinge, die Sie am Ende der vorherigen Einheit kennengelernt haben. Sie können Ihre Komponente einem dieser Container hinzufügen und dann innerhalb des Containers darauf zugreifen.

Container werden später und in anderen Lightning Components-Modulen eingehender behandelt. Lassen Sie uns nun einen einfachen Container erstellen.

Wählen Sie File | New Lightning Application, um eine neue Lightning-Anwendung zu erstellen. Geben Sie im Bereich New Lightning Bundle als Anwendungsnamen harnessApp ein und klicken Sie auf Submit.

Hierdurch wird das neue Paket harnessApp erstellt (mit zwei offenen Registerkarten). Schließen Sie die Registerkarte harnessApp und lassen Sie die Registerkarte harnessApp.app geöffnet.

harnessApp.cmp enthält das öffnende und schließende Tag für eine Lightning-Anwendung, <aura:application>. Fügen Sie dazwischen das folgende Markup ein und speichern Sie:

<c:helloWorld/>

Hierdurch wird die zuvor erstellte Komponente helloWorld der Anwendung harnessApp hinzugefügt.

Ehe wir diese trügerisch einfache Anwendung erläutern, klicken Sie in der Entwicklerkonsole zwischen den Registerkarten harnessApp.app und helloWorld.cmp hin und her. Welcher Unterschied fällt Ihnen abgesehen vom Markup auf?

Was ist anders?

Auf einer Registerkarte befindet sich die Schaltfläche Preview. Für Anwendungen gibt es eine, für Komponenten nicht. Wenn Sie darauf klicken, sollte ein weiteres Browserfenster geöffnet werden, in dem Ihre Anwendung gezeigt wird.

Zeigen Sie eine Vorschau der Anwendung an.

Wir sehen unsere kleine "hello world"-Anwendung. Doch auch hier lassen sich einige interessante Aspekte feststellen, trotz des trivialen Markups.

Beginnen wir mit der Entwicklerkonsole. Wenn Sie sie zum Schreiben von Visualforce- oder Apex-Code genutzt haben, haben Sie sicherlich die zusätzlichen Steuerelemente bemerkt, die rechts im Bearbeitungsfenster eines beliebigen Lightning-Pakets in einer Palette angezeigt werden. Jede dieser Schaltflächen mit der Beschriftung Create stellt eine andere Ressource dar, die Sie dem Paket hinzufügen können. Mehr zu Ressourcen und Paketen erfahren Sie im nächsten Abschnitt. Für den Moment müssen Sie nur wissen, dass Ihnen die Entwicklerkonsole eine einfache Möglichkeit bietet, diese zu erstellen und zwischen ihnen zu wechseln.

Die Entwicklerkonsole bietet zudem zahlreiche Funktionen zum Arbeiten mit Aura-Komponenten. Über File | Open | Lightning Resources können Sie darüber hinaus zahlreiche Lightning-Ressourcen auf einmal öffnen. Nützlich!

Die Entwicklerkonsole eignet sich besonders zum Schreiben von Lightning-Code und kommt im restlichen Modul zum Einsatz. Doch weil auf Lightning-Ressourcen über die Tooling-API zugegriffen werden kann, gibt es weitere Möglichkeiten zu ihrer Erstellung und Bearbeitung. Salesforce DX bietet eine zuverlässige Unterstützung aller Aspekte der Entwicklung von Lightning-Komponenten. Und Salesforce Extensions für Visual Studio Code ist ein hervorragendes Drittanbietertool. Sie sind also überhaupt nicht nur auf die Entwicklerkonsole beschränkt!

Noch eine Sache, bevor wir uns dem Code zuwenden. Der URL unserer "Vorschau" ist tatsächlich die dauerhafte Startseite unserer Anwendung (sobald wir sie unseren Benutzern zur Verfügung gestellt haben). Das Format des URL lautet: https://<IhreDomäne>.lightning.force.com/<IhrNamespace>/<NameIhrerAnwendung>.app .

<NameIhrerAnwendung> stellt den Namen Ihres Anwendungspakets dar, in diesem Fall harnessApp. In Ihren Trailhead-Organisationen darf kein Namespace konfiguriert sein, weshalb in diesem Teil des URL ein "c" enthalten sein sollte. "c" stellt den Standard-Namespace dar, der uns später noch heimsuchen wird. Der Rest des URL-Formats sollte selbsterklärend sein.

Nun auf zum Code!

Was ist eine Komponente?

Es kommt nicht oft vor, dass "hello world" existenzielle Fragen auslöst, was hier aber so ist. Lassen Sie uns erörtern, was eine Komponente im Kontext unseres helloWorld-Beispiels ist. Aus praktischer Sicht ist eine Komponente ein Paket, das eine in Markup geschriebene Definitionsressource enthält und weitere, optionale Ressourcen wie einen Controller, ein Stylesheet usw. enthalten kann. Eine Ressource ist eine Art Datei, die jedoch anstatt in einem Dateisystem in Salesforce gespeichert wird.

Unsere Definitionsressource der Komponente helloWorld.cmp ist einfach verständlich.

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

Es gibt das öffnende und schließende <aura:component>-Tag, zwischen denen sich statischer HTML-Code befindet. Ein weitere Vereinfachung wäre schwierig und Sie könnten versucht sein, das Ganze für eine "Seite" zu halten. Tun Sie das nicht. Wir kommen darauf in Kürze zurück.

Komponentenpakete haben wir bereits erwähnt. Doch was ist das eigentlich? Ein Paket ist eine Art Ordner. Darin werden die zu einer einzelnen Komponente gehörigen Ressourcen gruppiert. Ressourcen in einem Paket sind automatisch miteinander verknüpft, und zwar über ein Benennungsschema für jeden Ressourcentyp. Automatisch verknüpft bedeutet lediglich, dass eine Komponentendefinition auf ihren Controller, ihre Hilfsfunktionen usw. verweisen kann bzw. dass diese Ressourcen auf die Komponentendefinition verweisen können. Sie werden (zumeist) automatisch miteinander verbunden.

Sehen wir uns an, wie das geht. Klicken Sie bei aktivierter Komponente helloWorld.cmp rechts in der Komponentenpalette auf die Schaltfläche STYLE. Hierdurch wird eine neue Registerkarte für die Stilressource geöffnet, die dem Paket helloWorld hinzugefügt wurde. Am Anfang steht ein einzelner, leerer Selektor: .THIS. Um zu sehen, wie dies funktioniert, fügen Sie dem Stylesheet einen einfachen Stil hinzu, sodass es wie folgt aussieht.

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

Laden Sie anschließend das Vorschaufenster für harnessApp.app neu. Voilà, größerer Text! Doch wie funktioniert .THIS? Das ist der Charme der automatischen Verknüpfung! Zur Laufzeit wird .THIS durch eine Zeichenfolge zur Größenbestimmung ersetzt, die für Ihre Komponente benannt ist. Diese beschränkt Stilregeln auf ausschließlich diese Komponente. Deshalb können Sie Stile erstellen, die für die Komponente spezifisch sind, ohne sich darüber Gedanken machen zu müssen, ob sich diese Stile auf andere Komponenten auswirken.

Unser helloWorld-Paket enthält nun zwei Ressourcen: die Komponentendefinition helloWorld.cmp und das Stylesheet helloWorld.css. Sie können sich das als Ordner oder Gliederung vorstellen:

  • helloWorld: Das Komponentenpaket
    • helloWorld.cmp: Die Definition der Komponente
    • helloWorld.css: Die Stile der Komponente

Wie Sie in der Entwicklerkonsole sehen können, gibt es verschiedene andere Ressourcentypen, die Sie einem Komponentenpaket hinzufügen können. Klicken Sie nun auf die Elemente CONTROLLER und HELPER, um diese Ressourcen dem Paket hinzuzufügen. Nun sollte Ihr Paket wie folgt aussehen, und auch das Benennungssystem wird erkennbar.

  • helloWorld: Das Komponentenpaket
    • helloWorld.cmp: Die Definition der Komponente
    • helloWorldController.js: Der Controller der Komponente bzw. die JavaScript-Hauptdatei
    • helloWorldHelper.js: Die Hilfsfunktion der Komponente bzw. die sekundäre JavaScript-Datei
    • helloWorld.css: Die Stile der Komponente

In diesem Modul arbeiten wir nur mit diesen vier Ressourcentypen. Mit den Controller- und Hilfsressourcen beschäftigen wir uns eingehender, wenn wir tatsächlich mit dem Schreiben von Code dafür beginnen. Für den Augenblick können Sie die Standardimplementierungen übernehmen. Schließlich ist das bloß "hello world"!

Was ist eine Anwendung?

Nun da Sie wissen, was eine Komponente ist, lässt sich eigentlich ganz einfach erklären, was eine Anwendung ist, nämlich eine besondere Art von Komponente! Für die Zwecke dieses Moduls können Sie sich eine Anwendung als etwas vorstellen, das sich nur in zwei wesentlichen Punkten von einer Komponente unterscheidet:

  • Eine Anwendung verwendet <aura:application>-Tags anstelle von <aura:component>-Tags.
  • Nur bei Anwendungen gibt es die Vorschauschaltfläche Preview in der Entwicklerkonsole.

Geschafft!

Wozu dienen Anwendungen?

Auch wenn es so einfach klingt, folgen nun einige praktische Details dazu, wie Sie eine Anwendung im Vergleich mit einer Komponente nutzen können. Es folgen die wesentlichen Aspekte.

  • Beim Schreiben von Markup können Sie eine Komponente einer Anwendung hinzufügen. Sie können jedoch nicht eine Anwendung einer anderen Anwendung oder eine Anwendung einer Komponente hinzufügen.
  • Eine Anwendung hat einen eigenständigen URL, auf den Sie beim Testen zugreifen und den Sie für Ihre Benutzer veröffentlichen können. Wir bezeichnen diese eigenständigen Anwendungen häufig als "my.app".
  • Sie können Anwendungen nicht Lightning Experience oder der Salesforce-Anwendung hinzufügen. Sie können nur Komponenten hinzufügen. Nach der letzten Einheit mag dies komisch klingen. Was fügen Sie eigentlich App Launcher hinzu, wenn nicht eine Anwendung? Was Sie App Launcher hinzufügen, ist eine Salesforce-Anwendung, die als Wrapper für eine Aura-Komponente dient, die zwischen <aura:component>-Tags definiert ist. Mithilfe einer Aura-Komponentenanwendung, die <aura:application>-Tags definiert ist, können Sie keine Salesforce-Anwendungen erstellen. Ein bisschen komisch, aber so ist es.

Wofür eignet sich also eine Anwendung? Warum sollte überhaupt eine genutzt werden? Wir haben diese Frage zuvor beantwortet. Sie veröffentlichen mit Lightning Components erstellte Funktionalität in Containern. Lightning Components-Anwendungen sind eine Art Container für unsere Lightning-Komponenten.

Faktisch bedeutet dies, dass Sie in der Regel die gesamte Funktionalität Ihrer Anwendung innerhalb einer Komponente auf oberster Ebene entwickeln. Wenn Sie fertig sind, fügen Sie diese eine Komponente einem Container hinzu, vielleicht einer Lightning Components-Anwendung, vielleicht der Salesforce-Anwendung, vielleicht einem anderen Container. Wenn Sie eine Anwendung des Typs "my.app" verwenden, kann der Container Dienste für Ihre Hauptkomponente einrichten, aber fungiert ansonsten bloß zum Hosten der Komponente.

Werfen wir erneut einen Blick auf die Anwendung, die wir erstellt haben. Hier ist erneut die Definitionsressource harnessApp.app:

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

Ganz gleich, wie viele Funktionen wir letztlich unserer Anwendung "hello world" hinzufügen möchten, landen diese alle in der Komponente helloWorld. In diese kann ein Quip-ähnlicher Editor zum Überarbeiten der Meldung "hello" eingebettet sein, doch unsere Definition von harnessApp.app bleibt durchweg fast genauso einfach.

Ab hier gehen wir davon aus, dass Sie ein tatsächliches Lightning Application-Paket als Container für die Komponenten nutzen, die Sie erstellen. Sie können harnessApp.app gerne weiterverwenden! Doch wenn wir vom Erstellen von Anwendungen sprechen, meinen wir tatsächlich das Erstellen von Funktionalität innerhalb eines Komponentenpakets und kein Anwendungspaket, weil Anwendungen in der realen Welt so entwickelt werden.

Komponenten, die Komponenten enthalten, enthalten... Komponenten!

Die Definition von harnessApp.app ist auch interessant, da wir anstelle von statischem HTML-Code unsere Komponente helloWorld haben. Wir sagen, dass harnessApp die Komponente helloWorld enthält. Lassen Sie uns dies ein wenig vertiefen und helloWorld etwas komplexer gestalten.

Erstellen Sie in der Entwicklerkonsole eine neue Aura-Komponente namens helloHeading. Fügen Sie als Markup den folgenden Code ein.

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

Klicken Sie sich zurück zu helloWorld.cmp und fügen <c:helloHeading/> über der Zeile "Hello Lightning" hinzu. Die Definition Ihrer Komponente helloWorld sollte nun wie folgt aussehen:

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

Laden Sie die Anwendung erneut, um die Änderung zu überprüfen. Ihre Komponentenstruktur in Sachen "Was enthält was?" sieht nun so aus:

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

Wir sagen, dass helloHeading eine untergeordnete Komponente von helloWorld ist bzw. dass helloHeading in helloWorld geschachtelt ist. Es gibt hier mehrere Möglichkeit zu sagen, dass helloHeading in helloWorld enthalten ist. Sie können zudem geschachtelte Komponenten innerhalb anderer Komponenten bis zur gewünschten Tiefe anordnen. Sie verlieren eher den Überblick, als dass Sie einen von Lightning Components auferlegten Grenzwert erreichen.

Dieser Vorgang des Ablegens von Komponenten in anderen Komponenten ist für das Entwickeln von Lightning Components-Anwendung ganz wesentlich. Sie beginnen mit oder erstellen einfache, differenzierte Komponenten, wobei jede Komponente einen definierten Umfang eigenständiger Funktionalität bietet. Anschließend setzen Sie diese Komponenten in neuen Komponenten mit Funktionalität auf höherer Ebene zusammen. Anschließend nutzen Sie diese Komponenten und gehen erneut eine Ebene nach oben.

Lassen Sie uns dies anhand einer Metapher erläutern, die uns außerhalb des Softwarekontexts vertraut ist. Stellen Sie sich ein Haus vor. Am besten ist gleich, wir zeigen Ihnen eines.

Hausanimation

Was fällt Ihnen auf, wenn Sie dieses Haus betrachten? Wenn Sie sich es nicht mehr als ein "Haus", sondern als eine Komponente des Typs "Haus" vorstellen, fangen Sie auch gleich an, die Teile und Muster zu erkennen, aus denen es besteht.

Die allgemeinste Aussage ist, dass dieses Haus drei ähnliche Strukturen aufweist. Diese drei Komponenten haben ähnliche, aber nicht identische Bauarten. Jede kann weiter gegliedert werden, und zwar in noch kleinere Komponenten wie Fenster, die in einzelne Scheiben gegliedert werden können. Die Anordnung bzw. Zusammensetzung dieser kleineren Komponenten macht die Unterschiede zwischen den drei größeren Strukturen aus.

Die drei Strukturen sind mithilfe zweier kleinerer, schmalerer Strukturen/Komponenten miteinander verbunden, die wiederum in kleinere, wiederverwendbare Muster gegliedert werden können. Diese Verbundkomponenten dienen zum Zusammenfügen der drei getrennten Strukturen zu einem größeren Ganzen: dem Haus.

Was in der Architektur möglich ist, lässt sich auf eine Webanwendung übertragen. Im weiteren Verlauf dieses Moduls verwenden Sie differenzierte Eingabekomponenten und erstellen mit ihrer Hilfe eine Formularkomponente. Dann legen Sie diese Formularkomponente in einer weiteren Komponente ab, um Funktionalität auf Anwendungsebene zu entwickeln.

Zusammensetzung der Anwendung zur Spesenabrechnung

Nicht so hübsch anzusehen wie das Haus, doch die Prinzipien des Zusammensetzungsprozesses sind sehr ähnlich. Das Denken in den Begriffen Komponenten und Zusammensetzung ist eine grundlegende Fertigkeit, die Sie in diesem Modul entwickeln werden und die beim Entwickeln von Anwendungen mit Lightning Components besonders wichtig ist.

Sie haben zuvor ein wenig damit begonnen, doch bevor wir tatsächlich mit dem Erstellen von Komponenten loslegen, die etwas tun, müssen Sie sich zunächst mit Attributen, Typen, Werten und Ausdrücken vertraut machen. Doch davor kommt noch Ihre erste Programmierungsaufgabe!