Skapa en anpassad komponent custom-component

Hämta startpunkten för den här självstudiekursen via Git:

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

Distribuera kodbasen till en lokal AEM med Maven:

$ mvn clean install -PautoInstallSinglePackage

Om du använder AEM 6.x lägger du till profilen classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Installera det färdiga paketet för den traditionella WKND-referensplatsen. Bilderna som tillhandahålls av WKND-referensplatsen återanvänds på WKND-SPA. Paketet kan installeras med AEM Package Manager.

Öppna mappen ui.apps i den utvecklingsmiljö du vill använda.

Navigera till ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components och skapa en mapp med namnet custom-component.

Skapa en fil med namnet .content.xml under mappen custom-component. Fyll i custom-component/.content.xml med följande:

<?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="Custom Component"
    componentGroup="WKND SPA Angular - Content"/>

jcr:primaryType="cq:Component" - identifierar att den här noden är en AEM.

jcr:title är det värde som visas för innehållsförfattare och componentGroup bestämmer grupperingen av komponenter i redigeringsgränssnittet.

Skapa en annan mapp med namnet _cq_dialog under mappen custom-component.

Under mappen _cq_dialog skapar du en fil med namnet .content.xml och fyller i den med följande:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Custom Component"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <message
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="The text to display on the component."
                                                fieldLabel="Message"
                                                name="./message"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

XML-filen ovan genererar en enkel dialogruta för Custom Component. Den kritiska delen av filen är den inre <message>-noden. Den här dialogrutan innehåller en enkel textfield med namnet Message och behåller textfältets värde till egenskapen message.

En Sling-modell skapas bredvid för att visa värdet för egenskapen message via JSON-modellen.

I en traditionell AEM krävs vanligtvis ett HTML-skript. Eftersom SPA återger komponenten behövs inget HTML-skript.

Öppna modulen core i den IDE du väljer. CustomComponent.java och CustomComponentImpl.java har redan skapats och bäddats ut som en del av kapitelstartkoden.

Öppna Java™-gränssnittet CustomComponent.java på core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java:

Detta är det Java™-gränssnitt som implementeras av Sling Model.

Uppdatera CustomComponent.java så att det utökar gränssnittet för ComponentExporter:

package com.adobe.aem.guides.wknd.spa.angular.core.models;
import com.adobe.cq.export.json.ComponentExporter;

public interface CustomComponent extends ComponentExporter {

    public String getMessage();

}

Implementering av gränssnittet ComponentExporter är ett krav för att Sling-modellen ska hämtas automatiskt av JSON-modellens API.

Gränssnittet CustomComponent innehåller en enda get-metod, getMessage(). Det här är metoden som visar värdet för författardialogrutan via JSON-modellen. Endast get-metoder med tomma parametrar () exporteras i JSON-modellen.

Öppna CustomComponentImpl.java core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/impl/CustomComponentImpl.java.

Detta är implementeringen av gränssnittet CustomComponent. Anteckningen @Model identifierar Java™-klassen som en Sling Model. Anteckningen @Exporter gör att Java™-klassen kan serialiseras och exporteras via Sling Model Exporter.

Uppdatera den statiska variabeln RESOURCE_TYPE så att den pekar på den AEM komponenten wknd-spa-angular/components/custom-component som skapades i föregående övning.

static final String RESOURCE_TYPE = "wknd-spa-angular/components/custom-component";

Komponentens resurstyp är den som binder Sling-modellen till AEM-komponenten och mappar slutligen till komponenten Angular.

Lägg till metoden getExportedType() i klassen CustomComponentImpl för att returnera komponentresurstypen:

@Override
public String getExportedType() {
    return CustomComponentImpl.RESOURCE_TYPE;
}

Den här metoden krävs vid implementering av ComponentExporter-gränssnittet och visar den resurstyp som tillåter mappningen till Angular-komponenten.

Uppdatera metoden getMessage() för att returnera värdet för egenskapen message som bevaras av författardialogrutan. Använd @ValueMap-anteckningen för att mappa JCR-värdet message till en Java™-variabel:

import org.apache.commons.lang3.StringUtils;
...

@ValueMapValue
private String message;

@Override
public String getMessage() {
    return StringUtils.isNotBlank(message) ? message.toUpperCase() : null;
}

Ytterligare"affärslogik" läggs till för att returnera värdet för meddelandet som versal. På så sätt kan vi se skillnaden mellan det råvärde som lagras av författardialogrutan och det värde som exponeras av Sling-modellen.

Öppna filen ui.frontend/src/app/components/custom/custom.component.ts i modulen ui.frontend

Observera raden @Input() message: string;. Det omformade versalvärdet förväntas mappas till den här variabeln.

Importera objektet MapTo från AEM JS SDK för redigeraren och använd det för att mappa till den AEM komponenten:

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

 ...
 export class CustomComponent implements OnInit {
     ...
 }

+ MapTo('wknd-spa-angular/components/custom-component')(CustomComponent, CustomEditConfig);

Öppna cutom.component.html och observera att värdet för {{message}} visas i en <h2> -tagg.

Öppna custom.component.css och lägg till följande regel:

:host-context {
    display: block;
}

För att AEM platshållare för redigeraren ska visas korrekt när komponenten är tom måste :host-context eller en annan <div> anges till display: block;.

Distribuera uppdateringarna i en lokal AEM från projektets rot med hjälp av dina Maven-kunskaper:

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

Verifiera registreringen av den nya Sling-modellen genom att gå till http://localhost:4502/system/console/status-slingmodels.

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl - wknd-spa-angular/components/custom-component

com.adobe.aem.guides.wknd.spa.angular.core.models.impl.CustomComponentImpl exports 'wknd-spa-angular/components/custom-component' with selector 'model' and extension '[Ljava.lang.String;@6fb4a693' with exporter 'jackson'

Du bör se de två raderna ovan som anger att CustomComponentImpl är associerad med komponenten wknd-spa-angular/components/custom-component och att den är registrerad via Sling Model Exporter.

Navigera till SPA sidmall på http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Uppdatera layoutbehållarens princip så att den nya Custom Component läggs till som en tillåten komponent:

Spara ändringarna i principen och observera Custom Component som en tillåten komponent:

Gå till http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

I Edit-läget lägger du till Custom Component i Layout Container:

Öppna komponentens dialogruta och skriv ett meddelande som innehåller gemener.

Det här är den dialogruta som skapades baserat på XML-filen tidigare i kapitlet.

Spara ändringarna. Observera att det visade meddelandet är i versaler.

Visa JSON-modellen genom att gå till http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Sök efter wknd-spa-angular/components/custom-component:

"custom_component_208183317": {
    "message": "HELLO WORLD",
    ":type": "wknd-spa-angular/components/custom-component"
}

Observera att JSON-värdet är inställt på alla versala bokstäver baserat på den logik som lagts till i Sling-modellen.