Komponenten – Grundlagen

In diesem Kapitel werden wir die zugrunde liegende Technologie einer Adobe Experience Manager (AEM) Sites-Komponente anhand eines einfachen HelloWorld-Beispiels untersuchen. 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 einer lokalen Entwicklungsumgebung.

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

Ziele

  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 nehmen Sie einige Änderungen an einer sehr einfachen HelloWorld-Komponente vor. Im Zuge der Aktualisierung der Komponente HelloWorld erfahren Sie mehr über die wichtigsten Bereiche der Entwicklung AEM Komponenten.

Chapter Starter Project

Dieses Kapitel baut auf einem generischen Projekt auf, das vom AEM Projektarchetyp generiert wurde. Sehen Sie sich das folgende Video an und sehen Sie sich die Voraussetzungen an, 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. Klonen Sie in einem leeren Verzeichnis das Repository aem-guides-wknd:

    $ 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 generierte Projekt Projekt-Setup weiterhin verwenden.

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

    $ 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 das Profil classic an beliebige Maven-Befehle an.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    
  4. Importieren Sie das Projekt in Ihre bevorzugte IDE, indem Sie die Anweisungen zum Einrichten einer lokalen Entwicklungsumgebung befolgen.

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 > US > en.
  2. Fügen Sie der neu erstellten Seite die Komponente Hello World hinzu.
  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 das Skript cq:dialog und helloworld.html anzuzeigen, das sich unter /apps/wknd/components/content/helloworld befindet.

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 die verfügbaren Konfigurationen, die für eine Komponente vorgenommen werden können.

Als Nächstes wird das HTML-Skript HelloWorld aktualisiert, um vor der Textnachricht einen zusätzlichen Gruß 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 Modul ui.apps .

  2. Öffnen Sie die Datei 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-Instanz zu synchronisieren.

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

  5. Öffnen Sie die Datei .content.xml , die das Dialogfeld für die Komponente HelloWorld definiert, 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 hinzuzufügen:

    <?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. Öffnen Sie die Datei helloworld.html erneut, die das HTL-Haupt darstellt, das für die Wiedergabe der HelloWorld-Komponente verantwortlich ist. Sie befindet sich unter:

        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
    
  8. Aktualisieren Sie helloworld.html , um den Wert des Textfelds Grußformel als Teil eines H1 -Tags anzuzeigen:

    <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 nehmen wir einige Aktualisierungen am Sling-Modell HelloWorldModel vor, um eine gewisse Geschäftslogik auf die im JCR gespeicherten Werte anzuwenden, bevor sie an die Seite ausgegeben werden.

  1. Öffnen Sie die Datei HelloWorldModel.java, die das Sling-Modell ist, das mit der Komponente HelloWorld verwendet wird.

    <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.lang.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Aktualisieren Sie die @Model -Anmerkung, um eine DefaultInjectionStrategy zu verwenden:

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

    ...
    @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 der HelloWorldModel-Klasse die folgende Methode getTitle() hinzu, die den Wert der Eigenschaft title zurückgibt. Diese Methode fügt die zusätzliche Logik hinzu, um den Zeichenfolgenwert "Default Value here"zurückzugeben. wenn die 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 der HelloWorldModel-Klasse die folgende Methode getText() hinzu, die den Wert der Eigenschaft text zurückgibt. 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 über das Modul core bereit:

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    HINWEIS

    Verwenden Sie bei Verwendung von AEM 6.4/6.5 mvn clean install -PautoInstallBundle -Pclassic

  8. Aktualisieren Sie die Datei helloworld.html unter aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html, um die neu erstellten Methoden des HelloWorld-Modells zu verwenden:

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

Als Nächstes werden wir einige CSS-Stile für die Komponente HelloWorld einfügen, um die Grundlagen der clientseitigen Bibliotheken zu verstehen.

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

  1. Erstellen Sie unter /aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs einen neuen Ordner mit dem Namen clientlib-helloworld.

  2. Erstellen Sie einen Ordner und eine Dateistruktur wie die folgende unter clientlibs

    /clientlib-helloworld
        /css/helloworld.css
        /js/helloworld.js
        +js.txt
        +css.txt
        +.content.xml
    
  3. Füllen Sie helloworld.css wie folgt:

    .cmp-helloworld .cmp-helloworld__title {
        color: red;
    }
    
  4. Füllen Sie helloworld/clientlibs/css.txt wie folgt:

    #base=css
    helloworld.css
    
  5. Füllen Sie helloworld/clientlibs/js/helloworld.js wie folgt:

    console.log("Hello World from Javascript!");
    
  6. Füllen Sie helloworld/clientlibs/js.txt wie folgt:

    #base=js
    helloworld.js
    
  7. Aktualisieren Sie die Datei clientlib-helloworld/.content.xml , um die folgenden Eigenschaften einzuschließen:

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        allowProxy="{Boolean}true"
        categories="[wknd.helloworld]" />
    
  8. Aktualisieren Sie die clientlibs/clientlib-base/.content.xml-Datei auf embed die Kategorie wknd.helloworld :

    <?xml version="1.0" encoding="UTF-8"?>
    <jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
        jcr:primaryType="cq:ClientLibraryFolder"
        allowProxy="{Boolean}true"
        categories="[wknd.base]"
        embed="[core.wcm.components.accordion.v1,core.wcm.components.tabs.v1,core.wcm.components.carousel.v1,core.wcm.components.image.v2,core.wcm.components.breadcrumb.v2,core.wcm.components.search.v1,core.wcm.components.form.text.v2,core.wcm.components.pdfviewer.v1,core.wcm.components.commons.datalayer.v1,wknd.grid,wknd.helloworld]"/>
    
  9. Stellen Sie die Änderungen mithilfe des Entwickler-Plug-ins oder mithilfe Ihrer Maven-Fähigkeiten auf einer lokalen Instanz von AEM bereit.

    HINWEIS

    CSS und JavaScript werden aus Leistungsgründen häufig vom Browser zwischengespeichert. Wenn Sie die Änderung für die Client-Bibliothek nicht sofort sehen, führen Sie eine harte Aktualisierung durch und löschen Sie den Cache des Browsers. Es kann hilfreich sein, ein Inkognito-Fenster zu verwenden, um einen neuen Cache sicherzustellen.

Herzlichen Glückwunsch!

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

Nächste Schritte

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

Zeigen Sie den fertigen Code auf GitHub an oder überprüfen Sie den Code und stellen Sie ihn lokal auf der Git-Verzweigung tutorial/component-basics-solution bereit.

Auf dieser Seite