Ampliación de un componente principal extend-component

Descargue el punto de partida para este tutorial mediante Git:

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

Implemente el código base en una instancia local de AEM mediante Maven:

$ mvn clean install -PautoInstallSinglePackage

Si usa AEM 6.x, agregue el perfil classic:

$ mvn clean install -PautoInstallSinglePackage -Pclassic

Instale el paquete terminado para el sitio de referencia WKND tradicional. Las imágenes proporcionadas por sitio de referencia WKND se vuelven a utilizar en el SPA de WKND. El paquete se puede instalar usando Administrador de paquetes de AEM.

En el IDE de su elección, abra el módulo ui.apps.

Vaya a ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/card y vea el archivo .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"/>

La propiedad sling:resourceSuperType señala a wknd-spa-angular/components/image, lo que indica que el componente Card hereda la funcionalidad del componente de imagen de SPA de WKND.

Inspeccione el archivo 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 señala a core/wcm/components/image/v2/image. Esto indica que el componente de imagen de SPA de WKND hereda la funcionalidad de la imagen del componente principal.

La herencia de recursos de Sling también conocida como Patrón proxy es un patrón de diseño potente que permite que los componentes secundarios hereden la funcionalidad y amplíen/anulen el comportamiento cuando lo deseen. La herencia de Sling admite varios niveles de herencia, por lo que, en última instancia, el nuevo componente Card hereda la funcionalidad de la imagen del componente principal.

Many development teams strive to be D.R.Y. (don't repeat yourself). Sling inheritance makes this possible with AEM.

Beneath the card folder, open the file _cq_dialog/.content.xml.

This file is the Component Dialog definition for the Card component. If using Sling inheritance, it is possible to use features of the Sling Resource Merger to override or extend portions of the dialog. In this sample, a new tab has been added to the dialog to capture additional data from an author to populate the Card Component.

Properties like sling:orderBefore allow a developer to choose where to insert new tabs or form fields. In this case, the Text tab is inserted before the asset tab. To make full use of the Sling Resource Merger, it is important to know the original dialog node structure for the Image component dialog.

Beneath the card folder, open the file _cq_editConfig.xml. This file dictates the drag and drop behavior in the AEM authoring UI. When extending the Image component, it is important that the resource type matches the component itself. Review the <parameters> node:

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

Most components do not require a cq:editConfig, the Image, and child descendents of the Image component are exceptions.

In the IDE switch to the ui.frontend module, navigating to ui.frontend/src/app/components/card:

Inspeccione el archivo card.component.ts.

The component has already been stubbed out to map to the AEM Card Component using the standard MapTo function.

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

Review the three @Input parameters in the class for src, alt, and title. These are expected JSON values from the AEM component that are mapped to the Angular component.

Open the file card.component.html:

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

In this example we chose to reuse the existing Angular Image component app-image by simply passing the @Input parameters from card.component.ts. Later in the tutorial, additional properties are added and displayed.

Deploy the starter code to a local instance of AEM, if you haven't already:

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

Navigate to the SPA Page Template at http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

Update the Layout Container's policy to add the new Card component as an allowed component:

Save the changes to the policy, and observe the Card component as an allowed component:

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

In Edit mode, add the Card component to the Layout Container:

Drag and drop an image from the Asset finder onto the Card component:

Open the Card component dialog and notice the addition of a Text Tab.

Enter the following values on the Text tab:

Card Path - choose a page beneath the SPA homepage.

CTA Text - "Read More"

Card Title - leave blank

Get title from linked page - check the checkbox to indicate true.

Update the Asset Metadata tab to add values for Alternative Text and Caption.

Currently no additional changes appear after updating the dialog. To expose the new fields to the Angular Component, we need to update the Sling Model for the Card component.

Open a new tab and navigate to CRXDE-Lite. Inspect the content nodes beneath /content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid to find the Card component content.

Observe que el cuadro de diálogo mantiene las propiedades cardPath, ctaText, titleFromPage.

Open the file Card.java at core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/Card.java.

Observe que la interfaz Card amplía actualmente com.adobe.cq.wcm.core.components.models.Image y, por lo tanto, hereda los métodos de la interfaz Image. La interfaz Image ya amplía la interfaz ComponentExporter, lo que permite exportar el modelo Sling como JSON y asignarlo el editor de SPA. Por lo tanto, no es necesario ampliar explícitamente la interfaz ComponentExporter, como se hizo en el capítulo de componente personalizado.

Añada los siguientes métodos a la interfaz:

@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();
}

Estos métodos se exponen a través de la API del modelo JSON y se pasan al componente Angular.

Abra CardImpl.java. Esta es la implementación de la interfaz Card.java. Esta implementación se ha rellenado parcialmente para acelerar el tutorial. Observe el uso de las anotaciones @Model y @Exporter para asegurarse de que el modelo Sling se pueda serializar como JSON a través del exportador del modelo Sling.

CardImpl.java también usa el patrón de delegación para modelos Sling a fin de evitar que se vuelva a escribir la lógica desde el componente principal de imagen.

Observe las líneas siguientes:

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

La anotación anterior crea una instancia de un objeto de imagen denominado image basado en la herencia sling:resourceSuperType del componente Card.

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

Entonces, es posible usar simplemente el objeto image para implementar métodos definidos por la interfaz Image, sin tener que escribir la lógica nosotros mismos. Esta técnica se usa para getSrc(), getAlt() y getTitle().

A continuación, implemente el método initModel() para iniciar una variable privada cardPage basada en el valor de cardPath

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

Se llama al @PostConstruct initModel() cuando se inicializa el modelo Sling, por lo que es una buena oportunidad para inicializar objetos que otros métodos del modelo pueden utilizar. pageManager es uno de varios objetos globales respaldados por Java™ disponibles para los modelos Sling a través de la anotación @ScriptVariable. El método getPage toma una ruta y devuelve un objeto Page de AEM o un valor nulo si la ruta no apunta a una página válida.

Esto inicializa la variable cardPage, que utilizan los otros métodos nuevos para devolver datos sobre la página vinculada subyacente.

Revise las variables globales ya asignadas a las propiedades JCR guardadas en el cuadro de diálogo de autor. La anotación @ValueMapValue se usa para realizar automáticamente la asignación.

@ValueMapValue
private String cardPath;

@ValueMapValue
private String ctaText;

@ValueMapValue
private boolean titleFromPage;

@ValueMapValue
private String cardTitle;

Estas variables se utilizan para implementar los métodos adicionales para la interfaz Card.java.

Implemente los métodos adicionales definidos en la interfaz 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 una ventana de terminal e implemente solo las actualizaciones del módulo core mediante el perfil Maven autoInstallBundle desde el directorio core.

$ cd core/
$ mvn clean install -PautoInstallBundle

Si usa AEM 6.x, agregue el perfil classic.

Vea la respuesta del modelo JSON en: http://localhost:4502/content/wknd-spa-angular/us/en.model.json y busque 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 el modelo JSON se actualiza con pares clave/valor adicionales después de actualizar los métodos en el modelo Sling CardImpl.

Vuelva al IDE y abra el módulo ui.frontend. De forma opcional, inicie el servidor de desarrollo de Webpack desde una nueva ventana de terminal para ver los cambios en tiempo real:

$ cd ui.frontend
$ npm install
$ npm start

Abra card.component.ts a las ui.frontend/src/app/components/card/card.component.ts. Agregue las anotaciones adicionales de @Input para capturar el nuevo 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;

Agregue métodos para comprobar si Call to action está listo y devolver una cadena de fecha y hora basada en la 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 y agregue las siguientes marcas para mostrar el título, la call to action y la fecha de la última modificación:

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

Ya se agregaron reglas Sass en card.component.scss para aplicar estilo al título, call to action y la fecha de la última modificación.

Implemente los cambios completos en AEM desde la raíz del proyecto mediante Maven:

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

Vaya a http://localhost:4502/editor.html/content/wknd-spa-angular/us/en/home.html para ver el componente actualizado:

Debe poder volver a crear el contenido existente para crear una página similar a la siguiente: