Personalización de la capa de datos del cliente de Adobe AEM con componentes de customize-data-layer

AEM Inicie una instancia local de Quickstart author de la ejecución de la en http://localhost:4502.

Abra una ventana de terminal y clone el código base de WKND con Git:

$ git clone git@github.com:adobe/aem-guides-wknd.git

AEM Implemente la base de código WKND en una instancia local de, como se indica a continuación

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

AEM Abra una nueva ventana del explorador e inicie sesión para acceder a la. Abrir una página de Magazine como: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Debería ver un ejemplo del componente Firma que se ha agregado a la página como parte de un Fragmento de experiencia. Puede ver el fragmento de experiencia en http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html

Abra las herramientas para desarrolladores e introduzca el siguiente comando en la consola:

window.adobeDataLayer.getState();

AEM Para ver el estado actual de la capa de datos en un sitio de datos, compruebe la respuesta de un sitio de datos en el que se haya realizado una inspección. Debería ver información sobre la página y los componentes individuales.

Observe que el componente Firma no aparece en la capa de datos.

Abra el proyecto aem-guides-wknd en el IDE que desee. Vaya al módulo core.

Abra el archivo Byline.java en core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Añada el método siguiente a la interfaz:

public interface Byline {
    ...
    /***
     * Return data about the Byline Component to populate the data layer
     * @return String
     */
    String getData();
}

Abra el archivo BylineImpl.java en core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. Es la implementación de la interfaz Byline y se implementa como modelo Sling.

Agregue las siguientes instrucciones de importación al principio del archivo:

import java.util.HashMap;
import java.util.Map;
import org.apache.sling.api.resource.Resource;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.adobe.cq.wcm.core.components.util.ComponentUtils;

Las API fasterxml.jackson se utilizan para serializar los datos que se van a exponer como JSON. AEM Los ComponentUtils de los componentes principales de la se utilizan para comprobar si la capa de datos está habilitada.

Agregar el método no implementado getData() a BylineImple.java:

public class BylineImpl implements Byline {
    ...
    @Override
    public String getData() {
        Resource bylineResource = this.request.getResource();
        // Use ComponentUtils to verify if the DataLayer is enabled
        if (ComponentUtils.isDataLayerEnabled(bylineResource)) {

            //Create a map of properties we want to expose
            Map<String, Object> bylineProperties = new HashMap<String,Object>();
            bylineProperties.put("@type", bylineResource.getResourceType());
            bylineProperties.put("name", this.getName());
            bylineProperties.put("occupation", this.getOccupations());
            bylineProperties.put("fileReference", image.getFileReference());

            //Use AEM Core Component utils to get a unique identifier for the Byline component (in case multiple are on the page)
            String bylineComponentID = ComponentUtils.getId(bylineResource, this.currentPage, this.componentContext);

            // Return the bylineProperties as a JSON String with a key of the bylineResource's ID
            try {
                return String.format("{\"%s\":%s}",
                    bylineComponentID,
                    // Use the ObjectMapper to serialize the bylineProperties to a JSON string
                    new ObjectMapper().writeValueAsString(bylineProperties));
            } catch (JsonProcessingException e) {

                LOGGER.error("Unable to generate dataLayer JSON string", e);
            }

        }
        // return null if the Data Layer is not enabled
        return null;
    }
}

En el método anterior, se usa un nuevo HashMap para capturar las propiedades que se van a exponer como JSON. Observe que se utilizan métodos existentes como getName() y getOccupations(). @type representa el tipo de recurso único del componente; permite a un cliente identificar fácilmente eventos o déclencheur en función del tipo de componente.

ObjectMapper se usa para serializar las propiedades y devolver una cadena JSON. A continuación, esta cadena JSON se puede insertar en la capa de datos.

Abra una ventana de terminal. Genere e implemente solo el módulo core con sus habilidades con Maven:

$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle

Abra el proyecto aem-guides-wknd en el IDE. Vaya al módulo ui.apps.

Abra el archivo byline.html en ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Actualizar byline.html para incluir el atributo data-cmp-data-layer:

  <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
    data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
    data-sly-test.hasContent="${!byline.empty}"
+   data-cmp-data-layer="${byline.data}"
    class="cmp-byline">
    ...

El valor de data-cmp-data-layer se ha establecido en "${byline.data}", donde byline es el modelo Sling actualizado anteriormente. .data es la notación estándar para llamar a un método Java™ Getter en HTL de getData() implementado en el ejercicio anterior.

Abra una ventana de terminal. Genere e implemente solo el módulo ui.apps con sus habilidades con Maven:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Vuelva al explorador y vuelva a abrir la página con un componente Firma: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Abra las herramientas para desarrolladores e inspeccione el origen de HTML de la página para el componente Firma:

Debería ver que data-cmp-data-layer se ha rellenado con la cadena JSON del modelo Sling.

Abra las herramientas para desarrolladores del explorador e introduzca el siguiente comando en la consola:

window.adobeDataLayer.getState();

Vaya debajo de la respuesta en component para encontrar la instancia del componente byline que se ha agregado a la capa de datos:

Debería ver una entrada como la siguiente:

byline-136073cfcb:
    @type: "wknd/components/byline"
    fileReference: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
    name: "Stacey Roswells"
    occupation: (3) ["Artist", "Photographer", "Traveler"]
    parentId: "page-30d989b3f8"

Observe que las propiedades expuestas son las mismas agregadas en HashMap en el modelo Sling.

Abra el módulo ui.apps en su IDE

Abra el archivo byline.html en ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Actualice byline.html para incluir el atributo data-cmp-clickable en el elemento name de la línea de firma:

  <h2 class="cmp-byline__name"
+    data-cmp-clickable="${byline.data ? true : false}">
     ${byline.name}
  </h2>

Abra un terminal nuevo. Genere e implemente solo el módulo ui.apps con sus habilidades con Maven:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Vuelva al explorador y vuelva a abrir la página con el componente Firma agregado: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Para probar el evento, añadiremos manualmente algunas API de JavaScript mediante la consola para desarrolladores. Consulte Uso de la capa de datos del cliente de Adobe AEM con componentes principales de la para ver un vídeo sobre cómo hacerlo.

Abra las herramientas para desarrolladores del explorador e introduzca el método siguiente en la consola:

function bylineClickHandler(event) {
    var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
    if (dataObject != null && dataObject['@type'] === 'wknd/components/byline') {
        console.log("Byline Clicked!");
        console.log("Byline name: " + dataObject['name']);
    }
}

Este método simple debe controlar el clic del nombre del componente Byline.

Escriba el método siguiente en la consola:

window.adobeDataLayer.push(function (dl) {
     dl.addEventListener("cmp:click", bylineClickHandler);
});

El método anterior inserta un detector de eventos en la capa de datos para detectar el evento cmp:click y llama al bylineClickHandler.

En el explorador, con la Consola abierta, haga clic en el nombre del autor en el componente Firma:

Debería ver el mensaje de la consola Byline Clicked! y el nombre de la línea de firma.

El evento cmp:click es el más fácil de vincular. Para componentes más complejos y para rastrear otros comportamientos, es posible añadir JavaScript personalizado para añadir y registrar nuevos eventos. Un buen ejemplo es el Componente de carrusel, que almacena en déclencheur un evento cmp:show cada vez que se cambia una diapositiva. Consulte el código fuente para obtener más información.

Vuelva al IDE y vaya al módulo core.

Abra el archivo Byline.java en core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Modifique el método getData() para devolver un tipo de ComponentData

import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
...
public interface Byline {
    ...
    /***
     * Return data about the Byline Component to populate the data layer
     * @return ComponentData
     */
    ComponentData getData();
}

AEM ComponentData es un objeto proporcionado por los componentes principales de la. Da como resultado una cadena JSON, igual que en el ejemplo anterior, pero también realiza mucho trabajo adicional.

Abra el archivo BylineImpl.java en core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Añada las siguientes instrucciones de importación:

import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;

Reemplace el método getData() con lo siguiente:

@Override
public ComponentData getData() {
    Resource bylineResource = this.request.getResource();
    // Use ComponentUtils to verify if the DataLayer is enabled
    if (ComponentUtils.isDataLayerEnabled(bylineResource)) {

        return DataLayerBuilder.extending(getImage().getData()).asImageComponent()
            .withTitle(this::getName)
            .build();

    }
    // return null if the Data Layer is not enabled
    return null;
}

El componente Firma vuelve a utilizar partes del componente principal de imagen para mostrar una imagen que representa al autor. En el fragmento anterior, DataLayerBuilder se usa para ampliar la capa de datos del componente Image. Esto rellena previamente el objeto JSON con todos los datos sobre la imagen utilizada. También realiza algunas de las funciones rutinarias, como configurar @type y el identificador único del componente. Observe que el método es pequeño.

La única propiedad extendió withTitle, que se reemplazó con el valor de getName().

Abra una ventana de terminal. Genere e implemente solo el módulo core con sus habilidades con Maven:

$ cd aem-guides-wknd/core
$ mvn clean install -PautoInstallBundle

Vuelva al IDE y abra el archivo byline.html en ui.apps

Actualice HTL para usar byline.data.json para rellenar el atributo data-cmp-data-layer:

  <div data-sly-use.byline="com.adobe.aem.guides.wknd.core.models.Byline"
    data-sly-use.placeholderTemplate="core/wcm/components/commons/v1/templates.html"
    data-sly-test.hasContent="${!byline.empty}"
-   data-cmp-data-layer="${byline.data}"
+   data-cmp-data-layer="${byline.data.json}"

Recuerde que ahora se devuelve un objeto de tipo ComponentData. Este objeto incluye un método de captador getJson() y se usa para rellenar el atributo data-cmp-data-layer.

Abra una ventana de terminal. Genere e implemente solo el módulo ui.apps con sus habilidades con Maven:

$ cd aem-guides-wknd/ui.apps
$ mvn clean install -PautoInstallPackage

Vuelva al explorador y vuelva a abrir la página con el componente Firma agregado: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Abra las herramientas para desarrolladores del explorador e introduzca el siguiente comando en la consola:

window.adobeDataLayer.getState();

Vaya debajo de la respuesta en component para encontrar la instancia del componente byline:

Debería ver una entrada como la siguiente:

byline-136073cfcb:
    @type: "wknd/components/byline"
    dc:title: "Stacey Roswells"
    image:
        @type: "image/jpeg"
        repo:id: "142658f8-4029-4299-9cd6-51afd52345c0"
        repo:modifyDate: "2019-10-25T23:49:51Z"
        repo:path: "/content/dam/wknd/en/contributors/stacey-roswells.jpg"
        xdm:tags: []
    parentId: "page-30d989b3f8"
    repo:modifyDate: "2019-10-18T20:17:24Z"

Observe que ahora hay un objeto image dentro de la entrada de componente byline. Tiene mucha más información sobre el recurso en DAM. Observe también que @type y el identificador único (en este caso byline-136073cfcb) se han rellenado automáticamente, y el repo:modifyDate que indica cuándo se modificó el componente.

Otro ejemplo de ampliación de la capa de datos se puede ver inspeccionando el componente ImageList en la base de código WKND:

• ImageList.java: interfaz Java en el módulo core.
• ImageListImpl.java: modelo Sling en el módulo core.
• image-list.html - Plantilla HTL en el módulo ui.apps.