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.
O recurso Editor de aplicativos de página única (SPA) requer AEM Service Pack 2 ou mais recente do 6.4.
O Editor de SPA é a solução recomendada para projetos que exigem renderização do cliente baseada em SPA estrutura (por exemplo, Reagir ou Angular).
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:
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.
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
:
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.
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
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.
Você pode entender o fluxo da interação entre o SPA e o AEM pensando no Editor SPA como um mediador entre os dois.
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.
SPA Editor é carregado.
SPA é carregado em um quadro separado.
SPA solicita conteúdo JSON e renderiza componentes do lado do cliente.
SPA Editor detecta componentes renderizados e gera sobreposições.
O autor clica em sobreposição, exibindo a barra de ferramentas de edição do componente.
SPA Editor persiste as edições com uma solicitação de POST para o servidor.
SPA solicitações do Editor atualizaram o JSON para o SPA Editor, que é enviado para o SPA com um Evento DOM.
SPA renderiza novamente o componente em questão, atualizando seu DOM.
Lembre-se:
Esta é uma visão geral mais detalhada da interação cliente-servidor ao editar um SPA.
O SPA inicializa-se e solicita o modelo de página do Exportador do Modelo Sling.
O Exportador do Modelo Sling solicita os recursos que compõem a página do repositório.
O repositório retorna os recursos.
O Exportador do Modelo Sling retorna o modelo da página.
O SPA instancia seus componentes com base no modelo de página.
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.
Quando o autor edita um componente, o editor de páginas publica 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ágina 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 do Modelo 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 de modelo de página.
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.
Esta é uma visão geral mais detalhada que foca na experiência de criação.
O SPA busca o modelo de página.
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.
O orquestrador do componente query o mapeamento entre um tipo de recurso AEM e um componente SPA.
O orquestrador de componentes instancia dinamicamente o componente SPA com base no modelo de página e no mapeamento de componentes.
O editor de páginas atualiza o modelo de página.
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.
O orquestrador de componentes obtém o mapeamento de componentes.
O orquestrador de componentes atualiza o conteúdo da página.
Quando o SPA concluir a atualização do conteúdo da página, o editor de páginas carregará o ambiente de criação.
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.
O SPA Editor SDK oferece suporte às seguintes versões mínimas:
As versões anteriores dessas estruturas podem funcionar com o AEM SPA Editor SDK, mas não são compatíveis.
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.
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.
Se você quiser usar o editor no local de um componente de texto criado no SPA, será necessária uma configuração adicional.
<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 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.
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: