Componentes de contêiner editáveis
Os componentes fixos fornecem alguma flexibilidade para a criação de conteúdo SPA. No entanto, essa abordagem é rígida e requer que os desenvolvedores definam a composição exata do conteúdo editável. Para auxiliar na criação de experiências excepcionais pelos autores, o Editor de SPA apoia o uso de componentes de contêiner no SPA. Os componentes do contêiner permitem que os autores arrastem e soltem componentes permitidos no contêiner e os criem, da mesma forma que fazem na criação tradicional do AEM Sites.
Neste capítulo, adicionamos um contêiner editável à visualização inicial, permitindo que os autores componham e façam o layout de experiências ricas de conteúdo usando componentes editáveis do React diretamente no SPA.
Atualizar o aplicativo WKND
Para adicionar um componente de contêiner à exibição Início:
- Importar o componente
ResponsiveGrid
do Componente editável do AEM React - Importar e registrar Componentes editáveis personalizados do React (Texto e Imagem) para uso no componente ResponsiveGrid
Uso do componente ResponsiveGrid
Para adicionar uma área editável à exibição Início:
-
Abrir e editar
react-app/src/components/Home.js
-
Importe o componente
ResponsiveGrid
de@adobe/aem-react-editable-components
e adicione-o ao componenteHome
. -
Definir os seguintes atributos no componente
<ResponsiveGrid...>
pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Isso instrui o componente
ResponsiveGrid
a recuperar seu conteúdo do recurso AEM:/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
O
itemPath
mapeia para o nóresponsivegrid
definido no Modelo AEMRemote SPA Page
e é criado automaticamente em novas Páginas AEM criadas a partir do Modelo AEMRemote SPA Page
.Atualize
Home.js
para adicionar o componente<ResponsiveGrid...>
.code language-javascript ... import { ResponsiveGrid } from '@adobe/aem-react-editable-components'; ... function Home() { return ( <div className="Home"> <ResponsiveGrid pagePath='/content/wknd-app/us/en/home' itemPath='root/responsivegrid'/> <EditableTitle pagePath='/content/wknd-app/us/en/home' itemPath='title'/> <Adventures /> </div> ); }
O arquivo Home.js
deve ser semelhante a:
Criar componentes editáveis
Para obter o efeito total dos contêineres flexíveis de experiência de criação fornecidos no Editor de SPA. Já criamos um componente de Título editável, mas vamos fazer mais algumas coisas que permitem aos autores usar componentes de Texto e Imagem editáveis no componente ResponsiveGrid recém-adicionado.
Os novos componentes editáveis Texto e Imagem React são criados usando o padrão de definição do componente editável exportado em componentes editáveis fixos.
Componente de texto editável
-
Abra o projeto SPA no IDE
-
Criar um componente React em
src/components/editable/core/Text.js
-
Adicionar o seguinte código a
Text.js
code language-javascript import React from 'react' const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>; const TextRich = (props) => { const text = props.text; const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : ""); return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} /> }; export const Text = (props) => { if (!props.baseCssClass) { props.baseCssClass = 'cmp-text' } const { richText = false } = props return richText ? <TextRich {...props} /> : <TextPlain {...props} /> } export function textIsEmpty(props) { return props.text == null || props.text.length === 0; }
-
Criar um componente editável do React em
src/components/editable/EditableText.js
-
Adicionar o seguinte código a
EditableText.js
code language-javascript import React from 'react' import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components'; import { Text, textIsEmpty } from "./core/Text"; import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder"; import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass"; const RESOURCE_TYPE = "wknd-app/components/text"; const EditConfig = { emptyLabel: "Text", isEmpty: textIsEmpty, resourceType: RESOURCE_TYPE }; export const WrappedText = (props) => { const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2") return <Wrapped {...props} /> }; const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent> MapTo(RESOURCE_TYPE)(EditableText); export default EditableText;
A implementação do componente de Texto editável deve ser semelhante a:
Componente de imagem
-
Abra o projeto SPA no IDE
-
Criar um componente React em
src/components/editable/core/Image.js
-
Adicionar o seguinte código a
Image.js
code language-javascript import React from 'react' import { RoutedLink } from "./RoutedLink"; export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0 const ImageInnerContents = (props) => { return (<> <img src={props.src} className={props.baseCssClass + '__image'} alt={props.alt} /> { !!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span> } { props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} /> } </>); }; const ImageContents = (props) => { if (props.link && props.link.trim().length > 0) { return ( <RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}> <ImageInnerContents {...props} /> </RoutedLink> ) } return <ImageInnerContents {...props} /> }; export const Image = (props) => { if (!props.baseCssClass) { props.baseCssClass = 'cmp-image' } const { isInEditor = false } = props; const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass; return ( <div className={cssClassName}> <ImageContents {...props} /> </div> ) };
-
Criar um componente editável do React em
src/components/editable/EditableImage.js
-
Adicionar o seguinte código a
EditableImage.js
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: imageIsEmpty,
resourceType: RESOURCE_TYPE
};
const WrappedImage = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
return <Wrapped {...props}/>
}
const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableImage);
export default EditableImage;
-
Crie um arquivo SCSS
src/components/editable/EditableImage.scss
que forneça estilos personalizados para oEditableImage.scss
. Esses estilos têm como alvo as classes CSS do componente React editável. -
Adicionar o SCSS a seguir a
EditableImage.scss
code language-css .cmp-image__image { margin: 1rem 0; width: 100%; border: 0; }
-
Importar
EditableImage.scss
emEditableImage.js
code language-javascript ... import './EditableImage.scss'; ...
A implementação do componente de Imagem editável deve ser semelhante a:
Importar os componentes editáveis
Os componentes do React EditableText
e EditableImage
recém-criados são referenciados no SPA e são dinamicamente instanciados com base no JSON retornado pelo AEM. Para garantir que esses componentes estejam disponíveis para o SPA, crie instruções de importação para eles em Home.js
-
Abra o projeto SPA no IDE
-
Abrir o arquivo
src/Home.js
-
Adicionar instruções de importação para
AEMText
eAEMImage
code language-javascript ... // The following need to be imported, so that MapTo is run for the components import EditableText from './editable/EditableText'; import EditableImage from './editable/EditableImage'; ...
O resultado deve ser semelhante a:
Se essas importações forem não adicionadas, o código EditableText
e EditableImage
não será chamado pelo SPA e, portanto, os componentes não serão mapeados para os tipos de recursos fornecidos.
Configuração do contêiner no AEM
Componentes de contêiner AEM usam políticas para ditar seus componentes permitidos. Essa é uma configuração crítica ao usar o Editor de SPA, já que somente os componentes AEM que têm equivalentes de componentes SPA mapeados podem ser renderizados pelo SPA. Verifique se somente os componentes para os quais fornecemos implementações de SPA são permitidos:
EditableTitle
mapeado parawknd-app/components/title
EditableText
mapeado parawknd-app/components/text
EditableImage
mapeado parawknd-app/components/image
Para configurar o contêiner reponsivegrid do modelo da Página do SPA Remota:
-
Faça logon no AEM Author
-
Navegue até Ferramentas > Geral > Modelos > Aplicativo WKND
-
Editar Página SPA do Relatório
-
Selecione Estrutura no alternador de modo na parte superior direita
-
Toque para selecionar o Contêiner de layout
-
Toque no ícone Política na barra pop-up
-
À direita, na guia Componentes Permitidos, expanda o APLICATIVO WKND - CONTEÚDO
-
Certifique-se de que apenas os seguintes sejam selecionados:
- Imagem
- Texto
- Título
-
Toque em Concluído
Criação do contêiner no AEM
Depois que o SPA é atualizado para incorporar o <ResponsiveGrid...>
, invólucros para três componentes editáveis do React (EditableTitle
, EditableText
e EditableImage
), e o AEM é atualizado com uma política de Modelo correspondente, podemos começar a criar conteúdo no componente de contêiner.
-
Faça logon no AEM Author
-
Navegue até Sites > Aplicativo WKND
-
Toque em Página inicial e selecione Editar na barra de ações superior
- Um componente Texto "Olá, mundo" é exibido, pois ele é adicionado automaticamente ao gerar o projeto a partir do arquétipo do projeto AEM
-
Selecione Editar no seletor de modo, na parte superior direita do Editor de páginas
-
Localize a área editável Contêiner de layout abaixo do Título
-
Abra a barra lateral do Editor de páginas e selecione a exibição de Componentes
-
Arraste os seguintes componentes para o Contêiner de layout
- Imagem
- Título
-
Arraste os componentes para reordená-los na seguinte ordem:
- Título
- Imagem
- Texto
-
Autor o componente Título
-
Toque no componente Título e toque na chave inglesa para editar o componente Título
-
Adicione o seguinte texto:
- Título: O verão está chegando, vamos aproveitar ao máximo!
- Tipo: H1
-
Toque em Concluído
-
-
Crie o componente Imagem
- Arraste uma imagem para o a partir da barra Lateral (após alternar para a exibição do Assets) no componente Imagem
- Toque no componente de Imagem e toque na chave inglesa para editar
- Marque a caixa de seleção A imagem é decorativa
- Toque em Concluído
-
Autor o componente Texto
- Edite o componente de Texto ao tocar no componente de Texto e tocar na chave inglesa
- Adicione o seguinte texto:
- Nesse momento, você pode obter 15% em todas as aventuras de uma semana e 20% de desconto em todas as aventuras de duas semanas ou mais! No check-out, adicione o código da campanha SUMMERISCOMING para obter seus descontos!
- Toque em Concluído
-
Seus componentes agora foram criados, mas são empilhados verticalmente.
Use o modo de layout AEM para permitir que ajustemos o tamanho e o layout dos componentes.
-
Alternar para Modo de layout usando o seletor de modo no canto superior direito
-
Redimensionar os componentes Imagem e Texto, de forma que fiquem lado a lado
- O componente Imagem deve ter 8 colunas de largura
- O componente Texto deve ter 3 colunas
-
Visualizar suas alterações no Editor de Páginas AEM
-
Atualize o Aplicativo WKND em execução localmente em http://localhost:3000 para ver as alterações criadas!
Parabéns.
Você adicionou um componente de contêiner que permite que os componentes editáveis sejam adicionados pelos autores ao aplicativo WKND! Agora você sabe como:
- Usar o componente
ResponsiveGrid
do Componente editável do AEM React no SPA - Criar e registrar componentes editáveis do React (Texto e Imagem) para uso no SPA por meio do componente de container
- Configurar o modelo da página SPA remota para permitir os componentes habilitados para SPA
- Adicionar componentes editáveis ao componente do contêiner
- Componentes do autor e do layout no Editor de SPA
Próximas etapas
A próxima etapa usa a mesma técnica para adicionar um componente editável a uma rota de Detalhes de Aventura no SPA.