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 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 ​ worden opnieuw gebruikt op WKND SPA. Het pakket kan worden geïnstalleerd gebruikend ​ de Manager van het Pakket van AEM ​.

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" - Geeft aan 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 component van AEM, wordt een ​ HTML ​ manuscript typisch vereist. Aangezien SPA de component teruggeeft, is geen manuscript van HTML 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 verwijzen die in de vorige exercitie is gemaakt.

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

Het hulpmiddeltype van de component is wat het het Schuintrekken Model aan de component van AEM bindt en uiteindelijk aan de component van 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 bij het implementeren van de ComponentExporter -interface en stelt het brontype beschikbaar dat de toewijzing aan de Angular-component 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 uit 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 weergave van de AEM Editor is alleen correct wanneer de component leeg is. :host-context of een andere <div> moet worden ingesteld op display: block; .

Implementeer de updates voor een lokale AEM-omgeving vanuit de hoofdmap van de projectmap met behulp van 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-slingmodels ​ te 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 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 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.json ​ te 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.