Os componentes compostos aproveitam a natureza modular dos componentes de AEM ao combinar vários componentes básicos em um único componente. Um caso de uso comum de componente composto é o componente do cartão, feito de uma combinação da imagem e dos componentes do texto.
Quando os componentes compostos são implementados adequadamente na estrutura do Editor de aplicativo de página única (SPA) do AEM, os autores de conteúdo podem arrastar e soltar esses componentes da mesma forma que fazem com qualquer outro componente, mas ainda têm a capacidade de editar individualmente cada componente que compõe o componente composto.
Este artigo demonstra como você pode adicionar um componente composto ao seu aplicativo de página única para funcionar perfeitamente com o Editor de SPA de AEM.
Este artigo usará o componente de cartão típico como exemplo de caso de uso. Os cartões são um elemento comum da interface do usuário para muitas experiências digitais e normalmente são compostos de uma imagem e texto ou legenda associados. Um autor deseja poder arrastar e soltar o cartão inteiro, mas pode editar individualmente a imagem do cartão, bem como personalizar o texto associado.
Os modelos a seguir para suportar os casos de uso de componentes compostos exigem os seguintes pré-requisitos.
Há três modelos diferentes para implementar seu componente composto, dependendo da implementação do SPA no AEM.
As seções a seguir fornecem exemplos da implementação de cada caso usando o componente de cartão como exemplo.
Comece criando os componentes que farão parte do componente composto, ou seja, os componentes da imagem e seu texto.
Crie o componente de texto no seu projeto de AEM.
Adicione o resourceType
do projeto no editConfig
nó .
resourceType: 'wknd-spa/components/text'
Use o withMappable
auxiliar para ativar a edição do componente.
export const AEMText = withMappable(Text, TextEditConfig);
O componente de texto será semelhante ao seguinte.
import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';
export const TextEditConfig = {
emptyLabel: 'Text',
isEmpty: function(props) {
return !props || !props.text || props.text.trim().length < 1;
},
resourceType: 'wknd-spa/components/text'
};
export const Text = ({ cqPath, richText, text }) => {
const richTextContent = () => (
<div className="aem_text"
id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
data-rte-editelement
dangerouslySetInnerHTML={{__html: text}} />
);
return richText ? richTextContent() : (
<div className="aem_text">{text}</div>
);
};
export const AEMText = withMappable(Text, TextEditConfig);
Se você criar um componente de imagem de maneira semelhante, poderá combiná-lo com o AEMText
em um novo componente de cartão, usando a imagem e os componentes de texto como filhos.
import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';
export const AEMCard = ({ pagePath, itemPath}) => (
<div>
<AEMText
pagePath={pagePath}
itemPath={`text`} />
<AEMImage
pagePath={pagePath}
itemPath={`image`} />
</div>
);
Esse componente composto resultante agora pode ser colocado em qualquer lugar no aplicativo e o adicionará espaços reservados para um componente de texto e imagem no Editor de SPA. Na amostra abaixo, o componente de cartão é adicionado ao componente inicial abaixo do título.
function Home() {
return (
<div className="Home">
<h2>Current Adventures</h2>
<AEMCard
pagePath='/content/wknd-spa/home' />
</div>
);
}
Isso exibirá um espaço reservado vazio para um texto e uma imagem no editor. Ao inserir valores para eles usando o editor, eles são armazenados no caminho de página especificado, ou seja, /content/wknd-spa/home
no nível da raiz com os nomes especificados em itemPath
.
Nesse caso, o componente de cartão já é criado em seu projeto de AEM contendo o título e os nós de imagem. Os nós filhos (texto e imagem) têm os tipos de recursos correspondentes.
Em seguida, você pode adicioná-lo ao seu SPA e recuperar o conteúdo.
Crie um componente correspondente no SPA para isso. Certifique-se de que os componentes filho sejam mapeados para seus tipos de recursos AEM correspondentes no projeto SPA. Neste exemplo, usamos o mesmo AEMText
e AEMImage
componentes como detalhados no caso anterior.
import React from 'react';
import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { Text, TextEditConfig } from './AEMText';
import Image, { ImageEditConfig } from './AEMImage';
export const AEMCard = withMappable(Container, {
resourceType: 'wknd-spa/components/imagecard'
});
MapTo('wknd-spa/components/text')(Text, TextEditConfig);
MapTo('wknd-spa/components/image')(Image, ImageEditConfig);
Como não há conteúdo para a variável imagecard
, adicione o cartão à página. Inclua o contêiner existente do AEM no SPA.
<ResponsiveGrid
pagePath='/content/wknd-spa/home'
itemPath='root/responsivegrid' />
Adicione o wknd-spa/components/imagecard
componente para os componentes permitidos para o componente de contêiner no modelo da página.
Agora a variável imagecard
pode ser adicionado diretamente ao contêiner no editor de AEM.
Se o conteúdo existir no AEM, ele poderá ser incluído diretamente no SPA fornecendo o caminho para o conteúdo.
<AEMCard
pagePath='/content/wknd-spa/home'
itemPath='root/responsivegrid/imagecard' />
O AEMCard
componente é igual ao definido no caso de uso anterior. Aqui, o conteúdo definido na localização acima no projeto AEM está incluído na SPA .