Estender um Componente principal extend-component

Baixe o ponto de partida para este tutorial pelo Git:

$ git clone git@github.com:adobe/aem-guides-wknd-spa.git
$ cd aem-guides-wknd-spa
$ git checkout Angular/extend-component-start

Implante a base de código em uma instância do AEM local usando Maven:

$ mvn clean install -PautoInstallSinglePackage

Se estiver usando o AEM 6.x, adicione o perfil classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Instale o pacote concluído para o site de referência WKND tradicional. The images provided by WKND reference site is reused on the WKND SPA. O pacote pode ser instalado usando o Gerenciador de Pacotes da AEM.

do Gerenciador de Pacotes

In the IDE of your choice open the ui.apps module.

Navigate to ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/card and view the .content.xml file.

<?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="Card"
    sling:resourceSuperType="wknd-spa-angular/components/image"
    componentGroup="WKND SPA Angular - Content"/>

The property sling:resourceSuperType points to wknd-spa-angular/components/image indicating that the Card component inherits the functionality from the WKND SPA Image component.

Inspect the file ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/image/.content.xml:

<?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="Image"
    sling:resourceSuperType="core/wcm/components/image/v2/image"
    componentGroup="WKND SPA Angular - Content"/>

Notice that the sling:resourceSuperType points to core/wcm/components/image/v2/image. This indicates that the WKND SPA Image component inherits the functionality from the Core Component Image.

Also known as the Proxy pattern Sling resource inheritance is a powerful design pattern for allowing child components to inherit functionality and extend/override behavior when desired. Sling inheritance supports multiple levels of inheritance, so ultimately the new Card component inherits functionality of the Core Component Image.

Muitas equipes de desenvolvimento se esforçam para ser D.R.Y. (não se repita). A herança do Sling torna isso possível com o AEM.

Abaixo da pasta card, abra o arquivo _cq_dialog/.content.xml.

Este arquivo é a definição de Caixa de Diálogo de Componente para o componente Card. Se estiver usando a herança do Sling, é possível usar os recursos do Sling Resource Merger para substituir ou estender partes da caixa de diálogo. Neste exemplo, uma nova guia foi adicionada à caixa de diálogo para capturar dados adicionais de um autor para preencher o componente Cartão.

Propriedades como sling:orderBefore permitem que um desenvolvedor escolha onde inserir novas guias ou campos de formulário. Nesse caso, a guia Text é inserida antes da guia asset. Para usar totalmente o Sling Resource Merger, é importante conhecer a estrutura original do nó de diálogo da caixa de diálogo do componente de Imagem.

Abaixo da pasta card, abra o arquivo _cq_editConfig.xml. Esse arquivo determina o comportamento de arrastar e soltar na interface de criação do AEM. Ao estender o componente de Imagem, é importante que o tipo de recurso corresponda ao próprio componente. Revise o nó <parameters>:

<parameters
    jcr:primaryType="nt:unstructured"
    sling:resourceType="wknd-spa-angular/components/card"
    imageCrop=""
    imageMap=""
    imageRotate=""/>

A maioria dos componentes não requer um cq:editConfig. A Imagem e os descendentes secundários do componente de Imagem são exceções.

No IDE, alterne para o módulo ui.frontend, navegando para ui.frontend/src/app/components/card:

Inspecione o arquivo card.component.ts.

O componente já foi esvaziado para mapear para o Componente Card do AEM usando a função MapTo padrão.

MapTo('wknd-spa-angular/components/card')(CardComponent, CardEditConfig);

Revise os três parâmetros @Input na classe para src, alt e title. Esses são valores JSON esperados do componente AEM que são mapeados para o componente Angular.

Abra o arquivo card.component.html:

<div class="card"  *ngIf="hasContent">
    <app-image class="card__image" [src]="src" [alt]="alt" [title]="title"></app-image>
</div>

Neste exemplo, optamos por reutilizar o componente de Imagem do Angular existente app-image simplesmente passando os parâmetros @Input de card.component.ts. Posteriormente no tutorial, propriedades adicionais são adicionadas e exibidas.

Implante o código inicial em uma instância local do AEM, se você ainda não tiver:

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

Navegue até o Modelo de Página de 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 componente Card como um componente permitido:

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

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

No modo Edit, adicione o componente Card a Layout Container:

