DocumentatieAEM 6.5Handboek

Het uitvoeren van een Component van de Reactie voor SPA

Laatst bijgewerkt: 17 juni 2025
  • Van toepassing op:
  • Experience Manager 6.5
  • Onderwerpen:

Gemaakt voor:

  • Ontwikkelaar

Toepassingen van één pagina (SPAs) kunnen dwingende ervaringen voor websitegebruikers aanbieden. De ontwikkelaars willen plaatsen kunnen bouwen gebruikend het kader van het KUUROORD en de auteurs willen de inhoud binnen Adobe Experience Manager (AEM) voor een plaats foutloos uitgeven die gebruikend het kader van het KUUROORD wordt gebouwd.

De auteurseigenschap van het KUUROORD biedt een uitvoerige oplossing voor het steunen van SPAs binnen AEM aan. Dit artikel stelt een voorbeeld van voor hoe te om een eenvoudige, bestaande component van de Reactie aan het werk met de Redacteur van AEM SPA aan te passen.

IMPORTANT
De redacteur van het KUUROORD is afgekeurd voor nieuwe projecten. Het blijft door Adobe ondersteund voor bestaande projecten, maar mag niet worden gebruikt voor nieuwe projecten. De voorkeurseditors voor het beheer van inhoud zonder kop in AEM zijn nu:
  • de Universele Redacteurvoor visueel het uitgeven van hoofdloze inhoud.
  • de Redacteur van het Fragment van de Inhoudvoor op vorm-gebaseerde het uitgeven van hoofdloze inhoud.

Inleiding

Dankzij het eenvoudige en lichte contract dat door AEM wordt vereist en tussen SPA en de Redacteur van het KUUROORD wordt gevestigd, is het nemen van een bestaande toepassing van JavaScript en het aanpassen van het voor gebruik met een KUUROORD in AEM een ongecompliceerde kwestie.

Dit artikel illustreert het voorbeeld van de weercomponent op het Web.Retail steekproefSPA van het Dagboek.

U zou met de structuur van een toepassing van het KUUROORD voor AEMvóór het lezen van dit artikel vertrouwd moeten zijn.

CAUTION
Dit document gebruikt Wij.Retail app van het Dagboekslechts voor demonstratiedoeleinden. Gebruik het niet voor enig projectwerk.
Om het even welk project van AEM zou het Archetype van het Project van AEMmoeten gebruiken, dat de projecten van het KUUROORD gebruikend React of Angular steunt en het KUUROORD SDK gebruikt.

De component Weer

De weercomponent staat linksboven in de app Web.Retail Journal. Het toont het huidige weer van een bepaalde plaats, trekkend dynamisch weergegevens.

De widget Weer gebruiken

screen_shot_2018-06-08at143224

Wanneer het ontwerpen van inhoud van het KUUROORD in de Redacteur van het KUUROORD, verschijnt de weercomponent zoals een andere component van AEM, volledig met een toolbar, en is editable.

screen_shot_2018-06-08at143304

De stad kan in een dialoog worden bijgewerkt enkel als een andere component van AEM.

screen_shot_2018-06-08at143446

De wijziging blijft bestaan en de component wordt automatisch bijgewerkt met nieuwe weergegevens.

screen_shot_2018-06-08at143524

Implementatie van weercomponent

De weercomponent is gebaseerd op een openbaar beschikbare component van het Reageren, genoemd Reageer Open Weer. Het is aangepast om als component binnen de Wij.Retail steekproeftoepassing van het Dagboek van het Dagboek te werken SPA.

Hieronder vindt u fragmenten uit de NPM-documentatie van het gebruik van de component React Open Weather.

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

Het herzien van de code van de aangepaste weercomponent ( Weather.js) in de toepassing van het Dagboek Wij.Retail:

  • Lijn 16: Reageer Open widget van het Weer wordt geladen zoals vereist.

  • Lijn 46: De MapTo functie past deze React component aan een overeenkomstige component van AEM toe zodat het in de Redacteur van het KUUROORD kan worden uitgegeven.

  • Lijnen 22-29: EditConfig wordt bepaald, controlerend als de stad is bevolkt en bepalend de waarde als leeg.

  • Lijnen 31-44: De component van het Weer breidt de Component klasse uit en verstrekt de vereiste gegevens zoals die in de NPM gebruiksdocumentatie voor de React Open component van het Weer worden bepaald en geeft de component terug.

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

Hoewel een achterste deelcomponent reeds moet bestaan, kan de voorste-eindontwikkelaar de React Open component van het Weer in het Web.Retail Journal SPA met weinig codering gebruiken.

Volgende stap

Voor verdere informatie over het ontwikkelen van SPAs voor AEM zie het artikel Ontwikkelend SPAs voor AEM.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2