SPA Editor - overzicht

Toepassingen op één pagina (SPA) kunnen aantrekkelijke ervaringen bieden voor websitegebruikers. Ontwikkelaars willen sites kunnen maken met behulp van SPA frameworks en auteurs willen inhoud naadloos bewerken binnen AEM voor een site die is gebouwd met behulp van dergelijke frameworks.

De SPA Editor biedt een uitgebreide oplossing voor het ondersteunen van SPA binnen AEM. Deze pagina geeft een overzicht van hoe SPA ondersteuning is gestructureerd in AEM, hoe de SPA Editor werkt en hoe het SPA framework en de AEM synchroon blijven.

Inleiding

Sites die zijn gebouwd met behulp van gemeenschappelijke SPA, zoals Reageren en Angular, laden hun inhoud via dynamische JSON en beschikken niet over de HTML-structuur die nodig is om bewerkingsbesturingselementen te kunnen plaatsen in de AEM Paginaeditor.

Om het bewerken van SPA binnen AEM mogelijk te maken, is een toewijzing tussen de JSON-uitvoer van de SPA en het inhoudsmodel in de AEM opslagplaats nodig om wijzigingen in de inhoud op te slaan.

SPA ondersteuning in AEM introduceert een dunne JS-laag die communiceert met de SPA JS-code wanneer deze wordt geladen in de Pagina-editor waarmee gebeurtenissen kunnen worden verzonden en de locatie voor de bewerkingsbesturingselementen kan worden geactiveerd om in-context bewerken mogelijk te maken. Deze eigenschap bouwt op het concept van het Eindpunt van de Diensten van de Inhoud API voort aangezien de inhoud van de SPA via de Diensten van de Inhoud moet worden geladen.

Raadpleeg de volgende documenten voor meer informatie over SPA in AEM:

• SPA Blauwdruk voor de technische voorschriften van een SPA
• Aan de slag met SPA in AEMvoor een snelle rondleiding van een eenvoudige SPA

Ontwerp

De paginacomponent voor een SPA verstrekt niet de elementen van HTML van zijn kindcomponenten via het JSP of HTML- dossier. Deze bewerking wordt gedelegeerd aan het SPA. De representatie van onderliggende componenten of modellen wordt opgehaald als een JSON-gegevensstructuur van het JCR. De SPA componenten worden vervolgens volgens die structuur aan de pagina toegevoegd. Dit gedrag onderscheidt de aanvankelijke lichaamssamenstelling van de paginacomponent van niet-SPA tegenhangers.

Paginamodel beheren

De resolutie en het beheer van het paginamodel worden gedelegeerd aan een opgegeven PageModel-bibliotheek. De SPA moet de bibliotheek Paginamodel gebruiken om te worden geïnitialiseerd en door de SPA Editor te worden ontworpen. De bibliotheek Paginamodel die indirect via de aem-react-editable-components npm aan de component AEMPagina wordt verstrekt. Het paginamodel is een tolk tussen AEM en de SPA en moet daarom altijd aanwezig zijn. Wanneer de pagina is gemaakt, moet een extra bibliotheek cq.authoring.pagemodel.messaging worden toegevoegd om de communicatie met de paginaeditor mogelijk te maken.

Als de SPA paginacomponent overerft van de hoofdcomponent van de pagina, zijn er twee opties om de categorie cq.authoring.pagemodel.messaging van de cliëntbibliotheek beschikbaar te maken:

• Als de sjabloon bewerkbaar is, voegt u deze toe aan het paginabeleid.
• Of voeg de categorieën toe gebruikend customfooterlibs.html.

Voor elke bron in het geëxporteerde model zal de SPA een werkelijke component toewijzen die de opdracht
renderen. Het model, dat als JSON wordt vertegenwoordigd, wordt dan teruggegeven gebruikend de componentenafbeeldingen binnen een container.

Gegevenstype voor communicatie

Wanneer de categorie cq.authoring.pagemodel.messaging aan de pagina wordt toegevoegd, wordt een bericht naar de Pagina-editor verzonden om het gegevenstype JSON-communicatiegegevens vast te stellen. Wanneer het gegevenstype van communicatiegegevens aan JSON wordt geplaatst, zullen de verzoeken van de GET met de Sling Model eindpunten van een component communiceren. Nadat een update in de pagina-editor plaatsvindt, wordt de JSON-representatie van de bijgewerkte component verzonden naar de bibliotheek Paginamodel. De bibliotheek Paginamodel stelt vervolgens de SPA van updates op de hoogte.

Workflow

U kunt de stroom van de interactie tussen de SPA en AEM begrijpen door de SPA Redacteur als bemiddelaar tussen twee te denken.

• De communicatie tussen de pagina-editor en de SPA wordt gemaakt met JSON in plaats van HTML.
• De pagina-editor biedt de meest recente versie van het paginamodel aan de SPA via de iframe- en messaging-API.
• De manager van het paginamodel brengt de redacteur op de hoogte het klaar voor uitgave is en gaat het paginamodel als structuur JSON over.
• De editor wijzigt de DOM-structuur van de pagina die wordt gemaakt niet of opent deze zelfs niet, maar biedt het nieuwste paginamodel.

Basic SPA Editor Workflow

Met inachtneming van de belangrijkste elementen van de SPA Editor, ziet de auteur de workflow op hoog niveau voor het bewerken van een SPA binnen AEM er als volgt uit.

1. SPA Editor wordt geladen.

2. SPA wordt in een afzonderlijk frame geladen.

3. SPA vraagt JSON-inhoud aan en rendert componenten client-side.

4. SPA Editor detecteert gerenderde componenten en genereert overlays.

5. De auteur klikt op bedekking en toont de bewerkingswerkbalk van de component.

6. SPA de Redacteur met een verzoek van de POST aan de server voortduurt uitgeeft.

7. SPA Editor vraagt bijgewerkte JSON naar de SPA Editor, die met een DOM-gebeurtenis naar de SPA wordt verzonden.

8. SPA geeft de betreffende component opnieuw weer, waarbij het DOM wordt bijgewerkt.

Workflow voor paginabewerking tussen client en server

Dit is een gedetailleerder overzicht van de interactie tussen client en server bij het bewerken van een SPA.

1. De SPA initialiseert zichzelf en vraagt het paginamodel aan bij Sling Model Exporter.

2. De verkoper ModelExporter verzoekt om de middelen die de pagina van de bewaarplaats samenstellen.

3. De repository retourneert de bronnen.

4. De verkoper van het ModelExporter keert het model van de pagina terug.

5. De SPA instantieert zijn componenten die op het paginamodel worden gebaseerd.

6. 6 aDe inhoud deelt de redacteur mee dat het voor ontwerp klaar is.

   6 bDe paginaredacteur verzoekt de componentenauteursconfiguraties.

   6 cDe pagina-editor ontvangt de componentconfiguraties.

7. Wanneer de auteur een component bewerkt, wordt in de pagina-editor een wijzigingsverzoek naar de standaard POST servlet gepost.

8. De bron wordt bijgewerkt in de opslagplaats.

9. De bijgewerkte bron wordt doorgegeven aan de POST servlet.

10. De standaard server van de POST deelt de paginaredacteur mee dat het middel is bijgewerkt.

11. De paginaeditor vraagt om het nieuwe paginamodel.

12. De bronnen waaruit de pagina bestaat, worden opgevraagd bij de opslagplaats.

13. De bronnen waaruit de pagina bestaat, worden door de gegevensopslagruimte aan de Verkoopmodel Exporter verschaft.

14. Het bijgewerkte paginamodel wordt geretourneerd aan de editor.

15. De paginaredacteur werkt de verwijzing van het paginamodel van de SPA bij.

16. De SPA werkt zijn componenten bij die op de nieuwe verwijzing van het paginamodel worden gebaseerd.

17. De componentconfiguraties van de paginaeditors worden bijgewerkt.

    17 aDe SPA geeft aan dat de inhoud gereed is voor de pagina-editor.

    17 bDe paginaredacteur voorziet de SPA van componentenconfiguraties.

    17 cDe SPA biedt bijgewerkte componentconfiguraties.

Ontwerpwerkstroom

Dit is een gedetailleerder overzicht dat is toegespitst op de ontwerpervaring.

1. De SPA haalt het paginamodel op.

2. 2 aHet paginamodel voorziet de redacteur van de gegevens die voor creatie worden vereist.

   2 bWanneer op de hoogte gesteld, werkt de componentenbeheerder de inhoudsstructuur van de pagina bij.

3. De componentenbeheerder vraagt de afbeelding tussen een AEM middeltype en een SPA component.

4. De componentinstantie instantieert dynamisch de SPA component op basis van het paginamodel en de componenttoewijzing.

5. De paginaeditor werkt het paginamodel bij.

6. 6 aHet paginamodel verstrekt bijgewerkte auteursgegevens aan de paginaredacteur.

   6 bHet paginamodel verzendt wijzigingen naar de componentorchestrator.

7. De componentorchestrator haalt de componenttoewijzing op.

8. De componentbeheerder werkt de inhoud van de pagina bij.

9. Wanneer de SPA klaar is met het bijwerken van de inhoud van de pagina, laadt de pagina-editor de ontwerpomgeving.

Vereisten en beperkingen

Om de auteur in staat te stellen om de paginaredacteur te gebruiken om de inhoud van een SPA uit te geven, moet uw SPA toepassing worden uitgevoerd om met de AEM SPA Redacteur SDK in wisselwerking te staan. Zie Aan de slag met SPA in AEM document voor het minimale waarvan u op de hoogte moet zijn om uw werk uit te voeren.

Ondersteunde kaders

De SPA Editor SDK ondersteunt de volgende minimale versies:

• 16.x en hoger reageren
• Angular 6.x en hoger

Eerdere versies van deze frameworks werken mogelijk met de AEM SPA Editor SDK, maar worden niet ondersteund.

Extra kaders

Er kunnen aanvullende SPA worden geïmplementeerd om te werken met de AEM SPA Editor SDK. Zie SPA Blueprint document voor de vereisten waaraan een framework moet voldoen om een framespecifieke laag te maken die bestaat uit modules, componenten en services om met de AEM SPA Editor te werken.

Meerdere kiezers gebruiken

Aanvullende aangepaste kiezers kunnen worden gedefinieerd en gebruikt als onderdeel van een SPA die is ontwikkeld voor de AEM SPA SDK. Voor deze ondersteuning is echter vereist dat de model-kiezer de eerste kiezer is en dat de extensie .json is als vereist door de JSON Exporter.

Vereisten voor teksteditor

Als u de op plaats-editor wilt gebruiken van een tekstcomponent die in SPA is gemaakt, is er aanvullende configuratie vereist.

1. Stel een willekeurig kenmerk in op het containerelement dat de tekst-HTML bevat. In het geval van de WKND steekproefinhoud van het Dagboek, is het een <div> element en de selecteur die is gebruikt is data-rte-editelement.
2. Stel de configuratie editElementQuery in op de cq:InplaceEditingConfig van de corresponderende AEM tekstcomponent die naar die kiezer wijst, bijvoorbeeld data-rte-editelement. Hierdoor weet de editor welk HTML-element de HTML-tekst omsluit.

Voor een voorbeeld van hoe dit wordt gedaan, zie de steekproefinhoud van het Dagboek van WKND.

Voor extra informatie over het editElementQuery bezit en de configuratie van de rijke tekstredacteur, zie vorm de Rich Redacteur van de Tekst.

Beperkingen

De AEM SPA Editor SDK werd geïntroduceerd met AEM 6.4 service pack 2. Het wordt volledig gesteund door Adobe, en als nieuwe eigenschap blijft het worden verbeterd en uitgebreid. De SPA Editor heeft nog geen betrekking op de volgende AEM:

• Doelmodus
• ContextHub
• Inline-afbeeldingen bewerken
• Configs bewerken (bijv. listeners)
• Stijlsysteem
• Ongedaan maken/Opnieuw
• Pagina diff en Tijd verdraaien
• Functies voor het herschrijven van HTML aan de serverzijde, zoals Koppelingencontrole, CDN-herschrijfservice, URL-verkorting, enz.
• Modus Ontwikkelaar
• AEM starten

Bronnen voor Business.Adobe.com

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