Mapear componentes do SPA para componentes do AEM map-components

Antes de pular para o código SPA, é importante entender o modelo JSON que o AEM fornece. Navegue até a Biblioteca de Componentes principais e exiba a página do componente de Texto. A Biblioteca de componentes principais fornece exemplos de todos os componentes principais AEM.

Selecione a guia JSON para um dos exemplos:

Você deve ver três propriedades: text, richText e :type.

:type é uma propriedade reservada que lista o sling:resourceType (ou caminho) do Componente AEM. O valor de :type é o que é usado para mapear o componente AEM para o componente SPA.

text e richText são propriedades adicionais expostas ao componente SPA.

Exiba a saída JSON em http://localhost:4502/content/wknd-spa-react/us/en.model.json. Você poderá encontrar uma entrada semelhante a:

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

No IDE de sua escolha, abra o Projeto AEM para o SPA. Expanda o módulo ui.frontend e abra o arquivo Text.js em ui.frontend/src/components/Text/Text.js.

A primeira área que vamos inspecionar é o class Text na linha ~40:

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text é um componente padrão do React. O componente usa this.props.richText para determinar se o conteúdo a ser renderizado será rich text ou texto simples. O "conteúdo" real usado vem de this.props.text.

Para evitar um possível ataque XSS, o rich text é escapado por DOMPurify antes de usar dangerouslySetInnerHTML para renderizar o conteúdo. Lembre-se das propriedades richText e text do modelo JSON anteriormente neste exercício.

A seguir, abra ui.frontend/src/components/import-components.js e dê uma olhada no TextEditConfig em ~linha 86:

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

O código acima é responsável por determinar quando renderizar o espaço reservado no ambiente do autor do AEM. Se o método isEmpty retornar true, o espaço reservado será renderizado.

Por fim, observe a chamada MapTo em ~line 94:

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo é fornecido pelo SDK JS do Editor SPA AEM (@adobe/aem-react-editable-components). O caminho wknd-spa-react/components/text representa o sling:resourceType do componente AEM. Esse caminho corresponde ao :type exposto pelo modelo JSON observado anteriormente. MapTo cuida de analisar a resposta do modelo JSON e transmitir os valores corretos como props para o componente SPA.

Você pode encontrar a definição do componente AEM Text em ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

No código do projeto, abra o arquivo import-components.js em ui.frontend/src/components.
Esse arquivo importa todos os componentes do SPA que são mapeados para componentes do AEM. Dada a natureza dinâmica da implementação do Editor de SPA, devemos fazer referência explícita a quaisquer componentes SPA que estejam vinculados a componentes com autor de AEM. Isso permite que um autor de AEM escolha usar um componente onde quiser no aplicativo.

As seguintes declarações de importação incluem componentes SPA gravados no projeto:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

Há vários outros imports de @adobe/aem-core-components-react-spa e @adobe/aem-core-components-react-base. Eles estão importando os componentes principais do React e disponibilizando-os no projeto atual. Eles são mapeados para componentes AEM específicos do projeto usando o MapTo, exatamente como no exemplo de componente Text anterior.

Na tela inicial do AEM, navegue até Ferramentas > Modelos > Reação do WKND SPA.

Selecione e abra o modelo de Página SPA para edição.

Selecione o Contêiner de layout e clique em seu ícone de política para editar a política:

Em Componentes Permitidos > Reação SPA WKND - Conteúdo > verificar Imagem, Teaser e Título.

Em Componentes Padrão > Adicionar mapeamento e escolha o componente Imagem - Reação SPA WKND - Conteúdo:

Insira um tipo MIME de image/*.

Clique em Concluído para salvar as atualizações de política.

No Contêiner de Layout, clique no ícone política para o componente Texto.

Crie uma nova política chamada Texto SPA WKND. Em Plugins > Formatação > marque todas as caixas para habilitar opções de formatação adicionais:

Em Plug-ins > Estilos de parágrafo >, marque a caixa para Habilitar estilos de parágrafo:

Clique em Concluído para salvar a atualização de política.

Navegue até a Página inicial http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

Agora você pode usar os componentes adicionais Imagem, Teaser e Título na página.

Você também pode editar o componente Text e adicionar outros estilos de parágrafo no modo tela cheia.

Você também pode arrastar e soltar uma imagem do Localizador de ativos:

Experiência com os componentes Título e Teaser.

Adicione suas próprias imagens via AEM Assets ou instale a base de código concluída para o site de referência WKND padrão. O site de referência da WKND inclui muitas imagens que podem ser reutilizadas no SPA da WKND. O pacote pode ser instalado usando o Gerenciador de Pacotes do AEM.

do Gerenciador de Pacotes

Em um navegador, navegue até http://localhost:4502/content/wknd-spa-react/us/en.model.json

O componente Contêiner de Layout tem um sling:resourceType de wcm/foundation/components/responsivegrid e é reconhecido pelo Editor de SPA usando a propriedade :type, exatamente como os componentes Text e Image.

Os mesmos recursos de redimensionamento de um componente usando o Modo de layout estão disponíveis com o Editor de SPA.

Retorne a http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Adicione componentes adicionais de Imagem e tente redimensioná-los usando a opção Layout:

Abra novamente o modelo JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json e observe o columnClassNames como parte do JSON:

O nome de classe aem-GridColumn--default--4 indica que o componente deve ter 4 colunas de largura com base em uma grade de 12 colunas. Mais detalhes sobre a grade responsiva podem ser encontrados aqui.

Retorne ao IDE e no módulo ui.apps há uma biblioteca do lado do cliente definida em ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid. Abra o arquivo less/grid.less.

Este arquivo determina os pontos de interrupção (default, tablet e phone) usados pelo Contêiner de Layout. Este arquivo deve ser personalizado de acordo com as especificações do projeto. Os pontos de interrupção estão definidos como 1200px e 768px.

Você deve ser capaz de usar os recursos responsivos e as políticas de rich text atualizadas do componente Text para criar uma exibição como a seguinte:

No Visual Studio Code IDE, verifique se você tem o VSCode AEM Sync instalado por meio da extensão do Marketplace:

Expanda o módulo ui.content no Gerenciador de projetos e navegue até /conf/wknd-spa-react/settings/wcm/templates.

Clique com o botão direito do mouse na pasta templates e selecione Importar do Servidor AEM:

Repita as etapas para importar o conteúdo, mas selecione a pasta políticas localizada em /conf/wknd-spa-react/settings/wcm/templates/policies.

Inspect o arquivo filter.xml localizado em ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>

O arquivo filter.xml é responsável por identificar os caminhos dos nós instalados com o pacote. Observe o mode="merge" em cada filtro que indica que o conteúdo existente não será modificado, somente o novo conteúdo será adicionado. Como os autores de conteúdo podem estar atualizando esses caminhos, é importante que uma implantação de código não substitua o conteúdo. Consulte a documentação do FileVault para obter mais detalhes sobre como trabalhar com elementos de filtro.

Compare ui.content/src/main/content/META-INF/vault/filter.xml e ui.apps/src/main/content/META-INF/vault/filter.xml para entender os diferentes nós gerenciados por cada módulo.

Navegue até os exemplos de imagem na biblioteca de Componentes principais.

Propriedades de src, alt e title são usadas para popular o componente SPA Image.

Em seguida, crie uma nova pasta chamada Image em ui.frontend/src/components.

Abaixo da pasta Image crie um novo arquivo chamado Image.js.

Adicionar as seguintes instruções import a Image.js:

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

Em seguida, adicione o ImageEditConfig para determinar quando mostrar o espaço reservado no AEM:

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

O espaço reservado será exibido se a propriedade src não estiver definida.

Em seguida, implemente a classe Image:

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

O código acima renderizará um <img> com base nas propriedades src, alt e title passadas pelo modelo JSON.

Adicione o código MapTo para mapear o componente React ao componente AEM:

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

Observe que a cadeia de caracteres wknd-spa-react/components/image corresponde ao local do componente AEM em ui.apps em: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

Crie um novo arquivo chamado Image.css no mesmo diretório e adicione o seguinte:

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Em Image.js, adicione uma referência ao arquivo na parte superior abaixo das instruções import:

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

Abra o arquivo ui.frontend/src/components/import-components.js e adicione uma referência ao novo componente Image:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

Em import-components.js, comente a Imagem do Componente Principal do React:

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

Isso garantirá que nosso componente de Imagem personalizado seja usado no lugar.

Na raiz do projeto, implante o código SPA no AEM usando Maven:

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

Inspect o SPA no AEM. Todos os componentes de Imagem na página devem continuar a funcionar. O Inspect renderizou a saída e você deve ver a marcação do componente de Imagem personalizado em vez do componente principal do React.

Marcação de componente de Imagem personalizada

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

Marcação da imagem do componente principal do React

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

Esta é uma boa introdução à extensão e implementação de seus próprios componentes.