Een kerncomponent uitbreiden extend-component

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/extend-component-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

Installeer het gebeëindigde pakket voor de traditionele WKND verwijzingsplaats. De beelden die door worden verstrekt WKND verwijzingsplaatswordt opnieuw gebruikt op de SPA WKND. Het pakket kan worden geïnstalleerd gebruikend AEM de Manager van het Pakket.

Open de module ui.apps in de IDE van uw keuze.

Navigeer naar ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/card en bekijk het .content.xml -bestand.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Card"
    sling:resourceSuperType="wknd-spa-angular/components/image"
    componentGroup="WKND SPA Angular - Content"/>

De eigenschap sling:resourceSuperType verwijst naar wknd-spa-angular/components/image die aangeeft dat de component Card de functionaliteit overerft van de WKND-SPA Image-component.

Inspect het bestand ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image/.content.xml :

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    jcr:primaryType="cq:Component"
    jcr:title="Image"
    sling:resourceSuperType="core/wcm/components/image/v2/image"
    componentGroup="WKND SPA Angular - Content"/>

De sling:resourceSuperType verwijst naar core/wcm/components/image/v2/image . Dit geeft aan dat de WKND SPA Image-component de functionaliteit overerft van de Core Component Image.

Ook gekend als het patroon van de VolmachtVerschuivende middelovererving is een krachtig ontwerppatroon voor het toestaan van kindcomponenten om functionaliteit te erven en gedrag uit te breiden/met voeten te treden wanneer gewenst. De overerving van de verkoop steunt veelvoudige niveaus van overerving, zodat erft de nieuwe Card component uiteindelijk functionaliteit van het Beeld van de Component van de Kern.

Veel ontwikkelingsteams streven ernaar om D.R.Y. te zijn (herhaal jezelf niet). Dit is mogelijk met AEM.

Open het bestand _cq_dialog/.content.xml onder de map card .

Dit bestand is de definitie in het dialoogvenster Component voor de component Card . Als het gebruiken van het Verdelen overerving, is het mogelijk om eigenschappen van de Verschuivende Fusie van het Middelte gebruiken om gedeelten van de dialoog met voeten te treden of uit te breiden. In dit voorbeeld is een nieuw tabblad toegevoegd aan het dialoogvenster om aanvullende gegevens van een auteur vast te leggen om de kaartcomponent te vullen.

Met eigenschappen als sling:orderBefore kan een ontwikkelaar kiezen waar nieuwe tabbladen of formuliervelden moeten worden ingevoegd. In dit geval wordt de tab Text ingevoegd vóór de tab asset . Om volledig gebruik van de Verschuivende Fusie van het Middel te maken, is het belangrijk om de originele structuur van de dialoogknoop voor de de componentendialoog van het Beeldte kennen.

Open het bestand _cq_editConfig.xml onder de map card . Dit bestand dicteert het gedrag van slepen en neerzetten in de AEM-ontwerpinterface. Wanneer het uitbreiden van de component van het Beeld, is het belangrijk dat het middeltype de component zelf aanpast. Controleer het knooppunt <parameters> :

<parameters
    jcr:primaryType="nt:unstructured"
    sling:resourceType="wknd-spa-angular/components/card"
    imageCrop=""
    imageMap=""
    imageRotate=""/>

De meeste componenten vereisen geen cq:editConfig , de Afbeelding en onderliggende afstammelingen van de component Image zijn uitzonderingen.

In de schakelaar IDE aan de ui.frontend module, navigerend aan ui.frontend/src/app/components/card:

Inspect het bestand card.component.ts .

De component is al uitgestald om met behulp van de standaardfunctie MapTo toe te wijzen aan de AEM Card -component.

MapTo('wknd-spa-angular/components/card')(CardComponent, CardEditConfig);

Controleer de drie parameters @Input in de klasse voor src , alt en title . Deze worden JSON-waarden van de AEM component verwacht die aan de component Angular worden toegewezen.

Open het bestand card.component.html :

<div class="card"  *ngIf="hasContent">
    <app-image class="card__image" [src]="src" [alt]="alt" [title]="title"></app-image>
</div>

In dit voorbeeld hebben we ervoor gekozen de bestaande Angular Image-component app-image opnieuw te gebruiken door de @Input -parameters vanuit card.component.ts door te geven. Verderop in de zelfstudie worden extra eigenschappen toegevoegd en weergegeven.

Implementeer de startcode naar een lokale instantie van AEM, als u dat nog niet hebt gedaan:

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

Navigeer aan het Malplaatje van de SPA Pagina in http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Werk het beleid van de container voor lay-out bij om de nieuwe component Card toe te voegen als een toegestane component:

Sla de wijzigingen in het beleid op en bekijk de component Card als een toegestane component:

Navigeer aan http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

Voeg in de modus Edit de component Card toe aan de component Layout Container :

in

Sleep een afbeelding van de zoekfunctie voor middelen naar de component Card :

toe

Open de Card componentendialoog en merk de toevoeging van a Tekst Lusje op.

Ga de volgende waarden op het Tekst lusje in:

Weg van de Kaart - kies een pagina onder de SPA homepage.

Tekst CTA - "Lees meer"

Titel van de Kaart - verlaten leeg

krijgt titel van verbonden pagina - controleer checkbox om waar te wijzen.

Werk het lusje van Metagegevens van Activa bij om waarden voor Alternatieve Tekst en Titel toe te voegen.

Er worden momenteel geen aanvullende wijzigingen weergegeven na het bijwerken van het dialoogvenster. Om de nieuwe gebieden aan de Component van de Angular bloot te stellen, moeten wij het het Verdelen Model voor de component Card bijwerken.

Open een nieuw lusje en navigeer aan CRXDE-Lite. Inspect de inhoudsknooppunten onder /content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid om de inhoud van de component Card te zoeken.

De eigenschappen cardPath, ctaText, titleFromPage blijven in het dialoogvenster behouden.

Open het bestand Card.java om core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/Card.java .

Merk op dat de interface Card momenteel com.adobe.cq.wcm.core.components.models.Image uitbreidt en daarom de methoden van de interface Image overerft. De interface Image is al een uitbreiding van de interface ComponentExporter , waarmee het Sling-model kan worden geëxporteerd als JSON en toegewezen door de SPA-editor. Daarom te hoeven wij niet uitdrukkelijk om ComponentExporter interface uit te breiden zoals wij in het hoofdstuk van de Component van de Douanededen.

Voeg de volgende methodes aan de interface toe:

@ProviderType
public interface Card extends Image {

    /***
    * The URL to populate the CTA button as part of the card.
    * The link should be based on the cardPath property that points to a page.
    * @return String URL
    */
    public String getCtaLinkURL();

    /***
    * The text to display on the CTA button of the card.
    * @return String CTA text
    */
    public String getCtaText();



    /***
    * The date to be displayed as part of the card.
    * This is based on the last modified date of the page specified by the cardPath
    * @return
    */
    public Calendar getCardLastModified();


    /**
    * Return the title of the page specified by cardPath if `titleFromPage` is set to true.
    * Otherwise return the value of `cardTitle`
    * @return
    */
    public String getCardTitle();
}

Deze methoden worden beschikbaar gemaakt via de JSON-model-API en doorgegeven aan de Angular-component.

Openen CardImpl.java . Dit is de implementatie van Card.java interface. Deze implementatie is gedeeltelijk stopgezet om de zelfstudie te versnellen. Let op het gebruik van de @Model - en @Exporter -aantekeningen om ervoor te zorgen dat het Sling-model via de Sling Model Exporter met serienummering kan worden gecodeerd als JSON.

CardImpl.java gebruikt ook het patroon van de Delegatie voor het Verdelen Modellenom het herschrijven van de logica van de Component van de Kern van het Beeld te vermijden.

Neem de volgende regels in acht:

@Self
@Via(type = ResourceSuperType.class)
private Image image;

De bovenstaande aantekening instantieert een afbeeldingsobject met de naam image op basis van de sling:resourceSuperType overerving van de component Card .

@Override
public String getSrc() {
    return null != image ? image.getSrc() : null;
}

Het is dan mogelijk om het image -object eenvoudig te gebruiken voor het implementeren van methoden die zijn gedefinieerd door de Image -interface, zonder dat u zelf de logica hoeft te schrijven. Deze techniek wordt gebruikt voor getSrc() , getAlt() en getTitle() .

Implementeer vervolgens de methode initModel() om een variabele van het type private te initiëren cardPage op basis van de waarde van cardPath

@PostConstruct
public void initModel() {
    if(StringUtils.isNotBlank(cardPath) && pageManager != null) {
        cardPage = pageManager.getPage(this.cardPath);
    }
}

@PostConstruct initModel() wordt geroepen wanneer het het Verdelen Model wordt geïnitialiseerd, daarom is het een goede gelegenheid om voorwerpen te initialiseren die door andere methodes in het model kunnen worden gebruikt. pageManager is één van verscheidene Java™ gesteunde globale voorwerpenter beschikking gesteld aan het Schuiven Modellen via de @ScriptVariable aantekening. De getPagemethode neemt in een weg en keert een AEM paginavoorwerp of ongeldig terug als de weg niet aan een geldige pagina richt.

Hierdoor wordt de variabele cardPage geïnitialiseerd, die door de andere nieuwe methoden wordt gebruikt om gegevens over de onderliggende gekoppelde pagina te retourneren.

Bekijk de algemene variabelen die al zijn toegewezen aan de JCR-eigenschappen die in het dialoogvenster met auteurs zijn opgeslagen. De annotatie @ValueMapValue wordt gebruikt om de toewijzing automatisch uit te voeren.

@ValueMapValue
private String cardPath;

@ValueMapValue
private String ctaText;

@ValueMapValue
private boolean titleFromPage;

@ValueMapValue
private String cardTitle;

Deze variabelen worden gebruikt om de extra methodes voor de Card.java interface uit te voeren.

Voer de extra methodes uit die in de Card.java interface worden bepaald:

@Override
public String getCtaLinkURL() {
    if(cardPage != null) {
        return cardPage.getPath() + ".html";
    }
    return null;
}

@Override
public String getCtaText() {
    return ctaText;
}

@Override
public Calendar getCardLastModified() {
   if(cardPage != null) {
       return cardPage.getLastModified();
   }
   return null;
}

@Override
public String getCardTitle() {
    if(titleFromPage) {
        return cardPage != null ? cardPage.getTitle() : null;
    }
    return cardTitle;
}

Open een terminalvenster en implementeer alleen de updates voor de module core met behulp van het profiel Maven autoInstallBundle uit de map core .

$ cd core/
$ mvn clean install -PautoInstallBundle

Als het gebruiken van AEM 6.xhet classic profiel toevoegt.

Bekijk de JSON modelreactie bij: http://localhost:4502/content/wknd-spa-angular/us/en.model.jsonen onderzoek naar wknd-spa-angular/components/card:

"card": {
    "ctaText": "Read More",
    "cardTitle": "Page 1",
    "title": "Woman chillaxing with river views in Australian bushland",
    "src": "/content/wknd-spa-angular/us/en/home/_jcr_content/root/responsivegrid/card.coreimg.jpeg/1595190732886/adobestock-216674449.jpeg",
    "alt": "Female sitting on a large rock relaxing in afternoon dappled light the Australian bushland with views over the river",
    "cardLastModified": 1591360492414,
    "ctaLinkURL": "/content/wknd-spa-angular/us/en/home/page-1.html",
    ":type": "wknd-spa-angular/components/card"
}

U ziet dat het JSON-model wordt bijgewerkt met extra sleutel-/waardeparen nadat de methoden in het CardImpl Sling-model zijn bijgewerkt.

Keer terug naar winde en open de ui.frontend module. Start eventueel de webpack-ontwikkelserver vanuit een nieuw terminalvenster om de wijzigingen in real-time te zien:

$ cd ui.frontend
$ npm install
$ npm start

Open card.component.ts om ui.frontend/src/app/components/card/card.component.ts . Voeg de aanvullende @Input -annotaties toe om het nieuwe model vast te leggen:

export class CardComponent implements OnInit {

     @Input() src: string;
     @Input() alt: string;
     @Input() title: string;
+    @Input() cardTitle: string;
+    @Input() cardLastModified: number;
+    @Input() ctaLinkURL: string;
+    @Input() ctaText: string;

Voeg methoden toe om te controleren of de oproep tot actie gereed is en om een datum-/tijdtekenreeks te retourneren op basis van de invoer cardLastModified :

export class CardComponent implements OnInit {
    ...
    get hasCTA(): boolean {
        return this.ctaLinkURL && this.ctaLinkURL.trim().length > 0 && this.ctaText && this.ctaText.trim().length > 0;
    }

    get lastModifiedDate(): string {
        const lastModifiedDate = this.cardLastModified ? new Date(this.cardLastModified) : null;

        if (lastModifiedDate) {
        return lastModifiedDate.toLocaleDateString();
        }
        return null;
    }
    ...
}

Open card.component.html en voeg de volgende prijsverhoging toe om de titel, de vraag aan actie en laatste gewijzigde datum te tonen:

<div class="card"  *ngIf="hasContent">
    <app-image class="card__image" [src]="src" [alt]="alt" [title]="title"></app-image>
    <div class="card__content">
        <h2 class="card__title">
            {{cardTitle}}
            <span class="card__lastmod" *ngIf="lastModifiedDate">{{lastModifiedDate}}</span>
        </h2>
        <div class="card__action-container" *ngIf="hasCTA">
            <a [routerLink]="ctaLinkURL" class="card__action-link" [title]="ctaText">
                {{ctaText}}
            </a>
        </div>
    </div>
</div>

Er zijn al sorteerregels toegevoegd bij card.component.scss om de titel, de aanroep van de handeling en de datum van de laatste wijziging op te maken.

Implementeer de volledige wijzigingen in AEM vanuit de hoofdmap van het project met Maven:

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

Navigeer aan http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.htmlom de bijgewerkte component te zien:

U moet de bestaande inhoud opnieuw kunnen ontwerpen om een pagina te maken die lijkt op het volgende: