Dieses Tutorial 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.
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).
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:
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:
Ü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
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.
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.
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 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.
Download der neuesten We.Retail Journal-Code von GitHub.
Oder klonen Sie das Repository über die Befehlszeile:
$ git clone git@github.com:adobe/aem-sample-we-retail-journal.git
Das Tutorial funktioniert mit dem Übergeordnet Zweig mit 1.2.1-SNAPSHOT -Version des Projekts.
Die folgende Struktur sollte sichtbar sein:
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: Kommas und Core, die Sling Models und anderen Java-Code.ui.apps
: enthält die /apps-Teile des Projekts, d. h. JS- und CSS-Clientlibs, Komponenten, Runmode-spezifische Konfigurationen.ui.content
: enthält strukturellen Inhalt 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 und ein Webpack-Projekt.Öffnen Sie ein neues Terminal-Fenster und führen Sie den folgenden Befehl aus, um die gesamte App zu erstellen und in einer lokalen AEM-Instanz bereitzustellen, die auf ausgeführt wird. http://localhost:4502.
$ cd <src>/aem-sample-we-retail-journal
$ mvn -PautoInstallSinglePackage clean install
In diesem Projekt ist das Maven-Profil zum Erstellen und Verpacken des gesamten Projekts autoInstallSinglePackage
Gehen Sie zu:
Die We.Retail Journal-App sollte im AEM Sites-Editor angezeigt werden.
In Bearbeiten -Modus wählen Sie eine Komponente aus, die Sie bearbeiten möchten, und aktualisieren Sie den Inhalt.
Wählen Sie die Seiteneigenschaften Symbol zum Öffnen Seiteneigenschaften. Auswählen Vorlage bearbeiten , um die Vorlage der Seite zu öffnen.
In der neuesten Version des SPA-Editors Bearbeitbare Vorlagen kann auf dieselbe Weise wie bei herkömmlichen Sites-Implementierungen verwendet werden. Diese wird später mit unserer benutzerdefinierten Komponente erneut besucht.
Nur AEM 6.5 und AEM 6.4 + Service Pack 5 unterstützt bearbeitbare Vorlagen.
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).
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.
Verwenden Eclipseoder anderen IDE, importieren Sie das Projekt "We.Retail Journal Maven".
Aktualisieren des Reaktors pom.xml , um Apache Rat Plug-in. 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.
In aem-sample-we-retail-journal/pom.xml remove 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>
Im we-retail-journal-content (<src>/aem-sample-we-retail-journal/ui.apps
) erstellen Sie einen neuen Knoten unter ui.apps/jcr_root/apps/we-retail-journal/components
benannt helloworld des Typs cq:Component.
Fügen Sie die folgenden Eigenschaften zum helloworld -Komponente, dargestellt in XML (/helloworld/.content.xml
) unten:
<?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" />
Zur Veranschaulichung der Funktion "Bearbeitbare Vorlagen"haben wir die Variable componentGroup="Custom Components"
. In einem realen Projekt ist es am besten, die Anzahl der Komponentengruppen zu minimieren, sodass eine bessere Gruppe “We.Retail Journal”, um mit den anderen Inhaltskomponenten abzugleichen.
Nur AEM 6.5 und AEM 6.4 + Service Pack 5 unterstützt bearbeitbare Vorlagen.
Als Nächstes wird ein Dialogfeld erstellt, in dem eine benutzerdefinierte Nachricht für die Hello World -Komponente. darunter /apps/we-retail-journal/components/helloworld
Knotennamen hinzufügen cq:dialog von nt:unstructured.
Die cq:dialog zeigt ein einzelnes Textfeld an, das Text in einer Eigenschaft mit dem Namen message. Unter dem neu erstellten cq:dialog Fügen Sie die folgenden Knoten und Eigenschaften hinzu, die in XML unten dargestellt sind (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>
Die obige XML-Knotendefinition erstellt ein Dialogfeld mit einem einzelnen Textfeld, in das ein Benutzer eine "Meldung"eingeben kann. Notieren Sie die Eigenschaft . name="./message"
innerhalb der <message />
Knoten. Dies ist der Name der Eigenschaft, die in AEM im JCR gespeichert wird.
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.
darunter /apps/we-retail-journal/components/helloworld
Knotennamen hinzufügen cq:design_dialog
von nt:unstructured
.
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" />
Stellen Sie die Codebasis in der Befehlszeile AEM bereit:
$ cd <src>/aem-sample-we-retail-journal/content
$ mvn -PautoInstallPackage clean install
In CRXDE Lite überprüfen, ob die Komponente bereitgestellt wurde, indem der Ordner unter /apps/we-retail-journal/components:
Persona: AEM Entwickler
Weiter mit Sling Model wird erstellt, um die Hello World -Komponente. In einem herkömmlichen WCM-Anwendungsfall sollte die Sling Model implementiert eine Geschäftslogik, und ein serverseitiges Rendering-Skript (HTL) führt einen Aufruf an die Sling Model. 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 SPA Anwendungsfall, Sling Models stellt seine Methoden als serialisierte JSON bereit.
Als Best Practice sollten Entwickler AEM Kernkomponenten nach Möglichkeit. Neben anderen Funktionen bieten Kernkomponenten Sling Models mit JSON-Ausgabe, die "SPA-bereit"ist, sodass sich Entwickler mehr auf die Front-End-Präsentation konzentrieren können.
Öffnen Sie im Editor Ihrer Wahl die we-retail-journal-commons Projekt ( <src>/aem-sample-we-retail-journal/bundles/commons
).
Im Paket com.adobe.cq.sample.spa.commons.impl.models
:
HelloWorld
.com.adobe.cq.export.json.ComponentExporter.
Die ComponentExporter
muss implementiert werden, damit die Sling Model , um mit AEM Content Services kompatibel zu sein.
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;
}
}
Hinzufügen einer statischen Variablen mit dem Namen RESOURCE_TYPE
zur Identifizierung der HelloWorld Ressourcentyp der Komponente:
...
public class HelloWorld implements ComponentExporter {
static final String RESOURCE_TYPE = "we-retail-journal/components/helloworld";
...
}
Hinzufügen der OSGi-Anmerkungen für @Model
und @Exporter
. Die @Model
-Anmerkung registriert die Klasse als Sling Model. Die @Exporter
-Anmerkung zeigt die Methoden als serialisiertes JSON mit der Jackson Exporter Framework.
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 {
...
Implementieren der -Methode getDisplayMessage()
, um die JCR-Eigenschaft zurückzugeben message
. Verwenden Sie die Sling Model Anmerkung von @ValueMapValue
um das Abrufen der Eigenschaft zu vereinfachen message
unter der Komponente gespeichert. Die @Optional
-Anmerkung ist wichtig, da sie beim ersten Hinzufügen der Komponente zur Seite message
nicht aufgefüllt werden.
Als Teil der Geschäftslogik bezeichnet eine Zeichenfolge Folgendes: "Hallo", wird der Nachricht 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;
}
...
Der Name der Methode getDisplayMessage
ist wichtig. Wenn die Sling Model mit der Jackson Exporter wird sie als JSON-Eigenschaft bereitgestellt: displayMessage
. Die Jackson Exporter serialisiert und stellt alle getter
-Methoden verwenden, die keinen -Parameter annehmen (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 auch 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.
Implementieren der -Methode getExportedType()
, um den Ressourcentyp der HelloWorld
-Komponente.
@Override
public String getExportedType() {
return RESOURCE_TYPE;
}
Der vollständige Code für HelloWorld.java finden Sie hier .
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 der Bereitstellung und Registrierung des Sling Model durch Navigation zu Status > Sling-Modelle in der OSGi-Konsole.
Sie sollten sehen, dass die Variable HelloWorld
Das Sling-Modell ist an die we-retail-journal/components/helloworld
Sling-Ressourcentyp und dass er als Sling Model Exporter Servlet:
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'
Persona: Frontend-Entwickler
Als Nächstes wird die React-Komponente erstellt. Öffnen Sie die response-app module ( <src>/aem-sample-we-retail-journal/react-app
) unter Verwendung des Editors Ihrer Wahl.
Sie können diesen Abschnitt überspringen, wenn Sie nur an Angular-Entwicklung.
Innerhalb des react-app
Ordner navigieren Sie zum Ordner src . Erweitern Sie den Komponentenordner, um die vorhandenen React-Komponentendateien anzuzeigen.
Fügen Sie eine neue Datei unter dem Komponentenordner hinzu mit dem Namen HelloWorld.js
.
Öffnen Sie HelloWorld.js
. Fügen Sie eine Importanweisung hinzu, um die React-Komponentenbibliothek zu importieren. Fügen Sie eine zweite Importanweisung hinzu, um die MapTo
Helper, bereitgestellt von der Adobe. Die MapTo
Helper 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';
Unter den Importen wird eine neue Klasse mit dem Namen HelloWorld
, die React erweitert Component
-Schnittstelle. Fügen Sie die erforderlichen hinzu render()
-Methode HelloWorld
-Klasse.
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
class HelloWorld extends Component {
render() {
}
}
Die MapTo
Helper enthält automatisch ein Objekt namens cqModel
als Teil der Eigenschaften der React-Komponente. Die cqModel
enthält alle Eigenschaften, die von der Sling Model.
Speichern Sie die Sling Model früher erstellt wurde, enthält eine Methode getDisplayMessage()
. getDisplayMessage()
wird als JSON-Schlüssel mit dem Namen displayMessage
wenn Ausgabe.
Implementieren des render()
-Methode zur Ausgabe einer h1
-Tag, das den Wert von displayMessage
. 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;
}
}
Implementieren Sie eine Konfigurationsmethode zum Bearbeiten. Diese Methode wird über die MapTo
unterstützt 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 dem HelloWorld
-Klasse:
...
class HelloWorld extends Component {
...
}
const HelloWorldEditConfig = {
emptyLabel: 'Hello World',
isEmpty: function(props) {
return !props || !props.displayMessage || props.displayMessage.trim().length < 1;
}
};
...
Rufen Sie am Ende der Datei die MapTo
Helper, Übergeben der HelloWorld
und 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);
Der fertige Code für HelloWorld.js finden Sie hier .
Ö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:
...
require('./components/Text');
require('./components/Image');
require('./components/HelloWorld');
...
Im components
Ordner erstellen Sie eine neue Datei mit dem Namen HelloWorld.css
als Geschwister HelloWorld.js.
Füllen Sie die Datei mit folgendem Inhalt, um einige grundlegende Stile für die HelloWorld
component:
/* HelloWorld.css to style HelloWorld component */
.cmp-helloworld_message {
text-align: center;
color: #ff505e;
text-transform: unset;
letter-spacing: unset;
}
Erneutes Öffnen HelloWorld.js
und aktualisieren Sie unterhalb der Importanweisungen, um HelloWorld.css
:
import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
require('./HelloWorld.css');
...
Stellen Sie den Code AEM mithilfe von Apache Maven bereit:
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
In CRXDE-Lite open /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.
app.js ist die gebündelte React-App. Der Code ist nicht mehr für Menschen lesbar. Die npm run build
-Befehl hat einen optimierten Build ausgelöst, der kompiliertes JavaScript ausgibt, das von modernen Browsern interpretiert werden kann.
Persona: Frontend-Entwickler
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 die angular-app module (<src>/aem-sample-we-retail-journal/angular-app
) unter Verwendung des Editors Ihrer Wahl.
Innerhalb des angular-app
Ordner navigieren zu seiner src
Ordner. Erweitern Sie den Komponentenordner, um die vorhandenen Angular-Komponentendateien anzuzeigen.
Fügen Sie einen neuen Ordner unter dem Komponentenordner hinzu mit dem Namen helloworld
. Unter dem helloworld
Ordner fügen neue Dateien hinzu namens helloworld.component.css, helloworld.component.html, helloworld.component.ts
.
/angular-app
/src
/app
/components
+ /helloworld
+ helloworld.component.css
+ helloworld.component.html
+ helloworld.component.ts
Öffnen Sie helloworld.component.ts
. Fügen Sie eine Importanweisung hinzu, um die Angular zu importieren. Component
und Input
Klassen. Erstellen Sie eine neue Komponente, die auf die styleUrls
und templateUrl
nach helloworld.component.css
und helloworld.component.html
. Schließlich die Klasse exportieren HelloWorldComponent
mit dem erwarteten Input 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;
}
Wenn Sie sich an die Sling Model zuvor erstellt wurde, gab es eine Methode getDisplayMessage(). Die serialisierte JSON-Datei dieser Methode lautet displayMessage, die wir jetzt in der Angular-App lesen.
Öffnen helloworld.component.html
, um h1
-Tag, das die displayMessage
Eigenschaft:
<h1 *ngIf="displayMessage" class="cmp-helloworld_message">
{{displayMessage}}
</h1>
Aktualisieren 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;
}
Aktualisieren helloworld.component.spec.ts
mit dem folgenden Prüfstand:
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();
});
});
Nächstes Update src/components/mapping.ts
, um HelloWorldComponent
. Hinzufügen einer HelloWorldEditConfig
markiert den Platzhalter im AEM-Editor, bevor die Komponente konfiguriert wurde. Fügen Sie schließlich eine Zeile hinzu, um die AEM Komponente der Angular-Komponente mit der MapTo
Helper.
// 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);
Der vollständige Code für mapping.ts finden Sie hier .
Aktualisieren src/app.module.ts
, um die NgModule. Fügen Sie die HelloWorldComponent
as a Erklärung , der zu AppModule. Fügen Sie außerdem HelloWorldComponent
als entryComponent sodass sie kompiliert und dynamisch in die App integriert 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]
})
Der fertige Code für app.module.ts finden Sie hier .
Stellen Sie den Code mithilfe von Maven für AEM bereit:
$ cd <src>/sample-we-retail-spa-content
$ mvn -PautoInstallSinglePackage clean install
In CRXDE-Lite open /apps/we-retail-journal/angular/clientlibs/we-retail-journal-angular/js/main.js
. Schnellsuche nach HelloWorld in main.js
, um zu überprüfen, ob die Angular-Komponente eingeschlossen wurde.
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.
Navigieren Sie zur bearbeitbaren Vorlage für die React- und/oder Angular-Versionen:
Wählen Sie den Hauptteil aus Layout-Container und wählen Sie die Politik Symbol, um die Richtlinie zu öffnen:
under Eigenschaften > Zugelassene Komponenten, führen Sie eine Suche nach Custom Components. Sie sollten die Hello World -Komponente auswählen. Speichern Sie Ihre Änderungen, indem Sie auf das Kontrollkästchen oben rechts klicken.
Nach dem Speichern sollte die HelloWorld -Komponente als zulässige Komponente in Layout-Container.
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 Zugelassene Komponenten im Layout-Container:
Navigieren Sie zu den Angular- oder React-Seiten:
Suchen Sie die Hello World Komponente hinzufügen und per Drag-and-Drop Hello World -Komponente auf der Seite.
Der Platzhalter sollte angezeigt werden.
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.
Beachten Sie, dass der Nachricht immer die Zeichenfolge "Hello "vorangestellt wird. Dies ist das Ergebnis der Logik in der HelloWorld.java
Sling Model.
Abgeschlossene Lösung für die Komponente "HelloWorld"
Fehler: Fehler beim Import der We.Retail Journal Projekt in Eclipse für nicht erkannte Zielausführungen:
Execution npm install, Execution npm run build, Execution default-analyze-classes*
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-app
, wird während eines Maven-Builds nicht erfolgreich erstellt.
Auflösung: Löschen Sie die node_modules
Ordner unter response-app. Führen Sie den Befehl "Apache Maven"erneut aus mvn clean install -PautoInstallSinglePackage
aus dem Stammverzeichnis des Projekts.
Wenn eine AEM Abhängigkeit nicht erfüllt ist, wird in der AEM Package Manager oder in AEM Web-Konsole (Felix-Konsole), deutet dies darauf hin, dass SPA Editor-Funktion nicht verfügbar ist.
Fehler: Selbst nach erfolgreicher Bereitstellung und Überprüfung, ob die kompilierten Versionen von React/Angular-Apps die aktualisierten helloworld
Komponente Meine Komponente wird 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.