Panoramica dell'editor SPA

Le applicazioni a pagina singola (SPA) possono offrire esperienze coinvolgenti agli utenti di siti Web. Gli sviluppatori desiderano essere in grado di creare siti utilizzando SPA framework e gli autori desiderano modificare i contenuti all'interno di AEM per un sito creato utilizzando tali framework.

SPA Editor offre una soluzione completa per SPA di supporto in AEM. In questa pagina viene fornita una panoramica di come SPA supporto è strutturato in AEM, come funziona l’Editor SPA, e di come il framework SPA e AEM mantengono la sincronizzazione.

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 affinché l’Editor pagina AEM possa inserire controlli di modifica.

Per abilitare la modifica di SPA all'interno di AEM, è necessario un mapping tra l'output JSON del SPA e il modello di contenuto nel repository AEM per salvare le modifiche al contenuto.

SPA supporto in AEM introduce un sottile livello JS che interagisce con il codice JS SPA 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 del SPA deve essere caricato tramite Content Services.

Per ulteriori dettagli sulle SPA in AEM, consulta i documenti seguenti:

• SPA Blueprintfor per i requisiti tecnici di un SPA
• Guida introduttiva alle SPA in AEM per una breve presentazione di un semplice SPA

Progettazione

Il componente della pagina per un SPA non fornisce gli elementi HTML dei suoi 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 quella SPA.

Gestione dei modelli di pagina

La risoluzione e la gestione del modello di pagina sono delegate a una PageModel libreria fornita. Per poter essere inizializzata e creata dall'editor SPA, il SPA deve utilizzare la libreria Modello pagina. La libreria Modello pagina viene fornita indirettamente al componente Pagina AEM tramite il file npm aem-react-editable-components. Il Modello pagina è un interprete tra AEM e il SPA e pertanto deve essere sempre presente. Quando la pagina viene creata, è necessario aggiungere una libreria aggiuntiva cq.authoring.pagemodel.messaging per abilitare la comunicazione con l'editor pagina.

Se il componente SPA pagina eredita dal componente core della pagina, sono disponibili due opzioni per rendere disponibile la categoria della libreria client cq.authoring.pagemodel.messaging:

• Se il modello è modificabile, aggiungetelo al criterio pagina.
• Oppure aggiungete le categorie utilizzando il simbolo customfooterlibs.html.

Per ogni risorsa nel modello esportato, il SPA mapperà un componente effettivo che eseguirà la
rendering. Il modello, rappresentato come JSON, viene quindi rappresentato utilizzando le mappature dei componenti all'interno di un contenitore.

Tipo di dati di comunicazione

Quando la categoria cq.authoring.pagemodel.messaging 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 il SPA degli aggiornamenti.

Flusso di lavoro

Potete 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 il SPA viene effettuata utilizzando JSON invece di HTML.
• L'Editor pagina fornisce la versione più recente del modello di pagina al SPA 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 dell'editor SPA

Tenendo presenti gli elementi chiave dell’Editor SPA, il flusso di lavoro di alto livello per la modifica di un SPA in AEM 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. SPA Editor 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. SPA Editor richiede un JSON aggiornato all’editor SPA, che viene inviato al SPA con un evento DOM.

8. SPA il rendering del componente interessato, aggiornandone il DOM.

Flusso di lavoro di modifica delle pagine client-server

Questa è una panoramica più dettagliata dell'interazione client-server durante la modifica di un SPA.

1. Il SPA inizializza se stesso 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. Il SPA crea un'istanza dei componenti in base al modello di pagina.

6. 6 aIl contenuto informa l’editor che è pronto per l’authoring.

   6 bL’editor di pagina richiede le configurazioni di authoring dei componenti.

   6 cL’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 del SPA.

16. Il SPA aggiorna i propri componenti in base al nuovo riferimento al modello di pagina.

17. Le configurazioni dei componenti degli editor di pagina vengono aggiornate.

    17 aIl SPA segnala all’editor di pagina che il contenuto è pronto.

    17 bL’editor pagina fornisce al SPA le configurazioni dei componenti.

    17 cIl SPA fornisce configurazioni aggiornate dei componenti.

Flusso di lavoro di authoring

Questa è una panoramica più dettagliata che si concentra sull’esperienza di authoring.

1. Il SPA recupera il modello di pagina.

2. 2 aIl modello di pagina fornisce all’editor i dati necessari per l’authoring.

   2 bQuando viene notificato, l’orchestratore di componenti aggiorna la struttura del contenuto della pagina.

3. L'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. 6 aIl modello di pagina fornisce dati di authoring aggiornati all’editor pagina.

   6 bIl 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. Al termine dell’SPA, 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 SPA, l’applicazione SPA deve essere implementata per interagire con l’SDK AEM SPA Editor. Per informazioni sul funzionamento, vedere la Guida introduttiva alle SPA in AEM.

Framework supportati

L’SDK di SPA Editor 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 dell’editor SPA AEM, ma non sono supportate.

Framework aggiuntivi

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

Utilizzo di più selettori

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

Requisiti dell'editor di testo

Per 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 elemento <div> e il selettore utilizzato è data-rte-editelement.
2. Impostate la configurazione editElementQuery sull'elemento cq:InplaceEditingConfig del componente di testo AEM corrispondente che punta 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 viene fatto, vedere il contenuto di esempio di WKND Journal.

Per ulteriori informazioni sulla proprietà editElementQuery e sulla configurazione dell'editor Rich Text, vedere Configurare l'Editor Rich Text.

Limitazioni

L’SDK dell’editor SPA AEM è stato introdotto con AEM 6.4 service pack 2. È completamente supportato da Adobe, e come nuova funzione continua ad essere migliorato ed espanso. Le seguenti funzioni AEM non sono ancora coperte 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

Risorse Business.Adobe.com

Auto Text Summarization Customer Communications Version History Customer Experience Management Content Management Headless Cms