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 poter creare siti utilizzando framework SPA e gli autori desiderano modificare i contenuti all’interno di AEM per un sito creato utilizzando framework SPA.

La funzione di authoring SPA offre una soluzione completa per supportare SPA all’interno di AEM. Questo articolo presenta un esempio di come adattare un semplice componente React esistente per lavorare con l’editor di SPA di AEM.

NOTA

L’editor di SPA è la soluzione consigliata per i progetti che richiedono SPA rendering lato client basato su framework (ad esempio, React o Angular).

Introduzione

Grazie al contratto semplice e leggero richiesto da AEM e stabilito tra il SPA e l'editor SPA, prendere un'applicazione Javascript esistente e adattarla per l'uso con un SPA in AEM è una questione semplice.

Questo articolo illustra l’esempio del componente meteo nel SPA di esempio di We.Retail Journal.

Devi acquisire familiarità con le struttura di una domanda SPA di AEM prima di leggere questo articolo.

ATTENZIONE

Questo documento utilizza App Journal We.Retail solo a scopo dimostrativo. Non deve essere utilizzato per alcun lavoro di progetto.

Qualsiasi progetto AEM deve sfruttare Archetipo di progetto AEM, che supporta progetti SPA utilizzando React o Angular e sfrutta l’SDK di SPA.

Componente meteo

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

Utilizzo del Widget meteo

screen_shot_2018-06-08at143224

Quando si creano contenuti del SPA nell’Editor SPA, il componente meteo viene visualizzato come qualsiasi altro componente AEM, completo di una barra degli strumenti, ed è modificabile.

screen_shot_2018-06-08at143304

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

screen_shot_2018-06-08at143446

Il cambiamento viene mantenuto e il componente si aggiorna automaticamente con i nuovi dati meteo.

screen_shot_2018-06-08at143524

Implementazione del componente meteo

La componente Tempo è in realtà basata su una componente React disponibile al pubblico, chiamata React Open Weather, che è stato adattato per funzionare come componente all’interno dell’applicazione di esempio SPA Journal We.Retail.

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

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

Revisione del codice del componente meteo personalizzato ( Weather.js) nell'applicazione We.Retail Journal:

  • Linea 16: Il widget React Open Weather viene caricato come necessario.

  • Linea 46: La MapTo La funzione relaziona questo componente React a un componente AEM corrispondente in modo che possa essere modificato nell'editor di SPA.

  • Linee 22-29: La EditConfig è definito, controllando se la città è stata compilata e definendo il valore se vuoto.

  • Linee 31-44: Il componente Tempo estende la Component e fornisce i dati richiesti come definito nella documentazione sull'utilizzo di 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 nel SPA We.Retail Journal con una codifica molto ridotta.

Passaggio successivo

Per ulteriori informazioni sullo sviluppo di SPA per AEM vedi l'articolo Sviluppo di SPA per AEM.

In questa pagina