Aplicativos de página única (SPAs) podem oferecer experiências interessantes para usuários de sites. Os desenvolvedores desejam criar sites usando estruturas de SPA, e os autores desejam editar o conteúdo de um site criado usando essas estruturas diretamente no AEM.
O editor de SPA oferece uma solução abrangente para permitir o uso de SPAs no AEM. Esta página fornece uma visão geral de como o suporte do SPA é estruturado no AEM, como o Editor de SPA funciona e como a estrutura de SPA e AEM permanece sincronizada.
O Editor de SPA é a solução recomendada para projetos que exigem renderização no lado do cliente baseada na estrutura SPA (por exemplo, React ou Angular).
Sites criados usando estruturas de SPA comuns, como React e Angular, carregam seu conteúdo dinamicamente via JSON e não fornecem a estrutura de HTML necessária para que o editor de página do AEM possa estabelecer 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.
A compatibilidade com SPA no AEM apresenta uma camada de JS sutil que interage com o código JS do SPA quando ele é carregado no editor de página através do qual os eventos podem ser enviados, sendo assim, o local dos controles de edição pode ser ativado para permitir a edição de acordo com o contexto. Esse recurso tem como base o conceito do ponto de acesso da API de serviços de conteúdo, pois o conteúdo do SPA precisa ser carregado por meio dos serviços de conteúdo.
Para obter mais detalhes sobre SPAs no AEM, consulte os seguintes documentos:
O componente de página para um SPA não fornece os elementos HTML de seus componentes filho por meio do arquivo JSP ou HTL. Esta operação é delegada na estrutura de SPA. A representação de componentes ou modelos filhos é buscada como uma estrutura de dados JSON do 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 contrapartes não SPA.
A resolução e o gerenciamento do modelo de página são delegados a uma biblioteca PageModel
. O SPA deve usar a biblioteca Modelo de página para ser inicializado e criado pelo editor de SPA. A biblioteca de Modelos de página fornecida indiretamente ao componente Página de AEM por meio do npm aem-react-editable-components
. O Modelo de página é um interpretador 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 adicionado para habilitar a comunicação com o editor de páginas.
Se o componente Página de SPA herda do componente principal da página, há duas opções para criar a categoria de biblioteca de clientes cq.authoring.pagemodel.messaging
disponível:
customfooterlibs.html
.Para cada recurso no modelo exportado, o SPA mapeia um componente real que faz a
renderização. O modelo, representado como JSON, é renderizado usando os mapeamentos de componente em um contêiner.
A inclusão da categoria cq.authoring.pagemodel.messaging
deve ser limitada ao contexto do editor de SPA.
Quando a categoria cq.authoring.pagemodel.messaging
é adicionada à página, ela envia uma mensagem para o 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 end-points do modelo do Sling de um componente. Depois que uma atualização ocorre no editor de páginas, a representação JSON do componente atualizado é enviada para a biblioteca do Modelo de página. A biblioteca do Modelo de página informa ao SPA de atualizações.
Você pode entender o fluxo da interação entre o SPA e o AEM pensando no editor de SPA como um mediador entre os dois.
Lembrando os elementos principais do editor de SPA, o fluxo de trabalho de alto nível da edição de um SPA no AEM é exibido ao autor da seguinte maneira.
Lembre-se:
É uma visão geral mais detalhada da interação cliente-servidor ao editar um SPA.
O SPA é inicializado e solicita o modelo de página do Exportador de modelo do Sling.
O Exportador de modelo do Sling solicita os recursos que compõem a página do repositório.
O repositório retorna os recursos.
O Exportador de modelo do Sling retorna o modelo da página.
O SPA instancia seus componentes com base no modelo da página.
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 do componente.
6c O editor de páginas recebe as configurações do componente.
Quando o autor edita um componente, o editor de páginas posta uma solicitação de modificação no servlet POST padrão.
O recurso é atualizado no repositório.
O recurso atualizado é fornecido ao servlet POST.
O servlet POST padrão informa ao editor de páginas que o recurso foi atualizado.
O editor de páginas solicita o novo modelo de página.
Os recursos que compõem a página são solicitados do repositório.
Os recursos que compõem a página são fornecidos pelo repositório ao Exportador de modelo do Sling.
O modelo de página atualizado é retornado ao editor.
O editor de páginas atualiza a referência do modelo de página do SPA.
O SPA atualiza seus componentes com base na nova referência do modelo de página.
As configurações de componentes dos editores de página são atualizadas.
17a O SPA sinaliza ao editor de páginas que o conteúdo está pronto.
17b O editor de páginas fornece o SPA com configurações de componentes.
17c O SPA fornece configurações atualizadas do componente.
É uma visão geral mais detalhada que se concentra na experiência de criação.
O SPA busca o modelo da página.
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.
O orquestrador de componentes consulta o mapeamento entre um tipo de recurso do AEM e um componente do SPA.
O orquestrador de componentes instancia dinamicamente o componente do SPA com base no modelo de página e no mapeamento de componentes.
O editor de páginas atualiza o modelo de página.
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 alterações no orquestrador de componentes.
O orquestrador de componentes busca o mapeamento de componentes.
O orquestrador de componentes atualiza o conteúdo da página.
Quando o SPA conclui a atualização do conteúdo da página, o editor de páginas carrega o ambiente de criação.
Para permitir que o autor use o editor de páginas para editar o conteúdo de um SPA, o aplicativo SPA deve ser implementado para interagir com o SDK do Editor de SPA do AEM. Consulte SPA Introdução ao AEM pelo mínimo que você precisa saber para que o seu funcione.
O SDK do Editor de SPA é compatível com as seguintes versões mínimas:
As versões anteriores dessas estruturas podem funcionar com o SDK do Editor de SPA do AEM, mas não são compatíveis.
Estruturas de SPA adicionais podem ser implementadas para funcionar com o SDK do Editor de SPA de AEM. Consulte a Blueprint SPA para os requisitos que uma estrutura deve atender para criar uma camada específica da estrutura composta por módulos, componentes e serviços para trabalhar com o Editor de SPA AEM.
Seletores personalizados adicionais podem ser definidos e usados como parte de um SPA desenvolvido para o SDK de SPA do AEM. No entanto, este apoio exige que a model
ser o primeiro seletor e a extensão ser .json
as exigido pelo Exportador JSON.
Se você quiser usar o editor local de um componente de texto criado no SPA, há uma configuração adicional necessária.
<div>
e o seletor que foi usado é data-rte-editelement
.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 Conteúdo de amostra do diário WKND.
Para obter mais informações sobre a propriedade editElementQuery
e a configuração do editor de rich text, consulte Configurar o Editor de rich text.
O AEM SPA Editor SDK foi introduzido com o AEM 6.4 service pack 2. Ele é totalmente suportado pelo Adobe e continua sendo aprimorado e expandido. Os seguintes recursos do AEM ainda não são compatíveis com o Editor de SPA: