Implementação de um componente de reação para SPA

Aplicativos de página única (SPAs) podem oferecer experiências interessantes para usuários de sites. Os desenvolvedores desejam criar sites usando estruturas SPA e os autores desejam editar com facilidade o conteúdo no AEM para um site criado usando estruturas SPA.

O recurso de criação de SPA oferece uma solução abrangente para oferecer suporte à SPA no AEM. Este artigo apresenta um exemplo de como adaptar um componente React simples e existente para funcionar com o Editor de SPA de AEM.

OBSERVAÇÃO

O Editor de SPA é a solução recomendada para projetos que exigem renderização do lado do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).

Introdução

Graças ao contrato simples e leve que é exigido pelo AEM e estabelecido entre o SPA e o Editor de SPA, tomar uma aplicação Javascript existente e adaptá-la para uso com um SPA em AEM é uma questão simples.

Este artigo ilustra o exemplo do componente meteorológico no SPA de amostra do We.Retail Journal.

Familiarize-se com o estrutura de um pedido SPA para AEM antes de ler este artigo.

ATENÇÃO

Este documento usa o Aplicativo de diário We.Retail apenas para fins de demonstração. Não deve ser utilizado para qualquer trabalho de projeto.

Qualquer projeto AEM deve aproveitar Arquétipo de projeto AEM, que suporta projetos SPA usando o React ou Angular e aproveita o SDK SPA.

O Componente Tempo

O componente meteorológico é encontrado no canto superior esquerdo do aplicativo We.Retail Journal. Ele exibe o tempo atual de um local definido, puxando dados meteorológicos dinamicamente.

Uso do Widget de tempo

screen_shot_2018-06-08at143224

Ao criar o conteúdo do SPA no Editor de SPA, o componente meteorológico aparece como qualquer outro componente AEM, completo com uma barra de ferramentas e é editável.

screen_shot_2018-06-08at143304

A cidade pode ser atualizada em uma caixa de diálogo como qualquer outro componente AEM.

screen_shot_2018-06-08at143446

A alteração é persistente e o componente é atualizado automaticamente com novos dados meteorológicos.

screen_shot_2018-06-08at143524

Implementação do componente meteorológico

O componente meteorológico é na verdade baseado em um componente React disponível publicamente, chamado de React Open Weather, que foi adaptado para funcionar como um componente no aplicativo SPA amostra do We.Retail Journal .

A seguir estão trechos da documentação do NPM do uso do componente React Open Weather.

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

Revisar o código do componente climático personalizado ( Weather.js) no aplicativo We.Retail Journal :

  • Linha 16: O widget React Open Weather é carregado conforme necessário.

  • Linha 46: O MapTo relaciona esse componente React a um componente AEM correspondente para que ele possa ser editado no Editor de SPA.

  • Linhas 22-29: O EditConfig for definida, verificando se a cidade foi preenchida e definindo o valor se estiver vazia.

  • Linhas 31-44: O componente Tempo estende o Component e fornece os dados necessários, conforme definido na documentação de uso do NPM para o componente React Open Weather e renderiza o 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);

Embora um componente de back-end já deva existir, o desenvolvedor de front-end pode aproveitar o componente React Open Weather no SPA We.Retail Journal com muito pouca codificação.

Próxima etapa

Para obter mais informações sobre como desenvolver SPA para AEM, consulte o artigo Desenvolvimento de SPA para AEM.

Nesta página