Komponenten – Grundlagen

In diesem Kapitel werden wir die zugrunde liegende Technologie einer Adobe Experience Manager (AEM)-Sites-Komponente mithilfe einer einfachen 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

  1. Erfahren Sie mehr über die Rolle von HTL-Vorlagen und Sling-Modellen zum dynamischen Rendern von HTML.
  2. Erfahren Sie, wie Dialogfelder zur Erleichterung der Inhaltserstellung verwendet werden.
  3. 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 werden Sie mehrere Änderungen an einem sehr einfachen HelloWorld -Komponente. Im Zuge der Aktualisierung der 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.

  1. 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.

  2. Navigieren Sie zur aem-guides-wknd Ordner.

    $ cd aem-guides-wknd
    
  3. 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
    
  4. 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 wiederzuverwenden, müssen die Komponenten konfigurierbar sein. Dies erfolgt über das Dialogfeld "Autor". Als Nächstes erstellen wir eine einfache Komponente und überprüfen, wie Werte aus dem Dialogfeld in AEM beibehalten werden.

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

  1. Erstellen Sie eine neue Seite mit dem Namen Komponentengrundlagen unter WKND-Site > USA > en.
  2. Fügen Sie die Hello World-Komponente auf die neu erstellte Seite.
  3. Öffnen Sie das Dialogfeld für die Komponente und geben Sie Text ein. Speichern Sie die Änderungen, um die Meldung auf der Seite anzuzeigen.
  4. Wechseln Sie in den Entwicklermodus, zeigen Sie den Inhaltspfad in CRXDE-Lite an und überprüfen Sie die Eigenschaften der Komponenteninstanz.
  5. Verwenden Sie CRXDE-Lite, um die cq:dialog und helloworld.html Skript befindet sich unter /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 werden wir die HelloWorld HTL-Skript, um vor der Textmeldung eine zusätzliche Begrüßung anzuzeigen.

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

  1. Wechseln Sie zur IDE und öffnen Sie das Projekt zum ui.apps -Modul.

  2. Öffnen Sie die helloworld.html und nehmen Sie eine Änderung am HTML Markup vor.

  3. Verwenden Sie die IDE-Tools wie VSCode AEM Sync , um die Dateiänderung mit der lokalen AEM zu synchronisieren.

  4. Kehren Sie zum Browser zurück und beobachten Sie, dass sich der Komponenten-Renderer geändert hat.

  5. Ö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
    
  6. 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>
    
  7. Datei erneut öffnen helloworld.html, das das Haupt-HTL-Skript darstellt, das für das Rendern der HelloWorld Komponente, befindet sich unter:

        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
    
  8. 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>
    
  9. 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 dem JCR zu Java-Variablen erleichtern und eine Reihe anderer Eigenschaften bei der Entwicklung im Kontext von AEM bieten.

Als Nächstes werden wir 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.

  1. Ö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
    
  2. Fügen Sie die folgenden Importanweisungen hinzu:

    import org.apache.commons.lang3.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Aktualisieren Sie die @Model Anmerkung zur Verwendung von DefaultInjectionStrategy:

    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Fügen Sie die folgenden Zeilen zum HelloWorldModel -Klasse zum Zuordnen der Werte der JCR-Eigenschaften der Komponente title und text in Java-Variablen:

    ...
    @Model(adaptables = Resource.class,
    defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
    public class HelloWorldModel {
    
        ...
    
        @ValueMapValue
        private String title;
    
        @ValueMapValue
        private String text;
    
        @PostConstruct
        protected void init() {
            ...
    
  5. 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!";
    }
    
  6. 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;
    }
    
  7. Erstellen und stellen Sie das Bundle aus dem core -Modul:

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    HINWEIS

    Bei Anwendung von AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic

  8. 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>
    
  9. 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, kurz clientlibs , bieten 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.

  1. Öffnen Sie ein Terminal-Fenster und navigieren Sie zum ui.frontend Verzeichnis und

  2. Im ui.frontend Verzeichnis ausführen npm run watch command:

    $ npm run watch
    
  3. Wechseln Sie zur IDE und öffnen Sie das Projekt zum ui.frontend -Modul.

  4. Öffnen Sie die Datei ui.frontend/src/main/webpack/components/_helloworld.scss.

  5. Aktualisieren Sie die Datei, um einen roten Titel anzuzeigen:

    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  6. 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
    
  7. Kehren Sie zum Browser zurück und beobachten Sie, dass sich die Titelfarbe geändert hat.

    Aktualisierung der Komponentengrundlagen

Herzlichen Glückwunsch!

Herzlichen Glückwunsch! Sie haben gerade 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.

Auf dieser Seite