Criar um componente personalizado

No IDE de sua escolha, abra o módulo core. CustomComponent.java e CustomComponentImpl.java já foram criados e extraídos como parte do código inicial do capítulo.

NOTE

Se estiver usando o Visual Studio Code IDE, pode ser útil instalar extensões para o Java™.

Abra a interface Java™ CustomComponent.java em core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/CustomComponent.java:

Essa é a interface Java™ implementada pelo Modelo Sling.

Atualizar CustomComponent.java para que ele estenda a interface 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();

}

A implementação da interface ComponentExporter é um requisito para que o Modelo Sling seja selecionado automaticamente pela API do modelo JSON.

A interface CustomComponent inclui um único método getter getMessage(). Esse é o método que expõe o valor da caixa de diálogo do autor por meio do modelo JSON. Somente métodos Getter com parâmetros vazios () são exportados no modelo JSON.

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

Esta é a implementação da interface CustomComponent. A anotação @Model identifica a classe Java™ como um Modelo Sling. A anotação @Exporter permite que a classe Java™ seja serializada e exportada por meio do Exportador de Modelo do Sling.

Atualize a variável estática RESOURCE_TYPE para apontar para o componente AEM wknd-spa-angular/components/custom-component criado no exercício anterior.

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

O tipo de recurso do componente é o que vincula o Modelo do Sling ao componente do AEM e, por fim, mapeia para o componente do Angular.

Adicione o método getExportedType() à classe CustomComponentImpl para retornar o tipo de recurso do componente:

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

Este método é necessário ao implementar a interface ComponentExporter e expõe o tipo de recurso que permite o mapeamento para o componente do Angular.

Atualize o método getMessage() para retornar o valor da propriedade message persistida pela caixa de diálogo do autor. Use a anotação @ValueMap para mapear o valor JCR message para uma variável Java™:

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

@ValueMapValue
private String message;

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

Alguma "lógica de negócios" adicional é adicionada para retornar o valor da mensagem como maiúsculas. Isso nos permite ver a diferença entre o valor bruto armazenado pela caixa de diálogo do autor e o valor exposto pelo Modelo do Sling.

NOTE

Você pode exibir o CustomComponentImpl.java concluído aqui.

No módulo ui.frontend, abra o arquivo ui.frontend/src/app/components/custom/custom.component.ts

Observe a linha @Input() message: string;. Espera-se que o valor em maiúsculas transformado seja mapeado para essa variável.

Importe o objeto MapTo do AEM SPA Editor JS SDK e use-o para mapear para o componente AEM:

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

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

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

Abra cutom.component.html e observe que o valor de {{message}} é exibido ao lado de uma tag <h2>.

Abra custom.component.css e adicione a seguinte regra:

:host-context {
    display: block;
}

Para que o Espaço Reservado do Editor do AEM seja exibido corretamente, quando o componente estiver vazio, o :host-context ou outro <div> precisa ser definido como display: block;.

Implante as atualizações em um ambiente local do AEM a partir da raiz do diretório do projeto, usando suas habilidades em Maven:

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

Verifique o registro do novo Modelo do Sling navegando até 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'

Você deve ver as duas linhas acima que indicam que CustomComponentImpl está associado ao componente wknd-spa-angular/components/custom-component e que ele está registrado por meio do Exportador de Modelo do Sling.

Navegue até o Modelo de página do SPA em http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Atualize a política do Contêiner de Layout para adicionar o novo Custom Component como um componente permitido:

Salve as alterações na política e observe o Custom Component como um componente permitido:

Navegue até http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html.

No modo Edit, adicione o Custom Component ao Layout Container:

Abra a caixa de diálogo do componente e insira uma mensagem que contenha algumas letras minúsculas.

Esta é a caixa de diálogo que foi criada com base no arquivo XML mencionado anteriormente no capítulo.

Salve as alterações. Observe que a mensagem exibida está em maiúsculas.

Exiba o modelo JSON navegando até http://localhost:4502/content/wknd-spa-angular/us/en.model.json. Pesquisar por wknd-spa-angular/components/custom-component:

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

Observe que o valor JSON está definido como todas as letras maiúsculas com base na lógica adicionada ao Modelo Sling.