Ampliación de un componente principal

AEM SPA Obtenga información sobre cómo ampliar un componente principal existente para utilizarlo con el Editor de. AEM SPA Comprender cómo ampliar un componente existente es una técnica potente para personalizar y ampliar las capacidades de una implementación de Editor de de trabajo.

Objetivo

1. Ampliar un componente principal existente con propiedades y contenido adicionales.
2. Comprenda los conceptos básicos de la herencia de componentes con el uso de sling:resourceSuperType.
3. Aprenda a utilizar el Patrón de delegación para que los modelos Sling reutilicen la lógica y la funcionalidad existentes.

Qué va a generar

En este capítulo, se muestra un nuevo Card se ha creado el componente. El Card El componente amplía el Componente principal de imagen SPA agregar campos de contenido adicionales como un título y un botón de llamada a la acción para realizar la función de teaser para otro contenido dentro de la.

Requisitos previos

Revise las herramientas y las instrucciones necesarias para configurar una entorno de desarrollo local.

Obtener el código

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

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

   $ mvn clean install -PautoInstallSinglePackage
   

   Si se usa AEM.x añada el classic perfil:

   $ mvn clean install -PautoInstallSinglePackage -Pclassic
   

3. Instale el paquete terminado para el tradicional Sitio de referencia de WKND. Las imágenes proporcionadas por Sitio de referencia de WKND SPA se reutiliza en el WKND de la. El paquete se puede instalar utilizando AEM Administrador de paquetes.

   

Siempre puede ver el código terminado en GitHub o compruebe el código localmente cambiando a la rama Angular/extend-component-solution.

Implementación de la tarjeta inicial de Inspect

El código de inicio del capítulo ha proporcionado un componente de tarjeta inicial. Inspect es el punto de partida para la implementación de la tarjeta.

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

2. Vaya a ui.apps/src/main/content/jcr_root/apps/wknd-spa-angular/components/card y vea el .content.xml archivo.

   

   <?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 apunta a wknd-spa-angular/components/image que indica que la variable Card SPA Este componente hereda la funcionalidad del componente de imagen de WKND.

3. Inspect 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 la variable sling:resourceSuperType apunta a core/wcm/components/image/v2/image. SPA Esto indica que el componente de imagen de WKND hereda la funcionalidad de la imagen del componente principal.

   También conocido como Patrón de proxy La herencia de recursos de Sling es un potente patrón de diseño para permitir 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 Card El componente hereda la funcionalidad de la imagen del componente principal.

   Muchos equipos de desarrollo se esfuerzan por ser D.R.Y. (no te repitas). AEM La herencia de Sling lo hace posible con la.

4. Debajo del card carpeta, abra el archivo _cq_dialog/.content.xml.

   Este archivo es la definición del Cuadro de diálogo de componentes para Card componente. Si se utiliza la herencia de Sling, es posible utilizar las funciones del Fusión de recursos de Sling para anular o ampliar partes del diálogo. En este ejemplo, se ha añadido una nueva pestaña al cuadro de diálogo para capturar datos adicionales de un autor para rellenar el componente de tarjeta.

   Propiedades como sling:orderBefore permite a los desarrolladores elegir dónde insertar nuevas pestañas o campos de formulario. En este caso, la variable Text se inserta antes de asset pestaña. Para utilizar al máximo la fusión de recursos de Sling, es importante conocer la estructura del nodo de diálogo original para la Cuadro de diálogo Componente de imagen.

5. Debajo del card carpeta, abra el archivo _cq_editConfig.xml. AEM Este archivo dicta el comportamiento de arrastrar y soltar en la interfaz de usuario de creación de la. Al ampliar el componente de imagen, es importante que el tipo de recurso coincida con el propio componente. Revise la <parameters> nodo:

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

   La mayoría de los componentes no requieren un cq:editConfig, la imagen y los descendientes secundarios del componente de imagen son excepciones.

6. En el IDE, cambie al ui.frontend módulo, navegación a ui.frontend/src/app/components/card:

   

7. Inspect el archivo card.component.ts.

   AEM El componente ya se ha rellenado para asignarlo al grupo de elementos de la Card Componente que utiliza el estándar MapTo función.

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

   Revise los tres @Input parámetros de la clase para src, alt, y title. AEM Estos son valores JSON esperados del componente de que se asignan al componente de Angular.

8. Abra el archivo card.component.html:

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

   En este ejemplo, elegimos reutilizar el componente de imagen de Angular existente app-image simplemente pasando el @Input parámetros de card.component.ts. Más adelante en el tutorial, se añaden y muestran propiedades adicionales.

Actualizar la directiva de plantilla

Con esta inicial Card AEM SPA implementación revise la funcionalidad en el Editor de la de. Para ver la Card Componente se necesita una actualización de la directiva de plantilla.

1. AEM Implemente el código de inicio en una instancia local de, si aún no lo ha hecho:

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

2. SPA Navegue hasta la plantilla de página de la página de en http://localhost:4502/editor.html/conf/wknd-spa-angular/settings/wcm/templates/spa-page-template/structure.html.

3. Actualice la directiva del contenedor de diseño para agregar el nuevo Card componente como componente permitido:

   

   Guarde los cambios en la directiva y observe las Card componente como componente permitido:

   

