Een aangepaste component maken

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.

NOTE

Als het gebruiken van winde van de Code van Visual Studio, kan het nuttig zijn om uitbreidingen voor Java™te installeren.

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.

NOTE

U kunt gebeëindigd CustomComponentImpl.java hier bekijken.

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