Komponentengrundlagen

In diesem Kapitel untersuchen wir die zugrunde liegende Technologie einer Adobe Experience Manager (AEM)-Sites-Komponente durch eine einfache HelloWorld Beispiel. Es werden kleine Änderungen an einer vorhandenen Komponente vorgenommen, die Themen wie Authoring, HTL, Sling-Modelle, Client-seitige Bibliotheken abdecken.

Voraussetzungen

Überprüfen Sie die erforderlichen Tools und Anweisungen zum Einrichten eines lokale Entwicklungsumgebung.

Die in den Videos verwendete IDE lautet Visual Studio-Code und VSCode AEM Sync Plug-in.

Ziel

Erfahren Sie mehr über die Rolle von HTL-Vorlagen und Sling-Modellen zum dynamischen Rendern von HTML.
Erfahren Sie, wie Dialogfelder zur Erleichterung der Inhaltserstellung verwendet werden.
Lernen Sie die Grundlagen von Client-seitigen Bibliotheken kennen, um CSS und JavaScript einzuschließen und eine Komponente zu unterstützen.

Was Sie erstellen werden

In diesem Kapitel nehmen Sie verschiedene Änderungen an einem einfachen HelloWorld -Komponente. Beim Aktualisieren von HelloWorld -Komponente erhalten Sie Informationen über die wichtigsten Bereiche der Entwicklung AEM Komponenten.

Chapter Starter Project

Dieses Kapitel baut auf einem generischen Projekt auf, das von der AEM Projektarchetyp. Sehen Sie sich das folgende Video an und überprüfen Sie die Voraussetzungen um loszulegen!

HINWEIS

Wenn Sie das vorherige Kapitel erfolgreich abgeschlossen haben, können Sie das Projekt wiederverwenden und die Schritte zum Auschecken des Starterprojekts überspringen.

Öffnen Sie ein neues Befehlszeilen-Terminal und führen Sie die folgenden Aktionen aus.

In einem leeren Verzeichnis klonen Sie die aem-guides-wknd repository:
```
$ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
```
HINWEIS

Optional können Sie das im vorherigen Kapitel erstellte Projekt weiterhin verwenden. Projekteinrichtung.
Navigieren Sie zur aem-guides-wknd Ordner.
```
$ cd aem-guides-wknd
```
Erstellen Sie das Projekt und stellen Sie es mit dem folgenden Befehl in einer lokalen Instanz von AEM bereit:
```
$ mvn clean install -PautoInstallSinglePackage
```
HINWEIS

Wenn Sie AEM 6.5 oder 6.4 verwenden, hängen Sie die classic Profile zu beliebigen Maven-Befehlen hinzufügen.
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```
Importieren Sie das Projekt in Ihre bevorzugte IDE, indem Sie die Anweisungen zum Einrichten einer lokale Entwicklungsumgebung.

Komponentenbearbeitung

Komponenten können als kleine modulare Bausteine einer Webseite betrachtet werden. Um Komponenten wiederverwenden zu können, müssen die Komponenten konfigurierbar sein. Dies erfolgt über das Dialogfeld "Autor". Als Nächstes erstellen wir eine einfache Komponente und untersuchen, wie Werte aus dem Dialogfeld in AEM beibehalten werden.

Im Folgenden finden Sie die allgemeinen Schritte, die im obigen Video ausgeführt werden.

Erstellen Sie eine Seite mit dem Namen Komponentengrundlagen unter WKND-Site > USA > en.
Fügen Sie die Hello World-Komponente auf die neu erstellte Seite.
Öffnen Sie das Dialogfeld für die Komponente und geben Sie Text ein. Speichern Sie die Änderungen, um die Meldung auf der Seite anzuzeigen.
Wechseln Sie in den Entwicklermodus, zeigen Sie den Inhaltspfad in CRXDE-Lite an und überprüfen Sie die Eigenschaften der Komponenteninstanz.
Verwenden Sie CRXDE-Lite, um die cq:dialog und helloworld.html Skript aus /apps/wknd/components/content/helloworld.

HTL (HTML-Vorlagensprache) und Dialogfelder

HTML-Vorlagensprache oder HTL ist eine leichte, serverseitige Vorlagensprache, die von AEM Komponenten zum Rendern von Inhalten verwendet wird.

Dialogfelder Definieren Sie die verfügbaren Konfigurationen, die für eine Komponente vorgenommen werden können.

Als Nächstes aktualisieren wir die HelloWorld HTL-Skript, um eine zusätzliche Begrüßung vor der Textnachricht anzuzeigen.

Im Folgenden finden Sie die allgemeinen Schritte, die im obigen Video ausgeführt werden.

Wechseln Sie zur IDE und öffnen Sie das Projekt zum ui.apps -Modul.
Öffnen Sie die helloworld.html und aktualisieren Sie das HTML Markup.
Verwenden Sie die IDE-Tools wie VSCode AEM Sync , um die Dateiänderung mit der lokalen AEM zu synchronisieren.
Kehren Sie zum Browser zurück und beobachten Sie, dass sich der Komponenten-Renderer geändert hat.

Öffnen Sie die .content.xml -Datei, die das Dialogfeld für die HelloWorld Komponente unter:

<code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml

Aktualisieren Sie das Dialogfeld, um ein zusätzliches Textfeld mit dem Namen Titel mit dem Namen ./title:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Datei erneut öffnen helloworld.html, das das Haupt-HTL-Skript darstellt, das für das Rendern der HelloWorld Komponente aus folgendem Pfad:
```
    <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
