Erfassen Sie Ihre Fortschritte
Trailhead-Startseite
Trailhead-Startseite

Attribute und Ausdrücke

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:
  • Definieren von Attributen für Ihre Komponenten und Übergeben von Attributwerten an geschachtelte Komponenten
  • Verstehen des Unterschieds zwischen einer Komponentendefinition und einer Komponenteninstanz und Erstellen mehrerer Instanzen einer Komponente
  • Erstellen einfacher Ausdrücke zum Anzeigen sich ändernder und berechneter Werte
  • Erstellen bedingter Ausdrücke für dynamische Ausgaben

Component Attributes

Während wir bis zu diesem Punkt verschiedene Komponenten erstellt und schon einige (allgemeine) Dinge erfahren haben, wie wir mit ihnen Anwendungen erstellen, leistet der Code, den wir geschrieben haben, nicht viel mehr als einfacher HTML-Code. Denn ganz gleich, was wir machen, geben die beiden Komponenten, die wir erstellt haben, denselben statischen Text aus. Auch wenn Sie ein Dutzend davon auf demselben Bildschirm platzieren würden, gäben alle immer dasselbe wieder aus.

Wie langweilig.

Um dies zu ändern, müssen wir zwei Dinge lernen. Zuerst müssen wir lernen, wie wir es einer Komponente ermöglichen, eine erstellte Eingabe zu akzeptieren. Das heißt, dass wir Werte für die Komponente festlegen müssen. Dazu verwenden wir Attribute.

(Zweitens müssen wir lernen, wie wir diese Werte tatsächlich nutzen, um das Verhalten und die Ausgabe einer Komponente zu ändern. Darum kümmern wir uns im Anschluss an die Attribute.)

Attribute für Komponenten sind wie Instanzvariablen in Objekten. Sie bieten eine Möglichkeit zum Speichern von sich ändernden Werten und zum Benennen dieser Wertplatzhalter. Angenommen, Sie möchten beispielsweise die Komponente helloMessage erstellen, die eine benutzerdefinierte Meldung ausgibt. Wir können uns das Hinzufügen eines Meldungsattributs zu dieser Komponente vorstellen, um ihre Ausgabe anzupassen. Und dann können wir (wie im folgenden Beispiel) diese Meldung festlegen, wenn wir die Komponente unserer Anwendung hinzufügen.
<aura:component>
    <c:helloMessage message="You look nice today."/>
</aura:component>
Sie sollten diesen Code zu Ihrer Organisation hinzufügen, da wir ihn im weiteren Verlauf noch öfter nutzen werden. Wenn Sie das aber jetzt tun, erhalten Sie einen Fehler. Warum? Weil die Komponente helloMessage noch nicht existiert. Salesforce prüft Ihren Code, während Sie ihn schreiben. Beim Versuch, Code zu speichern, der ungültig ist, z. B. beim Referenzieren einer nicht vorhandenen Komponente, erhalten Sie einen Fehler. Finden wir also zunächst heraus, wie wir helloMessage erstellen können.

Sie können die Attribute einer Komponente bei ihrer Erstellung festlegen, also wie im vorherigen Beispiel. Sie können sie auch im Verlauf des Lebenszyklus Ihrer Komponente als Reaktion auf Benutzeraktionen, woanders erfolgende Ereignisse usw. ändern. Darüber hinaus können Sie Attributwerte auf viele verschiedene Weisen lesen und nutzen. Dies sehen wir uns näher an, wenn wir zu Ausdrücken gelangen.

Lassen Sie uns zunächst ansehen, wie Sie Attribute für eine Komponente definieren. Ein Attribut wird in einem <aura:attribute>-Tag definiert, welches Werte für die Attribute name und type benötigt und diese optionalen Attribute akzeptiert: default, description, required.

Es gibt also viele verschiedene Möglichkeiten, "Attribut" in einem Satz zu verwenden! Hier kann es leicht zu Verwirrungen kommen, da wir drei verschiedene Konzepte mit ähnlichen Namen haben. Gehen wir also ins Detail.

  1. In einem Komponentenattribut können Sie einen Wert speichern. Im vorherigen Beispiel hat die Komponente helloMessage ein Komponentenattribut namens "message". Die meiste Zeit reden wir von Komponentenattributen.
  2. Sie definieren ein Komponentenattribut mithilfe des Tags <aura:attribute>. Ein Beispiel hierfür betrachten wir in Kürze. Hier sprechen wir von Attributdefinitionen.
  3. Das Tag <aura:attribute> selbst verwendet Attribute, wenn Sie es einsetzen! Wenn Sie also ein Komponentenattribut mithilfe des Tags <aura:attribute> definieren, legen Sie Attribute für <aura:attribute> fest, die die "Form" des Komponentenattributs angeben, das Sie definieren. Lassen Sie es uns erneut versuchen: Fügen Sie ein Komponentenattribut hinzu, indem Sie Attribute in dessen Definition festlegen. Die Attributdefinition eines Komponentenattributs verwendet Attribute?

Dies ist der Grund, warum Autoren manchmal an ihrem Verstand zweifeln. Lassen Sie uns versuchen, dieses Terminologieproblem mithilfe von Code zu lösen.

Dies ist der Anfang unserer Komponente helloMessage:

<aura:component>
    <aura:attribute name="message" type="String"/>
    <p>Hello! [ message goes here, soon ]</p>
</aura:component>

Die Komponente helloMessage hat ein Komponentenattribut, das definiert wird, indem name und type des Attributs festgelegt werden. Der Name des Attributs ist message. Sobald wir mehr über Ausdrücke wissen, erfahren Sie, wie es referenziert wird. Es gibt weiterhin nur statischen Text und HTML aus, doch wir kommen den nützlichen Aspekten langsam näher.

?

Das andere Attribut, das wir hier verwendet haben, ist type. Wir habe es definiert, weil es in einer Attributdefinition erforderlich ist. Es besagt, dass das message-Attribut eine Zeichenfolge enthält, was sinnvoll ist. Wir beschäftigen uns noch weiter mit Attributdatentypen und anderen Teilen von Attributdefinitionen. Doch zuvor wollen wir auf Ausdrücke eingehen und dafür sorgen, dass helloMessage tatsächlich etwas macht.

Ausdrücke

Anstatt uns wieder in Worten zu verlieren, wollen wir gleich dafür sorgen, dass helloMessage wie beabsichtigt funktioniert.

<aura:component>
    <aura:attribute name="message" type="String"/>
    <p>Hello! {!v.message}</p>
</aura:component>

Ist das jetzt etwa enttäuschend?

Wir geben den Inhalt von message mithilfe des Ausdrucks {!v.message} aus. Das heißt, dass dieser Ausdruck auf das Attribut message verweist. Der Ausdruck wird ausgewertet und in die Textzeichenfolge aufgelöst, die derzeit in message gespeichert ist. Und das ist genau das, was der Ausdruck in den Textkörper der Komponente ausgibt.

Hmm... was war nochmal ein "Ausdruck"?

Ein Ausdruck ist im Wesentlichen eine Formel oder Berechnung, die Sie zwischen Ausdruckstrennzeichen ("{!" und "}") setzen. Ausdrücke sehen wie folgt aus:

{!<Ausdruck>}

Die förmliche Definition eines Ausdrucks ist bisschen sperrig, weshalb wir sie uns erst einmal ansehen und dann aufdröseln: Bei einem Ausdruck handelt es sich um einen beliebigen Satz von Literalwerten, Variablen, Unterausdrücken oder Operatoren, die in einem einzelnen Wert aufgelöst werden können.

Es handelt sich als im Grunde um eine Formel, wie Sie sie in einem Berechnungsfeld, Filterkriterien oder Visualforce schreiben. Die Formel bzw. der Ausdruck kann verschiedene Dinge enthalten. Literalwerte bedürfen wohl keiner Erläuterung, denn es handelt sich um Dinge wie die Zahl 42 oder die Zeichenfolge "Hello". Variablen sind Dinge wie das Attribut message. Operatoren sind z. B. +, - usw. Unterausdrücke ermöglichen im Wesentlichen, dass Sie Elemente mithilfe von Klammern gruppieren können.

Lassen Sie uns Folgendes ausprobieren, um unseren Ausdruck etwas komplexer zu gestalten.

<aura:component>
    <aura:attribute name="message" type="String"/>
    <p>{!'Hello! ' + v.message}</p>
</aura:component>

Wir haben nichts weiter getan, als den Teil "Hello" aus dem statischen Text außerhalb des Ausdrucks in den Literaltext innerhalb des Ausdrucks zu verschieben. Wie Sie sehen, haben wir den Operator "+" verwendet, um die beiden Zeichenfolgen zu verketten. Der Unterschied mag Ihnen nur geringfügig vorkommen, doch durch Verschieben des Begrüßungstexts in den Ausdruck können Sie Bezeichnungen statt Literaltext verwenden, wodurch sich Ihre Komponenten einfacher aktualisieren (und übersetzen) lassen. Beispiele:

{!$Label.c.Greeting + v.message}

Haben Sie bemerkt, was bei unserer förmlichen Definition von Ausdrücken ausgelassen wurde? JavaScript-Funktionsaufrufe. Sie können in Ausdrücken im Markup von Aura-Komponenten kein JavaScript verwenden.

Hier noch ein wichtiger Punkt zu Ausdrücken, bevor wir fortfahren. Sie können sie an eine andere Komponente übergeben, um den Wert für diese Komponente festzulegen. Hier ist eine neue Komponente, die in einem benutzerdefinierten Wert an die Komponente helloMessage übergeben wird. Durch Übergeben des Werts an die andere Komponente wird der Wert für diese Komponente überschrieben.
<aura:component>
    <aura:attribute name="customMessage" type="String"/>
    <p> <c:helloMessage message="{!v.customMessage}"/> </p>
</aura:component>
.

Value Providers

Wir müssen nun einen weiteren Aspekt von Ausdrücken ansprechen. In den vorherigen Beispielen haben wir auf das Meldungsattribut der Komponente helloMessage mithilfe von v.message verwiesen. Was hat der Teil "v." zu bedeuten?

v ist eine Abkürzung für Wertanbieter (engl. Value Provider). Wertanbieter sind eine Möglichkeit, Daten zu gruppieren, zu kapseln und auf verwandte Daten zuzugreifen. Wertanbieter sind eine komplizierte Angelegenheit. Stellen Sie sich für den Moment v als eine automatische Variable vor, die Ihnen zur Verfügung gestellt wird. In unserer Komponente ist v ein Wertanbieter für die Ansicht, bei der es sich um die Komponente helloMessage selbst handelt.

v bietet Ihnen einen "Hook" für den Zugriff auf das Attribut message der Komponente. Auf diese Weise greifen Sie auf alle Attribute einer Komponente zu.

Der Zugriff auf die Werte in einem Wertanbieter erfolgt als benannte Eigenschaften. Um einen Wert zu verwenden, werden Wertanbieter und Name der Eigenschaft durch einen Punkt getrennt, z. B. v.message, wie oben gezeigt.

Wenn ein Attribut einer Komponente ein Objekt ist oder aus anderen strukturierten Daten besteht (also kein primitiver Wert ist), erfolgt der Zugriff auf die Werte des Attributs mit derselben Punktnotation. Beispielsweise greift {!v.accounts.Id} auf das Feld "Id" im Accountdatensatz zu. Bei tief geschachtelten Objekten und Attributen können Sie weitere Punkte hinzufügen, um die Struktur zu durchlaufen und auf die geschachtelten Werte zuzugreifen.

Attributdatentypen

Der Zugriff auf strukturierte Daten führt uns zurück zu Attributen und insbesondere zu nicht primitiven Attributtypen. message ist eine Zeichenfolge, doch es gibt eine Vielzahl verschiedener Attributtypen.

  • Primitive Datentypen, wie z. B. "Boolean", "Date", "DateTime", "Decimal", "Double", "Integer", "Long" oder "String". Die üblichen Verdächtigen in allen Programmiersprachen.
  • Standard- und benutzerdefinierte Salesforce-Objekte, z. B. "Account" oder "MyCustomObject__c".
  • Sammlungen wie "List", "Map" und "Set".
  • Benutzerdefinierte Apex-Klassen.
  • Framework-spezifische Typen wie "Aura.Component" oder "Aura.Component[]". Diese sind komplexer als die in diesem Modul behandelten, doch Sie sollten wissen, dass es sie gibt.

Es folgt eine auf das Wesentliche reduzierte Komponente des Typs expenseItem, die wir später ausfüllen. Es wird veranschaulicht, wie Sie ein Attribut für ein benutzerdefiniertes Objekt definieren und auf die Felder in einem Datensatz zugreifen.

<aura:component>
    <aura:attribute name="expense" type="Expense__c"/>
    <p>Amount:
        <lightning:formattedNumber value="{!v.expense.Amount__c}" style="currency"/>
    </p>
    <p>
        Client: {!v.expense.Client__c}
    </p>
    <p>
        <lightning:input type="toggle"
                         label="Reimbursed?"
                         name="reimbursed"
                         checked="{!v.expense.Reimbursed__c}" />
     </p>
    <!-- Other markup here -->
</aura:component>

Diese Komponente hat ein Attribut, expense, bei dem es sich um das benutzerdefinierte Objekt handelt, das wir ganz am Anfang dieses Moduls erstellt haben. Der Zweck der Komponente ist das Anzeigen der Details von Spesen durch Verweisen auf das Feld im Datensatz "Expense__c" mithilfe des Ausdrucks {!v.expense.fieldName}. Wir verwenden die Komponente <lightning:input> von type="toggle". Dies ist ein Kontrollkästchen in Form eines Umschalters, sodass wir den Wert auf der Benutzeroberfläche später aktualisieren können.

Andere Aspekte von Attributdefinitionen

Was die Attribute angeht, die Sie für das Tag <aura:attribute> festlegen, folgt hier der Rest, den Sie wissen müssen.

  • Das Attribut default definiert den Standardattributwert. Es wird verwendet, wenn auf das Attribut verwiesen wird und Sie den Wert des Attributs noch nicht festgelegt haben.
  • Das Attribut "required" definiert, ob das Attribut erforderlich ist. Die Standardvorgabe lautet "false".
  • Das Attribut "description" definiert eine kurze Zusammenfassung des Attributs und seiner Verwendung.

Das Festlegen des Standardwerts für ein Attribut mit einem komplexen Datentyp kann schwierig sein. Später werden Sie ein Beispiel sehen, doch für den Moment wollen wir Sie erst einmal vorwarnen.

Spaß mit Attributen und Ausdrücken

Um einige weitere Konzepte für Attribute und Ausdrücke zu veranschaulichen, lassen Sie uns die wirklich alberne Komponente helloPlayground mit dem folgenden Markup erstellen.

<aura:component>
    <aura:attribute name="messages" type="List"
        default="['You look nice today.',
            'Great weather we\'re having.',
            'How are you?']"/>
    <h1>Hello Playground</h1>
    <p>Silly fun with attributes and expressions.</p>
    <h2>List Items</h2>
    <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <p><c:helloMessage message="{!v.messages[1]}"/></p>
    <p><c:helloMessage message="{!v.messages[2]}"/></p>
    <h2>List Iteration</h2>
    <aura:iteration items="{!v.messages}" var="msg">
        <p><c:helloMessage message="{!msg}"/></p>
    </aura:iteration>
    <h2>Conditional Expressions and Global Value Providers</h2>
    <aura:if isTrue="{!$Browser.isIPhone}">
        <p><c:helloMessage message="{!v.messages[0]}"/></p>
    <aura:set attribute="else">
        <p><c:helloMessage message="{!v.messages[1]}"/></p>
        </aura:set>
    </aura:if>
</aura:component>

Fügen Sie die Komponente helloPlayground nun Ihrer Containeranwendung hinzu und prüfen Sie, ob sie ausgeführt wird.

Es sind einige neue Dinge zu erkennen. Wir werden auf diese jetzt nicht ausführlicher eingehen, doch Sie werden alle davon wiedersehen.

Erstens hat helloPlayground das eine Attribut messages mit dem komplexen Datentyp "List". Und es hat einen Standardwert für diese Liste: ein Array von drei Zeichenfolgen in einfachen Anführungszeichen, die durch ein Komma getrennt sind. Im Abschnitt "List Items" können Sie sehen, wie Sie mithilfe eines Indexes auf jede dieser Zeichenfolgen zugreifen können.

Was passiert, wenn jemand <c:helloPlayground> mit nur zwei Meldungen erstellt? Der Zugriff auf das dritte Element misslingt. Und wenngleich es hier nicht zu einem Absturz kommt, kann dies bei komplexeren Komponenten der Fall sein.

Im Abschnitt "List Iteration" sehen Sie eine bessere Möglichkeit, sich durch alle Elemente in der Liste durchzuarbeiten. Die Komponente <aura:iteration> wiederholt ihren Text einmal pro Element in ihrem items-Attribute. Deshalb wird die Liste bei mehr oder weniger Meldungen verkleinert oder vergrößert.

Im Abschnitt "Conditional Expressions and Global Value Providers" gibt es eine Möglichkeit, zwischen zwei verschiedenen möglichen Ausgaben zu wählen. Das Format ist ein wenig sperrig, da es sich um Markup und nicht um beispielsweise JavaScript handelt .Doch mithilfe der Komponente <aura:if> können Sie z. B. einer Seite die Schaltfläche "Bearbeiten" nur dann hinzufügen, wenn der Benutzer Bearbeitungsrechte für das Objekt hat.

Schließlich etwas, das etwas weniger offensichtlich ist. Bei der objektorientierten Programmierung besteht ein Unterschied zwischen einer Klasse und einer Instanz der betreffenden Klasse. Komponenten weisen ein ähnliches Konzept auf. Wenn Sie eine CMP-Ressource erstellen, geben Sie die Definition (Klasse) der betreffenden Komponente an. Wenn Sie ein Komponenten-Tag in eine CMP-Ressource einfügen, erstellen Sie einen Verweis auf die betreffende Komponente (Instanz der Komponente).

Es sollte nicht überraschen, dass mehrere Instanzen einer Komponente mit unterschiedlichen Attributen hinzugefügt werden können. Wenn Sie im vorherigen Beispiel den Standardwert für Meldungen verwenden, erhalten Sie acht Verweise auf unsere Komponente <c:helloMessage> (Instanzen). Wenn Sie eine längere Liste übergeben, können es noch (viel) mehr sein. Alles ausgehend von unserer kleinen einsamen Komponente!

Damit wollen wir uns nun der praktischen Umsetzung zuwenden.