SPA-blauwdruk spa-blueprint

Om de auteur toe te laten om de Redacteur van AEM SPA te gebruiken om de inhoud van een KUUROORD uit te geven, zijn er vereisten die het KUUROORD moet vervullen, die in dit document worden beschreven.

Inleiding introduction

Dit document beschrijft het algemene contract dat om het even welk kader van het KUUROORD (namelijk het soort de steunlaag van AEM) zou moeten vervullen om editable componenten van het KUUROORD binnen AEM uit te voeren.

Om de auteur in staat te stellen de Redacteur van de Pagina van AEM te gebruiken om de gegevens uit te geven die door een enig kader van de Toepassing van de Pagina worden blootgesteld, moet een project de structuur van het model kunnen interpreteren die de semantische die gegevens vertegenwoordigt voor een toepassing binnen de bewaarplaats van AEM worden opgeslagen. Hiervoor zijn twee raamwerk-agnostische bibliotheken beschikbaar: de PageModelManager en de ComponentMapping .

PageModelManager pagemodelmanager

De PageModelManager bibliotheek wordt verstrekt als pakket NPM dat door een project van het KUUROORD wordt gebruikt. Het begeleidt SPA en dient als manager van het gegevensmodel.

Namens het KUUROORD, onttrekt het de herwinning en het beheer van de structuur JSON die de daadwerkelijke inhoudsstructuur vertegenwoordigt. Het is ook verantwoordelijk voor het synchroniseren met het KUUROORD om het te laten weten wanneer het zijn componenten moet opnieuw teruggeven.

Zie het NPM-pakket @adobe/aem-spa-page-model-manager

Wanneer u PageModelManager initialiseert, laadt de bibliotheek eerst het opgegeven hoofdmodel van de app (via parameter, meta-eigenschap of huidige URL). Als in de bibliotheek wordt aangegeven dat het model van de huidige pagina geen deel uitmaakt van het hoofdmodel, wordt het opgehaald en opgenomen als het model van een onderliggende pagina.

ComponentMapping componentmapping

De module ComponentMapping wordt verstrekt als pakket NPM aan het front-end project. Het slaat front-end componenten op en verstrekt een manier voor het KUUROORD om front-end componenten aan het middeltypes van AEM in kaart te brengen. Hierdoor wordt een dynamische resolutie van componenten ingeschakeld bij het parseren van het JSON-model van de toepassing.

Elke item in het model bevat een veld :type dat een AEM-brontype weergeeft. Als de front-end component is gekoppeld, kan deze zichzelf renderen met behulp van het fragment van het model dat is ontvangen van de onderliggende bibliotheken.

Dynamisch model naar componenttoewijzing dynamic-model-to-component-mapping

Voor details over hoe het dynamische model aan componentenafbeelding in JavaScript SPA SDK voor AEM voorkomt zie het artikel Dynamische Model aan Component Mapping voor SPAs.

Framework-specifieke laag framework-specific-layer

Voor elk front-end framework moet een derde laag worden geïmplementeerd. Deze derde bibliotheek is verantwoordelijk voor de interactie met de onderliggende bibliotheken en biedt een reeks goed geïntegreerde en gebruiksvriendelijke ingangspunten voor de interactie met het gegevensmodel.

In de rest van dit document worden de vereisten van deze specifieke laag van het intermediaire kader beschreven en wordt ernaar gestreefd onafhankelijk van het framework te zijn. Door de volgende vereisten na te leven, kan een kader-specifieke laag voor de projectcomponenten worden verstrekt om met de onderliggende bibliotheken in wisselwerking te staan die het gegevensmodel leiden.

Algemene concepten general-concepts

Paginamodel page-model

De inhoudsstructuur van de pagina wordt opgeslagen in AEM. Het model van de pagina wordt gebruikt om de componenten van het KUUROORD in kaart te brengen en te concretiseren. De ontwikkelaars van het KUUROORD creëren componenten SPA die zij aan de componenten van AEM in kaart brengen. Hiervoor gebruiken ze het brontype (of het pad naar de AEM-component) als een unieke sleutel.

De componenten van het KUUROORD moeten synchroon met het paginamodel zijn en met om het even welke veranderingen in zijn inhoud dienovereenkomstig worden bijgewerkt. Een patroon met behulp van dynamische componenten moet worden gebruikt om direct componenten te instantiëren volgens de opgegeven structuur van het paginamodel.

Meta-velden meta-fields

Het paginamodel gebruikt de JSON ModelExporter, die zelf op het Verschuivende ModelAPI gebaseerd is. De exporteerbare kiesmodellen geven de volgende lijst met velden weer, zodat de onderliggende bibliotheken het gegevensmodel kunnen interpreteren:

Zie ook Begonnen het Worden met de Diensten van de Inhoud van AEM.

Framework-Specific Module framework-specific-module

Het scheiden van zorgen helpt de uitvoering van het project te vergemakkelijken. Daarom moet een npm-specifiek pakket worden verstrekt. Dit pakket is verantwoordelijk voor het samenvoegen en blootstellen van de basismodules, de diensten, en de componenten. Deze componenten moeten de logica van het gegevensmodelbeheer inkapselen en toegang tot de gegevens verlenen de component van het project verwacht. De module is ook verantwoordelijk voor het tijdelijk blootstellen van nuttige ingangspunten van de onderliggende bibliotheken.

Om de interoperabiliteit van de bibliotheken te vergemakkelijken, adviseert Adobe de specifieke module voor het framework om de volgende bibliotheken te bundelen. Indien nodig, kan de laag onderliggende APIs inkapselen en aanpassen alvorens hen aan het project bloot te stellen.

Implementaties implementations

Reageren react

npm-module: @adobe/aem-response-editable-components

Angular angular

npm-module: @adobe/aem-angular-editable-components

Belangrijkste services en componenten main-services-and-components

De volgende entiteiten moeten worden uitgevoerd overeenkomstig de specifieke richtsnoeren voor elk kader. Op basis van de kaderarchitectuur kan de implementatie sterk variëren, maar de beschreven functies moeten worden verstrekt.

De modelprovider the-model-provider

De componenten van het project moeten toegang tot de fragmenten van een model aan een ModelLeverancier delegeren. De ModelLeverancier is dan verantwoordelijk voor het luisteren naar veranderingen die aan het gespecificeerde fragment van het model worden aangebracht en keert het bijgewerkte model aan de het delegeren component terug.

