Visão Geral do Editor de SPA

Aplicativos de página única (SPA) podem oferta experiências interessantes para usuários de sites. 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 de SPA oferta uma solução abrangente para suporte a SPA no AEM. Esta página fornece uma visão geral de como o suporte SPA é estruturado em AEM, como o Editor de SPA funciona e como a estrutura SPA e AEM permanecem sincronizadas.

Introdução

Os sites criados usando estruturas de 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 AEM possa colocar controles de edição.

Para habilitar a edição de SPA 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.

SPA suporte no AEM introduz uma fina camada JS que interage com o código JS SPA 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 Endpoint da API do Content Services, pois o conteúdo do SPA precisa ser carregado pelo Content Services.

Para obter mais detalhes sobre SPA em AEM, consulte os seguintes documentos:

• SPA Blueprintin para os requisitos técnicos de um SPA
• Introdução ao SPA no AEMpara um rápido tour de uma 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 SPA são adicionados à página de acordo com essa estrutura. Esse comportamento diferencia a composição inicial do corpo 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 biblioteca PageModel fornecida. O SPA deve usar a biblioteca do Modelo de página para ser inicializado e criado pelo Editor de SPA. A biblioteca do Modelo de página foi fornecida indiretamente para o componente Página AEM por meio de 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 de biblioteca do cliente cq.authoring.pagemodel.messaging:

• Se o modelo for editável, adicione-o à política de página.
• Ou adicione as categorias usando 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 categoria cq.authoring.pagemodel.messaging 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 a SPA de 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áginas 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 Básico do Editor de SPA

Tendo em mente os elementos principais do Editor de 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. SPA Editor é carregado.

2. SPA é carregado em um quadro separado.

3. SPA solicita conteúdo JSON e renderiza componentes do lado do cliente.

4. SPA Editor 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. SPA Editor persiste as edições com uma solicitação de POST para o servidor.

7. SPA solicitações do Editor atualizaram o JSON para o SPA Editor, que é enviado para o SPA com um Evento DOM.

8. 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 do 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. 6 aO conteúdo informa ao editor que está pronto para criação.

   6 bO editor de páginas solicita as configurações de criação de componentes.

   6 cO 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.

    17 aO SPA sinaliza ao editor de página que o conteúdo está pronto.

    17 bO editor de páginas fornece ao SPA configurações de componentes.

    17 cO 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. 2 aO modelo de página fornece ao editor os dados necessários para a criação.

   2 bQuando 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. 6 aO modelo de página fornece dados de criação atualizados para o editor de página.

   6 bO 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 AEM SPA Editor SDK. Consulte Introdução ao SPA no documento AEM para obter o mínimo necessário para a sua execução.

Estruturas suportadas

O SPA Editor SDK 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 de SPA adicionais podem ser implementadas para trabalhar com o SDK do AEM SPA Editor. Consulte o documento SPA Blueprint para obter 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 AEM SPA Editor.

Usando vários seletores

Seletores personalizados adicionais podem ser definidos e usados como parte de um SPA desenvolvido para o SDK de SPA AEM. No entanto, esse suporte requer que o seletor model seja o primeiro seletor e a extensão seja .json como 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, será necessária uma configuração adicional.

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 elemento <div> e o seletor que foi usado é data-rte-editelement.
2. Defina a configuração editElementQuery no cq:InplaceEditingConfig do componente de texto AEM correspondente que aponta para esse seletor, por exemplo data-rte-editelement. Isso permite que o editor saiba qual elemento HTML envolve o texto HTML.

Para obter um exemplo de como isso é feito, consulte o conteúdo de amostra do Journal WKND.

Para obter informações adicionais sobre a propriedade editElementQuery e a configuração do editor de Rich Text, consulte Configurar o Editor de Rich Text.

Limitações

O AEM SPA Editor SDK foi apresentado com o 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 de 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