Componente de tarjeta inicial del autor

A continuación, cree el Card AEM SPA mediante el Editor de.

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

2. Entrada Edit modo, añada el Card al componente de Layout Container:

   

3. Arrastre y suelte una imagen del buscador de recursos en el Card componente:

   

4. Abra el Card diálogo de componentes y observe la adición de un Texto Ficha.

5. Introduzca los siguientes valores en la Texto pestaña:

   

   Ruta de tarjeta SPA : elija una página debajo de la página principal de la.

   Texto CTA - "Leer más"

   Título de tarjeta - dejar en blanco

   Obtener título de la página vinculada : marque la casilla de verificación para indicar verdadero.

6. Actualice el Metadatos del recurso pestaña para añadir valores Texto alternativo y Rótulo.

   Actualmente no aparecen cambios adicionales después de actualizar el cuadro de diálogo. Para exponer los nuevos campos al componente Angular, se debe actualizar el modelo Sling para el Card componente.

7. Abra una pestaña nueva y vaya a CRXDE-Lite. Inspect los nodos de contenido debajo de /content/wknd-spa-angular/us/en/home/jcr:content/root/responsivegrid para encontrar la Card contenido del componente.

   

   Observe las propiedades cardPath, ctaText, titleFromPage son persistentes por el cuadro de diálogo.

Actualizar modelo de Sling de tarjeta

Para exponer finalmente los valores del cuadro de diálogo del componente al componente Angular, necesitamos actualizar el modelo Sling que rellena el JSON para el Card componente. También tenemos la oportunidad de implementar dos partes de lógica empresarial:

• If titleFromPage hasta true, devuelve el título de la página especificada por cardPath de lo contrario, devuelve el valor cardTitle textfield.
• Devuelve la última fecha de modificación de la página especificada por cardPath.

Vuelva al IDE de su elección y abra core módulo.

1. Abra el archivo Card.java en core/src/main/java/com/adobe/aem/guides/wknd/spa/angular/core/models/Card.java.

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

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

3. Abra CardImpl.java. Esta es la implementación de Card.java interfaz. Esta implementación se ha rellenado parcialmente para acelerar el tutorial. Observe el uso del @Model y @Exporter anotaciones para garantizar que el modelo Sling se pueda serializar como JSON mediante el exportador de modelos Sling.

   CardImpl.java también utiliza el Patrón de delegación para modelos Sling para evitar volver a escribir la lógica desde el componente principal de imagen.

4. Observe las líneas siguientes:

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

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

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

   A continuación, es posible utilizar simplemente la variable image objeto para implementar métodos definidos por Image interfaz, sin tener que escribir la lógica nosotros mismos. Esta técnica se utiliza para getSrc(), getAlt(), y getTitle().

5. A continuación, implemente la initModel() método para iniciar una variable privada cardPage en función del valor de cardPath

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

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

   Esto inicializa el cardPage , que es utilizada por los otros métodos nuevos para devolver datos sobre la página vinculada subyacente.

6. Revise las variables globales ya asignadas a las propiedades JCR guardadas en el cuadro de diálogo de autor. El @ValueMapValue La anotación se utiliza 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 Card.java interfaz.

7. Implemente los métodos adicionales definidos en la variable Card.java interfaz:

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

   NOTA

   Puede ver el CardImpl.java terminado aquí.

8. Abra una ventana de terminal e implemente solo las actualizaciones de core usando el módulo de Maven autoInstallBundle perfil de la core directorio.

   $ cd core/
   $ mvn clean install -PautoInstallBundle
   

   Si se usa AEM.x añada el classic perfil.

9. Vea la respuesta del modelo JSON en: http://localhost:4502/content/wknd-spa-angular/us/en.model.json y busque el 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 la CardImpl Modelo Sling.

Actualizar componente de Angular

Ahora que el modelo JSON se rellena con nuevas propiedades para ctaLinkURL, ctaText, cardTitle, y cardLastModified podemos actualizar el componente Angular para mostrarlos.

1. Vuelva al IDE y abra ui.frontend módulo. 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
   

2. Abrir card.component.ts en ui.frontend/src/app/components/card/card.component.ts. Añada el adicional @Input anotaciones 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;
   

3. Añada métodos para comprobar si la llamada a la acción está lista y devolver una cadena de fecha y hora basada en la variable cardLastModified entrada:

   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;
       }
       ...
   }
   

4. Abrir card.component.html y agregue el siguiente marcado para mostrar el título, la llamada a la acción 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 han añadido las reglas Sass en card.component.scss para aplicar estilo al título, llame a la acción y especifique la fecha de la última modificación.

   NOTA

   Puede ver los informes finalizados código de componente de tarjeta de angular aquí.

5. AEM Implemente los cambios completos a los que desee aplicar un cambio desde la raíz del proyecto mediante Maven:

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

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

   

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

   

Enhorabuena.

AEM Enhorabuena, ha aprendido a ampliar un componente de y cómo los modelos Sling y los cuadros de diálogo funcionan con el modelo JSON.

Siempre puede ver el código terminado en GitHub o compruebe el código localmente cambiando a la rama Angular/extend-component-solution.

Recursos de Business.Adobe.com