SPA componenten toewijzen aan AEM componenten map-components

Download het beginpunt voor deze zelfstudie via Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/map-components-start

Implementeer de basis van de code op een lokale AEM met Maven:

$ mvn clean install -PautoInstallSinglePackage

Als u AEM 6,x voeg toe classic profiel:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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.

Een nieuwe terminal openen en naar de ui.frontend in het project. Uitvoeren npm install en vervolgens npm start om de webpack-ontwikkelserver:

$ cd ui.frontend
$ npm run start:mock

De ui.frontend momenteel is ingesteld op het gebruik van de model van mock JSON.

Er wordt een nieuw browservenster geopend voor http://localhost:4200/content/wknd-spa-angular/us/en/home.html

In winde van uw keus open omhoog het AEM Project voor de SPA WKND. Breid uit ui.frontend en opent u het bestand text.component.ts krachtens ui.frontend/src/app/components/text/text.component.ts:

Het eerste gebied dat moet worden geïnspecteerd is het class TextComponent op ~regel 35:

export class TextComponent {
    @Input() richText: boolean;
    @Input() text: string;
    @Input() itemName: string;

    @HostBinding('innerHtml') get content() {
        return this.richText
        ? this.sanitizer.bypassSecurityTrustHtml(this.text)
        : this.text;
    }
    @HostBinding('attr.data-rte-editelement') editAttribute = true;

    constructor(private sanitizer: DomSanitizer) {}
}

@Input() Decorator wordt gebruikt om velden te declareren die de waarden via het toegewezen JSON-object hebben ingesteld, dat eerder is gecontroleerd.

@HostBinding('innerHtml') get content() is een methode die de geschreven tekstinhoud weergeeft van de waarde van this.text. Als de inhoud bestaat uit tekst met opmaak (bepaald door de this.richText markering) de ingebouwde veiligheid van de Angular wordt overgeslagen. Angular DomSanitizer wordt gebruikt om de onbewerkte HTML te 'scrubben' en kwetsbaarheden met scripts die verwijzen naar andere sites te voorkomen. De methode is gebonden aan de innerHtml eigenschap met de @HostBinding decorator.

Controleer de TextEditConfig op ~regel 24:

const TextEditConfig = {
    emptyLabel: 'Text',
    isEmpty: cqModel =>
        !cqModel || !cqModel.text || cqModel.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 bij ~line 53:

MapTo('wknd-spa-angular/components/text')(TextComponent, TextEditConfig );

MapTo wordt geleverd door de AEM SPA Editor JS SDK (@adobe/cq-angular-editable-components). Het pad wknd-spa-angular/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 parseert de JSON-modelreactie en geeft de juiste waarden door aan de @Input() variabelen van de SPA component.

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

Experimenteer door de en.model.json bestand bij ui.frontend/src/mocks/json/en.model.json.

Bij ~regel 62 werkt u de eerste Text te gebruiken waarde H1 en u tags:

    "text": {
        "text": "<h1><u>Hello World!</u></h1>",
        "richText": true,
        ":type": "wknd-spa-angular/components/text"
    }

Ga terug naar de browser om de effecten te zien die door de webpack-ontwikkelserver:

Probeer de richText eigenschap tussen true / false om de renderlogica in actie te zien.

Inspect text.component.html om ui.frontend/src/app/components/text/text.component.html.

Dit bestand is leeg omdat de volledige inhoud van de component is ingesteld door de innerHTML eigenschap.

Inspect the app.module.ts om ui.frontend/src/app/app.module.ts.

@NgModule({
imports: [
    BrowserModule,
    SpaAngularEditableComponentsModule,
    AppRoutingModule
],
providers: [ModelManagerService, { provide: APP_BASE_HREF, useValue: '/' }],
declarations: [AppComponent, TextComponent, PageComponent, HeaderComponent],
entryComponents: [TextComponent, PageComponent],
bootstrap: [AppComponent]
})
export class AppModule {}

De TextComponent is niet expliciet opgenomen, maar wel dynamisch via AEMResponsiveGridComponent verstrekt door de AEM SPA Editor JS SDK. Daarom moet in de app.module.ts' entryComponents array.

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.

Ga terug naar uw IDE en open de en.model.json om ui.frontend/src/mocks/json/en.model.json. Aangezien dit een netto-nieuwe component voor ons project is, moeten we de Image JSON "modelleren".

Voeg bij ~regel 70 een JSON-item toe voor de image model (vergeet niet de volgkomma , na de tweede text_386303036) en de :itemsOrder array.

...
":items": {
            ...
            "text_386303036": {
                "text": "<p>A new text component.</p>\r\n",
                "richText": true,
                ":type": "wknd-spa-angular/components/text"
                },
            "image": {
                "alt": "Rock Climber in New Zealand",
                "title": "Rock Climber in New Zealand",
                "src": "/mocks/images/adobestock-140634652.jpeg",
                ":type": "wknd-spa-angular/components/image"
            }
        },
        ":itemsOrder": [
            "text",
            "text_386303036",
            "image"
        ],

Het project bevat een voorbeeldafbeelding op /mock-content/adobestock-140634652.jpeg die wordt gebruikt met de webpack-ontwikkelserver.

U kunt de volledige en.model.json hier.

Voeg een stockfoto toe die door de component moet worden weergegeven.

Een nieuwe map maken met de naam afbeeldingen beneide ui.frontend/src/mocks. Downloaden adobestock-140634652.jpeg en deze in het nieuwe ontwerp plaatsen afbeeldingen map. Voel u vrij om desgewenst uw eigen afbeelding te gebruiken.

Stop de webpack-ontwikkelserver indien gestart.

Creeer een nieuwe component van het Beeld door Angular CLI in werking te stellen ng generate component opdracht van binnen ui.frontend map:

$ ng generate component components/image

In winde, open image.component.ts om ui.frontend/src/app/components/image/image.component.ts en als volgt bijwerken:

import {Component, Input, OnInit} from '@angular/core';
import {MapTo} from '@adobe/cq-angular-editable-components';

const ImageEditConfig = {
emptyLabel: 'Image',
isEmpty: cqModel =>
    !cqModel || !cqModel.src || cqModel.src.trim().length < 1
};

@Component({
selector: 'app-image',
templateUrl: './image.component.html',
styleUrls: ['./image.component.scss']
})
export class ImageComponent implements OnInit {

@Input() src: string;
@Input() alt: string;
@Input() title: string;

constructor() { }

get hasImage() {
    return this.src && this.src.trim().length > 0;
}

ngOnInit() { }
}

MapTo('wknd-spa-angular/components/image')(ImageComponent, ImageEditConfig);

ImageEditConfig is de configuratie om te bepalen of om auteursplaceholder in AEM terug te geven, gebaseerd op als src eigenschap is gevuld.

@Input() van src, alt, en title Dit zijn de eigenschappen die zijn toegewezen via de JSON API.

hasImage() is een methode die bepaalt of de afbeelding moet worden gerenderd.

MapTo wijst de SPA component aan de AEM component toe die bij wordt gevestigd ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image.

Openen image.component.html en deze als volgt bij te werken:

<ng-container *ngIf="hasImage">
    <img class="image" [src]="src" [alt]="alt" [title]="title"/>
</ng-container>

Hierdoor wordt de <img> element if hasImage retourneert true.

Openen image.component.scss en deze als volgt bij te werken:

:host-context {
    display: block;
}

.image {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Openen app.module.ts en voeg de ImageComponent aan de entryComponents array:

entryComponents: [TextComponent, PageComponent, ImageComponent],

Zoals de TextComponentde ImageComponent dynamisch is geladen en moet worden opgenomen in de entryComponents array.

Start de webpack-ontwikkelserver om de ImageComponent renderen.

$ npm run start:mock

Afbeelding toegevoegd aan de SPA

Stop de webpack-ontwikkelserver en van de basis van het project, zet de veranderingen in AEM gebruikend uw Maven vaardigheden op:

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

Navigeer van het scherm AEM Start naar Tools > Templates > WKND SPA Angular.

Selecteer en bewerk de SPA pagina:

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

Onder Toegestane componenten > WKND SPA Angular - Inhoud > controleer de Afbeelding component:

Onder Standaardcomponenten > Toewijzing toevoegen en kiest u Afbeelding - WKND SPA Angular - 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-angular/us/en/home.html.

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

U moet ook een afbeelding uit de Asset Finder:

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.

In de winde open responsive-grid.component.ts om ui.frontend/src/app/components/responsive-grid:

import { AEMResponsiveGridComponent,MapTo } from '@adobe/cq-angular-editable-components';

MapTo('wcm/foundation/components/responsivegrid')(AEMResponsiveGridComponent);

De AEMResponsiveGridComponent wordt geïmplementeerd als onderdeel van de AEM SPA Editor SDK en wordt opgenomen in het project via import-components.

Blader in een browser naar http://localhost:4502/content/wknd-spa-angular/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-angular/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-angular/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-angular/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 650px.

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-angular/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-angular/settings/wcm/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-angular" mode="merge"/>
     <filter root="/content/wknd-spa-angular" mode="merge"/>
     <filter root="/content/dam/wknd-spa-angular" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-angular" 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.