Hiervoor moet de modelprovider zich registreren bij de [PageModelManager](https://experienceleague.adobe.com/docs/experience-manager-65/content/implementing/developing/spas/spa-blueprint.html?lang=nl#pagemodelmanager) . Dan wanneer een verandering voorkomt ontvangt het en gaat de bijgewerkte gegevens tot de het delegeren component over. Door overeenkomst, wordt het bezit ter beschikking gesteld aan de het delegeren component die het fragment van model zal dragen genoemd cqModel. De implementatie is vrij om deze eigenschap aan de component te leveren, maar moet aspecten zoals de integratie met raamarchitectuur, ontdekkbaarheid en gebruiksgemak in overweging nemen.

De HTML-decorator van de component the-component-html-decorator

De componentdecorator is verantwoordelijk voor het versieren van de buitenste HTML van het element van elke componentinstantie met een reeks gegevenskenmerken en klassennamen die door de Pagina-editor worden verwacht.

Componentdeclaratie component-declaration

De volgende meta-gegevens moeten aan het buitenelement van HTML worden toegevoegd dat door de component van het project wordt geproduceerd. Hiermee kan de Pagina-editor de corresponderende bewerkingsconfiguratie ophalen.

Bewerkbaarheidsverklaring en plaatsaanduiding editing-capability-declaration-and-placeholder

De volgende metagegevens en klassennamen moeten worden toegevoegd aan het buitenste HTML-element dat wordt gemaakt door de component van het project. Hiermee kan de Pagina-editor gerelateerde functies bieden.

Placeholder voor Lege Componenten

Elke component moet worden uitgebreid met een functionaliteit waarmee het buitenste HTML-element wordt versierd met gegevenskenmerken en klassennamen die specifiek zijn voor plaatsaanduidingen en verwante overlays wanneer de component wordt geïdentificeerd als leeg.

Ongeveer de Legheid van een Component

Container container

Een container is een component die is bedoeld om onderliggende componenten te bevatten en te renderen. Hiervoor doorloopt de container de eigenschappen :itemsOrder , :items en :children van het bijbehorende model.

De container haalt dynamisch de onderliggende componenten op uit de opslagruimte van de ComponentMapping -bibliotheek. De container breidt vervolgens de onderliggende component uit met de mogelijkheden van de ModelProvider en instantieert deze ten slotte.

Pagina page

De component Page breidt de component Container uit. Een container is een component die onderliggende componenten, waaronder onderliggende pagina's, moet bevatten en weergeven. Hiervoor doorloopt de container de eigenschappen :itemsOrder , :items en :children van het bijbehorende model. De Page component krijgt dynamisch de kindcomponenten van de opslag van de ComponentMappingbibliotheek. Page is verantwoordelijk voor het instantiëren van onderliggende componenten.

Responsief raster responsive-grid

De component Responsief raster is een container. Het bevat een specifieke variant van de ModelLeverancier die zijn kolommen vertegenwoordigt. Het responsieve Net en zijn kolommen zijn verantwoordelijk voor het versieren van het buitenste element van HTML van de component van het project met de specifieke klassennamen in het model.

De component Responsief raster moet vooraf worden toegewezen aan de AEM-tegenhanger omdat deze component complex is en zelden wordt aangepast.

Specifieke modelvelden specific-model-fields

Plaatsaanduiding van het reponsieve raster placeholder-of-the-reponsive-grid

De component van het KUUROORD wordt in kaart gebracht aan een grafische container zoals het Responsieve Net en moet virtuele kindplaceholder toevoegen wanneer de inhoud wordt authored. Wanneer de inhoud van het KUUROORD door de Redacteur van de Pagina wordt ontworpen, wordt die inhoud ingebed in de redacteur gebruikend iframe en het data-cq-editor attribuut wordt toegevoegd aan de documentknoop van die inhoud. Wanneer het attribuut data-cq-editor aanwezig is, moet de container een HTMLElement omvatten om het gebied te vertegenwoordigen waarmee de auteur wanneer het opnemen van een nieuwe component in de pagina in wisselt.

Bijvoorbeeld:

<div data-cq-data-path={"path/to/the/responsivegrid/*"} className="new section aem-Grid-newComponent"/>

Componenttoewijzing component-mapping

De onderliggende Component Mapping bibliotheek en de bijbehorende MapTo functie kunnen worden ingekapseld en uitgebreid om de functionaliteit met betrekking tot te verstrekken uitgeeft configuratie die naast de huidige componentenklasse wordt verstrekt.

const EditConfig = {

    emptyLabel: 'My Component',

    isEmpty: function() {
        return !this.props || !this.props.cqModel || this.props.cqModel.isEmpty;
    }
};

class MyComponent extends Component {

    render() {
        return <div className={'my-component'}></div>;
    }
}

MapTo('component/resource/path')(MyComponent, EditConfig);

In de bovengenoemde implementatie, wordt de projectcomponent uitgebreid met de leegheidsfunctionaliteit alvorens eigenlijk in de opslag van de Afbeelding van de Component 1} wordt geregistreerd.Dit gebeurt door de ComponentMapping -bibliotheek in te kapselen en uit te breiden en de ondersteuning van het EditConfig -configuratieobject te introduceren:

/**
 * Configuration object in charge of providing the necessary data expected by the page editor to initiate the authoring. The provided data will be decorating the associated component
 *
 * @typedef {{}} EditConfig
 * @property {String} [dragDropName]       If defined, adds a specific class name enabling the drag and drop functionality
 * @property {String} emptyLabel           Label to be displayed by the placeholder when the component is empty. Optionally returns an empty text value
 * @property {function} isEmpty            Should the component be considered empty. The function is called using the context of the wrapper component giving you access to the component model
 */

/**
 * Map a React component with the given resource types. If an {@link EditConfig} is provided the <i>clazz</i> is wrapped to provide edition capabilities on the AEM Page Editor
 *
 * @param {string[]} resourceTypes                      - List of resource types for which to use the given <i>clazz</i>
 * @param {class} clazz                                 - Class to be instantiated for the given resource types
 * @param {EditConfig} [editConfig]                     - Configuration object for enabling the edition capabilities
 * @returns {class}                                     - The resulting decorated Class
 */
ComponentMapping.map = function map (resourceTypes, clazz, editConfig) {};

Slinken met de paginaeditor contract-with-the-page-editor

De projectcomponenten moeten minstens de volgende gegevensattributen produceren om de redacteur toe te staan om met hen in wisselwerking te staan.

Samengevat, om door de paginaredacteur als editable te worden geïnterpreteerd, moet een projectcomponent het volgende contract in acht nemen:

Standaard HTML-elementstructuur typical-html-element-structure

Het volgende fragment illustreert de typische HTML-representatie van een pagina-inhoudsstructuur. Hier volgen enkele belangrijke punten:

<div data-cq-data-path="/content/page">
    <div class="aem-Grid aem-Grid--12 aem-Grid--default--12">
        <div class="aem-container aem-GridColumn aem-GridColumn--default--12" data-cq-data-path="/content/page/jcr:content/root/responsivegrid">
            <div class="aem-Grid aem-Grid--12 aem-Grid--default--12">
                <div class="cmp-image cq-dd-image aem-GridColumn aem-GridColumn--default--12" data-cq-data-path="/root/responsivegrid/image">
                    <img src="/content/we-retail-spa-sample/react/jcr%3acontent/root/responsivegrid/image.img.jpeg/1512113734019.jpeg">
                </div>
            </div>
        </div>
    </div>
</div>

Navigatie en routering navigation-and-routing

App bezit het verpletteren. De front-end ontwikkelaar moet eerst een component van de Navigatie (in kaart gebracht aan een de navigatiecomponent van AEM) uitvoeren. Deze component zou URL verbindingen teruggeven die samen met een reeks routes moeten worden gebruikt die fragmenten van inhoud tonen of zullen verbergen.

De onderliggende PageModelManager -bibliotheek en de bijbehorende [ModelRouter](https://experienceleague.adobe.com/docs/experience-manager-65/content/implementing/developing/spas/spa-routing.html?lang=nl) -module (standaard ingeschakeld) zijn verantwoordelijk voor het vooraf ophalen en verlenen van toegang tot het model dat aan een bepaald bronnenpad is gekoppeld.

De twee entiteiten hebben betrekking op het begrip 'routering', maar de [ModelRouter](https://experienceleague.adobe.com/docs/experience-manager-65/content/implementing/developing/spas/spa-routing.html?lang=nl) is alleen verantwoordelijk voor het feit dat de [PageModelManager](https://experienceleague.adobe.com/docs/experience-manager-65/content/implementing/developing/spas/spa-blueprint.html?lang=nl#pagemodelmanager) wordt geladen met een gegevensmodel dat is gestructureerd volgens de huidige toepassingsstatus.

Zie het artikel Model dat van het KUUROORDvoor meer informatie verplettert.

SPA in actie spa-in-action

Zie hoe een eenvoudig KUUROORD werkt en met een KUUROORD zelf experimenteert door aan het document te blijven Begonnen die met SPAs in AEM.

Verdere lezing further-reading

Voor meer informatie over SPAs in AEM, zie de volgende documenten: