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 het gebruiken van AEM 6.xhet classic profiel toevoegt:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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.

Open een nieuwe terminal en navigeer naar de map ui.frontend in het project. Looppas npm install en dan npm start om de webpack dev server te beginnen:

$ cd ui.frontend
$ npm run start:mock

De ui.frontend module is momenteel opstelling om het modelJSONte gebruiken.

U zou een nieuw browser venster moeten zien open aan 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 de ui.frontend module uit en open het dossier text.component.ts onder ui.frontend/src/app/components/text/text.component.ts:

Het eerste gebied dat moet worden geïnspecteerd, is de class TextComponent bij ~line 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 gebieden te verklaren die de waarden via het in kaart gebrachte voorwerp worden geplaatst JSON, eerder herzien.

@HostBinding('innerHtml') get content() is een methode die de geschreven tekstinhoud weergeeft van de waarde van this.text . Als de inhoud tekst met opmaak is (bepaald door de markering this.richText ), wordt de ingebouwde beveiliging van de Angular omzeild. DomSanitizer van angularwordt gebruikt om de ruwe HTML "te schrobben"en de kwetsbaarheid van Scripting van de dwars-Plaats te verhinderen. De methode is gebonden aan de eigenschap innerHtml met de decorator @HostBinding.

Controleer vervolgens de TextEditConfig op ~line 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 waar terugkeert dan placeholder wordt teruggegeven.

Bekijk ten slotte de MapTo oproep op ~line 53:

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

MapTo wordt verstrekt door de AEM SPA Redacteur JS SDK (@adobe/cq-angular-editable-components). Het pad wknd-spa-angular/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 ontleedt de JSON modelreactie en gaat de correcte waarden tot de @Input() variabelen van de SPA over component.

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

Experimenteer door het {dossier 0} en.model.json bij ui.frontend/src/mocks/json/en.model.json te wijzigen.

Bij ~line 62 werkt u de eerste Text -waarde bij om de tags H1 en u te gebruiken:

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

Terugkeer aan browser om de gevolgen te zien die door de webpack dev server worden gediend:

Probeer die het richText bezit tussen ​ ​van een knevel voorzien vals om terug te zien logica in actie.

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

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

Inspect app.module.ts bij 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 {}

TextComponent is niet uitdrukkelijk inbegrepen, maar eerder dynamisch via AEMResponsiveGridComponent die door AEM Redacteur JS SDK SPA wordt verstrekt. Daarom moet in app.module.ts entryComponentsserie worden vermeld.

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.

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 ~line 70 een JSON-item toe voor het image -model (vergeet niet de volgkomma , na de tweede text_386303036 ) en werk de array :itemsOrder bij.

...
":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 omvat een steekproefbeeld bij /mock-content/adobestock-140634652.jpeg dat met webpack dev server wordt gebruikt.

U kunt volledige en.model.json hier bekijken.

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

Creeer een nieuwe omslag genoemd beelden onder ui.frontend/src/mocks. De download adobestock-140634652.jpegen plaatst het in de pas gecreëerde beelden omslag. Voel u vrij om desgewenst uw eigen afbeelding te gebruiken.

Stop de webpack dev server als begonnen.

Maak een nieuwe component Image door de opdracht Angular CLI ng generate component uit te voeren vanuit de map ui.frontend :

$ ng generate component components/image

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

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 waarmee wordt bepaald of de plaatsaanduiding van de auteur AEM moet worden weergegeven, op basis van het feit of de eigenschap src is gevuld.

@Input() van src , alt en title 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 toe aan de AEM component die zich op ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image bevindt.

Open image.component.html en werk het als volgt bij:

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

Dit zal het <img> element teruggeven als hasImage waar terugkeert.

Open image.component.scss en werk het als volgt bij:

:host-context {
    display: block;
}

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

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

entryComponents: [TextComponent, PageComponent, ImageComponent],

Net als bij TextComponent wordt ImageComponent dynamisch geladen en moet deze worden opgenomen in de array entryComponents .

Begin webpack dev server om ImageComponent terug te zien.

$ npm run start:mock

wordt toegevoegd

Beeld dat aan de SPA wordt toegevoegd

Stop de webpack dev server en van de wortel van het project, stel de veranderingen in AEM gebruikend uw Maven vaardigheden op:

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

Van het AEM scherm van het Begin navigeert aan Tools > Templates > Angular van de SPA WKND.

Selecteer en geef SPA Pagina uit:

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

Onder Toegestane Componenten > WKND SPA Angular - Inhoud > controleer de component van het Beeld:

Onder StandaardComponenten > voeg afbeelding toe en kies het Beeld - de Angular van de SPA van WKND - 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-angular/us/en/home.html.

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:

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 winde open responsive-grid.component.ts bij ui.frontend/src/app/components/responsive-grid:

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

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

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

In browser navigeert aan http://localhost:4502/content/wknd-spa-angular/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-angular/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-angular/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-angular/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 650px .

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-angular/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-angular/settings/wcm/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-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>

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.