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.

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.

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

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.

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

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

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.

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.

Risorse Business.Adobe.com

Auto Text Summarization Auto Form Fill Customer Communications Embedded Charts Mobile Forms Content Management System