Implementazione di un Componente React per applicazioni a pagina singola (SPA)

Le applicazioni a pagina singola (SPA) possono offrire esperienze coinvolgenti agli utenti di siti web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando framework SPA e gli autori desiderano modificare facilmente i contenuti all’interno dell’AEM per un sito creato utilizzando framework SPA.

La funzione di authoring dell’SPA offre una soluzione completa per il supporto dell’SPA nell’ambito dell’AEM. Questo articolo presenta un esempio di come adattare un componente React semplice ed esistente per lavorare con l’Editor SPA dell’AEM.

Introduzione

Grazie al contratto semplice e leggero richiesto dall'AEM e stabilito tra l'SPA e l'Editor SPA, è facile prendere un'applicazione JavaScript esistente e adattarla per l'utilizzo con un SPA in AEM.

Questo articolo illustra l’esempio della componente meteo sull’SPA di esempio del Diario We.Retail.

Dovresti conoscere il Struttura di una domanda di AEM presentata dall'SPA prima di leggere questo articolo.

Componente meteo

Il componente meteo si trova in alto a sinistra nell’app We.Retail Journal. Visualizza il meteo corrente di una posizione definita, estraendo i dati meteo in modo dinamico.

Utilizzo del widget meteo

Quando si crea un contenuto dell’SPA nell’Editor SPA, la componente meteo viene visualizzata come qualsiasi altro componente AEM, completa di una barra degli strumenti, ed è modificabile.

La città può essere aggiornata in una finestra di dialogo come qualsiasi altra componente dell’AEM.

La modifica viene mantenuta e il componente si aggiorna automaticamente con i nuovi dati meteo.

Implementazione componente meteo

La componente meteo è in realtà basata su una componente React disponibile al pubblico, denominata Tempo React Open, che è stato adattato per funzionare come componente nell’applicazione SPA di esempio del journal We.Retail.

Di seguito sono riportati alcuni snippet della documentazione NPM relativa all’utilizzo del componente React Open Weather.

Revisione del codice della componente meteo personalizzata ( Weather.js) nell'applicazione del diario We.Retail:

• Riga 16: il widget meteo React Open viene caricato come richiesto.

• Riga 46: Il MapTo questa funzione di React collega questo componente a un componente AEM corrispondente in modo che possa essere modificato nell’Editor SPA.

• Righe 22-29: Il EditConfig è definito, verificando se la città è stata compilata e definendo il valore se vuoto.

• Righe 31-44: la componente Meteo estende il Component e fornisce i dati richiesti come definito nella documentazione di utilizzo NPM per il componente React Open Weather ed esegue il rendering del componente.

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ 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/aem-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);

Anche se un componente back-end deve già esistere, lo sviluppatore front-end può sfruttare il componente React Open Weather nell’SPA di We.Retail Journal con pochissima codifica.

Passaggio successivo

Per maggiori informazioni sullo sviluppo dell’SPA per l’AEM vedi l’articolo Sviluppo dell'SPA per l'AEM.

Risorse Business.Adobe.com