Mapear componentes do SPA para componentes do AEM

Última atualização em 2024-01-26
  • Tópicos
  • SPA Editor
    Exibir mais informações sobre este tópico
  • Criado para:
  • Beginner
    Developer

Saiba como mapear componentes do React para componentes do Adobe Experience Manager (AEM) com o SDK JS do editor do AEM SPA. O mapeamento de componentes permite que os usuários façam atualizações dinâmicas nos componentes do SPA no editor SPA AEM, de forma semelhante à criação tradicional do AEM.

Este capítulo detalha a API do modelo JSON do AEM e como o conteúdo JSON exposto por um componente AEM pode ser injetado automaticamente em um componente React como props.

Objetivo

  1. Saiba como mapear componentes de AEM para componentes de SPA.
  2. Inspect como um componente do React usa propriedades dinâmicas transmitidas do AEM.
  3. Saiba como usar o imediatamente Componentes principais do AEM React.

O que você vai criar

Este capítulo inspeciona como as Text O componente SPA é mapeado para o AEM Textcomponente. Reaja os Componentes principais como o Image O componente SPA é usado no SPA e é de autoria no AEM. Recursos prontos para uso do Contêiner de layout e Editor de modelo as políticas também devem ser usadas para criar uma visão um pouco mais variada na aparência.

Criação final de amostra de capítulo

Pré-requisitos

Analisar as ferramentas e instruções necessárias para a configuração de um ambiente de desenvolvimento local. O presente capítulo é uma continuação do Integrar o SPA capítulo, no entanto, tudo o que você precisa é de um projeto AEM habilitado para SPA.

Abordagem de mapeamento

O conceito básico é mapear um componente SPA para um componente AEM. Componentes do AEM, executar no lado do servidor, exportar conteúdo como parte da API do modelo JSON. O conteúdo JSON é consumido pelo SPA, executando no lado do cliente no navegador. Um mapeamento 1:1 entre componentes SPA e um componente AEM é criado.

Visão geral de alto nível do mapeamento de um componente AEM para um componente React

Visão geral de alto nível do mapeamento de um componente AEM para um componente React

Inspect, o componente de Texto

A variável Arquétipo de projeto AEM fornece uma Text componente mapeado para o AEM Componente de texto. Este é um exemplo de conteúdo componente, na medida em que conteúdo do AEM.

Vamos ver como o componente funciona.

Inspect e o modelo JSON

  1. 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 visualize a página do componente de Texto. A Biblioteca de componentes principais fornece exemplos de todos os componentes principais AEM.

  2. Selecione o JSON para um dos exemplos:

    Modelo JSON de texto

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

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

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

  3. Exibir 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": {}
       }
    

Inspect do componente Texto SPA

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

  2. A primeira área que vamos inspecionar é a class Text em ~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 perigosamenteDefinirHTMLInterno para processar o conteúdo. Lembre-se de richText e text do modelo JSON anteriormente neste exercício.

  3. Próximo, abrir ui.frontend/src/components/import-components.js 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 a variável isEmpty o método retorna true em seguida, o espaço reservado é renderizado.

  4. Por fim, dê uma olhada no MapTo chame em ~linha 94:

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

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

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

Usar componentes principais do React

Componentes WCM do AEM - Implementação principal do React e Componentes WCM do AEM - Editor de Spa - Implementação do React Core. Trata-se de um conjunto de componentes reutilizáveis da interface do usuário que mapeiam para componentes AEM prontos para uso. A maioria dos projetos pode reutilizar esses componentes como ponto de partida para sua própria implementação.

  1. 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.

  2. 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';
    
  3. 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, assim como com o Text exemplo de componente anterior.

Atualizar políticas de AEM

