DEV Community

Beatriz Maciel
Beatriz Maciel

Posted on

Desenvolvendo um SPA editável no AEM

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

AEM SPA Editor

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

Deployinh a project to 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

Creating Page Components

Criando uma Página Editável

Creating Editable Page

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.

Page Editing Workflow

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

Discussion (0)