SPA-componenten toewijzen aan AEM-componenten

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 codebasis naar een lokale AEM-instantie met Maven:

$ mvn clean install -PautoInstallSinglePackage

Als het gebruiken van AEM 6.xvoeg het classic profiel toe:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Alvorens in de code van het KUUROORD te springen, is het belangrijk om het model te begrijpen JSON dat AEM verstrekt. 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 component van AEM aan de component van SPA in kaart te brengen.

text en richText zijn extra eigenschappen die aan de component SPA 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 Project van AEM voor het KND SPA. 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 Angular omzeild. Angular DomSanitizerwordt gebruikt om "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 Redacteur JS SDK van AEM SPA (@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 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 component van het KUUROORD over.

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.

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

Inspecteer 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 de Redacteur JS SDK van AEM 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 component SPA Image te vullen.

NOTE

Er zijn andere eigenschappen van het Beeld blootgesteld (lazyEnabled, widths) die een ontwikkelaar toestaan om een adaptieve en lui-ladende component tot stand te brengen. De component die in dit leerprogramma wordt gebouwd is eenvoudig en gebruikt deze geavanceerde eigenschappen niet.

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 afbeeldingscomponent door de Angular CLI-opdracht 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 in 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 component SPA toe aan de AEM-component in ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image .

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;
}

NOTE

De :host-context regel is kritiek voor de redacteursplaceholder van AEM SPA correct te functioneren. Alle componenten van het KUUROORD die bestemd zijn om in de AEM paginaredacteur te worden ontworpen zullen deze regel bij een minimum vereisen.

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 het KUUUROORD wordt toegevoegd

NOTE

de uitdaging van de Bonus: Voer een nieuwe methode uit om de waarde van title als titel onder het beeld te tonen.

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

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

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

Selecteer en geef de Pagina van het KUUROORD uit:

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 - WKND SPA Angular - 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 Tekst van het KUUROORD. 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 het KND KUUROORD kunnen worden opnieuw gebruikt. Het pakket kan worden geïnstalleerd gebruikend de Manager van het Pakket van AEM.

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 is opgenomen in het project via import-components .

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

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

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: