Mapear componentes do SPA para componentes do AEM map-components
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
- Saiba como mapear componentes de AEM para componentes de SPA.
- Inspect como um componente do React usa propriedades dinâmicas transmitidas do AEM.
- 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 Text
componente. 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.
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
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
-
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.
-
Selecione o JSON para um dos exemplos:
Você deve ver três propriedades:
text
,richText
, e:type
.:type
é uma propriedade reservada que lista assling:resourceType
(ou caminho) do componente AEM. O valor de:type
é usado para mapear o componente AEM para o componente SPA.text
erichText
são propriedades adicionais expostas ao componente SPA. -
Exibir a saída JSON em http://localhost:4502/content/wknd-spa-react/us/en.model.json. Você poderá encontrar uma entrada semelhante a:
code language-json "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
-
No IDE de sua escolha, abra o Projeto AEM para o SPA. Expanda a
ui.frontend
e abra o arquivoText.js
emui.frontend/src/components/Text/Text.js
. -
A primeira área que vamos inspecionar é a
class Text
em ~linha 40:code language-js 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 usathis.props.richText
para determinar se o conteúdo a ser renderizado será rich text ou texto simples. O "conteúdo" real usado vem dethis.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 derichText
etext
do modelo JSON anteriormente neste exercício. -
Próximo, abrir
ui.frontend/src/components/import-components.js
dê uma olhada noTextEditConfig
em ~linha 86:code language-js 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. -
Por fim, dê uma olhada no
MapTo
chame em ~linha 94:code language-js 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 caminhowknd-spa-react/components/text
representa osling: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 comoprops
ao componente SPA.Você pode encontrar o AEM
Text
definição de componente emui.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.
-
No código do projeto, abra o arquivo
import-components.js
emui.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:
code language-js 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 oMapTo
, assim como com oText
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.
-
Na tela inicial do AEM, acesse Ferramentas > Modelos > Reação WKND ao SPA.
-
Selecione e abra o Página SPA modelo para edição.
-
Selecione o Contêiner de layout e clique em política ícone 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 Imagem - WKND SPA React - Conteúdo componente:
Insira um tipo mime de
image/*
.Clique em Concluído para salvar as atualizações de política.
-
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:
Em Plug-ins > Estilos de parágrafo > marque a caixa para Ativar estilos de parágrafo:
Clique em Concluído para salvar a atualização de política.
Conteúdo do autor
-
Navegue até a Página inicial http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.
-
Agora você poderá usar os componentes adicionais Imagem, Teaser, e Título na página.
-
Também é possível editar a variável
Text
e adicionar outros estilos de parágrafo em tela cheia modo. -
Também é possível arrastar e soltar uma imagem da tag Localizador de ativos:
-
Experiência com o Título e Teaser componentes.
-
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.
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.
-
Em um navegador, navegue até http://localhost:4502/content/wknd-spa-react/us/en.model.json
A variável Contêiner de layout O componente tem um
sling:resourceType
dewcm/foundation/components/responsivegrid
e é reconhecido pelo Editor de SPA com o:type
propriedade, exatamente como aText
eImage
componentes.Os mesmos recursos de redimensionamento de um componente usando Modo de layout estão disponíveis com o Editor de SPA.
-
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:
-
Reabra o modelo JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json e observe as
columnClassNames
como parte do JSON: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. -
Retorne ao IDE e no
ui.apps
há uma biblioteca do lado do cliente definida emui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid
. Abra o arquivoless/grid.less
.Esse arquivo determina os pontos de interrupção (
default
,tablet
, ephone
) 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 como1200px
e768px
. -
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:
Parabéns. congratulations
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 next-steps
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 bonus-configs
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.
-
No Visual Studio Code IDE, certifique-se de que tenha Sincronização VSCode com AEM instalado pela extensão do Marketplace:
-
Expanda a ui.content módulo no Gerenciador de projetos e navegue até
/conf/wknd-spa-react/settings/wcm/templates
. -
Clique com o botão direito o
templates
e selecione Importar do servidor AEM: -
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
. -
INSPECT o
filter.xml
arquivo localizado emui.content/src/main/content/META-INF/vault/filter.xml
.code language-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 amode="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
eui.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 bonus-image
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.
-
Navegue até a Exemplos de imagem na biblioteca de Componentes principais.
Propriedades de
src
,alt
, etitle
são usados para preencher o SPAImage
componente.note note NOTE 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
-
Em seguida, crie uma nova pasta chamada
Image
emui.frontend/src/components
. -
Abaixo de
Image
pasta criar um novo arquivo chamadoImage.js
. -
Adicione o seguinte
import
instruções paraImage.js
:code language-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:code language-js 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. -
Em seguida, implemente o
Image
classe:code language-js 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 propssrc
,alt
, etitle
passado pelo modelo JSON. -
Adicione o
MapTo
código para mapear o componente React ao componente AEM:code language-js MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);
Anote a string
wknd-spa-react/components/image
corresponde à localização do componente AEM noui.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:code language-scss .Image-src { margin: 1rem 0; width: 100%; border: 0; }
-
Entrada
Image.js
adicione uma referência ao arquivo na parte superior abaixo deimport
instruções:code language-js 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 adicionar uma referência ao novoImage
componente:code language-js import './Page/Page'; import './Text/Text'; import './Container/Container'; import './ExperienceFragment/ExperienceFragment'; import './Image/Image'; //add reference to Image component
-
Entrada
import-components.js
comente a imagem do componente principal do React:code language-js //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:
code language-shell $ 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 do componente de Imagem personalizada
code language-html <div class="Image"> <img class="Image-src" src="/content/image-src.jpg"> </div>
Marcação da imagem do componente principal do React
code language-html <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.