DocumentaçãoAEMTutoriais do AEMTutorial do AEM Headless

Rotas dinâmicas e componentes editáveis

Last update: Mon Jun 16 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Aplica-se a:
  • Experience Manager 6.5
  • Experience Manager as a Cloud Service

Criado para:

  • Iniciante
  • Desenvolvedor
IMPORTANT
O editor de SPA foi descontinuado para novos projetos. Ele continuará funcionando com projetos existentes da Adobe, mas não deve ser usado para novos projetos. Os editores preferidos para gerenciar conteúdo headless no AEM agora são:

Neste capítulo, ativamos duas rotas dinâmicas de Detalhe de Aventura para suportar componentes editáveis: Campo de Surfe de Bali e Beervana em Portland.

Rotas dinâmicas e componentes editáveis

A rota SPA Adventure Detail é definida como /adventure/:slug, onde slug é uma propriedade de identificador exclusivo no Fragmento de Conteúdo Adventure.

Mapear os URLs de SPA para páginas do AEM

Nos dois capítulos anteriores, mapeamos o conteúdo do componente editável da exibição Início do SPA para a página raiz do SPA remoto correspondente no AEM em /content/wknd-app/us/en/.

A definição de mapeamento para componentes editáveis para as rotas dinâmicas do SPA é semelhante, no entanto, devemos criar um esquema de mapeamento 1:1 entre as instâncias da rota e as páginas do AEM.

Neste tutorial, pegamos o nome do Fragmento de conteúdo WKND Adventure, que é o último segmento do caminho, e o mapeamos para um caminho simples em /content/wknd-app/us/en/adventure.

Rota SPA remota
Caminho da página do AEM
/
/content/wknd-app/us/en/home
/aventura/bali-surf-camp
/content/wknd-app/us/en/home/Adventure/bali-surf-camp
/aventura/beervana-portland
/content/wknd-app/us/en/home/Adventure/beervana-in-portland

Portanto, com base nesse mapeamento, devemos criar duas novas páginas do AEM em:

  • /content/wknd-app/us/en/home/adventure/bali-surf-camp
  • /content/wknd-app/us/en/home/adventure/beervana-in-portland

Mapeamento de SPA remoto

O mapeamento de solicitações que deixam o SPA Remoto é configurado por meio da configuração setupProxy feita no Bootstrap do SPA.

Mapeamento do Editor SPA

O mapeamento de solicitações de SPA quando o SPA é aberto por meio do AEM SPA Editor é configurado por meio da configuração Mapeamentos do Sling realizada em Configurar AEM.

Criar páginas de conteúdo no AEM

Primeiro, crie o segmento de página adventure intermediário:

  1. Faça logon no AEM Author

  2. Navegue até Sites > Aplicativo WKND > us > en > Página inicial do aplicativo WKND

    1. Essa página do AEM é mapeada como a raiz do SPA, portanto, é aqui que começamos a criar a estrutura da página do AEM para outras rotas de SPA.

  3. Toque em Criar e selecione Página

  4. Selecione o modelo da Página de SPA Remota e toque em Avançar

  5. Preencher as propriedades da página

    1. Título: Aventura
    2. Nome: adventure
      1. Esse valor define o URL da página do AEM e, portanto, deve corresponder ao segmento de rota do SPA.

  6. Toque em Concluído

Em seguida, crie as páginas do AEM que correspondem a cada um dos URLs do SPA que exigem áreas editáveis.

  1. Navegue até a nova página Aventura no Administrador do Site

  2. Toque em Criar e selecione Página

  3. Selecione o modelo da Página de SPA Remota e toque em Avançar

  4. Preencher as propriedades da página

    1. Título: Campo de Surf em Bali
    2. Nome: bali-surf-camp
      1. Esse valor define o URL da página do AEM e, portanto, deve corresponder ao último segmento da rota do SPA

  5. Toque em Concluído

  6. Repita as etapas 3 a 6 para criar a página Beervana in Portland, com:

    1. Título: Beervana em Portland
    2. Nome: beervana-in-portland
      1. Esse valor define o URL da página do AEM e, portanto, deve corresponder ao último segmento da rota do SPA

Essas duas páginas do AEM contêm o respectivo conteúdo criado para suas rotas de SPA correspondentes. Se outras rotas de SPA exigirem criação, as novas Páginas do AEM deverão ser criadas na URL do SPA na página raiz da página do SPA Remoto (/content/wknd-app/us/en/home) no AEM.

Atualizar o aplicativo WKND

Vamos colocar o componente <ResponsiveGrid...> criado no último capítulo, em nosso componente SPA AdventureDetail, criando um contêiner editável.

Coloque o componente SPA ResponsiveGrid

Colocar o <ResponsiveGrid...> no componente AdventureDetail cria um contêiner editável nessa rota. O truque é porque várias rotas usam o componente AdventureDetail para renderizar, devemos ajustar dinamicamente o atributo <ResponsiveGrid...>'s pagePath. O pagePath deve ser derivado para apontar para a página do AEM correspondente, com base na aventura que a instância da rota exibe.

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

  2. Importe o componente ResponsiveGrid e coloque-o acima do componente <h2>Itinerary</h2>.

  3. Defina os seguintes atributos no componente <ResponsiveGrid...>. Observe que o atributo pagePath adiciona a slug atual, que mapeia para a página de aventura de acordo com o mapeamento definido acima.

    1. pagePath = '/content/wknd-app/us/en/home/adventure/${slug}'
    2. itemPath = 'root/responsivegrid'

    Isso instrui o componente ResponsiveGrid a recuperar seu conteúdo do recurso AEM:

    1. /content/wknd-app/us/en/home/adventure/${slug}/jcr:content/root/responsivegrid

Atualizar AdventureDetail.js com as seguintes linhas:

...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...

function AdventureDetailRender(props) {
    ...
    // Get the slug from the React route parameter, this will be used to specify the AEM Page to store/read editable content from
    const { slug } = useParams();

    return(
        ...
        // Pass the slug in
        function AdventureDetailRender({ title, primaryImage, activity, adventureType, tripLength,
                groupSize, difficulty, price, description, itinerary, references, slug }) {
            ...
            return (
                ...
                <ResponsiveGrid
                    pagePath={`/content/wknd-app/us/en/home/adventure/${slug}`}
                    itemPath="root/responsivegrid"/>

                <h2>Itinerary</h2>
                ...
            )
        }
    )
}

O arquivo AdventureDetail.js deve ser semelhante a:

AdventureDetail.js

Criar o contêiner no AEM

Com o <ResponsiveGrid...> em vigor e seu pagePath definido dinamicamente com base na aventura que está sendo renderizada, tentamos criar conteúdo nele.

  1. Faça logon no AEM Author

  2. Navegue até Sites > Aplicativo WKND > us > en

  3. Editar a Página inicial do Aplicativo WKND

    1. Navegue até a rota Campo de Surf de Bali no SPA para editá-la

  4. Selecione Visualizar no seletor de modo no canto superior direito

  5. Toque no cartão Campo de Surf de Bali no SPA para navegar até sua rota

  6. Selecione Editar no seletor de modo

  7. Localize a área editável Contêiner de layout logo acima do Itinerário

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

  9. Arraste alguns dos componentes habilitados para o Contêiner de layout

    1. Imagem
    2. Texto
    3. Título

    E criar algum material de marketing promocional. Pode ser semelhante a:

    Criação de Detalhes de Aventura de Bali

  10. Visualizar suas alterações no Editor de páginas do AEM

  11. Atualize o aplicativo WKND em execução localmente em http://localhost:3000, navegue até a rota Campo de Surf de Bali para ver as alterações criadas!

    Bali de SPA Remoto

Ao navegar para uma rota de detalhes de aventura que não tem uma Página do AEM mapeada, não há capacidade de criação nessa instância de rota. Para habilitar a criação nessas páginas, basta criar uma Página do AEM com o nome correspondente na página Aventura!

Parabéns!

Parabéns! Você adicionou a capacidade de criação a rotas dinâmicas no SPA!

  • Adição do componente ResponsiveGrid do componente editável do AEM React a uma rota dinâmica
  • Páginas do AEM criadas para dar suporte à criação de duas rotas específicas no SPA (Campo de surf de Bali e Beervana em Portland)
  • Conteúdo criado na rota dinâmica do Campo de Surf de Bali!

Agora você concluiu a exploração das primeiras etapas de como o Editor SPA do AEM pode ser usado para adicionar áreas editáveis específicas a um SPA remoto!

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