Show Menu
TÓPICOS×

Visão geral do editor SPA

Os aplicativos de página única (SPAs) podem oferta experiências interessantes para os usuários do site. Os desenvolvedores desejam criar sites usando estruturas SPA e os autores desejam editar o conteúdo no AEM sem problemas para um site criado usando essas estruturas.
O Editor SPA oferta uma solução abrangente para suportar SPAs no AEM. Esta página fornece uma visão geral de como o suporte a SPA está estruturado no AEM, como o Editor SPA funciona e como a estrutura SPA e o AEM permanecem sincronizados.
O Editor SPA é a solução recomendada para projetos que exigem renderização do lado do cliente baseada em estrutura SPA (por exemplo, Reagir ou Angular).

Introdução

Os sites criados usando estruturas SPA comuns, como React e Angular, carregam seu conteúdo por meio do JSON dinâmico e não fornecem a estrutura HTML necessária para que o Editor de página do AEM possa colocar controles de edição.
Para habilitar a edição de SPAs no AEM, é necessário um mapeamento entre a saída JSON do SPA e o modelo de conteúdo no repositório do AEM para salvar as alterações no conteúdo.
O suporte de SPA no AEM introduz uma camada fina de JS que interage com o código SPA JS quando carregado no Editor de páginas com o qual os eventos podem ser enviados e o local dos controles de edição pode ser ativado para permitir a edição no contexto. Esse recurso baseia-se no conceito de Endpoint da API do Content Services, pois o conteúdo do SPA precisa ser carregado pelos Content Services.
Para obter mais detalhes sobre os SPAs no AEM, consulte os seguintes documentos:

Design

O componente de página de um SPA não fornece os elementos HTML de seus componentes filho por meio do arquivo JSP ou HTL. Esta operação é delegada no quadro SPA. A representação dos componentes filhos ou do modelo é buscada como uma estrutura de dados JSON no JCR. Os componentes do SPA são adicionados à página de acordo com essa estrutura. Esse comportamento diferencia a composição do corpo inicial do componente de página de parceiros não SPA.

Gerenciamento do modelo de página

A resolução e o gerenciamento do modelo de página são delegados em uma PageModel biblioteca fornecida. O SPA deve usar a biblioteca do Modelo de página para ser inicializado e criado pelo Editor SPA. A biblioteca do Modelo de página foi fornecida indiretamente para o componente de Página do AEM por meio do cq-react-editable-components npm. O Modelo de página é um intérprete entre o AEM e o SPA e, portanto, sempre deve estar presente. Quando a página é criada, uma biblioteca adicional cq.authoring.pagemodel.messaging deve ser adicionada para permitir a comunicação com o editor de página.
Se o componente de página SPA herdar do componente principal da página, há duas opções para disponibilizar a categoria da biblioteca do cq.authoring.pagemodel.messaging cliente:
  • Se o modelo for editável, adicione-o à política de página.
  • Ou adicione as categorias usando o customfooterlibs.html .
Para cada recurso no modelo exportado, o SPA mapeará um componente real que fará a renderização. O modelo, representado como JSON, é renderizado usando os mapeamentos de componente dentro de um container.
A inclusão da cq.authoring.pagemodel.messaging categoria deve ser limitada ao contexto do Editor SPA.

Tipo de dados de comunicação

Quando a cq.authoring.pagemodel.messaging categoria for adicionada à página, ela enviará uma mensagem ao Editor de páginas para estabelecer o tipo de dados de comunicação JSON. Quando o tipo de dados de comunicação é definido como JSON, as solicitações GET se comunicam com os pontos finais do Modelo Sling de um componente. Depois que uma atualização ocorre no editor de página, a representação JSON do componente atualizado é enviada para a biblioteca do Modelo de página. A biblioteca do Modelo de página informa o SPA sobre atualizações.

Fluxo de trabalho

Você pode entender o fluxo da interação entre o SPA e o AEM pensando no Editor SPA como um mediador entre os dois.
  • A comunicação entre o editor de página e o SPA é feita usando JSON em vez de HTML.
  • O editor de página fornece a versão mais recente do modelo de página para o SPA por meio da API de iframe e mensagens.
  • O gerenciador de modelo de página notifica o editor de que está pronto para edição e transmite o modelo de página como uma estrutura JSON.
  • O editor não altera ou nem acessa a estrutura DOM da página que está sendo criada, em vez de fornecer o modelo de página mais recente.

Fluxo de trabalho do editor SPA básico

Lembrando-se dos principais elementos do Editor SPA, o fluxo de trabalho de alto nível de edição de um SPA no AEM é exibido ao autor da seguinte maneira.
  1. O Editor SPA é carregado.
  2. O SPA é carregado em um quadro separado.
  3. O SPA solicita conteúdo JSON e renderiza componentes do lado do cliente.
  4. O Editor SPA detecta componentes renderizados e gera sobreposições.
  5. O autor clica em sobreposição, exibindo a barra de ferramentas de edição do componente.
  6. O Editor SPA persiste nas edições com uma solicitação POST para o servidor.
  7. As solicitações do Editor SPA atualizaram o JSON para o Editor SPA, que é enviado para o SPA com um Evento DOM.
  8. O SPA renderiza novamente o componente em questão, atualizando seu DOM.
Lembre-se:
  • O SPA é sempre responsável pela exibição.
  • O Editor SPA é isolado do próprio SPA.
  • Em produção (publicação), o editor SPA nunca é carregado.

