Show Menu
ARGOMENTI×

Panoramica di SPA Editor

Le applicazioni SPA (Single Page Applications) possono offrire esperienze coinvolgenti agli utenti di siti Web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando i framework SPA e gli autori desiderano modificare i contenuti all'interno AEM per un sito creato utilizzando tali framework.
L'editor SPA offre una soluzione completa per supportare gli SPA in AEM. Questa pagina fornisce una panoramica di come il supporto SPA è strutturato in AEM, come funziona l'Editor SPA, e come la struttura SPA e AEM mantenere sincronizzato.
SPA Editor è la soluzione consigliata per i progetti che richiedono il rendering lato client basato su SPA (ad esempio React o Angular).

Introduzione

I siti creati con framework SPA comuni come React e Angular caricano i propri contenuti tramite JSON dinamico e non forniscono la struttura HTML necessaria per l'Editor pagina AEM per inserire controlli di modifica.
Per abilitare la modifica degli SPA all'interno di AEM, per salvare le modifiche al contenuto è necessaria una mappatura tra l'output JSON dell'SPA e il modello di contenuto nell'archivio AEM.
Il supporto SPA in AEM introduce un sottile livello JS che interagisce con il codice SPA JS quando viene caricato nell'Editor pagina con cui gli eventi possono essere inviati e la posizione dei controlli di modifica può essere attivata per consentire la modifica contestuale. Questa funzione si basa sul concetto di endpoint API di Content Services, in quanto il contenuto dell'API deve essere caricato tramite Content Services.
Per ulteriori dettagli sulle ZPS in AEM, consulta i seguenti documenti:

Progettazione

Il componente di pagina per un’app SPA non fornisce gli elementi HTML dei componenti secondari tramite il file JSP o HTL. Questa operazione è delegata al framework SPA. La rappresentazione dei componenti secondari o del modello viene recuperata come struttura di dati JSON dal JCR. I componenti SPA vengono quindi aggiunti alla pagina in base a tale struttura. Questo comportamento distingue la composizione iniziale del corpo del componente della pagina da quelle non-SPA.

Gestione dei modelli di pagina

La risoluzione e la gestione del modello di pagina sono delegate a una PageModel libreria specificata. Per poter essere inizializzata e creata dall’editor SPA, l’SPA deve utilizzare la libreria Modello pagina. Libreria Modello pagina fornita indirettamente al componente Pagina AEM tramite aem-react-editable-components npm. Il Modello pagina è un interprete tra AEM e l'SPA e pertanto deve essere sempre presente. Quando la pagina viene creata, cq.authoring.pagemodel.messaging deve essere aggiunta una libreria aggiuntiva per abilitare la comunicazione con l’editor pagina.
Se il componente della pagina SPA eredita dal componente core della pagina, sono disponibili due opzioni per rendere disponibile la categoria della libreria cq.authoring.pagemodel.messaging client:
  • Se il modello è modificabile, aggiungetelo al criterio pagina.
  • Oppure aggiungete le categorie utilizzando l'icona customfooterlibs.html .
Per ogni risorsa nel modello esportato, l’area di protezione dati mappa un componente effettivo che eseguirà il rendering. Il modello, rappresentato come JSON, viene quindi rappresentato utilizzando le mappature dei componenti all'interno di un contenitore.
L'inclusione della cq.authoring.pagemodel.messaging categoria dovrebbe essere limitata al contesto dell'editor SPA.

Tipo di dati di comunicazione

Quando la cq.authoring.pagemodel.messaging categoria viene aggiunta alla pagina, invia un messaggio all’Editor pagina per stabilire il tipo di dati di comunicazione JSON. Quando il tipo di dati di comunicazione è impostato su JSON, le richieste di GET comunicano con i punti finali del modello Sling di un componente. Quando si verifica un aggiornamento nell’editor di pagina, la rappresentazione JSON del componente aggiornato viene inviata alla libreria Modello pagina. La libreria Modello pagina informa quindi l'SPA degli aggiornamenti.

Flusso di lavoro

È possibile comprendere il flusso dell'interazione tra SPA e AEM pensando all'editor SPA come mediatore tra i due.
  • La comunicazione tra l’editor pagina e l’SPA viene effettuata utilizzando JSON invece di HTML.
  • L'Editor pagina fornisce all'SPA la versione più recente del modello di pagina tramite l'API iframe e messaging.
  • Il manager del modello di pagina notifica all’editor che è pronto per essere pubblicato e trasmette il modello di pagina come struttura JSON.
  • L’editor non modifica o non accede neanche alla struttura DOM della pagina in fase di creazione, ma fornisce il modello di pagina più recente.

Flusso di lavoro di base per l'editor SPA

Tenendo presente gli elementi chiave dell'editor SPA, il flusso di lavoro di alto livello per la modifica di un'app AEM all'interno dell'app viene visualizzato all'autore come segue.
  1. Viene caricato SPA Editor.
  2. SPA viene caricato in un frame separato.
  3. SPA richiede il contenuto JSON ed esegue il rendering dei componenti lato client.
  4. L’editor SPA rileva i componenti sottoposti a rendering e genera sovrapposizioni.
  5. L’autore fa clic su sovrapposizione e visualizza la barra degli strumenti di modifica del componente.
  6. SPA Editor persiste nelle modifiche con una richiesta di POST al server.
  7. L'editor SPA richiede l'aggiornamento di JSON all'Editor SPA, che viene inviato all'SPA con un evento DOM.
  8. SPA esegue di nuovo il rendering del componente interessato, aggiornando il suo DOM.
Ricorda:
  • L'SPA è sempre responsabile del suo display.
  • L'Editor SPA è isolato dall'SPA stessa.
  • In produzione (pubblicazione), l'editor SPA non viene mai caricato.

Flusso di lavoro di modifica delle pagine client-server

Questa è una panoramica più dettagliata dell'interazione client-server durante la modifica di una SPA.
  1. SPA si inizializza e richiede il modello di pagina da Sling Model Exporter.
  2. Sling Model Exporter richiede le risorse che compongono la pagina dalla directory archivio.
  3. Il repository restituisce le risorse.
  4. Sling Model Exporter restituisce il modello della pagina.
  5. L’SPA crea un’istanza dei suoi componenti in base al modello di pagina.
  6. 6a Il contenuto informa l’editor che è pronto per l’authoring.
    6b L’editor pagina richiede le configurazioni di authoring dei componenti.
    6c L’editor pagina riceve le configurazioni dei componenti.
  7. Quando l’autore modifica un componente, l’editor pagina invia una richiesta di modifica al servlet POST predefinito.
  8. La risorsa viene aggiornata nella directory archivio.
  9. La risorsa aggiornata viene fornita al servlet POST.
  10. Il servlet POST predefinito informa l’editor di pagina che la risorsa è stata aggiornata.
  11. L’editor pagina richiede il nuovo modello di pagina.
  12. Le risorse che compongono la pagina vengono richieste dalla directory archivio.
  13. Le risorse che compongono la pagina vengono fornite dalla directory archivio di Sling Model Exporter.
  14. Il modello di pagina aggiornato viene restituito all’editor.
  15. L’editor pagina aggiorna il riferimento del modello di pagina dell’area di protezione.
  16. L’area SPA aggiorna i suoi componenti in base al nuovo riferimento al modello di pagina.
  17. Le configurazioni dei componenti degli editor di pagina vengono aggiornate.
    17a L'SPA segnala all'editor di pagina che il contenuto è pronto.
    17b L’editor pagina fornisce all’SPA configurazioni di componenti.
    17c L'SPA fornisce configurazioni di componenti aggiornate.

Flusso di lavoro di authoring

