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. Ga naar de Core Component Library en bekijk de pagina voor de component Text. De Core Component Library bevat voorbeelden van alle AEM Core Components.

Selecteer de JSON tabblad voor een van de voorbeelden:

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

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

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

De JSON-uitvoer weergeven op 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. Breid uit ui.frontend en opent u het bestand Text.js krachtens ui.frontend/src/components/Text/Text.js.

Het eerste gebied dat we zullen inspecteren is het class Text op ~regel 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 standaard React component. De component gebruikt this.props.richText om te bepalen of de inhoud die moet worden gerenderd rijke tekst of gewone tekst zal zijn. 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 voordat u gevaarlijkSetInnerHTML om de inhoud te renderen. Herstel de richText en text eigenschappen van het JSON-model eerder in de oefening.

Volgende, openen ui.frontend/src/components/import-components.js kijk eens naar de TextEditConfig op ~regel 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 retourneert true wordt de tijdelijke aanduiding weergegeven.

Kijk ten slotte naar de MapTo bellen op ~regel 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 component. Dit pad komt overeen met het :type door het JSON-model dat eerder werd waargenomen. MapTo zorgt ervoor dat de JSON-modelrespons wordt geparseerd en dat de juiste waarden als props naar de SPA component.

U kunt de AEM vinden Text componentdefinitie bij ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Open het bestand in de projectcode import-components.js om 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 dan in kaart gebracht aan project specifieke AEM componenten gebruikend MapTo, net als bij de Text eerder.

Navigeer van het scherm AEM Start naar Gereedschappen > Sjablonen > WKND SPA React.

Selecteer en open SPA pagina sjabloon voor bewerken.

Selecteer de Layout Container en klik op beleid pictogram om het beleid te bewerken:

Onder Toegestane componenten > WKND SPA React - Inhoud > controleren Afbeelding, Teaser, en Titel.

Onder Standaardcomponenten > Toewijzing toevoegen en kiest u Afbeelding - WKND SPA Reageren - Inhoud component:

Voer een mime-type van image/*.

Klikken Gereed om de beleidsupdates op te slaan.

In de Layout Container klik op beleid pictogram voor de Tekst component.

Een nieuw beleid maken met de naam WKND-SPA. Onder Plug-ins > Opmaak > schakel alle vakken in om extra opmaakopties in te schakelen:

Onder Plug-ins > Alineastijlen > selectievakje in Alineastijlen inschakelen:

Klikken Gereed om de beleidsupdate op te slaan.

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

U moet nu de aanvullende componenten kunnen gebruiken Afbeelding, Teaser, en Titel op de pagina.

U moet ook de opdracht Text en voeg extra alineastijlen toe in volledig scherm -modus.

U moet ook een afbeelding uit de Asset Finder:

Ervaring met de Titel en Teaser componenten.

Voeg uw eigen afbeeldingen toe via AEM Assets of installeer de voltooide codebasis voor de norm WKND-referentiesite. De WKND-referentiesite bevat veel afbeeldingen die opnieuw kunnen worden gebruikt op de WKND-SPA. Het pakket kan worden geïnstalleerd met AEM Package Manager.

Blader in een browser naar http://localhost:4502/content/wknd-spa-react/us/en.model.json

De Layout Container component heeft een sling:resourceType van wcm/foundation/components/responsivegrid en wordt door de SPA Editor herkend met de :type eigenschap, net als de Text en Image componenten.

Dezelfde mogelijkheden om de grootte van een component te wijzigen met Lay-outmodus zijn beschikbaar in de SPA Editor.

Terug naar http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Extra toevoegen Afbeelding en probeer deze opnieuw in te stellen met de Layout optie:

Het JSON-model opnieuw openen http://localhost:4502/content/wknd-spa-react/us/en.model.json en de columnClassNames als onderdeel van de JSON:

De klassenaam aem-GridColumn--default--4 Hiermee wordt aangegeven dat de component 4 kolommen breed moet zijn op basis van een raster van 12 kolommen. Meer informatie over de responsief raster is hier te vinden.

Terugkeren naar de IDE en in de ui.apps er een client-side bibliotheek is gedefinieerd op ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid. Het bestand openen less/grid.less.

Dit bestand bepaalt de onderbrekingspunten (default, tablet, en phone) gebruikt door de Layout Container. 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 het Text aan auteur een mening als het volgende:

In winde van de Code van Visual Studio, zorg ervoor dat u hebt VSCode AEM Sync geïnstalleerd via de Marketplace-extensie:

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

Rechts + klikken de templates map en selecteer Importeren vanaf AEM server:

Herhaal de stappen om inhoud te importeren, maar selecteer de beleid map op /conf/wknd-spa-react/settings/wcm/templates/policies.

Inspect the filter.xml bestand bevindt zich 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>

De filter.xml is verantwoordelijk voor het identificeren van de paden van knooppunten die samen met het pakket zijn geïnstalleerd. Let op: mode="merge" op elk van de filters wordt aangegeven dat bestaande inhoud niet wordt gewijzigd, alleen nieuwe inhoud toegevoegd. Aangezien de inhoudsauteurs deze wegen kunnen bijwerken, is het belangrijk dat een codeplaatsing doet niet overschrijven, inhoud. Zie de FileVault-documentatie voor meer informatie over het werken met filterelementen.

Ververgelijken ui.content/src/main/content/META-INF/vault/filter.xml en ui.apps/src/main/content/META-INF/vault/filter.xml om de verschillende knopen te begrijpen die door elke module worden beheerd.

Ga naar de Voorbeelden van afbeeldingen in de Core Component-bibliotheek.

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

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

Onder de Image map maken een nieuw bestand met de naam Image.js.

Voeg het volgende toe import instructies voor Image.js:

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

Voeg vervolgens de knop ImageEditConfig 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 tijdelijke aanduiding geeft aan of de src eigenschap is niet ingesteld.

De volgende implementatie van Image klasse:

 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> op basis van de aanbevelingen src, alt, en title doorgegeven door het JSON-model.

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

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

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

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

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

In Image.js Voeg een verwijzing naar het bestand toe boven onder het tabblad import instructies:

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

require('./Image.css');

Het bestand openen ui.frontend/src/components/import-components.js en een verwijzing naar de nieuwe Image component:

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

In import-components.js Bekijk de React Core Component Image (React Core-componentafbeelding):

//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.

Aangepaste markering voor afbeeldingscomponent

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

Opmaak van Core Component Image Reageren

<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.