SPA-componenten toewijzen aan AEM-componenten map-components

Alvorens in de code van het KUUROORD te springen, is het belangrijk om het model te begrijpen JSON dat AEM verstrekt. Navigeer aan de Bibliotheek van de Component van de Kernen bekijk de pagina voor de component van de Tekst. De Core Component Library bevat voorbeelden van alle AEM Core Components.

Selecteer het JSON lusje voor één van de voorbeelden:

Er moeten drie eigenschappen worden weergegeven: text , richText en :type .

:type is een gereserveerde eigenschap die de sling:resourceType (of het pad) van de AEM-component opsomt. De waarde van :type is wat wordt gebruikt om de component van AEM aan de component van SPA in kaart te brengen.

text en richText zijn extra eigenschappen die aan de component SPA worden blootgesteld.

Bekijk de output JSON in http://localhost:4502/content/wknd-spa-react/us/en.model.json. U zou een ingang moeten kunnen vinden gelijkend op:

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

In winde van uw keus open omhoog het Project van AEM voor het KUUROORD. Vouw de module ui.frontend uit en open het bestand Text.js onder ui.frontend/src/components/Text/Text.js .

Het eerste gebied dat we zullen inspecteren, is de class Text bij ~line 40:

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text is een standaardcomponent React. De component gebruikt this.props.richText om te bepalen of de inhoud die moet worden gerenderd RTF-tekst of tekst zonder opmaak is. De werkelijk gebruikte "inhoud" komt van this.props.text.

Om een potentiële aanval van XSS te vermijden, wordt de rijke tekst ontsnapt via DOMPurify alvorens gevaarlijkSetInnerHTMLte gebruiken om de inhoud terug te geven. Herhaal de eigenschappen richText en text van het JSON-model eerder in de oefening.

Open ui.frontend/src/components/import-components.js en bekijk vervolgens de TextEditConfig bij ~line 86:

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

De bovenstaande code bepaalt wanneer de tijdelijke aanduiding in de AEM-auteursomgeving moet worden weergegeven. Als de isEmpty methode waar terugkeert dan placeholder wordt teruggegeven.

Bekijk ten slotte de MapTo oproep bij ~line 94:

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo wordt verstrekt door de Redacteur JS SDK van de SPA van AEM (@adobe/aem-react-editable-components). Het pad wknd-spa-react/components/text vertegenwoordigt de sling:resourceType van de AEM-component. Dit pad komt overeen met het pad :type dat wordt weergegeven door het JSON-model dat u eerder hebt waargenomen. MapTo zorgt ervoor dat de JSON-modelreactie wordt geparseerd en dat de juiste waarden als props worden doorgegeven aan de SPA-component.

U kunt de definitie van de AEM Text -component vinden op ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text .

Open in de projectcode het bestand import-components.js op ui.frontend/src/components .
Dit dossier voert alle componenten van het KUUROORD in die aan de componenten van AEM in kaart brengen. Gezien de dynamische aard van de implementatie van de Redacteur van het KUUROORD, moeten wij om het even welke componenten van het KUUROORD uitdrukkelijk van verwijzingen voorzien die aan auteur-able componenten van AEM verbonden zijn. Op deze manier kan een AEM-auteur ervoor kiezen om een component te gebruiken op de plaats waar hij of zij dat wil in de toepassing.

De volgende invoerverklaringen omvatten de componenten van het KUUROORD die in het project worden geschreven:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

Er zijn verschillende andere imports van @adobe/aem-core-components-react-spa en @adobe/aem-core-components-react-base . Deze importeren de React Core-componenten en stellen deze beschikbaar in het huidige project. Deze worden vervolgens toegewezen aan projectspecifieke AEM-componenten met behulp van MapTo , net als in het voorbeeld van de Text -component.

Van het scherm van het Begin van AEM navigeert aan Hulpmiddelen > Malplaatjes > WKND SPA React.

Selecteer en open het malplaatje van de Pagina van het KUUROORD voor het uitgeven.

Selecteer de Container van de Lay-out en klik het beleid pictogram om het beleid uit te geven:

Onder Toegestane Componenten > WKND SPA Reageren - Inhoud > controleer Beeld, Taser, en Titel.

Onder StandaardComponenten > voeg afbeelding toe en kies het Beeld - WKND SPA React - Inhoud component:

Ga a mime type van image/* in.

Klik Gedaan om de beleidsupdates te bewaren.

In de Container van de Lay-out klik het beleid pictogram voor de ​ ​component van de Tekst.

Creeer een nieuw beleid genoemd WKND Tekst van het KUUROORD. Onder Insteekmodules > Formatterend > controleer alle dozen om extra het formatteren opties toe te laten:

toe

Onder Insteekmodules > Stijlen van de Paragraaf > controleer de doos alineastijlen toelaten:

toe

Klik Gedaan om de beleidsupdate te bewaren.

Navigeer aan de Homepage http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

U zou nu de extra componenten Beeld, Taser, en Titel op de pagina moeten kunnen gebruiken.

U zou ook de Text component moeten kunnen uitgeven en extra paragraafstijlen op volledig-scherm wijze toevoegen.

U zou ook een beeld van de Vinder van Activa moeten kunnen slepen en neerzetten:

Ervaring met de Titel en Taser componenten.

Voeg uw eigen beelden via AEM Assetstoe of installeer de gebeëindigde codebasis voor de standaard WKND verwijzingsplaats. De WKND verwijzingsplaatsomvat vele beelden die op het KND KUUROORD kunnen worden opnieuw gebruikt. Het pakket kan worden geïnstalleerd gebruikend de Manager van het Pakket van AEM.

In browser navigeert aan http://localhost:4502/content/wknd-spa-react/us/en.model.json

De component van de Container van de Lay-out heeft a sling:resourceType van wcm/foundation/components/responsivegrid en door de Redacteur van het KUUROORD erkend gebruikend het :type bezit, enkel als Text en Image componenten.

De zelfde mogelijkheden om een component opnieuw te rangschikken gebruikend Wijze van de Lay-outzijn beschikbaar met de Redacteur van het KUUROORD.

Keer terug naar http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Voeg extra componenten van het Beeld 0} toe {en probeer re-sizing hen gebruikend de optie van de Lay-out :

Heropen het model JSON http://localhost:4502/content/wknd-spa-react/us/en.model.jsonen bekijk columnClassNames als deel van JSON:

{de namen van de Klasse van 0} Wolk

De klassenaam aem-GridColumn--default--4 geeft aan dat de component 4 kolommen breed moet zijn op basis van een raster van 12 kolommen. Meer details over het ontvankelijke net kunnen hierworden gevonden.

Keer terug naar winde en in de ui.apps module is er een cliënt-zijbibliotheek die bij ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid wordt bepaald. Open het bestand less/grid.less .

Dit dossier bepaalt de breekpunten (default, tablet, en phone) die door de Container van de Lay-out worden gebruikt. Dit dossier is bedoeld om per projectspecificaties worden aangepast. Momenteel zijn de onderbrekingspunten ingesteld op 1200px en 768px .

U moet de responsieve mogelijkheden en het bijgewerkte rijke tekstbeleid van de Text component kunnen gebruiken om een mening als het volgende te ontwerpen:

In winde van de Code van Visual Studio, zorg ervoor dat u {de Synchronisatie van AEM van 0} VSCode via de uitbreiding van de Marketplace geïnstalleerd hebt:

Breid ui.content module in de ontdekkingsreiziger van het Project uit en navigeer aan /conf/wknd-spa-react/settings/wcm/templates.

Right+Click de templates omslag en selecteer Invoer van de Server van AEM:

Herhaal de stappen om inhoud in te voeren maar selecteer de beleid omslag die bij /conf/wknd-spa-react/settings/wcm/templates/policies wordt gevestigd.

Controleer het filter.xml -bestand in ui.content/src/main/content/META-INF/vault/filter.xml .

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>

Het bestand filter.xml identificeert de paden van knooppunten die met het pakket zijn geïnstalleerd. Let op mode="merge" op elk van de filters die aangeeft dat bestaande inhoud niet wordt gewijzigd, alleen nieuwe inhoud wordt toegevoegd. Aangezien de inhoudsauteurs deze wegen kunnen bijwerken, is het belangrijk dat een codeplaatsing ​ ​geen inhoud overschrijft. Zie de documentatie FileVaultvoor meer details bij het werken met filterelementen.

Vergelijk ui.content/src/main/content/META-INF/vault/filter.xml en ui.apps/src/main/content/META-INF/vault/filter.xml om inzicht te krijgen in de verschillende knooppunten die door elke module worden beheerd.

Navigeer aan de voorbeelden van het Beeld in de bibliotheek van de Component van de Kern.

Eigenschappen van src , alt en title worden gebruikt om de component SPA Image te vullen.

Maak vervolgens een nieuwe map met de naam Image onder ui.frontend/src/components .

Onder de map Image maakt u een nieuw bestand met de naam Image.js .

Voeg de volgende import instructies toe aan Image.js :

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

Voeg vervolgens de ImageEditConfig toe om te bepalen wanneer de tijdelijke aanduiding in AEM moet worden weergegeven:

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

De plaatsaanduiding wordt weergegeven als de eigenschap src niet is ingesteld.

Implementeer vervolgens de klasse Image :

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

De bovenstaande code geeft een <img> weer op basis van de eigenschappen src , alt en title die door het JSON-model zijn doorgegeven.

Voeg de code MapTo toe om de component React toe te wijzen aan de component AEM:

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

De tekenreeks wknd-spa-react/components/image komt overeen met de locatie van de AEM-component in ui.apps at: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image .

Maak een nieuw bestand met de naam Image.css in dezelfde map en voeg het volgende toe:

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Voeg in Image.js een verwijzing naar het bestand toe boven onder de instructies import :

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

Open het bestand ui.frontend/src/components/import-components.js en voeg een verwijzing naar de nieuwe component Image toe:

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

Verwijder in import-components.js het commentaar React Core Component Image:

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

Op deze manier zorgt u ervoor dat de aangepaste component Image wordt gebruikt.

Van de wortel van het project stelt de code van het KUUROORD aan AEM op gebruikend Maven:

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

Inspecteer de SPA in AEM. Alle onderdelen van de afbeelding op de pagina blijven werken. Inspecteer de gerenderde uitvoer en u zou de prijsverhoging voor onze component van het douaneBeeld in plaats van React de Component van de Kern moeten zien.

de componentenprijsverhoging van het Beeld van de Douane

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

React de prijsverhoging van het Beeld van de Component van de Kern

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

Dit is een goede inleiding om uw eigen componenten uit te breiden en uit te voeren.