Questa è una panoramica più dettagliata che si concentra sull’esperienza di authoring.
  1. L’SPA recupera il modello di pagina.
  2. 2a Il modello di pagina fornisce all’editor i dati necessari per l’authoring.
    2b Quando viene notificato, il orchestratore di componenti aggiorna la struttura del contenuto della pagina.
  3. Il orchestratore di componenti esegue una query sulla mappatura tra un tipo di risorsa AEM e un componente SPA.
  4. L’orchestrazione di componenti crea dinamicamente un’istanza del componente SPA in base al modello di pagina e alla mappatura del componente.
  5. L’editor pagina aggiorna il modello di pagina.
  6. 6a Il modello di pagina fornisce dati di authoring aggiornati all’editor pagina.
    6b Il modello di pagina invia le modifiche all’orchestrazione dei componenti.
  7. L’orchestrazione dei componenti recupera la mappatura dei componenti.
  8. Il orchestratore di componenti aggiorna il contenuto della pagina.
  9. Una volta completato l’aggiornamento del contenuto della pagina da parte dell’API, l’editor pagina carica l’ambiente di authoring.

Requisiti e limitazioni

Per consentire all’autore di utilizzare l’editor pagina per modificare il contenuto di un’app SPA, l’applicazione SPA deve essere implementata per interagire con l’SDK dell’AEM SPA Editor. Consulta la Guida introduttiva agli SPA in AEM documento per ottenere il minimo necessario per l'esecuzione.

Framework supportati

L’SDK per l’editor SPA supporta le seguenti versioni minime:
  • 16.x e versioni successive
  • Angular 6.x e superiore
Le versioni precedenti di questi framework potrebbero funzionare con l’SDK AEM SPA Editor, ma non sono supportate.

Framework aggiuntivi

Possono essere implementati altri framework SPA per l'utilizzo con l'SDK AEM SPA Editor. Consultate il documento SPA Blueprint per i requisiti che un framework deve soddisfare per creare un livello specifico del framework composto da moduli, componenti e servizi per l'utilizzo con l'editor SPA AEM.

Utilizzo di più selettori

Altri selettori personalizzati possono essere definiti e utilizzati nell’ambito di un’app SPA sviluppata per AEM SPA SDK. Tuttavia, questo supporto richiede che il model selettore sia il primo e che l'estensione sia .json come richiesto da JSON Exporter.

Requisiti dell'editor di testo

Se desiderate utilizzare l’editor locale di un componente di testo creato in SPA, è necessaria una configurazione aggiuntiva.
  1. Impostate un attributo (che può essere uno qualsiasi) sull’elemento wrapper contenitore contenente il testo HTML. Nel caso del contenuto di esempio WKND Journal, si tratta di un <div> elemento e il selettore utilizzato è data-rte-editelement .
  2. Impostate la configurazione editElementQuery sul componente di testo AEM corrispondente cq:InplaceEditingConfig che punti a tale selettore, ad esempio data-rte-editelement . Questo consente all'editor di sapere quale elemento HTML racchiude il testo HTML.
Per un esempio di come avviene, consultate il contenuto di esempio WKND Journal.
Per ulteriori informazioni sulla editElementQuery proprietà e sulla configurazione dell’editor Rich Text, consultate Configurare l’Editor Rich Text.

Limitazioni

L’SDK AEM SPA Editor è stato introdotto con AEM Service Pack 2 6.4. È completamente supportato da Adobe, e come nuova funzione continua ad essere migliorato ed espanso. Le seguenti funzioni AEM non sono ancora supportate dall'editor SPA:
  • Modalità di destinazione
  • ContextHub
  • Modifica di immagini in linea
  • Modificare le configurazioni (ad esempio listener)
  • Sistema di stili
  • Annulla/Ripristina
  • Differf pagina e Alterazione ora
  • Funzioni che eseguono la riscrittura HTML lato server, come Controllo collegamenti, servizio di riscrittura CDN, riduzione URL ecc.
  • Modalità Sviluppatore
  • AEM lanci