Entwickeln einer benutzerdefinierten Komponente für AEM Screens developing-a-custom-component-for-aem-screens

AEM 6.5 plus das neueste Screens Feature Pack

AEM Screens-Player

Lokale Entwicklungsumgebung

Überprüfen Sie in CRX Package Manager, ob die folgenden beiden Pakete installiert sind:

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Pakete We.Retail Run Ui.Apps und Ui.Content über CRX Package Manager installiert,

Das Paket screens-weretail-run.ui.apps installiert Code unter /apps/weretail-run.

Dieses Paket enthält den Code, der für das Rendern von benutzerdefinierten Komponenten für das Projekt verantwortlich ist. Dieses Paket enthält Komponenten-Code und alle erforderlichen JavaScript- oder CSS-Funktionen. Dieses Paket beinhaltet auch screens-weretail-run.core-0.0.1-SNAPSHOT.jar, die den Java™-Code enthält, der für das Projekt benötigt wird.

Darstellung des ui.apps-Codes in CRXDE Lite

Die Komponente Hello World ist nur ein Platzhalter. Im Laufe des Tutorials werden Funktionen hinzugefügt, die es einer Autorin bzw. einem Autor ermöglichen, die von der Komponente angezeigte Nachricht zu aktualisieren.

Das Paket screens-weretail-run.ui.content installiert den folgenden Code:

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

Dieses Paket enthält den für das Projekt benötigten Startinhalt und die für das Projekt erforderliche Konfigurationsstruktur. /conf/we-retail-run enthält alle Konfigurationen für das Projekt „We.Retail Run“. /content/dam/we-retail-run umfasst das Starten digitaler Assets für das Projekt. /content/screens/we-retail-run enthält die Screens-Inhaltsstruktur. Der Inhalt all dieser Pfade wird hauptsächlich in AEM aktualisiert. Um die Konsistenz zwischen Umgebungen (Lokal, Entwicklung, Test und Produktion) zu fördern, wird häufig eine grundlegende Inhaltsstruktur in der Quell-Code-Verwaltung gespeichert.

Navigieren Sie zu „AEM Screens“ > Projekt „We.Retail Run“:

Klicken Sie im AEM-Startmenü auf das Screens-Symbol. Vergewissern Sie sich, dass das Projekt „We.Retail Run“ angezeigt wird.

Navigieren Sie in CRXDE-Lite http://localhost:4502/crx/de/index.jsp (oder der IDE Ihrer Wahl) zu /apps/weretail-run/components/content/helloworld.

Fügen Sie der Komponente helloworld die folgenden Eigenschaften hinzu:

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

Eigenschaften für /apps/weretail-run/components/content/helloworld

Die Komponente Hello World erweitert die Komponente foundation, components, parbase, sodass sie innerhalb eines Sequenzkanals richtig verwendet werden kann.

Erstellen Sie unter /apps/weretail-run/components/content/helloworld eine Datei mit dem Namen helloworld.html.

Füllen Sie die Datei mit folgendem Inhalt:

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Screens-Komponenten erfordern je nach verwendetem Inhaltserstellungsmodus zwei unterschiedliche Wiedergaben:

1. Produktion: Vorschau- oder Veröffentlichungsmodus (wcmmode=disabled)
2. Bearbeiten: für alle anderen Inhaltserstellungsmodi, d.h. Bearbeiten, Design, Strukturvorlage, Entwickler …

helloworld.html fungiert als Schalter, der überprüft, welcher Authoring-Modus gerade aktiv ist, und zu einem anderen HTL-Skript umleitet. Eine gängige Konvention, die von Screens-Komponenten verwendet wird, besteht darin, ein edit.html-Skript für den Bearbeitungsmodus und ein production.html-Skript für den Produktionsmodus zu verwenden.

Erstellen Sie unter /apps/weretail-run/components/content/helloworld eine Datei mit dem Namen production.html.

Füllen Sie die Datei mit folgendem Inhalt:

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

Die obige Abbildung zeigt das Produktions-Markup für die Komponente „Hello World“. Es ist ein Attribut data-duration enthalten, da die Komponente auf einem Sequenzkanal verwendet wird. Das Attribut data-duration wird vom Sequenzkanal verwendet, um zu erfahren, wie lange ein Sequenz-Element angezeigt werden soll.

Die Komponente rendert ein div- und ein h1-Tag mit Text. ${properties.message} ist ein Teil des HTL-Skripts, der den Inhalt einer JCR-Eigenschaft mit dem Namen message ausgibt. Später wird ein Dialogfeld erstellt, in dem Benutzende einen Wert für den Eigenschaftstext message eingeben können.

Beachten Sie außerdem, dass die BEM-Notation (Block Element Modifier) mit der Komponente verwendet wird. BEM ist eine CSS-Kodierungskonvention, die die Erstellung wiederverwendbarer Komponenten erleichtert. BEM ist die Notation, die von den AEM-Kernkomponenten verwendet wird.

Erstellen Sie unter /apps/weretail-run/components/content/helloworld eine Datei mit dem Namen edit.html.

Füllen Sie die Datei mit folgendem Inhalt:

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

Die obige Abbildung zeigt das bearbeitete Markup für die Komponente „Hello World“. Im ersten Block wird eine bearbeitete Version der Komponente angezeigt, wenn eine Dialogfeldmeldung eingegeben wurde.

Der zweite Block wird gerendert, wenn keine Dialogfeldmeldung eingegeben wurde. cq-placeholder und data-emptytext rendern in diesem Fall die Beschriftung Hello World als Platzhalter. Die Zeichenfolge für die Beschriftung kann mithilfe von i18n internationalisiert werden, um die Inhaltserstellung in mehreren Gebietsschemata zu unterstützen.

Kopieren Sie das Screens-Bilddialogfeld, das für die Komponente „Hello World“ verwendet werden soll.

Es ist am einfachsten, von einem vorhandenen Dialogfeld aus zu starten und dann Änderungen vorzunehmen.

1. Kopieren Sie das Dialogfeld aus: /libs/screens/core/components/content/image/cq:dialog
2. Fügen Sie das Dialogfeld unterhalb von /apps/weretail-run/components/content/helloworld ein.

Aktualisieren Sie das Dialogfeld „Hello World“, um eine Registerkarte für die Meldung einzuschließen.

Aktualisieren Sie das Dialogfeld, sodass er mit Folgendem übereinstimmt: Die JCR-Knotenstruktur des finalen Dialogfelds wird nachfolgend in XML dargestellt:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                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">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                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">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

Das Textfeld für die Meldung wird in der Eigenschaft message gespeichert, das Zahlenfeld für die Dauer in der Eigenschaft duration. Diese beiden Eigenschaften werden in /apps/weretail-run/components/content/helloworld/production.html von HTL als ${properties.message} und ${properties.duration} referenziert.

Hello World – fertiges Dialogfeld

Erstellen Sie einen Ordner für Client-seitige Bibliotheken für die Komponente „Hello World“.

Erstellen Sie unter /apps/weretail-run/components/content/helloworld einen Ordner mit dem Namen clientlibs.

Erstellen Sie unter dem Ordner clientlibs einen neuen Knoten namens shared vom Typ cq:ClientLibraryFolder.

Fügen Sie der freigegebenen Client-Bibliothek die folgenden Eigenschaften hinzu:

• allowProxy   Boolean   true

• categories| Zeichenfolge[] | cq.screens.components

Eigenschaften für /apps/weretail-run/components/content/helloworld/clientlibs/shared

Die Eigenschaft „categories“ ist eine Zeichenfolge, die die Client-Bibliothek identifiziert. Die Kategorie „cq.screens.components“ wird sowohl im Bearbeitungs- als auch im Vorschau-/Produktionsmodus verwendet. Daher wird jedes CSS oder JS, das in der sharedclientlib definiert ist, in allen Modi geladen.

In einer Produktionsumgebung sollten Pfade, die direkt zu /apps führen, niemals offengelegt werden. Die Eigenschaft „allowProxy“ stellt sicher, dass die CSS und JS der Client-Bibliothek über ein Präfix /etc.clientlibs verwiesen werden.

Erstellen Sie eine Datei mit dem Namen css.txt unter dem freigegebenen Ordner.

Füllen Sie die Datei mit folgendem Inhalt:

#base=css

styles.less

Erstellen Sie einen Ordner mit dem Namen css unter dem Ordner shared. Fügen Sie eine Datei mit dem Namen style.less unter dem Ordner css hinzu. Die Struktur der Client-Bibliotheken sollte jetzt wie folgt aussehen:

Anstatt CSS direkt zu schreiben, verwendet dieses Tutorial LESS. LESS ist ein beliebter CSS-Precompiler, der CSS-Variablen, Mixins und Funktionen unterstützt. AEM-Client-Bibliotheken unterstützen nativ die LESS-Kompilierung. Sass oder andere Pre-Compiler können verwendet werden, müssen aber außerhalb von AEM kompiliert werden.

Füllen Sie /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less wie folgt:

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

Kopieren Sie den Client-Bibliotheksordner shared und fügen Sie ihn ein, um eine neue Client-Bibliothek mit dem Namen production zu erstellen.

Kopieren Sie die freigegebene Client-Bibliothek, um eine neue Produktions-Client-Bibliothek zu erstellen.

Ändern Sie den Wert der Eigenschaft categories der Produktions-Client-Bibliothek in cq.screens.components.production..

Auf diese Weise wird sichergestellt, dass die Stile nur im Vorschau-/Produktionsmodus geladen werden.

Eigenschaften für /apps/weretail-run/components/content/helloworld/clientlibs/production.

Füllen Sie /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less wie folgt:

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

Die oben genannten Stile zeigen die Meldung zentriert in der Mitte des Bildschirms an, jedoch nur im Produktionsmodus.

Navigieren Sie in CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs zu /apps/settings/wcm/designs.

Erstellen Sie einen Knoten unterhalb des Designs-Ordners mit dem Namen we-retail-run und dem Typ cq:Page.

Fügen Sie unter der Seite we-retail-run einen weiteren Knoten mit dem Namen jcr:content und dem Typ nt:unstructured hinzu. Fügen Sie dem Knoten jcr:content folgende Eigenschaften hinzu:

Design-Seite unter /apps/settings/wcm/designs/we-retail-run.

Navigieren Sie im AEM-Startmenü zu Screens > We.RetailAusführen > und klicken Sie auf Kanäle.

Klicken Sie auf die Schaltfläche Erstellen

1. Wahlen Sie Entität erstellen aus

Im Assistenten „Erstellen“:

Vorlagenschritt – Wählen Sie Sequenzkanal aus

1. Eigenschaftenschritt

• Registerkarte „Einfach“ > „Titel“ = Idle Channel
• Registerkarte „Kanal“ > aktivieren Sie Online-Kanal erstellen

Öffnen Sie die Seiteneigenschaften für den inaktiven Kanal („Idle Channel“).

Aktualisieren Sie das Feld „Design“, um auf /apps/settings/wcm/designs/we-retail-run, die im vorherigen Abschnitt erstellte Design-Seite, zu verweisen.

Design-Konfiguration mit Verweis auf /apps/settings/wcm/designs/we-retail-run

Bearbeiten Sie den neu erstellten inaktiven Kanal, damit Sie ihn öffnen können.

Schalten Sie den Seitenmodus in den Modus Design um.

1. Klicken Sie auf das Schraubenschlüssel-Symbol im Absatzsystem, um die zulässigen Komponenten zu konfigurieren.

2. Klicken Sie auf die Gruppe Screens und auf die Gruppe We.Retail Run - Content.

Schalten Sie den Seitenmodus in Bearbeiten um. Die Komponente „Hello World“ kann jetzt der Seite hinzugefügt und mit anderen Komponenten des Sequenzkanals kombiniert werden.

Navigieren Sie in CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par zu /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. Beachten Sie, dass die Eigenschaft components jetzt group:Screens, group:We.Retail Run - Content beinhaltet.

Design-Konfiguration unter /apps/settings/wcm/designs/we-retail-run