Mappa SPA komponenter till AEM map-components

Innan du hoppar in i SPA är det viktigt att förstå den JSON-modell som AEM tillhandahåller. Navigera till Core Component Library och visa sidan för Text-komponenten. Core Component Library innehåller exempel på alla AEM Core Components.

Välj fliken JSON för ett av exemplen:

Du bör se tre egenskaper: text, richText och :type.

:type är en reserverad egenskap som visar sling:resourceType (eller sökväg) för AEM. Värdet :type är det som används för att mappa AEM till SPA.

text och richText är ytterligare egenskaper som exponeras för SPA.

Visa JSON-utdata på http://localhost:4502/content/wknd-spa-react/us/en.model.json. Du bör kunna hitta en post som liknar:

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

I den utvecklingsmiljö du väljer öppnar du AEM för SPA. Expandera modulen ui.frontend och öppna filen Text.js under ui.frontend/src/components/Text/Text.js.

Det första området som ska inspekteras är class Text på ~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 är en standardreaktionskomponent. Komponenten använder this.props.richText för att avgöra om innehållet som ska återges kommer att vara RTF eller oformaterad text. Det faktiska "innehåll" som används kommer från this.props.text.

För att undvika en potentiell XSS-attack placeras den RTF-text som flödar via DOMPurify innan farligtSetInnerHTML används för att återge innehållet. Återkalla egenskaperna richText och text från JSON-modellen tidigare i övningen.

Öppna sedan ui.frontend/src/components/import-components.js och titta på TextEditConfig på ~rad 86:

const TextEditConfig = {
emptyLabel: 'Text',

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

Koden ovan avgör när platshållaren ska återges i AEM redigeringsmiljö. Om metoden isEmpty returnerar true återges platshållaren.

Ta till sist en titt på MapTo-anropet på ~rad 94:

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

MapTo tillhandahålls av AEM JS SDK för SPA (@adobe/aem-react-editable-components). Sökvägen wknd-spa-react/components/text representerar sling:resourceType för AEM. Den här sökvägen matchas med :type som exponeras av JSON-modellen som observerats tidigare. MapTo hanterar tolkningen av JSON-modellsvaret och skickar de korrekta värdena som props till SPA.

Du hittar AEM Text-komponentdefinitionen på ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Öppna filen import-components.js vid ui.frontend/src/components i projektkoden.
Den här filen importerar alla SPA som mappar till AEM. Med tanke på den dynamiska karaktären hos implementeringen av SPA Editor måste vi uttryckligen referera till alla SPA komponenter som är kopplade till AEM redigerbara komponenter. Detta gör att en AEM kan välja att använda en komponent var de vill i programmet.

Följande import-programsatser innehåller SPA komponenter skrivna i projektet:

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

Det finns flera andra imports från @adobe/aem-core-components-react-spa och @adobe/aem-core-components-react-base. Dessa importerar komponenterna React Core och gör dem tillgängliga i det aktuella projektet. Dessa mappas sedan till projektspecifika AEM med MapTo, precis som med komponentexemplet Text tidigare.

Gå till Verktyg > Mallar > WKND-SPA från AEM startskärm.

Markera och öppna mallen SPA sida för redigering.

Markera layoutbehållaren och klicka på dess policy-ikon för att redigera profilen:

Under Tillåtna komponenter > WKND-SPA - innehåll > kontrollera Bild, Teaser och Titel.

Under Standardkomponenter > Lägg till mappning och välj komponenten Bild - WKND SPA React - Innehåll:

Ange mime-typen av image/*.

Klicka på Klar om du vill spara principuppdateringarna.

I layoutbehållaren klickar du på ikonen policy för komponenten Text .

Skapa en ny princip med namnet WKND SPA Text. Under Plugins > Formatering > markerar du alla rutor för att aktivera ytterligare formateringsalternativ:

Under Plugins > Styckeformat > markerar du kryssrutan för att aktivera styckeformat:

Klicka på Klar för att spara principuppdateringen.

Navigera till hemsidan http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

Du bör nu kunna använda de ytterligare komponenterna Bild, Teaser och Titel på sidan.

Du bör också kunna redigera komponenten Text och lägga till ytterligare styckeformat i helskärmsläge .

Du bör också kunna dra och släppa en bild från Resurssökaren:

Upplev komponenterna Title och Teaser.

Lägg till egna bilder via AEM Assets eller installera den färdiga kodbasen för standardreferensplatsen WKND. WKND-referenswebbplatsen innehåller många bilder som kan återanvändas på WKND-SPA. Paketet kan installeras med AEM Package Manager.

I en webbläsare går du till http://localhost:4502/content/wknd-spa-react/us/en.model.json

Komponenten Layoutbehållare har sling:resourceType wcm/foundation/components/responsivegrid och känns igen av SPA Editor med egenskapen :type, precis som komponenterna Text och Image.

Samma funktioner för att ändra storlek på en komponent med layoutläget finns i SPA Editor.

Gå tillbaka till http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Lägg till ytterligare Bild-komponenter och försök ändra storlek på dem med alternativet Layout :

Öppna JSON-modellen http://localhost:4502/content/wknd-spa-react/us/en.model.json igen och observera columnClassNames som en del av JSON:

Klassnamnet aem-GridColumn--default--4 anger att komponenten ska vara 4 kolumner bred baserat på ett 12-kolumnsrutnät. Mer information om det responsiva rutnätet finns här.

Återgå till IDE och i modulen ui.apps finns ett klientbibliotek definierat vid ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid. Öppna filen less/grid.less.

Den här filen avgör vilka brytpunkter (default, tablet och phone) som används av layoutbehållaren. Den här filen är avsedd att anpassas efter projektspecifikationer. För närvarande är brytpunkterna inställda på 1200px och 768px.

Du bör kunna använda responsiva funktioner och uppdaterade RTF-principer för komponenten Text för att skapa en vy som följande:

I Visual Studio Code IDE kontrollerar du att du har VSCode AEM Sync installerat via Marketplace-tillägget:

Utöka modulen ui.content i Project Explorer och gå till /conf/wknd-spa-react/settings/wcm/templates.

Högerklicka på mappen templates och välj Importera från AEM server:

Upprepa stegen för att importera innehåll men välj mappen policies på /conf/wknd-spa-react/settings/wcm/templates/policies.

Inspect filen filter.xml på 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>

Filen filter.xml ansvarar för att identifiera sökvägarna till noder som har installerats med paketet. Observera mode="merge" på vart och ett av filtren som anger att befintligt innehåll inte ändras, endast nytt innehåll läggs till. Eftersom innehållsförfattare kan uppdatera dessa sökvägar är det viktigt att en koddistribution inte skriver över innehåll. Mer information om hur du arbetar med filterelement finns i dokumentationen för FileVault.

Jämför ui.content/src/main/content/META-INF/vault/filter.xml och ui.apps/src/main/content/META-INF/vault/filter.xml för att förstå de olika noder som hanteras av varje modul.

Navigera till Bildexemplen i Core Component Library.

Egenskaper för src, alt och title används för att fylla i SPA Image -komponenten.

Skapa sedan en ny mapp med namnet Image under ui.frontend/src/components.

Under mappen Image skapar du en ny fil med namnet Image.js.

Lägg till följande import-programsatser i Image.js:

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

Lägg sedan till ImageEditConfig för att bestämma när platshållaren ska visas i AEM:

export const ImageEditConfig = {

    emptyLabel: 'Image',

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

Platshållaren visas om egenskapen src inte har angetts.

Implementera sedan klassen 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>
        );
    }
}

Ovanstående kod återger ett <img> baserat på de avhandlingar src, alt och title som skickas in av JSON-modellen.

Lägg till MapTo-koden för att mappa React-komponenten till AEM:

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

Observera att strängen wknd-spa-react/components/image motsvarar platsen för AEM i ui.apps vid: ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

Skapa en ny fil med namnet Image.css i samma katalog och lägg till följande:

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

I Image.js lägger du till en referens till filen högst upp under programsatserna import:

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

require('./Image.css');

Öppna filen ui.frontend/src/components/import-components.js och lägg till en referens till den nya Image-komponenten:

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

In import-components.js comment out the React Core Component Image:

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

Detta säkerställer att vår anpassade Image-komponent används i stället.

Distribuera SPA kod från projektets rot till AEM med Maven:

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

Inspect SPA i AEM. Alla bildkomponenter på sidan ska fortsätta att fungera. Inspect den återgivna utskriften så ska du se koden för vår anpassade Image-komponent i stället för React Core-komponenten.

Anpassad bildkomponentkod

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

React Core Component Image markup

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

Detta är en bra introduktion till att utöka och implementera dina egna komponenter.