Entwickeln mit dem AEM-SPA-Editor - Tutorial "Hello World"

WARNUNG

Dieses Tutorial ist veraltet. Es wird empfohlen, Folgendes zu tun: Erste Schritte mit dem AEM-SPA-Editor und Angular oder Erste Schritte mit dem AEM-SPA-Editor und React

AEM SPA Editor unterstützt die kontextbezogene Bearbeitung von Einzelseiten-Apps oder -SPA. Dieses Tutorial ist eine Einführung in SPA Entwicklung, die mit AEM Editor JS SDK verwendet werden SPA. Im Tutorial wird die Anwendung "We.Retail Journal"erweitert, indem eine benutzerdefinierte Komponente "Hello World"hinzugefügt wird. Benutzer können das Tutorial mit React- oder Angular-Frameworks abschließen.

HINWEIS

Für die Funktion "Single Page Application (SPA) Editor"ist AEM Service Pack 2 (oder höher) 6.4 erforderlich.

Der SPA Editor ist die empfohlene Lösung für Projekte, die SPA Framework-basiertes Client-seitiges Rendering erfordern (z. B. React oder Angular).

Vorausgesetztes Lesen

In diesem Tutorial werden die Schritte hervorgehoben, die zum Zuordnen einer SPA Komponente zu einer AEM Komponente erforderlich sind, um die kontextbezogene Bearbeitung zu ermöglichen. Anwender, die mit diesem Tutorial beginnen, sollten sich mit grundlegenden Entwicklungskonzepten in Adobe Experience Manager, AEM sowie mit der Entwicklung von React von Angular-Frameworks vertraut machen. Das Tutorial umfasst sowohl Back-End- als auch Front-End-Entwicklungsaufgaben.

Es wird empfohlen, die folgenden Ressourcen zu überprüfen, bevor Sie mit diesem Tutorial beginnen:

Lokale Entwicklungsumgebung

Dieses Tutorial wurde für Folgendes entwickelt:

Adobe Experience Manager 6.5 oder Adobe Experience Manager 6.4 + Service Pack 5

In diesem Tutorial sollten die folgenden Technologien und Tools installiert werden:

  1. Java 11
  2. Apache Maven - 3.3.1+
  3. Node.js - 8.11.1+ und npm 5.6.0+ (npm wird mit node.js installiert)

Überprüfen Sie die Installation der oben genannten Tools, indem Sie ein neues Terminal öffnen und Folgendes ausführen:

$ java -version
java version "11 +"

$ mvn -version
Apache Maven 3.3.9

$ node --version
v8.11.1

$ npm --version
6.1.0

Übersicht

Das grundlegende Konzept besteht darin, eine SPA Komponente einer AEM Komponente zuzuordnen. AEM Komponenten, die serverseitig ausgeführt werden, exportieren Inhalte in Form von JSON. Der JSON-Inhalt wird vom SPA verwendet, der clientseitig im Browser ausgeführt wird. Es wird eine 1:1-Zuordnung zwischen SPA Komponenten und einer AEM Komponente erstellt.

SPA Komponentenzuordnung

Beliebte Frameworks React JS und Angular werden standardmäßig unterstützt. Benutzer können dieses Tutorial entweder in Angular oder in React absolvieren, mit welchem Framework sie am besten vertraut sind.

Projekt-Setup

SPA Entwicklung hat einen Fuß in AEM Entwicklung und den anderen draußen. Das Ziel besteht darin, SPA Entwicklung unabhängig und (meist) AEM agnostisch zu ermöglichen.

  • SPA Projekte können während der Frontend-Entwicklung unabhängig vom AEM-Projekt arbeiten.
  • Frontend-Build-Tools und -Technologien wie Webpack, NPM, Grunt und Gulpwerden weiterhin verwendet.
  • Um für AEM zu erstellen, wird das SPA-Projekt kompiliert und automatisch in das AEM Projekt aufgenommen.
  • Standardpakete AEM , die zur Bereitstellung der SPA in AEM verwendet werden.

Übersicht über Artefakte und Bereitstellung

SPA Entwicklung hat einen Fuß in AEM Entwicklung, und der andere draußen - damit SPA Entwicklung unabhängig und (meist) AEM erfolgt.

Ziel dieses Tutorials ist es, die We.Retail Journal-App um eine neue Komponente zu erweitern. Laden Sie zunächst den Quellcode für die App "We.Retail Journal"herunter und stellen Sie ihn auf einem lokalen AEM bereit.

  1. ​​Laden Sie den neuesten We.Retail Journal-Code von GitHub herunter.

    Oder klonen Sie das Repository über die Befehlszeile:

    $ git clone git@github.com:adobe/aem-sample-we-retail-journal.git
    HINWEIS

    Das Tutorial funktioniert mit der Verzweigung Übergeordnet mit 1.2.1-SNAPSHOT des Projekts.

  2. Die folgende Struktur sollte sichtbar sein:

    Ordnerstruktur des Projekts

    Das Projekt enthält die folgenden Maven-Module:

    • all: Bettet das gesamte Projekt in ein einzelnes Paket ein und installiert es.
    • bundles: Enthält zwei OSGi-Bundles: und Core, die Java-Code Sling Models und anderen Java-Code enthalten.
    • ui.apps: enthält die /apps-Teile des Projekts, d. h. JS- und CSS-Clientlibs, Komponenten, Runmode-spezifische Konfigurationen.
    • ui.content: enthält Strukturinhalte und Konfigurationen (/content, /conf)
    • react-app: We.Retail Journal React-Anwendung. Dies ist sowohl ein Maven-Modul als auch ein Webpack-Projekt.
    • angular-app: Angular-Anwendung "We.Retail Journal". Dies ist sowohl ein Maven-Modul als auch ein Webpack-Projekt.

  3. Öffnen Sie ein neues Terminal-Fenster und führen Sie den folgenden Befehl aus, um die gesamte App in einer lokalen AEM-Instanz zu erstellen und bereitzustellen, die unter http://localhost:4502 ausgeführt wird.

    $ cd <src>/aem-sample-we-retail-journal
$ mvn -PautoInstallSinglePackage clean install
    HINWEIS

    In diesem Projekt lautet das Maven-Profil zum Erstellen und Verpacken des gesamten Projekts autoInstallSinglePackage

    VORSICHT

    Wenn beim Build ein Fehler auftritt, stellen Sie sicher, dass die Maven-Datei settings.xml das Maven-Artefakt-Repository der Adobe enthält.

  4. Gehen Sie zu:

    Die We.Retail Journal-App sollte im AEM Sites-Editor angezeigt werden.

  5. Wählen Sie im Modus Bearbeiten eine Komponente aus, die Sie bearbeiten möchten, und aktualisieren Sie den Inhalt.

    Bearbeiten einer Komponente

  6. Wählen Sie das Symbol Seiteneigenschaften aus, um die Seiteneigenschaften zu öffnen. Wählen Sie Vorlage bearbeiten aus, um die Vorlage der Seite zu öffnen.

    Menü "Seiteneigenschaften"

  7. In der neuesten Version des SPA-Editors können bearbeitbare Vorlagen auf dieselbe Weise wie bei herkömmlichen Sites-Implementierungen verwendet werden. Diese wird später mit unserer benutzerdefinierten Komponente erneut besucht.

    HINWEIS

    Nur AEM 6.5 und AEM 6.4 + Service Pack 5 unterstützen bearbeitbare Vorlagen.

Entwicklungsübersicht

Überblicksentwicklung

SPA Entwicklungsdurchläufe erfolgen unabhängig von AEM. Wenn die SPA bereit für die Bereitstellung in AEM ist, werden die folgenden allgemeinen Schritte ausgeführt (wie oben dargestellt).

  1. Der AEM Projekterstellung wird aufgerufen, wodurch wiederum ein Build des SPA-Projekts Trigger wird. Das We.Retail Journal verwendet das frontend-maven-plugin.
  2. Der aem-clientlib-generator des SPA-Projekts bettet die kompilierte SPA als AEM Client-Bibliothek in das AEM Projekt ein.
  3. Das AEM-Projekt generiert ein AEM-Paket, einschließlich des kompilierten SPA, sowie weiteren unterstützenden AEM-Code.

AEM Komponente erstellen

Persona: AEM Entwickler

Zuerst wird eine AEM Komponente erstellt. Die AEM-Komponente ist für das Rendern der JSON-Eigenschaften verantwortlich, die von der React-Komponente gelesen werden. Die AEM Komponente ist auch für die Bereitstellung eines Dialogfelds für alle bearbeitbaren Eigenschaften der Komponente verantwortlich.

Importieren Sie mithilfe von Eclipse oder anderen IDE das Projekt "We.Retail Journal Maven".

  1. Aktualisieren Sie den Reaktor pom.xml, um das Plug-in Apache Rat zu entfernen. Dieses Plug-in überprüft jede Datei, um sicherzustellen, dass ein Lizenzheader vorhanden ist. Für unsere Zwecke müssen wir uns nicht um diese Funktionalität kümmern.

    Entfernen Sie in aem-sample-we-retail-journal/pom.xml apache-rate-plugin:

    <!-- Remove apache-rat-plugin -->
<plugin>
        <groupId>org.apache.rat</groupId>
        <artifactId>apache-rat-plugin</artifactId>
        <configuration>
            <excludes combine.children="append">
                <exclude>*</exclude>
                    ...
            </excludes>
        </configuration>
        <executions>
                <execution>
                    <phase>verify</phase>
                    <goals>
                        <goal>check</goal>
                    </goals>
            </execution>
        </executions>
    </plugin>

  2. Erstellen Sie im Modul we-retail-journal-content (<src>/aem-sample-we-retail-journal/ui.apps) einen neuen Knoten unter ui.apps/jcr_root/apps/we-retail-journal/components mit dem Namen helloworld des Typs cq:Component.

  3. Fügen Sie die folgenden Eigenschaften zur helloworld-Komponente hinzu, dargestellt in XML (/helloworld/.content.xml):

    <?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:description="Hello World Component for We.Retail Journal"
    jcr:primaryType="cq:Component"
    jcr:title="Hello World"
    componentGroup="We.Retail Journal" />

    Hello World-Komponente

    HINWEIS

    Um die Funktion "Bearbeitbare Vorlagen"zu veranschaulichen, haben wir absichtlich componentGroup="Custom Components" festgelegt. In einem realen Projekt ist es am besten, die Anzahl der Komponentengruppen zu minimieren, sodass eine bessere Gruppe "We.Retail Journal"wäre, um sie mit den anderen Inhaltskomponenten abzugleichen.

    Nur AEM 6.5 und AEM 6.4 + Service Pack 5 unterstützen bearbeitbare Vorlagen.

  4. Als Nächstes wird ein Dialogfeld erstellt, in dem eine benutzerdefinierte Nachricht für die Komponente Hello World konfiguriert werden kann. Fügen Sie unter /apps/we-retail-journal/components/helloworld einen Knotennamen cq:dialog von nt:unstructured hinzu.

  5. Das cq:dialog zeigt ein einzelnes Textfeld an, das Text in einer Eigenschaft namens message beibehält. Fügen Sie unter dem neu erstellten cq:dialog die folgenden Knoten und Eigenschaften hinzu, die in XML unten dargestellt werden (helloworld/_cq_dialog/.content.xml):

    <?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="We.Retail Journal - Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <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"
                                                fieldLabel="Message"
                                                name="./message"
                                                required="{Boolean}true"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

    Dateistruktur

    Die obige XML-Knotendefinition erstellt ein Dialogfeld mit einem einzelnen Textfeld, in das ein Benutzer eine "Meldung"eingeben kann. Beachten Sie die Eigenschaft name="./message" im Knoten <message /> . Dies ist der Name der Eigenschaft, die in AEM im JCR gespeichert wird.

  6. Als Nächstes wird ein leeres Dialogfeld für Richtlinien erstellt (cq:design_dialog). Das Dialogfeld "Richtlinie"ist erforderlich, um die Komponente im Vorlageneditor anzuzeigen. Für diesen einfachen Anwendungsfall ist es ein leeres Dialogfeld.

    Fügen Sie unter /apps/we-retail-journal/components/helloworld einen Knotennamen cq:design_dialog von nt:unstructured hinzu.

    Die Konfiguration wird in XML unten dargestellt (helloworld/_cq_design_dialog/.content.xml).

    <?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" />

  7. Stellen Sie die Codebasis in der Befehlszeile AEM bereit:

    $ cd <src>/aem-sample-we-retail-journal/content
$ mvn -PautoInstallPackage clean install

    Überprüfen Sie in CRXDE Lite , ob die Komponente bereitgestellt wurde, indem Sie den Ordner unter /apps/we-retail-journal/components: überprüfen.

    Bereitgestellte Komponentenstruktur in CRXDE Lite

Sling-Modell erstellen

Persona: AEM Entwickler

Als Nächstes wird ein Sling Model erstellt, um die Hello World-Komponente zu sichern. In einem herkömmlichen WCM-Anwendungsfall implementiert das Sling Model eine Geschäftslogik und ein serverseitiges Rendering-Skript (HTL) führt einen Aufruf an das Sling Model durch. Dadurch bleibt das Rendering-Skript relativ einfach.

Sling Models werden auch im SPA-Anwendungsfall verwendet, um serverseitige Geschäftslogik zu implementieren. Der Unterschied besteht darin, dass im Anwendungsfall SPA die Sling Models ihre Methoden als serialisierte JSON verfügbar macht.

HINWEIS

Als Best Practice sollten Entwickler nach Möglichkeit AEM Kernkomponenten verwenden. Neben anderen Funktionen bieten Kernkomponenten Sling Models eine JSON-Ausgabe, die "SPA-bereit"ist, sodass sich Entwickler mehr auf die Frontend-Präsentation konzentrieren können.

  1. Öffnen Sie im Editor Ihrer Wahl das Projekt we-retail-journal-commons ( <src>/aem-sample-we-retail-journal/bundles/commons).

  2. Im Paket com.adobe.cq.sample.spa.commons.impl.models:

    • Erstellen Sie eine neue Klasse mit dem Namen HelloWorld.
    • Hinzufügen einer Implementierungsschnittstelle für com.adobe.cq.export.json.ComponentExporter.

    Neuer Java-Klassenassistent

    Die ComponentExporter-Schnittstelle muss implementiert werden, damit Sling Model mit AEM Content Services kompatibel ist.

     package com.adobe.cq.sample.spa.commons.impl.models;

 import com.adobe.cq.export.json.ComponentExporter;

 public class HelloWorld implements ComponentExporter {

     @Override
     public String getExportedType() {
         return null;
     }
 }

  3. Fügen Sie eine statische Variable mit dem Namen RESOURCE_TYPE hinzu, um den Ressourcentyp der Komponente HelloWorld zu identifizieren:

     ...
 public class HelloWorld implements ComponentExporter {

     static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";

     ...
 }

  4. Fügen Sie die OSGi-Anmerkungen für @Model und @Exporter hinzu. Die @Model-Anmerkung registriert die Klasse als Sling Model. Die Anmerkung @Exporter stellt die Methoden als serialisierte JSON-Datei mit dem Framework Jackson Exporter bereit.

    import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.models.annotations.Exporter;
import org.apache.sling.models.annotations.Model;
import com.adobe.cq.export.json.ExporterConstants;
...

@Model(
        adaptables = SlingHttpServletRequest.class,
        adapters = {ComponentExporter.class},
        resourceType = HelloWorld.RESOURCE_TYPE
)
@Exporter(
        name = ExporterConstants.SLING_MODEL_EXPORTER_NAME, 
        extensions = ExporterConstants.SLING_MODEL_EXTENSION
)
public class HelloWorld implements ComponentExporter {

...

  5. Implementieren Sie die Methode getDisplayMessage(), um die JCR-Eigenschaft message zurückzugeben. Verwenden Sie die Sling Model-Anmerkung von @ValueMapValue, um die unter der Komponente gespeicherte Eigenschaft message einfach abzurufen. Die Anmerkung @Optional ist wichtig, da message beim ersten Hinzufügen der Komponente zur Seite nicht aufgefüllt wird.

    Im Rahmen der Geschäftslogik wird der Nachricht eine Zeichenfolge "Hallo"vorangestellt.

    import org.apache.sling.models.annotations.injectorspecific.ValueMapValue;
import org.apache.sling.models.annotations.Optional;

...

public class HelloWorld implements ComponentExporter {

   static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";

   private static final String PREPEND_MSG = "Hello";

    @ValueMapValue @Optional
    private String message;

    public String getDisplayMessage() {
        if(message != null && message.length() > 0) {
            return PREPEND_MSG + " "  + message;
        }
        return null;
    }

...
    HINWEIS

    Der Methodenname getDisplayMessage ist wichtig. Wenn Sling Model mit Jackson Exporter serialisiert wird, wird dies als JSON-Eigenschaft bereitgestellt: displayMessage. Die Jackson Exporter serialisiert und stellt alle getter-Methoden bereit, die keinen Parameter verwenden (es sei denn, sie sind explizit zum Ignorieren markiert). Später in der React-/Angular-App werden wir diesen Eigenschaftswert lesen und ihn als Teil der Anwendung anzeigen.

    Die Methode getExportedType ist ebenfalls wichtig. Der Wert der Komponente resourceType wird verwendet, um die JSON-Daten der Frontend-Komponente (Angular/React) zuzuordnen. Wir werden dies im nächsten Abschnitt untersuchen.

  6. Implementieren Sie die Methode getExportedType() , um den Ressourcentyp der Komponente HelloWorld zurückzugeben.

     @Override
    public String getExportedType() {
        return RESOURCE_TYPE;
    }

    Den vollständigen Code für HelloWorld.java finden Sie hier.

  7. Stellen Sie den Code AEM mithilfe von Apache Maven bereit:

    $ cd <src>/sample-we-retail-spa-content/bundles/commons
$ mvn -PautoInstallPackage clean install

    Überprüfen Sie die Bereitstellung und Registrierung von Sling Model, indem Sie in der OSGi-Konsole zu Status > Sling-Modelle navigieren.

    Sie sollten sehen, dass das Sling-Modell HelloWorld an den Sling-Ressourcentyp we-retail-journal/components/helloworld gebunden ist und als Sling Model Exporter Servlet registriert ist:

    com.adobe.cq.sample.spa.commons.impl.models.HelloWorld - we-retail-journal/components/helloworld
com.adobe.cq.sample.spa.commons.impl.models.HelloWorld exports 'we-retail-journal/components/helloworld' with selector 'model' and extension '[Ljava.lang.String;@6480f3e5' with exporter 'jackson'

Erstellen einer React-Komponente

Persona: Frontend-Entwickler

Als Nächstes wird die React-Komponente erstellt. Öffnen Sie das Modul react-app ( <src>/aem-sample-we-retail-journal/react-app) mit dem Editor Ihrer Wahl.

HINWEIS

Sie können diesen Abschnitt überspringen, wenn Sie nur an der Angular-Entwicklung interessiert sind.

  1. Navigieren Sie im Ordner react-app zum Ordner src . Erweitern Sie den Komponentenordner, um die vorhandenen React-Komponentendateien anzuzeigen.

    Struktur der React-Komponentendatei

  2. Fügen Sie eine neue Datei unter dem Komponentenordner HelloWorld.js hinzu.

  3. Öffnen Sie HelloWorld.js. Fügen Sie eine Importanweisung hinzu, um die React-Komponentenbibliothek zu importieren. Fügen Sie eine zweite Importanweisung hinzu, um den von Adobe bereitgestellten MapTo-Helfer zu importieren. Der MapTo-Helfer stellt eine Zuordnung der React-Komponente zur JSON der AEM-Komponente bereit.

    import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';

  4. Erstellen Sie unter den Importen eine neue Klasse mit dem Namen HelloWorld , die die React Component -Schnittstelle erweitert. Fügen Sie die erforderliche render()-Methode zur HelloWorld-Klasse hinzu.

    import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';

class HelloWorld extends Component {

    render() {

    }
}

  5. Der MapTo-Helfer enthält automatisch ein Objekt mit dem Namen cqModel als Teil der Props der React-Komponente. Das cqModel enthält alle Eigenschaften, die von Sling Model verfügbar gemacht werden.

    Denken Sie daran, dass das zuvor erstellte Sling Model eine Methode getDisplayMessage() enthält. getDisplayMessage() wird als JSON-Schlüssel mit dem Namen displayMessage bei der Ausgabe übersetzt.

    Implementieren Sie die render()-Methode, um ein h1-Tag auszugeben, das den Wert von displayMessage enthält. JSX, eine Syntaxerweiterung für JavaScript, wird verwendet, um das endgültige Markup der Komponente zurückzugeben.

    ...

class HelloWorld extends Component {
    render() {

        if(this.props.displayMessage) {
            return (
                <div className="cmp-helloworld">
                    <h1 className="cmp-helloworld_message">{this.props.displayMessage}</h1>
                </div>
            );
        }
        return null;
    }
}

  6. Implementieren Sie eine Konfigurationsmethode zum Bearbeiten. Diese Methode wird über den MapTo -Helfer übergeben und stellt dem AEM-Editor Informationen bereit, um einen Platzhalter anzuzeigen, falls die Komponente leer ist. Dies tritt auf, wenn die Komponente der SPA hinzugefügt, aber noch nicht erstellt wurde. Fügen Sie unter der Klasse HelloWorld Folgendes hinzu:

    ...

class HelloWorld extends Component {
    ...
}

const HelloWorldEditConfig = {

    emptyLabel: 'Hello World',

    isEmpty: function(props) {
        return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
    }
};

...

  7. Rufen Sie am Ende der Datei den Helper MapTo auf und übergeben Sie die Klasse HelloWorld und die Klasse HelloWorldEditConfig. Dadurch wird die React-Komponente basierend auf dem Ressourcentyp der AEM Komponente der AEM Komponente zugeordnet: we-retail-journal/components/helloworld.

    MapTo('we-retail-journal/components/helloworld')(HelloWorld, HelloWorldEditConfig);

    Den vollständigen Code für HelloWorld.js finden Sie hier.

  8. Öffnen Sie die Datei ImportComponents.js. Sie finden sie unter <src>/aem-sample-we-retail-journal/react-app/src/ImportComponents.js.

    Fügen Sie eine Zeile hinzu, um die HelloWorld.js mit den anderen Komponenten im kompilierten JavaScript-Bundle anzufordern:

    ...
  require('./components/Text');
  require('./components/Image');
  require('./components/HelloWorld');
...

  9. Erstellen Sie im Ordner components eine neue Datei mit dem Namen HelloWorld.css als Geschwister von HelloWorld.js. Füllen Sie die Datei mit dem folgenden Element, um einige grundlegende Stile für die Komponente HelloWorld zu erstellen:

    /* HelloWorld.css to style HelloWorld component */

.cmp-helloworld_message {
    text-align: center;
    color: #ff505e;
    text-transform: unset;
    letter-spacing: unset;
}

  10. Öffnen Sie HelloWorld.js erneut und aktualisieren Sie unter den Importanweisungen, um HelloWorld.css zu benötigen:

    import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';

require('./HelloWorld.css');

...

  11. Stellen Sie den Code AEM mithilfe von Apache Maven bereit:

    $ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install

  12. Öffnen Sie in CRXDE-Lite /apps/we-retail-journal/react/clientlibs/we-retail-journal-react/js/app.js. Suchen Sie in app.js schnell nach "HelloWorld", um sicherzustellen, dass die React-Komponente in der kompilierten App enthalten ist.

    HINWEIS

    app. js ist die gebündelte React-App. Der Code ist nicht mehr für Menschen lesbar. Der Befehl npm run build hat einen optimierten Build ausgelöst, der kompiliertes JavaScript ausgibt, das von modernen Browsern interpretiert werden kann.

Angular-Komponente erstellen

Persona: Frontend-Entwickler

HINWEIS

Sie können diesen Abschnitt überspringen, wenn Sie nur an der React-Entwicklung interessiert sind.

Als Nächstes wird die Angular-Komponente erstellt. Öffnen Sie das Modul angular-app (<src>/aem-sample-we-retail-journal/angular-app) mit dem Editor Ihrer Wahl.

  1. Navigieren Sie im Ordner angular-app zum Ordner src . Erweitern Sie den Komponentenordner, um die vorhandenen Angular-Komponentendateien anzuzeigen.

    Angular-Dateistruktur

  2. Fügen Sie unter dem Komponentenordner helloworld einen neuen Ordner hinzu. Fügen Sie unter dem Ordner helloworld neue Dateien mit dem Namen helloworld.component.css, helloworld.component.html, helloworld.component.ts hinzu.

    /angular-app
    /src
        /app
            /components
+                /helloworld
+                    helloworld.component.css
+                    helloworld.component.html
+                    helloworld.component.ts

  3. Öffnen Sie helloworld.component.ts. Fügen Sie eine Importanweisung hinzu, um die Klassen Angular Component und Input zu importieren. Erstellen Sie eine neue Komponente mit dem Verweis auf styleUrls und templateUrl auf helloworld.component.css und helloworld.component.html. Exportieren Sie schließlich die Klasse HelloWorldComponent mit der erwarteten Eingabe von displayMessage.

    //helloworld.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-helloworld',
  host: { 'class': 'cmp-helloworld' },
  styleUrls:['./helloworld.component.css'],
  templateUrl: './helloworld.component.html',
})

export class HelloWorldComponent {
  @Input() displayMessage: string;
}
    HINWEIS

    Wenn Sie sich an die zuvor erstellte Sling Model erinnern, gab es eine Methode getDisplayMessage(). Die serialisierte JSON dieser Methode lautet displayMessage, die wir jetzt in der Angular-App lesen.

  4. Öffnen Sie helloworld.component.html , um ein h1 -Tag einzufügen, das die displayMessage -Eigenschaft druckt:

    <h1 *ngIf="displayMessage" class="cmp-helloworld_message">
    {{displayMessage}}
</h1>

  5. Aktualisieren Sie helloworld.component.css , um einige grundlegende Stile für die Komponente einzuschließen.

    :host-context {
    display: block;
};

.cmp-helloworld {
    display:block;
}
.cmp-helloworld_message {
    text-align: center;
    color: #ff505e;
    text-transform: unset;
    letter-spacing: unset;
}

  6. Aktualisieren Sie helloworld.component.spec.ts mit dem folgenden Testbett:

    import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HelloWorldComponent } from './helloworld.component';

    describe('HelloWorld', () => {
    let component: HelloWorldComponent;
    let fixture: ComponentFixture<HelloWorldComponent>;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
        declarations: [ HelloWorldComponent ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(HelloWorldComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

  7. Nächstes Update src/components/mapping.ts , um HelloWorldComponent einzuschließen. Fügen Sie einen HelloWorldEditConfig hinzu, der den Platzhalter im AEM-Editor markiert, bevor die Komponente konfiguriert wurde. Fügen Sie schließlich eine Zeile hinzu, um die AEM Komponente der Angular-Komponente mit dem Helfer MapTo zuzuordnen.

    // src/components/mapping.ts

import { HelloWorldComponent } from "./helloworld/helloworld.component";

...

const HelloWorldEditConfig = {

    emptyLabel: 'Hello World',

    isEmpty: function(props) {
        return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
    }
};

...

MapTo('we-retail-journal/components/helloworld')(HelloWorldComponent, HelloWorldEditConfig);

    Den vollständigen Code für mapping.ts finden Sie hier.

  8. Aktualisieren Sie src/app.module.ts , um das NgModule zu aktualisieren. Fügen Sie HelloWorldComponent als Deklaration hinzu, die zum AppModule gehört. Fügen Sie HelloWorldComponent auch als entryComponent hinzu, damit sie kompiliert und dynamisch in die App eingefügt wird, während das JSON-Modell verarbeitet wird.

    import { HelloWorldComponent } from './components/helloworld/helloworld.component';

...

@NgModule({
  imports: [BrowserModule.withServerTransition({ appId: 'we-retail-sample-angular' }),
    SpaAngularEditableComponentsModule,
  AngularWeatherWidgetModule.forRoot({
    key: "37375c33ca925949d7ba331e52da661a",
    name: WeatherApiName.OPEN_WEATHER_MAP,
    baseUrl: 'http://api.openweathermap.org/data/2.5'
  }),
    AppRoutingModule,
    BrowserTransferStateModule],
  providers: [ModelManagerService,
    { provide: APP_BASE_HREF, useValue: '/' }],
  declarations: [AppComponent,
    TextComponent,
    ImageComponent,
    WeatherComponent,
    NavigationComponent,
    MenuComponent,
    MainContentComponent,
    HelloWorldComponent],
  entryComponents: [TextComponent,
    ImageComponent,
    WeatherComponent,
    NavigationComponent,
    MainContentComponent,
    HelloWorldComponent],
  bootstrap: [AppComponent]
 })

    Den vollständigen Code für app.module.ts finden Sie hier.

  9. Stellen Sie den Code mithilfe von Maven für AEM bereit:

    $ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install

  10. Öffnen Sie in CRXDE-Lite /apps/we-retail-journal/angular/clientlibs/we-retail-journal-angular/js/main.js. Führen Sie eine Schnellsuche nach HelloWorld in main.js durch, um sicherzustellen, dass die Angular-Komponente eingeschlossen wurde.

    HINWEIS

    main. js ist die gebündelte Angular-App. Der Code ist nicht mehr für Menschen lesbar. Der Befehl npm run build hat einen optimierten Build ausgelöst, der kompiliertes JavaScript ausgibt, das von modernen Browsern interpretiert werden kann.

Aktualisieren der Vorlage

  1. Navigieren Sie zur bearbeitbaren Vorlage für die React- und/oder Angular-Versionen:

  2. Wählen Sie den Layout-Container aus und klicken Sie auf das Symbol Richtlinie , um die Richtlinie zu öffnen:

    Layout-Richtlinie auswählen

    Führen Sie unter Properties > Zulässige Komponenten eine Suche nach Custom Components durch. Sie sollten die Komponente Hello World sehen und sie auswählen. Speichern Sie Ihre Änderungen, indem Sie auf das Kontrollkästchen oben rechts klicken.

    Richtlinienkonfiguration für Layout-Container

  3. Nach dem Speichern sollte die Komponente HelloWorld als zulässige Komponente im Layout-Container angezeigt werden.

    Aktualisierte zulässige Komponenten

    HINWEIS

    Nur AEM 6.5 und AEM 6.4.5 unterstützen die Funktion "Bearbeitbare Vorlage"des SPA-Editors. Bei Verwendung von AEM 6.4 müssen Sie die Richtlinie für zulässige Komponenten manuell über die CRXDE Lite konfigurieren: /conf/we-retail-journal/react/settings/wcm/policies/wcm/foundation/components/responsivegrid/default oder /conf/we-retail-journal/angular/settings/wcm/policies/wcm/foundation/components/responsivegrid/default

    CRXDE Lite mit den aktualisierten Richtlinienkonfigurationen für Zulässige Komponenten im Layout-Container:

    CRXDE Lite mit den aktualisierten Richtlinienkonfigurationen für zulässige Komponenten im Layout-Container

Alles zusammenbringen

  1. Navigieren Sie zu den Angular- oder React-Seiten:

  2. Suchen Sie die Komponente Hello World und ziehen Sie die Komponente Hello World auf die Seite.

    Hallo Welt ziehen und ablegen

    Der Platzhalter sollte angezeigt werden.

    Hallo, Platzhalter

  3. Wählen Sie die Komponente aus und fügen Sie eine Meldung im Dialogfeld hinzu, z. B. "Welt"oder "Ihr Name". Speichern Sie die Änderungen.

    gerenderte Komponente

    Beachten Sie, dass der Nachricht immer die Zeichenfolge "Hello "vorangestellt wird. Dies ist das Ergebnis der Logik in HelloWorld.java Sling Model.

Nächste Schritte

Abgeschlossene Lösung für die Komponente "HelloWorld"

Fehlerbehebung

Projekt kann nicht in Eclipse erstellt werden

Fehler: Fehler beim Import des We.Retail Journal Projekts in Eclipse bei nicht erkannten Zielausführungen:

Execution npm install, Execution npm run build, Execution default-analyze-classes*

Eclipse-Fehlerassistent

Auflösung: Klicken Sie auf Beenden , um diese später zu beheben. Dies sollte den Abschluss des Tutorials nicht verhindern.

Fehler: Das React-Modul react-appwird während eines Maven-Builds nicht erfolgreich erstellt.

Lösung: Versuchen Sie, den node_modules Ordner unter der React-App zu löschen. Führen Sie den Apache Maven-Befehl mvn clean install -PautoInstallSinglePackage im Stammverzeichnis des Projekts erneut aus.

Nicht zufrieden stellende Abhängigkeiten in AEM

Fehler bei Package Manager-Abhängigkeit

Wenn eine AEM Abhängigkeit nicht erfüllt ist, entweder im AEM Package Manager oder in der AEM Web Console (Felix Console), deutet dies darauf hin, dass SPA Editor-Funktion nicht verfügbar ist.

Komponente wird nicht angezeigt

Fehler: Selbst nach einer erfolgreichen Bereitstellung und der Überprüfung, ob die kompilierten Versionen von React-/Angular-Apps über die aktualisierte helloworld Komponente verfügen, wird meine Komponente nicht angezeigt, wenn ich sie auf die Seite ziehe. Ich kann die Komponente in der AEM Benutzeroberfläche sehen.

Auflösung: Löschen Sie den Verlauf/Cache Ihres Browsers und/oder öffnen Sie einen neuen Browser oder verwenden Sie den Inkognito-Modus. Wenn dies nicht funktioniert, machen Sie den Client-Bibliotheks-Cache auf der lokalen AEM ungültig. AEM versucht, große Client-Bibliotheken zwischenzuspeichern, um effizient zu sein. Manchmal ist eine manuelle Invalidierung des Caches erforderlich, um Probleme zu beheben, bei denen veralteter Code zwischengespeichert wird.

Navigieren Sie zu: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html und klicken Sie auf "Cache invalidieren". Kehren Sie zu Ihrer React-/Angular-Seite zurück und aktualisieren Sie die Seite.

Client-Bibliothek neu erstellen

Auf dieser Seite