SPA componenten toewijzen aan AEM componenten map-components

Voordat u in de SPA code springt, is het belangrijk dat u het JSON-model begrijpt dat AEM biedt. 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 AEM component aan de SPA toe te wijzen.

text en richText zijn extra eigenschappen die aan de SPA component 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 AEM Project voor de SPA. 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 geleverd door de AEM SPA Editor JS SDK (@adobe/aem-react-editable-components). Het pad wknd-spa-react/components/text vertegenwoordigt de sling:resourceType van de AEM. 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-modelrespons wordt geparseerd en dat de juiste waarden als props worden doorgegeven aan de SPA.

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 bestand importeert alle SPA componenten die zijn toegewezen aan AEM componenten. Gezien de dynamische aard van de implementatie van de SPARedacteur, moeten wij om het even welke SPA componenten uitdrukkelijk van verwijzingen voorzien die aan AEM auteur-able componenten gebonden zijn. Hierdoor kan een AEM auteur ervoor kiezen om een component te gebruiken waar hij of zij dat in de toepassing wil.

De volgende instructies voor importeren bevatten SPA componenten die in het project zijn 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 AEM scherm van het Begin navigeert aan Hulpmiddelen > Malplaatjes > WKND SPA Reageren.

Selecteer en open het SPA malplaatje van de Pagina 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 GebrekComponenten > voeg afbeelding toe en kies het Beeld - WKND SPA Reageren - 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 SPA Tekst. 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 de SPA kunnen worden opnieuw gebruikt WKND. Het pakket kan worden geïnstalleerd gebruikend AEM de Manager van het Pakket.

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 SPARedacteur gebruikend het :type bezit, enkel als Text en Image componenten erkend.

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

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 VSCode AEM Synchronisatie geïnstalleerd via de uitbreiding van de Marketplace 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 AEM Server:

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.

Inspect het filter.xml -bestand op 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 SPA Image -component 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 aan de AEM toe te wijzen:

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 stel de SPA code aan AEM gebruikend Maven op:

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

Inspect de SPA in AEM. Alle onderdelen van de afbeelding op de pagina blijven werken. Inspect de gerenderde uitvoer en u moet de markering voor onze aangepaste afbeeldingscomponent zien in plaats van de React Core-component.

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.