Fluxo de trabalho de edição de página do cliente-servidor

Esta é uma visão geral mais detalhada da interação cliente-servidor ao editar um SPA.
  1. O SPA inicializa-se e solicita o modelo de página do Exportador de Modelo Sling.
  2. O Exportador do Modelo Sling solicita os recursos que compõem a página do repositório.
  3. O repositório retorna os recursos.
  4. O Exportador do Modelo Sling retorna o modelo da página.
  5. O SPA instancia seus componentes com base no modelo de página.
  6. 6a O conteúdo informa ao editor que está pronto para criação.
    6b O editor de páginas solicita as configurações de criação de componentes.
    6c O editor de páginas recebe as configurações de componentes.
  7. Quando o autor edita um componente, o editor de páginas publica uma solicitação de modificação no servlet POST padrão.
  8. O recurso é atualizado no repositório.
  9. O recurso atualizado é fornecido ao servlet POST.
  10. O servlet POST padrão informa ao editor de página que o recurso foi atualizado.
  11. O editor de páginas solicita o novo modelo de página.
  12. Os recursos que compõem a página são solicitados do repositório.
  13. Os recursos que compõem a página são fornecidos pelo repositório ao Exportador do Modelo Sling.
  14. O modelo de página atualizado é retornado ao editor.
  15. O editor de páginas atualiza a referência do modelo de página do SPA.
  16. O SPA atualiza seus componentes com base na nova referência de modelo de página.
  17. As configurações de componentes dos editores de página são atualizadas.
    17a O SPA sinaliza ao editor de página que o conteúdo está pronto.
    17b O editor de páginas fornece ao SPA configurações de componentes.
    17c O SPA fornece configurações de componentes atualizadas.

Fluxo de trabalho de criação

Esta é uma visão geral mais detalhada que foca na experiência de criação.
  1. O SPA busca o modelo de página.
  2. 2a O modelo de página fornece ao editor os dados necessários para a criação.
    2b Quando notificado, o orquestrador de componentes atualiza a estrutura de conteúdo da página.
  3. O orquestrador do componente query o mapeamento entre um tipo de recurso AEM e um componente SPA.
  4. O orquestrador de componentes instancia dinamicamente o componente SPA com base no modelo de página e no mapeamento de componentes.
  5. O editor de páginas atualiza o modelo de página.
  6. 6a O modelo de página fornece dados de criação atualizados para o editor de página.
    6b O modelo de página despacha as alterações no orquestrador do componente.
  7. O orquestrador de componentes obtém o mapeamento de componentes.
  8. O orquestrador de componentes atualiza o conteúdo da página.
  9. Quando o SPA concluir a atualização do conteúdo da página, o editor de páginas carregará o ambiente de criação.

Requisitos e limitações

Para permitir que o autor use o editor de página para editar o conteúdo de um SPA, seu aplicativo SPA deve ser implementado para interagir com o SDK do editor SPA do AEM. Consulte Introdução aos SPAs no documento AEM para obter o mínimo necessário para executar o seu.

Estruturas suportadas

O SDK do Editor SPA oferece suporte às seguintes versões mínimas:
  • Reagir 16.x e acima
  • Angular 6.x e superior
As versões anteriores dessas estruturas podem funcionar com o AEM SPA Editor SDK, mas não são compatíveis.

Estruturas adicionais

Estruturas SPA adicionais podem ser implementadas para funcionar com o SDK do editor SPA do AEM. Consulte o documento SPA Blueprint para ver os requisitos que uma estrutura deve atender para criar uma camada específica da estrutura composta de módulos, componentes e serviços para trabalhar com o editor AEM SPA.

Uso de vários seletores

Seletores personalizados adicionais podem ser definidos e usados como parte de um SPA desenvolvido para o SDK do AEM SPA. No entanto, este suporte exige que o model seletor seja o primeiro e a extensão seja .json conforme exigido pelo Exportador JSON.

Requisitos do editor de texto

Se você quiser usar o editor no local de um componente de texto criado no SPA, há uma configuração adicional necessária.
  1. Defina um atributo (pode ser qualquer) no elemento invólucro do container que contém o texto HTML. No caso do conteúdo de amostra do Journal WKND, ele é um <div> elemento e o seletor que foi usado é data-rte-editelement .
  2. Defina a configuração editElementQuery no componente de texto do AEM correspondente cq:InplaceEditingConfig que aponta para o seletor, por exemplo data-rte-editelement . Isso permite que o editor saiba qual elemento HTML envolve o texto HTML.
Para ver um exemplo de como isso é feito, consulte o conteúdo de amostra do Journal WKND.
Para obter informações adicionais sobre a editElementQuery propriedade e a configuração do editor de Rich Text, consulte Configurar o Editor de Rich Text.

Limitações

O AEM SPA Editor SDK foi introduzido com o AEM 6.4 service pack 2. Ele é totalmente compatível com a Adobe e, como um novo recurso, continua sendo aprimorado e expandido. Os seguintes recursos de AEM ainda não são suportados pelo Editor SPA:
  • modo Público alvo
  • ContextHub
  • Edição de imagens embutidas
  • Editar configurações (por exemplo, ouvintes)
  • Sistema de estilos
  • Desfazer / Refazer
  • Distorção de hora e diff de página
  • Recursos que executam a regravação de HTML no lado do servidor, como o Verificador de links, serviço de regravação de CDN, redução de URL etc.
  • Modo de desenvolvedor
  • Inicializações do AEM