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 querem ser capazes de criar sites usando estruturas SPA e os autores querem editar o conteúdo no AEM para um site criado usando essas estruturas.

O Editor SPA oferta uma solução abrangente para suportar SPAs dentro do AEM. Esta página fornece uma visão geral de como o suporte a SPA é estruturado em AEM, como o Editor SPA funciona e como a estrutura SPA e AEM permanecem sincronizados.

Introdução

Os sites criados usando estruturas SPA comuns, como React e Angular, carregam seu conteúdo por JSON dinâmico e não fornecem a estrutura HTML necessária para que o Editor de páginas 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 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:

• Esquema SPA para os requisitos técnicos de um SPA
• Introdução aos SPAs em AEM para um rápido tour de um SPA simples

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 Página AEM por meio do aem-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á o
renderização. O modelo, representado como JSON, é renderizado usando os mapeamentos de componente dentro de um container.

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 estiver definido como JSON, as solicitações de GET se comunicarão com os pontos finais do Sling Model 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 elementos principais do Editor SPA, o fluxo de trabalho de alto nível de edição de um SPA dentro do 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 de 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.

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 AEM. Consulte a Introdução aos SPAs no AEM documento para obter o mínimo que você precisa saber 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 SDK do Editor SPA AEM, mas não são suportadas.

Estruturas adicionais

Estruturas SPA adicionais podem ser implementadas para funcionar com o SDK do Editor SPA 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 SPA AEM.

Uso de vários seletores

Seletores personalizados adicionais podem ser definidos e usados como parte de um SPA desenvolvido para o SDK do SPA AEM. 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 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 SDK do Editor SPA AEM foi introduzido com AEM 6.4 service pack 2. Ele é totalmente suportado pelo Adobe e, como um novo recurso, continua sendo aprimorado e expandido. Os seguintes recursos AEM ainda não são abordados 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
• AEM inicializações