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.

Componentes de contêiner editáveis

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:

  1. Abrir e editar react-app/src/components/Home.js

  2. Importe o componente ResponsiveGrid de @adobe/aem-react-editable-components e adicione-o ao componente Home.

  3. 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 AEM Remote SPA Page e é criado automaticamente em novas Páginas AEM criadas a partir do Modelo AEM Remote 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:

Home.js

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

  1. Abra o projeto SPA no IDE

  2. Criar um componente React em src/components/editable/core/Text.js

  3. 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;
    }
    
  4. Criar um componente editável do React em src/components/editable/EditableText.js

  5. 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 texto editável

Componente de imagem

  1. Abra o projeto SPA no IDE

  2. Criar um componente React em src/components/editable/core/Image.js

  3. 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>
        )
    };
    
  4. Criar um componente editável do React em src/components/editable/EditableImage.js

  5. 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;
  1. Crie um arquivo SCSS src/components/editable/EditableImage.scss que forneça estilos personalizados para o EditableImage.scss. Esses estilos têm como alvo as classes CSS do componente React editável.

  2. Adicionar o SCSS a seguir a EditableImage.scss

    code language-css
    .cmp-image__image {
        margin: 1rem 0;
        width: 100%;
        border: 0;
     }
    
  3. Importar EditableImage.scss em EditableImage.js

    code language-javascript
    ...
    import './EditableImage.scss';
    ...
    

A implementação do componente de Imagem editável deve ser semelhante a:

Componente de imagem editável

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

  1. Abra o projeto SPA no IDE

  2. Abrir o arquivo src/Home.js

  3. Adicionar instruções de importação para AEMText e AEMImage

    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:

Home.js

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 para wknd-app/components/title
  • EditableText mapeado para wknd-app/components/text
  • EditableImage mapeado para wknd-app/components/image

Para configurar o contêiner reponsivegrid do modelo da Página do SPA Remota:

  1. Faça logon no AEM Author

  2. Navegue até Ferramentas > Geral > Modelos > Aplicativo WKND

  3. Editar Página SPA do Relatório

    Políticas de Grade Responsivas

  4. Selecione Estrutura no alternador de modo na parte superior direita

  5. Toque para selecionar o Contêiner de layout

  6. Toque no ícone Política na barra pop-up

    Políticas de Grade Responsivas

  7. À direita, na guia Componentes Permitidos, expanda o APLICATIVO WKND - CONTEÚDO

  8. Certifique-se de que apenas os seguintes sejam selecionados:

    • Imagem
    • Texto
    • Título

    Página do SPA Remoto

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

  1. Faça logon no AEM Author

  2. Navegue até Sites > Aplicativo WKND

  3. 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
  4. Selecione Editar no seletor de modo, na parte superior direita do Editor de páginas

  5. Localize a área editável Contêiner de layout abaixo do Título

  6. Abra a barra lateral do Editor de páginas e selecione a exibição de Componentes

  7. Arraste os seguintes componentes para o Contêiner de layout

    • Imagem
    • Título
  8. Arraste os componentes para reordená-los na seguinte ordem:

    1. Título
    2. Imagem
    3. Texto
  9. Autor o componente Título

    1. Toque no componente Título e toque na chave inglesa para editar o componente Título

    2. Adicione o seguinte texto:

      • Título: O verão está chegando, vamos aproveitar ao máximo!
      • Tipo: H1
    3. Toque em Concluído

  10. Crie o componente Imagem

    1. Arraste uma imagem para o a partir da barra Lateral (após alternar para a exibição do Assets) no componente Imagem
    2. Toque no componente de Imagem e toque na chave inglesa para editar
    3. Marque a caixa de seleção A imagem é decorativa
    4. Toque em Concluído
  11. Autor o componente Texto

    1. Edite o componente de Texto ao tocar no componente de Texto e tocar na chave inglesa
    2. 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!
    3. Toque em Concluído
  12. Seus componentes agora foram criados, mas são empilhados verticalmente.

    Componentes criados

Use o modo de layout AEM para permitir que ajustemos o tamanho e o layout dos componentes.

  1. Alternar para Modo de layout usando o seletor de modo no canto superior direito

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

    Componentes de layout

  3. Visualizar suas alterações no Editor de Páginas AEM

  4. Atualize o Aplicativo WKND em execução localmente em http://localhost:3000 para ver as alterações criadas!

    Componente de contêiner no SPA

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.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4