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 de 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. As imagens fornecidas pelo site de referência WKND são reutilizadas no SPA WKND. O pacote pode ser instalado usando o Gerenciador de Pacotes do AEM.

do Gerenciador de Pacotes

No IDE de sua escolha, abra o módulo ui.apps.

Navegue até ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/card e exiba o arquivo .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="Card"
    sling:resourceSuperType="wknd-spa-angular/components/image"
    componentGroup="WKND SPA Angular - Content"/>

A propriedade sling:resourceSuperType aponta para wknd-spa-angular/components/image, indicando que o componente Card herda a funcionalidade do componente de Imagem SPA WKND.

Inspect o arquivo 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"/>

Observe que sling:resourceSuperType aponta para core/wcm/components/image/v2/image. Isso indica que o componente de Imagem SPA WKND herda a funcionalidade da Imagem do componente principal.

Também conhecido como Padrão de proxy, a herança de recursos do Sling é um padrão de design avançado que permite que os componentes secundários herdem funcionalidade e estendam/substituam o comportamento quando desejado. A herança do Sling oferece suporte a vários níveis de herança, de modo que, por fim, o novo componente Card herda a funcionalidade da Imagem do componente principal.

Muitas equipes de desenvolvimento se esforçam para ser D.R.Y. (não se repita). A herança por 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:

Inspect o arquivo card.component.ts.

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

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 de 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 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 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 de Angular, precisamos atualizar o Modelo do Sling para o componente Card.

Abra uma nova guia e navegue até CRXDE-Lite. Inspect 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.

Abrir 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 a Chamada para Ação está pronta 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 plano de ação 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 estilizar o título, o plano de ação e a 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: