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

$ mvn clean install -PautoInstallSinglePackage

Als het gebruiken van ​ AEM 6.x ​ voeg het classic profiel toe:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

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

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 component WKND SPA Image.

Controleer 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 wijst erop dat de component van het Beeld WKND SPA de functionaliteit van het Beeld van de Component van de Kern erft.

Ook gekend als het ​ patroon van de Volmacht ​ Verschuivende 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 als gevolg van het verkopen van erfenis.

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 Middel ​ te 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 Beeld ​ te kennen.

Open het bestand _cq_editConfig.xml onder de map card . Dit bestand schrijft het gedrag voor slepen en neerzetten voor 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:

Controleer 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 worden toegewezen aan de Angular-component.

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 Pagina van het KUUROORD 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 homepage van het KUUROORD.

Tekst van 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. Als u de nieuwe velden toegankelijk wilt maken voor de Angular-component, moet het Sling-model voor de Card -component worden bijgewerkt.

Open een nieuw lusje en navigeer aan ​ CRXDE-Lite ​. Controleer 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 breidt reeds de ComponentExporter interface uit die het het Verdelen Model om als JSON toelaat worden uitgevoerd en door de redacteur van het KUUROORD in kaart gebracht. Daarom te hoeven wij niet uitdrukkelijk om ComponentExporter interface uit te breiden zoals wij in het ​ hoofdstuk van de Component van de Douane ​ deden.

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 gesteld 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 Modellen ​ om 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 voorwerpen ​ ter beschikking gesteld aan het Schuiven Modellen via de @ScriptVariable aantekening. De ​ getPage ​ methode neemt in een weg en keert een voorwerp van de Pagina van AEM 🔗 terug of ongeldig 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.x ​ het classic profiel toevoegt.

Bekijk de JSON modelreactie bij: ​ http://localhost:4502/content/wknd-spa-angular/us/en.model.json ​ en 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 Call to action 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 markering toe om de titel, call to action en de datum van laatste wijziging weer te geven:

<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, call to action en de datum van laatste wijziging op te maken.

Implementeer de volledige wijzigingen in AEM vanaf de basis 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.html ​ om de bijgewerkte component te zien:

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