Implementazione di un Componente React per applicazioni a pagina singola (SPA)
- Si applica a:
- Experience Manager 6.5
Creato per:
- Sviluppatore
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 di Adobe Experience Manager (AEM) per un sito creato utilizzando framework SPA.
La funzione di authoring di applicazioni a pagina singola offre una soluzione completa per il supporto di applicazioni a pagina singola in AEM. Questo articolo presenta un esempio di come adattare un componente React semplice ed esistente per funzionare con l’editor SPA di AEM.
- Editor universale per la modifica visiva di contenuti headless.
- Editor frammenti di contenuto per la modifica di contenuti headless basata su modulo.
Introduzione
Grazie al contratto semplice e leggero richiesto da AEM e stabilito tra l’applicazione a pagina singola e l’editor di applicazioni a pagina singola, è facile prendere un’applicazione JavaScript esistente e adattarla per l’utilizzo con un’applicazione a pagina singola in AEM.
Questo articolo illustra l’esempio della componente meteo nell’applicazione a pagina singola di esempio di We.Retail Journal.
Prima di leggere questo articolo, è necessario conoscere la struttura di un'applicazione SPA per AEM.
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’applicazione a pagina singola nell’editor dell’applicazione a pagina singola, il componente meteo viene visualizzato come qualsiasi altro componente di AEM, completo di una barra degli strumenti, ed è modificabile.
La città può essere aggiornata in una finestra di dialogo come qualsiasi altro componente di AEM.
La modifica viene mantenuta e il componente si aggiorna automaticamente con i nuovi dati meteo.
Implementazione componente meteo
La componente meteo si basa su un componente React disponibile pubblicamente, denominato React Open Weather. È stato adattato per funzionare come componente nell’applicazione SPA di esempio di We.Retail Journal.
Di seguito sono riportati alcuni snippet della documentazione NPM relativa all’utilizzo del componente React Open Weather.
Analisi del codice del componente meteo personalizzato ( Weather.js
) nell'applicazione del diario We.Retail:
-
Riga 16: il widget Meteo React Open è stato caricato come richiesto.
-
Riga 46: la funzione
MapTo
mette in relazione il componente React con un componente AEM corrispondente in modo che possa essere modificato nell'editor SPA. -
Righe 22-29:
EditConfig
è definito, verificando se la città è stata popolata e definendo il valore se vuoto. -
Righe 31-44: il componente Meteo estende la classe
Component
e fornisce i dati richiesti come definito nella documentazione di utilizzo NPM per il componente Meteo aperto di React 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ò utilizzare il componente React Open Weather nell’applicazione a pagina singola di We.Retail Journal con poca codifica.
Passaggio successivo
Per ulteriori informazioni sullo sviluppo di applicazioni a pagina singola per AEM, vedere l'articolo Sviluppo di applicazioni a pagina singola per AEM.