Show Menu
SUJETS×

Mise en oeuvre d’un composant de réaction pour l’application d’une seule page

Les applications d’une seule page (SPA) peuvent améliorer considérablement l’expérience des utilisateurs de sites web. Le souhait des développeurs est de pouvoir créer des sites avec des structures SPA. Les auteurs, pour leur part, souhaitent modifier facilement du contenu dans AEM pour un site conçu à l’aide de telles structures.
La fonction de création d’application d’une seule page constitue une solution complète pour la prise en charge de ce type d’application dans AEM. Cet article présente un exemple d’adaptation d’un composant de réaction simple et existant à l’utilisation de l’éditeur d’applications monopages AEM.
L’éditeur d’applications monopages est la solution recommandée pour les projets qui nécessitent un rendu côté client basé sur la structure d’applications monopages (par exemple, Réagir ou Angular).

Présentation

Grâce au contrat simple et léger qui est requis par AEM et établi entre l’application SPA et l’éditeur SPA, prendre une application Javascript existante et l’adapter à une application SPA dans AEM est une chose simple.
Cet article illustre l'exemple de la composante météorologique de l'exemple d'application d'une seule page d'accueil de Journal We.Retail.
Avant de lire cet article, vous devez connaître la structure d’une application SPA pour AEM .
Ce document utilise l’application de Journal We.Retail à des fins de démonstration uniquement. Il ne doit être utilisé pour aucun travail de projet.
Tout projet AEM doit tirer parti de l’archétype du projet AEM, qui prend en charge les projets d’application d’une seule page à l’aide de React ou d’Angular et exploite le SDK de l’application d’une seule page.

La composante météorologique

Le composant météorologique se trouve dans le coin supérieur gauche de l'application de Journal We.Retail. Il affiche la météo actuelle d’un emplacement défini, extrayant dynamiquement les données météorologiques.

Utilisation du widget météorologique

Lors de la création de contenu de l’application d’une seule page dans l’éditeur d’applications d’une seule page, le composant météorologique s’affiche comme tout autre composant AEM, avec une barre d’outils complète et peut être modifié.
La ville peut être mise à jour dans une boîte de dialogue comme tout autre composant AEM.
Le changement est persistant et le composant se met automatiquement à jour avec les nouvelles données météorologiques.

Mise en oeuvre des composants météorologiques

Le composant météorologique est en fait basé sur un composant React disponible au public, appelé React Open Weather , qui a été adapté pour fonctionner en tant que composant dans l'exemple d'application SPA du Journal We.Retail.
Voici quelques extraits de la documentation du MNP sur l'utilisation du composant Réagir aux conditions météorologiques ouvertes.
Vérification du code du composant météorologique personnalisé ( Weather.js ) dans l'application de Journal We.Retail :
  • Ligne 16 : Le widget Réagir au temps ouvert est chargé selon les besoins.
  • Ligne 46 : La MapTo fonction associe ce composant Réagir à un composant AEM correspondant afin qu’il puisse être modifié dans l’éditeur d’applications monopages.
  • Lignes 22 à 29 : Le EditConfig est défini, en vérifiant si la ville a été peuplée et en définissant la valeur si elle est vide.
  • Lignes 31 à 44 : Le composant Météo étend la Component classe et fournit les données requises telles que définies dans la documentation sur l'utilisation du MNP pour le composant Réagir à la météo ouverte et effectue le rendu du composant.
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ 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/cq-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);

Bien qu'un composant principal doive déjà exister, le développeur frontal peut exploiter le composant Réagir aux intempéries dans l'application Web.Retail Journal SPA avec très peu de codage.

Étape suivante

Pour plus d’informations sur le développement d’applications monopages pour AEM, voir l’article Développement d’applications monopages pour AEM .