Creare un componente personalizzato

Nell'IDE scelto aprire il modulo core. CustomComponent.java e CustomComponentImpl.java sono già stati creati e sottoposti a stub come parte del codice iniziale del capitolo.

NOTE

Se si utilizza l'IDE di codice di Visual Studio, potrebbe essere utile installare estensioni per Java™.

Aprire l'interfaccia Java™ CustomComponent.java in core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java:

Si tratta dell’interfaccia Java™ implementata dal modello Sling.

Aggiorna CustomComponent.java in modo che estenda l'interfaccia 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();

}

L'implementazione dell'interfaccia ComponentExporter è un requisito affinché il modello Sling possa essere selezionato automaticamente dall'API del modello JSON.

L'interfaccia CustomComponent include un singolo metodo getter getMessage(). Questo è il metodo che espone il valore della finestra di dialogo dell’autore tramite il modello JSON. Nel modello JSON vengono esportati solo i metodi getter con parametri vuoti ().

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

Implementazione dell'interfaccia CustomComponent. L'annotazione @Model identifica la classe Java™ come modello Sling. L'annotazione @Exporter consente la serializzazione e l'esportazione della classe Java™ tramite Sling Model Exporter.

Aggiornare la variabile statica RESOURCE_TYPE in modo che punti al componente AEM wknd-spa-angular/components/custom-component creato nell'esercizio precedente.

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

Il tipo di risorsa del componente è ciò che associa il modello Sling al componente AEM e alla fine lo mappa al componente Angular.

Aggiungere il metodo getExportedType() alla classe CustomComponentImpl per restituire il tipo di risorsa del componente:

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

Questo metodo è necessario quando si implementa l'interfaccia ComponentExporter ed espone il tipo di risorsa che consente il mapping al componente Angular.

Aggiornare il metodo getMessage() per restituire il valore della proprietà message persistente nella finestra di dialogo di authoring. Utilizzare l'annotazione @ValueMap per mappare il valore JCR message a una variabile Java™:

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

@ValueMapValue
private String message;

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

Viene aggiunta un’ulteriore "logica di business" per restituire il valore del messaggio in maiuscolo. Questo consente di vedere la differenza tra il valore non elaborato memorizzato dalla finestra di dialogo di authoring e il valore esposto dal modello Sling.

NOTE

Puoi visualizzare CustomComponentImpl.java completato qui.

Nel modulo ui.frontend apri il file ui.frontend/src/app/components/custom/custom.component.ts

Osservare la riga @Input() message: string;. È previsto che il valore in maiuscolo trasformato sia mappato a questa variabile.

Importare l'oggetto MapTo dal SDK JS dell'editor di applicazioni a pagina singola di AEM e utilizzarlo per eseguire il mapping al componente AEM:

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

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

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

Aprire cutom.component.html e osservare che il valore di {{message}} è visualizzato sul lato di un tag <h2>.

Apri custom.component.css e aggiungi la seguente regola:

:host-context {
    display: block;
}

Affinché il segnaposto dell'editor di AEM venga visualizzato correttamente quando il componente è vuoto, è necessario impostare :host-context o un altro <div> su display: block;.

Distribuisci gli aggiornamenti a un ambiente AEM locale dalla directory principale del progetto, utilizzando le abilità Maven:

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

Verifica la registrazione del nuovo modello Sling passando a 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'

Le due righe precedenti indicano che CustomComponentImpl è associato al componente wknd-spa-angular/components/custom-component e che è registrato tramite Sling Model Exporter.

Passa al modello per pagina SPA all'indirizzo http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Aggiornare il criterio Contenitore di layout per aggiungere il nuovo Custom Component come componente consentito:

Salvare le modifiche al criterio e osservare Custom Component come componente consentito:

Passa a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

In modalità Edit, aggiungere Custom Component a Layout Container:

Apri la finestra di dialogo del componente e immetti un messaggio contenente alcune lettere minuscole.

Questa è la finestra di dialogo creata in base al file XML precedente nel capitolo.

Salva le modifiche. Il messaggio visualizzato deve essere scritto in maiuscolo.

Visualizza il modello JSON passando a http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Cerca wknd-spa-angular/components/custom-component:

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

Il valore JSON è impostato su tutte le lettere maiuscole in base alla logica aggiunta al modello Sling.