```

Aktualisieren helloworld.html , um den Wert der Grußformeln textfield als Teil eines H1 Tag:

<div class="cmp-helloworld" data-cmp-is="helloworld">
    <h1 class="cmp-helloworld__title">${properties.title}</h1>
    ...
</div>

Stellen Sie die Änderungen mithilfe des Entwickler-Plug-ins oder mithilfe Ihrer Maven-Fähigkeiten auf einer lokalen Instanz von AEM bereit.

Sling-Modelle

Sling-Modelle sind von Anmerkungen gesteuerte Java™-"POJOs"(Plain Old Java™ Objects), die die Zuordnung von Daten aus JCR zu Java™-Variablen erleichtern. Sie bieten auch mehrere andere Schönheiten bei der Entwicklung im Kontext von AEM.

Nehmen wir als Nächstes einige Aktualisierungen am HelloWorldModel Sling-Modell verwenden, um eine gewisse Geschäftslogik auf die im JCR gespeicherten Werte anzuwenden, bevor sie auf die Seite ausgegeben werden.

Öffnen Sie die Datei HelloWorldModel.java, das mit dem Sling-Modell verwendet wird, das mit der HelloWorld -Komponente.
```
<code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
```

Fügen Sie die folgenden Importanweisungen hinzu:

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

Aktualisieren Sie die @Model Anmerkung zur Verwendung von DefaultInjectionStrategy:

@Model(adaptables = Resource.class,
   defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
   public class HelloWorldModel {
   ...

Fügen Sie die folgenden Zeilen zum HelloWorldModel -Klasse zum Zuordnen der Werte der JCR-Eigenschaften der Komponente title und text auf Java™-Variablen:

...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

Fügen Sie die folgende Methode hinzu getTitle() der HelloWorldModel -Klasse, die den Wert der Eigenschaft title. Diese Methode fügt die zusätzliche Logik hinzu, um den Zeichenfolgenwert "Default Value here"zurückzugeben. if -Eigenschaft title null oder leer ist:
```
/***
*
* @return the value of title, if null or blank returns "Default Value here!"
*/
public String getTitle() {
    return StringUtils.isNotBlank(title) ? title : "Default Value here!";
}
```

Fügen Sie die folgende Methode hinzu getText() der HelloWorldModel -Klasse, die den Wert der Eigenschaft text. Diese Methode wandelt den String in alle Großbuchstaben um.

    /***
    *
    * @return All caps variation of the text value
    */
public String getText() {
    return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null;
}

Erstellen und stellen Sie das Bundle aus dem core -Modul:
```
$ cd core
$ mvn clean install -PautoInstallBundle
```
HINWEIS

Für AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic

Datei aktualisieren helloworld.html at aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html , um die neu erstellten Methoden der HelloWorld model:

<div class="cmp-helloworld" data-cmp-is="helloworld"
data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
    <h1 class="cmp-helloworld__title">${model.title}</h1>
    <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
        <p class="cmp-helloworld__item-label">Text property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
    </div>
    <div class="cmp-helloworld__item" data-sly-test="${model.text}">
        <p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
    </div>
    <div class="cmp-helloworld__item"  data-sly-test="${model.message}">
        <p class="cmp-helloworld__item-label">Model message:</p>
        <pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
    </div>
</div>

Stellen Sie die Änderungen mithilfe des Eclipse Developer-Plug-ins oder mithilfe Ihrer Maven-Fähigkeiten auf einer lokalen Instanz von AEM bereit.

Client-seitige Bibliotheken

Client-seitige Bibliotheken, clientlibs bietet kurz einen Mechanismus zum Organisieren und Verwalten von CSS- und JavaScript-Dateien, die für eine AEM Sites-Implementierung erforderlich sind. Clientseitige Bibliotheken sind die Standardmethode zum Einschließen von CSS und JavaScript in eine Seite in AEM.

Die ui.frontend -Modul ist ein entkoppeltes Webpack -Projekt, das in den Build-Prozess integriert ist. Dies ermöglicht die Verwendung beliebter Front-End-Bibliotheken wie Sass, LESS und TypeScript. Die ui.frontend -Modul wird im Abschnitt Kapitel zu Client-seitigen Bibliotheken.

Aktualisieren Sie anschließend die CSS-Stile für die HelloWorld -Komponente.

Im Folgenden finden Sie die allgemeinen Schritte, die im obigen Video ausgeführt werden.

Öffnen Sie ein Terminal-Fenster und navigieren Sie zum ui.frontend directory
Einstieg ui.frontend Verzeichnis ausführen npm install npm-run-all --save-dev -Befehl zum Installieren der npm-run-all Knotenmodul. Dieser Schritt ist erforderlich für AEM Projektarchetyp 39 in der kommenden Archetyp-Version ist dies nicht erforderlich.
Führen Sie als Nächstes den npm run watch command:
```
$ npm run watch
```
Wechseln Sie zur IDE und öffnen Sie das Projekt zum ui.frontend -Modul.
Öffnen Sie die Datei ui.frontend/src/main/webpack/components/_helloworld.scss.

Aktualisieren Sie die Datei, um einen roten Titel anzuzeigen:

.cmp-helloworld {}
.cmp-helloworld__title {
    color: red;
}

Im Terminal sollte eine Aktivität angezeigt werden, die angibt, dass die ui.frontend -Modul kompiliert und synchronisiert die Änderungen mit der lokalen Instanz von AEM.

Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
change:dist/index.html
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies

Kehren Sie zum Browser zurück und beobachten Sie, dass sich die Titelfarbe geändert hat.

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben die Grundlagen der Komponentenentwicklung in Adobe Experience Manager gelernt!

Nächste Schritte

Kennenlernen der Adobe Experience Manager-Seiten und -Vorlagen im nächsten Kapitel Seiten und Vorlagen. Erfahren Sie, wie Kernkomponenten in das Projekt integriert werden, und lernen Sie erweiterte Richtlinienkonfigurationen bearbeitbarer Vorlagen kennen, um eine gut strukturierte Artikelseitenvorlage zu erstellen.

Anzeigen des fertigen Codes unter GitHub oder den Code lokal in der Git-Verzweigung überprüfen und bereitstellen tutorial/component-basics-solution.

Komponentengrundlagen

Voraussetzungen

Ziel

Was Sie erstellen werden

Chapter Starter Project

Komponentenbearbeitung

HTL (HTML-Vorlagensprache) und Dialogfelder

Sling-Modelle

Client-seitige Bibliotheken

Herzlichen Glückwunsch!

Nächste Schritte

Ressourcen für Business.Adobe.com

Auf dieser Seite

Als Nächstes anzeigen:

Lernressourcen

Dokumentation

Community

Support

Ressourcen

Adobe-Konto

Adobe