Arraste e solte uma imagem do Localizador de ativos no componente Card:

Abra a caixa de diálogo do componente Card e observe a adição de uma guia Texto.

Insira os seguintes valores na guia Texto:

Caminho do cartão - escolha uma página abaixo da página inicial do SPA.

Texto Do CTA - "Leia Mais"

Título do cartão - deixe em branco

Obter título da página vinculada - marque a caixa de seleção para indicar verdadeiro.

Atualize a guia Metadados do ativo para adicionar valores para Texto alternativo e Legenda.

No momento, nenhuma alteração adicional é exibida após a atualização da caixa de diálogo. Para expor os novos campos ao componente do Angular, precisamos atualizar o Modelo Sling do componente Card.

Abra uma nova guia e navegue até CRXDE-Lite. Inspecione os nós de conteúdo abaixo de /content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid para localizar o conteúdo do componente Card.

Observe que as propriedades cardPath, ctaText, titleFromPage são mantidas pela caixa de diálogo.

Abra o arquivo Card.java em core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/Card.java.

Observe que a interface Card estende atualmente com.adobe.cq.wcm.core.components.models.Image e, portanto, herda os métodos da interface Image. A interface Image já estende a interface ComponentExporter, o que permite que o Modelo Sling seja exportado como JSON e mapeado pelo editor de SPA. Portanto, não precisamos estender explicitamente a interface ComponentExporter como fizemos no capítulo Componente personalizado.

Adicione os seguintes métodos à interface:

@ProviderType
public interface Card extends Image {

    /***
    * The URL to populate the CTA button as part of the card.
    * The link should be based on the cardPath property that points to a page.
    * @return String URL
    */
    public String getCtaLinkURL();

    /***
    * The text to display on the CTA button of the card.
    * @return String CTA text
    */
    public String getCtaText();



    /***
    * The date to be displayed as part of the card.
    * This is based on the last modified date of the page specified by the cardPath
    * @return
    */
    public Calendar getCardLastModified();


    /**
    * Return the title of the page specified by cardPath if `titleFromPage` is set to true.
    * Otherwise return the value of `cardTitle`
    * @return
    */
    public String getCardTitle();
}

Esses métodos são expostos por meio da API do modelo JSON e passados para o componente Angular.

Abra CardImpl.java. Esta é a implementação da interface Card.java. Esta implementação foi parcialmente removida para acelerar o tutorial. Observe o uso das anotações @Model e @Exporter para garantir que o Modelo do Sling possa ser serializado como JSON por meio do Exportador de modelos do Sling.

CardImpl.java também usa o padrão de Delegação para Modelos Sling para evitar a regravação da lógica do Componente principal de imagem.

Observe as seguintes linhas:

@Self
@Via(type = ResourceSuperType.class)
private Image image;

A anotação acima instancia um objeto de Imagem chamado image com base na herança sling:resourceSuperType do componente Card.

@Override
public String getSrc() {
    return null != image ? image.getSrc() : null;
}

Portanto, é possível simplesmente usar o objeto image para implementar métodos definidos pela interface Image, sem precisar gravar a lógica. Esta técnica é usada para getSrc(), getAlt() e getTitle().

Em seguida, implemente o método initModel() para iniciar uma variável privada cardPage com base no valor de cardPath

@PostConstruct
public void initModel() {
    if(StringUtils.isNotBlank(cardPath) && pageManager != null) {
        cardPage = pageManager.getPage(this.cardPath);
    }
}

O @PostConstruct initModel() é chamado quando o Modelo Sling é inicializado, portanto, é uma boa oportunidade para inicializar objetos que podem ser usados por outros métodos no modelo. pageManager é um dos vários objetos globais com suporte de Java™ disponibilizados para Modelos Sling através da anotação @ScriptVariable. O método getPage pega um caminho e retorna um objeto AEM Page ou é nulo se o caminho não apontar para uma página válida.

Isso inicializa a variável cardPage, que é usada por outros novos métodos para retornar dados sobre a página vinculada subjacente.

Revise as variáveis globais já mapeadas para as propriedades JCR salvas na caixa de diálogo do autor. A anotação @ValueMapValue é usada para executar o mapeamento automaticamente.

@ValueMapValue
private String cardPath;

@ValueMapValue
private String ctaText;

@ValueMapValue
private boolean titleFromPage;

@ValueMapValue
private String cardTitle;

Essas variáveis são usadas para implementar os métodos adicionais para a interface Card.java.

Implementar os métodos adicionais definidos na interface Card.java:

@Override
public String getCtaLinkURL() {
    if(cardPage != null) {
        return cardPage.getPath() + ".html";
    }
    return null;
}

@Override
public String getCtaText() {
    return ctaText;
}

@Override
public Calendar getCardLastModified() {
   if(cardPage != null) {
       return cardPage.getLastModified();
   }
   return null;
}

@Override
public String getCardTitle() {
    if(titleFromPage) {
        return cardPage != null ? cardPage.getTitle() : null;
    }
    return cardTitle;
}

Abra uma janela de terminal e implante apenas as atualizações para o módulo core usando o perfil Maven autoInstallBundle do diretório core.

$ cd core/
$ mvn clean install -PautoInstallBundle

Se estiver usando o AEM 6.x, adicione o perfil classic.

Exiba a resposta do modelo JSON em: http://localhost:4502/content/wknd-spa-angular/us/en.model.json e pesquise por wknd-spa-angular/components/card:

"card": {
    "ctaText": "Read More",
    "cardTitle": "Page 1",
    "title": "Woman chillaxing with river views in Australian bushland",
    "src": "/content/wknd-spa-angular/us/en/home/_jcr_content/root/responsivegrid/card.coreimg.jpeg/1595190732886/adobestock-216674449.jpeg",
    "alt": "Female sitting on a large rock relaxing in afternoon dappled light the Australian bushland with views over the river",
    "cardLastModified": 1591360492414,
    "ctaLinkURL": "/content/wknd-spa-angular/us/en/home/page-1.html",
    ":type": "wknd-spa-angular/components/card"
}

Observe que o modelo JSON é atualizado com pares de chave/valor adicionais após a atualização dos métodos no Modelo Sling CardImpl.

Retorne ao IDE e abra o módulo ui.frontend. Como opção, inicie o servidor de desenvolvimento do webpack a partir de uma nova janela do terminal para ver as alterações em tempo real:

$ cd ui.frontend
$ npm install
$ npm start

Abrir card.component.ts em ui.frontend/src/app/components/card/card.component.ts. Adicionar as @Input anotações adicionais para capturar o novo modelo:

export class CardComponent implements OnInit {

     @Input() src: string;
     @Input() alt: string;
     @Input() title: string;
+    @Input() cardTitle: string;
+    @Input() cardLastModified: number;
+    @Input() ctaLinkURL: string;
+    @Input() ctaText: string;

Adicione métodos para verificar se o Call to action está pronto e para retornar uma cadeia de caracteres de data/hora com base na entrada cardLastModified:

export class CardComponent implements OnInit {
    ...
    get hasCTA(): boolean {
        return this.ctaLinkURL && this.ctaLinkURL.trim().length > 0 && this.ctaText && this.ctaText.trim().length > 0;
    }

    get lastModifiedDate(): string {
        const lastModifiedDate = this.cardLastModified ? new Date(this.cardLastModified) : null;

        if (lastModifiedDate) {
        return lastModifiedDate.toLocaleDateString();
        }
        return null;
    }
    ...
}

Abra card.component.html e adicione a seguinte marcação para exibir o título, o call to action e a data da última modificação:

<div class="card"  *ngIf="hasContent">
    <app-image class="card__image" [src]="src" [alt]="alt" [title]="title"></app-image>
    <div class="card__content">
        <h2 class="card__title">
            {{cardTitle}}
            <span class="card__lastmod" *ngIf="lastModifiedDate">{{lastModifiedDate}}</span>
        </h2>
        <div class="card__action-container" *ngIf="hasCTA">
            <a [routerLink]="ctaLinkURL" class="card__action-link" [title]="ctaText">
                {{ctaText}}
            </a>
        </div>
    </div>
</div>

As regras de acesso já foram adicionadas em card.component.scss para criar o estilo do título, call to action e data da última modificação.

Implante as alterações completas no AEM a partir da raiz do projeto usando o Maven:

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

Navegue até http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html para ver o componente atualizado:

Você deve ser capaz de recriar o conteúdo existente para criar uma página semelhante ao seguinte: