Een aangepaste component maken custom-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/custom-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 verwijzingsplaatsworden opnieuw gebruikt op de SPA WKND. Het pakket kan worden geïnstalleerd gebruikend AEM de Manager van het Pakket.

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

Ga naar ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components en maak een map met de naam custom-component .

Maak een bestand met de naam .content.xml onder de map custom-component . Vul de custom-component/.content.xml met het volgende:

<?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" - identificeert dat dit knooppunt een AEM component is.

jcr:title is de waarde die wordt weergegeven aan Content Authors en componentGroup bepaalt de groepering van componenten in de ontwerpinterface.

Maak onder de map custom-component een andere map met de naam _cq_dialog .

Onder de map _cq_dialog maakt u een bestand met de naam .content.xml en vult u dit met het volgende:

<?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>

de definitie van de Component van 0} Douane

Het bovenstaande XML-bestand genereert een eenvoudig dialoogvenster voor de Custom Component . Het kritieke deel van het bestand is de binnenste <message> -node. Dit dialoogvenster bevat een eenvoudige textfield naam Message en blijft de waarde van het veld textiel bevatten voor een eigenschap met de naam message .

Er wordt een verkoopmodel gemaakt naast de waarde van de eigenschap message via het JSON-model.

Met een traditionele AEM component, wordt een HTMLmanuscript typisch vereist. Aangezien de SPA de component rendert, is er geen HTML-script nodig.

Open de module core in de IDE van uw keuze. CustomComponent.java en CustomComponentImpl.java zijn al gemaakt en uitgestald als onderdeel van de begincode van het hoofdstuk.

Open de Java™-interface CustomComponent.java op core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java :

Dit is de Java™ interface die door het het Verkopen Model wordt uitgevoerd.

Werk CustomComponent.java bij zodat de interface van ComponentExporter wordt uitgebreid:

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();

}

Het implementeren van de interface ComponentExporter is een vereiste dat het Sling-model automatisch wordt opgenomen door de JSON-model-API.

De interface CustomComponent bevat één methode getter getMessage() . Dit is de methode die de waarde van de auteurdialoog door het model JSON blootstelt. Alleen methoden getter met lege parameters () worden geëxporteerd in het JSON-model.

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

Dit is de implementatie van de interface CustomComponent . In de annotatie @Model wordt de Java™-klasse aangeduid als een Sling Model. Met de @Exporter -annotatie kan de Java™-klasse via serienummering worden geserialiseerd en geëxporteerd via de Sling Model Exporter.

Werk de statische variabele RESOURCE_TYPE bij om naar de AEM component wknd-spa-angular/components/custom-component te wijzen die in de vorige oefening is gemaakt.

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

Het middeltype van de component is wat het Sling Model aan de AEM component bindt en uiteindelijk aan de component van de Angular in kaart brengt.

Voeg de methode getExportedType() toe aan de klasse CustomComponentImpl om het type van componentbron te retourneren:

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

Deze methode is vereist wanneer het uitvoeren van de ComponentExporter interface en stelt het middeltype bloot dat de afbeelding aan de component van de Angular toestaat.

Werk de methode getMessage() bij om de waarde te retourneren van de eigenschap message die door het dialoogvenster van de auteur wordt voortgezet. Gebruik de @ValueMap -annotatie om de JCR-waarde message toe te wijzen aan een Java™-variabele:

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

@ValueMapValue
private String message;

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

Er worden extra 'bedrijfslogica' toegevoegd om de waarde van het bericht als hoofdletter te retourneren. Hierdoor kunnen we het verschil zien tussen de onbewerkte waarde die is opgeslagen door het dialoogvenster van de auteur en de waarde die wordt weergegeven door het model Sling.

Open het bestand in de module ui.frontend ui.frontend/src/app/components/custom/custom.component.ts

Bekijk de regel @Input() message: string; . Verwacht wordt dat de getransformeerde hoofdletterwaarde aan deze variabele wordt toegewezen.

Importeer het MapTo -object van de AEM SPA Editor JS SDK en gebruik dit om het toe te wijzen aan de AEM component:

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

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

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

Open cutom.component.html en controleer of de waarde van {{message}} wordt weergegeven naast een <h2> -tag.

Open custom.component.css en voeg de volgende regel toe:

:host-context {
    display: block;
}

De tijdelijke aanduiding voor de AEM Editor wordt alleen correct weergegeven wanneer de component leeg is, als :host-context of een andere <div> is ingesteld op display: block; .

Stel de updates aan een lokaal AEM milieu van de wortel van de projectfolder op, gebruikend uw Maven vaardigheden:

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

Verifieer de registratie van het nieuwe Verschuivende Model door aan http://localhost:4502/system/console/status-slingmodelste navigeren.

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'

De bovenstaande twee regels geven aan dat de CustomComponentImpl is gekoppeld aan de wknd-spa-angular/components/custom-component -component en dat deze is geregistreerd via de Sling Model Exporter.

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 van de Lay-out bij om nieuwe Custom Component als toegestane component toe te voegen:

Sla de wijzigingen in het beleid op en bekijk de Custom Component 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 Custom Component toe aan de Layout Container :

Open het dialoogvenster van de component en voer een bericht in dat kleine letters bevat.

Dit is het dialoogvenster dat is gemaakt op basis van het XML-bestand dat eerder in het hoofdstuk is opgenomen.

Sla de wijzigingen op. Merk op dat het getoonde bericht in alle gekapitaliseerd is.

wordt getoond

Bekijk het model JSON door aan http://localhost:4502/content/wknd-spa-angular/us/en.model.jsonte navigeren. Zoeken naar wknd-spa-angular/components/custom-component :

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

De JSON-waarde wordt ingesteld op alle hoofdletters op basis van de logica die aan het Sling-model is toegevoegd.