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

AEM 6.5 und dem neuesten 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

Screens We.Retail Ausführen Ui.Apps und Ui.Content Pakete, die über CRX Package Manager installiert werden.

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 Hello World -Komponente 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 We.Retail Führen Sie das Projekt aus. /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 unter allen diesen Pfaden 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 zur AEM Screens > We.Retail Projekt ausführen:

Klicken Sie im AEM Startmenü auf das Symbol Screens . Überprüfen Sie die We.Retail Projekt ausführen wird angezeigt.

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 Hello World -Komponente erweitert die foundation/components/parbase -Komponente, damit sie ordnungsgemäß in einem Sequenzkanal 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>

Das obige ist das Produktions-Markup für die Komponente "Hello World". Ein Attribut data-duration ist 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 ausgibt, die message. Später wird ein Dialogfeld erstellt, in dem der Benutzer einen Wert für die message Eigenschaftstext.

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>

Oben befindet sich das bearbeitete Markup für die Komponente Hello World . Im ersten Block wird eine bearbeitete Version der Komponente angezeigt, wenn die Dialogfeldmeldung ausgefüllt wurde.

Der zweite Block wird gerendert, wenn keine Dialogfeldmeldung eingegeben wurde. cq-placeholder und data-emptytext rendern die Beschriftung Hello World in diesem Fall 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 Dialgofeld aus /libs/screens/core/components/content/image/cq:dialog
2. Fügen Sie das Dialogfeld hier ein: /apps/weretail-run/components/content/helloworld

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 Nachricht wird in einer Eigenschaft mit dem Namen message und dass das Zahlenfeld für die Dauer in einer Eigenschaft mit dem Namen 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.

Unter dem clientlibs Ordner erstellen Sie einen Knoten mit dem Namen shared des Typs 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 in sharedclientlib definierte CSS/JS in allen Modi geladen.

Es empfiehlt sich, in einer Produktionsumgebung niemals Pfade direkt zu /apps bereitzustellen. Die allowProxy-Eigenschaft stellt sicher, dass auf die Pfade zu Client-Bibliotheks-CSS und -JS über ein Präfix „of/etc.clientlibs“ verwiesen wird.

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 und einfügen Sie die shared Client-Bibliotheksordner zum Erstellen einer Client-Bibliothek mit dem Namen production.

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

Aktualisieren Sie die categories -Eigenschaft der Produktions-Client-Bibliothek cq.screens.components.production.

Dadurch 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 Nachricht zentriert in der Mitte des Bildschirms an, jedoch nur im Produktionsmodus.

In CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, navigieren Sie 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.

Aktualisieren Sie das Feld "Design", sodass es auf /apps/settings/wcm/designs/we-retail-run, die im vorherigen Abschnitt erstellte Designseite.

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 Screens und We.RetailAusführen - Inhalt hinzugefügt.

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