Die korrigierte Komponente bietet eine gewisse Flexibilität beim Authoring SPA Inhalts. Dieser Ansatz ist jedoch starr und erfordert, dass Entwickler die genaue Zusammensetzung des bearbeitbaren Inhalts definieren. Um die Erstellung außergewöhnlicher Erlebnisse durch Autoren zu unterstützen, unterstützt SPA Editor die Verwendung von Container-Komponenten in der SPA. Container-Komponenten ermöglichen es Autoren, zulässige Komponenten per Drag & Drop in den Container zu ziehen und sie wie beim herkömmlichen AEM Sites-Authoring zu erstellen!
In diesem Kapitel fügen wir der Startansicht einen bearbeitbaren Container hinzu, der es Autoren ermöglicht, Rich-Content-Erlebnisse mit AEM React-Kernkomponenten direkt in der SPA zu erstellen und anzuordnen.
Hinzufügen einer Container-Komponente zur Startansicht:
Um einen bearbeitbaren Bereich in der Startansicht zu platzieren, müssen wir:
@adobe/aem-react-editable-components
withMappable
, damit Entwickler sie in der SPA platzieren können.MapTo
, damit sie in anderen Container-Komponenten wiederverwendet werden kann, sodass Container effektiv verschachtelt werden.Gehen Sie hierfür wie folgt vor:
Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/aem/AEMResponsiveGrid.js
Fügen Sie AEMResponsiveGrid.js
den folgenden Code hinzu:
// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
// Import the base ResponsiveGrid component
import { ResponsiveGrid } from "@adobe/aem-react-editable-components";
// The sling:resourceType for which this Core Component is registered with in AEM
const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";
// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
emptyLabel: "Layout Container", // The component placeholder in AEM SPA Editor
isEmpty: function(props) {
return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
}, // The function to determine if this component has been authored
resourceType: RESOURCE_TYPE // The sling:resourceType this SPA component is mapped to
};
// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);
// withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);
export default AEMResponsiveGrid;
Der Code ähnelt AEMTitle.js
, dass die Titelkomponente der AEM-Kernkomponenten importiert hat.
Die Datei AEMResponsiveGrid.js
sollte wie folgt aussehen:
Nachdem AEM Komponente ResponsiveGrid in registriert ist und für die Verwendung in der SPA verfügbar ist, können wir sie in der Startansicht platzieren.
react-app/src/App.js
öffnen und bearbeiten
Importieren Sie die Komponente AEMResponsiveGrid
und platzieren Sie sie über der Komponente <AEMTitle ...>
.
Legen Sie die folgenden Attribute für die Komponente <AEMResponsiveGrid...>
fest
pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Dadurch wird diese AEMResponsiveGrid
-Komponente angewiesen, ihren Inhalt aus der AEM Ressource abzurufen:
/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
Der itemPath
wird dem Knoten responsivegrid
zugeordnet, der in der Remote SPA Page
-AEM-Vorlage definiert ist, und wird automatisch auf neuen AEM Seiten erstellt, die aus der Remote SPA Page
-AEM-Vorlage erstellt wurden.
Aktualisieren Sie App.js
, um die Komponente <AEMResponsiveGrid...>
hinzuzufügen.
...
import AEMResponsiveGrid from './components/aem/AEMResponsiveGrid';
...
function Home() {
return (
<div className="Home">
<AEMResponsiveGrid
pagePath='/content/wknd-app/us/en/home'
itemPath='root/responsivegrid'/>
<AEMTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='title'/>
<Adventures />
</div>
);
}
Die Datei Apps.js
sollte wie folgt aussehen:
Um die volle Wirkung der flexiblen Authoring-Erlebnis-Container im SPA Editor zu erzielen. Wir haben bereits eine bearbeitbare Titelkomponente erstellt, aber lassen Sie uns noch ein paar weitere Aspekte anstellen, die es Autoren ermöglichen, Text und Bild AEM WCM-Kernkomponenten in der neu hinzugefügten Container-Komponente zu verwenden.
Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/aem/AEMText.js
Fügen Sie AEMText.js
den folgenden Code hinzu:
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
const RESOURCE_TYPE = "wknd-app/components/text";
const EditConfig = {
emptyLabel: "Text",
isEmpty: TextV2IsEmptyFn,
resourceType: RESOURCE_TYPE
};
MapTo(RESOURCE_TYPE)(TextV2, EditConfig);
const AEMText = withMappable(TextV2, EditConfig);
export default AEMText;
Die Datei AEMText.js
sollte wie folgt aussehen:
Öffnen Sie das SPA in Ihrer IDE.
Erstellen einer React-Komponente unter src/components/aem/AEMImage.js
Fügen Sie AEMImage.js
den folgenden Code hinzu:
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: ImageV2IsEmptyFn,
resourceType: RESOURCE_TYPE
};
MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);
const AEMImage = withMappable(ImageV2, EditConfig);
export default AEMImage;
Erstellen Sie eine SCSS-Datei src/components/aem/AEMImage.scss
, die benutzerdefinierte Stile für AEMImage.scss
bereitstellt. Diese Stile zielen auf die CSS-Klassen der AEM React-Kernkomponente mit BEM-Notation ab.
Fügen Sie die folgende SCSS zu AEMImage.scss
hinzu.
.cmp-image__image {
margin: 1rem 0;
width: 100%;
border: 0;
}
Importieren Sie AEMImage.scss
in AEMImage.js
...
import './AEMImage.scss';
...
Die AEMImage.js
und AEMImage.scss
sollten wie folgt aussehen:
Die neu erstellten SPA AEMText
und AEMImage
werden im SPA referenziert und basierend auf der von AEM zurückgegebenen JSON dynamisch instanziiert. Um sicherzustellen, dass diese Komponenten für die SPA verfügbar sind, erstellen Sie Importanweisungen für sie in App.js
Öffnen Sie das SPA in Ihrer IDE.
Öffnen Sie die Datei src/App.js
Fügen Sie Importanweisungen für AEMText
und AEMImage
hinzu.
...
import AEMText from './components/aem/AEMText';
import AEMImage from './components/aem/AEMImage';
...
Das Ergebnis sollte wie folgt aussehen:
Wenn diese Importe nicht hinzugefügt werden, werden der AEMText
- und der AEMImage
-Code von SPA nicht aufgerufen und daher werden die Komponenten nicht für die bereitgestellten Ressourcentypen registriert.
AEM Container-Komponenten verwenden Richtlinien, um ihre zulässigen Komponenten anzugeben. Dies ist eine kritische Konfiguration bei der Verwendung des SPA-Editors, da nur AEM WCM-Kernkomponenten, die SPA Komponenten-Entsprechungen zugeordnet haben, vom SPA gerenderbar sind. Stellen Sie sicher, dass nur die Komponenten zulässig sind, für die wir SPA Implementierungen bereitgestellt haben:
AEMTitle
zugeordnet zu wknd-app/components/title
AEMText
zugeordnet zu wknd-app/components/text
AEMImage
zugeordnet zu wknd-app/components/image
So konfigurieren Sie den Reponsivegrid-Container der Vorlage Remote-SPA:
Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Tools > Allgemein > Vorlagen > WKND-App
Bearbeiten Sie SPA Seite des Berichts
Wählen Sie Struktur im Modusschalter oben rechts aus.
Tippen Sie, um den Layout-Container auszuwählen.
Tippen Sie in der Popup-Leiste auf das Symbol Richtlinie .
Erweitern Sie rechts auf der Registerkarte Zulässige Komponenten WKND APP - CONTENT
Stellen Sie sicher, dass nur Folgendes ausgewählt ist:
Tippen Sie auf Fertig
Nachdem die SPA aktualisiert wurde, um die <AEMResponsiveGrid...>
, Wrapper für drei AEM React-Kernkomponenten (AEMTitle
, AEMText
und AEMImage
) einzubetten, und AEM mit einer übereinstimmenden Vorlagenrichtlinie aktualisiert wurde, können wir mit der Inhaltserstellung in der Container-Komponente beginnen.
Bei der AEM-Autoreninstanz anmelden
Navigieren Sie zu Sites > WKND App
Tippen Sie auf Home und wählen Sie Edit aus der oberen Aktionsleiste
Wählen Sie in der Modusauswahl oben rechts im Seiteneditor Bearbeiten aus.
Suchen Sie den bearbeitbaren Bereich Layout-Container unter dem Titel .
Öffnen Sie die Seitenleiste Seiten-Editor und wählen Sie die Ansicht Komponenten aus.
Ziehen Sie die folgenden Komponenten in den Layout-Container
Ziehen Sie die Komponenten in die folgende Reihenfolge, um sie neu anzuordnen:
____ Erstellen der ____ Titellecomponent
____ Authoring der ____ ImageComponent
____ Authoring der ____ Textkomponente
Ihre Komponenten werden jetzt erstellt, aber vertikal stapelt.
Verwenden Sie AEM Layout-Modus , um die Größe und das Layout der Komponenten anzupassen.
Wechseln Sie mithilfe der Modusauswahl oben rechts in den Modus Layout-Modus.
____ Ändern der Größe der Bild- und Textkomponenten, sodass sie nebeneinander angeordnet sind
____ Vorschau der Änderungen im AEM Seiteneditor
Aktualisieren Sie die WKND-App, die lokal auf http://localhost:3000 ausgeführt wird, um die erstellten Änderungen zu sehen!
Sie haben eine Container-Komponente hinzugefügt, mit der Autoren bearbeitbare Komponenten zur WKND-App hinzufügen können! Sie wissen jetzt, wie:
Im nächsten Schritt wird dieselbe Technik verwendet, um eine bearbeitbare Komponente zu einer Abenteuer-Details-Route in der SPA hinzuzufügen.