Show Menu
THEMEN×

Implementieren einer React-Komponente für SPA

Single Page Applications (SPAs) können ansprechende Erlebnisse für Website-Benutzer bieten. Entwickler möchten in der Lage sein, Websites mithilfe von SPA-Frameworks zu erstellen, und Autoren möchten Inhalte innerhalb von AEM für eine Website, die mit SPA-Frameworks erstellt wurde, nahtlos bearbeiten.
Die SPA-Erstellungsfunktion bietet eine umfassende Lösung zur Unterstützung von SPAs in AEM. Dieser Artikel enthält ein Beispiel dafür, wie eine einfache, vorhandene React-Komponente an den AEM SPA Editor angepasst werden kann.
Der SPA-Editor ist die empfohlene Lösung für Projekte, bei denen clientseitiges Rendering (z.B. React oder Angular) durch das SPA-Framework erforderlich ist.

Einführung

Dank des einfachen und leichten Vertrags, der von AEM benötigt wird und zwischen SPA und SPA Editor eingerichtet wurde, ist es einfach, eine vorhandene JavaScript-Anwendung zu verwenden und sie für die Verwendung mit einer SPA in AEM anzupassen.
In diesem Artikel wird das Beispiel der Wetterkomponente im Beispiel für das Web.Retail-Protokoll-SPA veranschaulicht.
Bevor Sie diesen Artikel lesen, sollten Sie mit der Struktur einer SPA-Anwendung für AEM vertraut sein.
Dieses Dokument verwendet die We.Retail-Protokoll-App nur zu Demonstrationszwecken. Es sollte nicht für Projektarbeiten verwendet werden.
Jedes AEM-Projekt sollte den AEM-Projektarchiv nutzen, der SPA-Projekte mit React oder Angular unterstützt und das SPA-SDK nutzt.

Die Wetterkomponente

Die Wetterkomponente befindet sich oben links in der Web.Retail-Protokoll-App. Es zeigt das aktuelle Wetter einer bestimmten Position an, wobei Wetterdaten dynamisch abgerufen werden.

Verwenden des Wetter-Widgets

Beim Authoring von Inhalten der SPA im SPA-Editor wird die Wetterkomponente wie jede andere AEM-Komponente zusammen mit einer Symbolleiste angezeigt und kann bearbeitet werden.
Die Stadt kann wie jede andere AEM-Komponente in einem Dialog aktualisiert werden.
Die Änderung wird beibehalten und die Komponente wird automatisch mit neuen Wetterdaten aktualisiert.

Implementierung der Wetterkomponente

Die Wetterkomponente basiert auf einer öffentlich zugänglichen React-Komponente, der so genannten React Open Weather , die als Komponente innerhalb der Web.Retail-Protokoll-Musterapplikation angepasst wurde.
Im Folgenden finden Sie Ausschnitte aus der NPM-Dokumentation zur Verwendung der Komponente "React Open Weather".
Überprüfen des Codes der angepassten Wetterkomponente ( Weather.js ) im Protokoll We.Retail:
  • Linie 16 : Das Widget "Offenes Wetter react"wird nach Bedarf geladen.
  • Linie 46 : Die MapTo Funktion verknüpft diese React-Komponente mit einer entsprechenden AEM-Komponente, damit sie im SPA-Editor bearbeitet werden kann.
  • Zeilen 22-29 : Der Wert EditConfig wird definiert, wobei geprüft wird, ob der Ort gefüllt wurde, und der Wert definiert wird, wenn er leer ist.
  • Zeilen 31-44 : Die Komponente "Wetter"erweitert die Component Klasse und stellt die erforderlichen Daten bereit, wie in der NPM-Nutzungsdokumentation für die Komponente "React Open Weather"definiert, und rendert die Komponente.
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/cq-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

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

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

Obwohl eine Back-End-Komponente bereits vorhanden sein muss, kann der Front-End-Entwickler die React Open Weather-Komponente im Web.Retail-Protokoll-SPA mit sehr wenig Kodierung nutzen.

Nächster Schritt

Weitere Informationen zur Entwicklung von SPAs für AEM finden Sie im Artikel Entwickeln von SPAs für AEM .