As políticas são um recurso dos modelos de AEM que fornece aos desenvolvedores e usuários avançados controle granular sobre quais componentes estão disponíveis para serem usados. Os Componentes principais do React estão incluídos no Código SPA, mas precisam ser ativados por meio de uma política antes de serem usados no aplicativo.

  1. Na tela inicial do AEM, acesse Ferramentas > Modelos > Reação WKND ao SPA.

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

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

    política de contêiner de layout

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

    Componentes atualizados disponíveis

    Em Componentes padrão > Adicionar mapeamento e escolha o Imagem - WKND SPA React - Conteúdo componente:

    Definir componentes padrão

    Insira um tipo mime de image/*.

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

  5. No Contêiner de layout clique em política ícone para a variável Texto componente.

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

    Ativar a formatação RTE

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

    Ativar estilos de parágrafo

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

Conteúdo do autor

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

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

    Componentes adicionais

  3. Também é possível editar a variável Text e adicionar outros estilos de parágrafo em tela cheia modo.

    Edição de Rich Text em Tela Inteira

  4. Também é possível arrastar e soltar uma imagem da tag Localizador de ativos:

    Arrastar e soltar imagem

  5. Experiência com o Título e Teaser componentes.

  6. Adicione suas próprias imagens pelo AEM Assets ou instale a base de código concluída para o padrão Site de referência da WKND. A variável Site de referência da WKND O inclui muitas imagens que podem ser reutilizadas no SPA WKND. O pacote pode ser instalado usando Gerenciador de pacotes AEM.

    Instalação do Gerenciador de pacotes wknd.all

Inspect o contêiner de layout

Suporte para o Contêiner de layout O é fornecido automaticamente pelo SDK do editor SPA AEM. A variável Contêiner de layout, conforme indicado pelo nome, é um container componente. Componentes de contêiner são componentes que aceitam estruturas JSON que representam outro componentes e instanciá-los dinamicamente.

Vamos analisar mais detalhadamente o Contêiner de layout.

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

    API do modelo JSON - Grade responsiva

    A variável Contêiner de layout O componente tem um sling:resourceType de wcm/foundation/components/responsivegrid e é reconhecido pelo Editor de SPA com o :type propriedade, exatamente como a Text e Image componentes.

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

  2. Retornar para http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Adicionar adicional Imagem componentes e tente redimensioná-los usando o Layout opção:

    Redimensionar imagem usando o modo Layout

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

    Nomes de Classe de Coluna

    O nome da 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 o a grade responsiva pode ser encontrada aqui.

  4. Retorne ao IDE e no 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.

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

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

    Criação final de amostra de capítulo

Parabéns.

Parabéns, você aprendeu a mapear componentes do SPA para componentes do AEM e usou os Componentes principais do React. Você também tem a chance de explorar os recursos responsivos do Contêiner de layout.

Próximas etapas

Navegação e Roteamento - Saiba como várias exibições no SPA podem ser compatíveis com o mapeamento para páginas AEM com o SDK do Editor de SPA. A navegação dinâmica é implementada usando o Roteador React e os Componentes principais do React.

(Bônus) Configurações persistentes para o controle de origem

Em muitos casos, especialmente no início de um projeto AEM, é valioso manter as configurações, como modelos e políticas de conteúdo relacionadas, no controle de origem. Isso garante que todos os desenvolvedores trabalhem com o mesmo conjunto de conteúdo e configurações e possa garantir consistência adicional entre os ambientes. Quando um projeto atinge um determinado nível de maturidade, a prática de gerenciar modelos pode ser transferida para um grupo especial de usuários avançados.

As próximas etapas ocorrerão usando o Visual Studio Code IDE e Sincronização VSCode com AEM mas pode estar usando qualquer ferramenta e qualquer IDE que você tenha configurado para obter ou importar conteúdo de uma instância local do AEM.

  1. No Visual Studio Code IDE, certifique-se de que tenha Sincronização VSCode com AEM instalado pela extensão do Marketplace:

    Sincronização VSCode com AEM

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

  3. Clique com o botão direito o templates e selecione Importar do servidor AEM:

    Modelo de importação de VSCode

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

  5. INSPECT o filter.xml arquivo 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>
    

    A variável filter.xml O arquivo é responsável por identificar os caminhos dos nós instalados com o pacote. Observe a 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 substituir conteúdo. Consulte a Documentação do FileVault para obter mais detalhes sobre como trabalhar com elementos de filtro.

    Comparar 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.

(Bônus) Criar componente de imagem personalizado

Um componente de Imagem SPA já foi fornecido pelos componentes principais do React. No entanto, se quiser praticar mais, crie sua própria implementação do React que mapeia para o AEM Componente de imagem. A variável Image componente é outro exemplo de um conteúdo componente.

Inspect, o JSON

Antes de pular para o código SPA, inspecione o modelo JSON fornecido pelo AEM.

  1. Navegue até a Exemplos de imagem na biblioteca de Componentes principais.

    Componente principal de imagem JSON

    Propriedades de src, alt, e title são usados para preencher o SPA Image componente.

    OBSERVAÇÃO

    Há outras propriedades de imagem expostas (lazyEnabled, widths) que permitem ao desenvolvedor criar um componente adaptável e de carregamento lento. O componente criado neste tutorial é simples e não use essas propriedades avançadas.

Implementar o componente de Imagem

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

  2. Abaixo de Image pasta criar um novo arquivo chamado Image.js.

    Arquivo Image.js

  3. Adicione o seguinte import instruções para Image.js:

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
  4. 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 mostrará se a variável src propriedade não está definida.

  5. Em seguida, implemente o Image classe:

     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 props src, alt, e title passado pelo modelo JSON.

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

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

    Anote a string wknd-spa-react/components/image corresponde à localização do componente AEM no ui.apps em: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

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

    .Image-src {
        margin: 1rem 0;
        width: 100%;
        border: 0;
    }
    
  8. Entrada Image.js adicione uma referência ao arquivo na parte superior abaixo de import instruções:

    import React, {Component} from 'react';
    import {MapTo} from '@adobe/aem-react-editable-components';
    
    require('./Image.css');
    
  9. Abra o arquivo ui.frontend/src/components/import-components.js e adicionar uma referência ao novo Image componente:

    import './Page/Page';
    import './Text/Text';
    import './Container/Container';
    import './ExperienceFragment/ExperienceFragment';
    import './Image/Image'; //add reference to Image component
    
  10. Entrada 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.

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

    $ cd aem-guides-wknd-spa.react
    $ mvn clean install -PautoInstallSinglePackage
    
  12. 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 do 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.

Nesta página