SPA: Technical Overview of SPA (Single Page App) Editor
Editor AEM SPA
O Editor do AEM SPA permite que os desenvolvedores front-end a criar SPAs que podem ser integrados em um site AEM, permitindo que os autores de conteúdo a editar o conteúdo SPA tão facilmente quanto qualquer outro conteúdo AEM.
Com o Editor SPA, autores podem fazer:
- Edição de conteúdo in-context pelo AEM
- Configuração in-context dos componentes do lado do cliente
- Administração de layout (grid-based) in-context dos componentes do lado do cliente
- Composição in-context com os componentes do lado do cliente
- Criação/edição de template in-context para estados de app
SPA: Using aem-clientlib-generator
- O aem-clientlib-generator é um node plugin que transforma CSS compilado e arquivos JS do seu SPA em uma AEM Client Library
- Precisa do clientlib.config.js, que define parâmetros como: -- Source path dos arquivos .css e .js -- Export path -- Categorias da clientlibrary
SPA: Fazendo o Deploy de um Project no AEM
É necessário criar uma tag que inclua o react em um arquivo pom.xml na pasta do react-app.
Templates in SPA
- Você pode criar templates para o SPA usando o Template Editor, que define os componentes permitidos e as policies (regras) de conteúdo
- O primeiro lançamento do editor SPA tem funcionalidades de edição de template limitadas
- A funcionalidade de edição completa é esperada para futuros lançamentos do SPA Editor
Criando Page Components
Como os Page Components trabalham:
- Um page component no AEM não dispõe de elementos HTML de seus componentes "filhos" (child components)
- Um Sling Model busca a representação dos componentes filhos no formato de JSON na estrutura de dados
- O app React adiciona componentes SPA para a página AEM de acordo com o modelo JSON disponibilizado
- A Client Library chamada cq.authoring.pagemodel.messaging deve ser adicionada para permitir a comunicação entre o SPA e o editor de página
- O PageModelManager permite administrar a representação do modelo das páginas AEM que compõem o SPA
Criando uma Página Editável
Workflow de Editor de Página
- cq.authoring.pagemodel.messaging manda uma mensagem para o Page Editor para estabelecer uma comunicação com o JSON data type.
- Quando a comunicação do data type está pronta no JSON, as requisições GET (GET requests) vão se comunicar com os end-points do Sling Model de um componente.
- Depois que a atualização acontece no Page Editor, a representação do JSON do componente atualizado é mandada para o Page Model library.
Componentes no SPA Editor
- A funcionalidade dos componentes AEM é dividida no cq:component no AEM e no componente React respectivo
- Um componente em um projeto AEM, ou cq:component, disponibiliza funcionalidades como arrastar e soltar uma dialog para o componente AEM
- O componente definido no React-app disponibiliza funcionalidades para o componente
- O componente React mapeia o cq:component ou o resourceType no AEM através da função MapTo()
- Os core components sustentaram o export do JSON desde o lançamento 1.1.0
- A interface do component model deve implementar uma classe ComponentExporter
- Isso garante que seu componente pode ser exportado por conta própria, usando o seletor .model e a extensão .json.
SPA Routing in AEM
- A página model data structure expõe a URL do recurso subjacente (underlying resource)
- A página model data structure expõe a URL de todas as páginas "filhas" subjugadas ao nodo JSON
Top comments (0)