Personalización de la capa de datos del cliente de Adobe AEM con componentes de customize-data-layer
Obtenga información sobre cómo personalizar la capa de datos del cliente de Adobe AEM con contenido de componentes de personalizados. Aprenda a utilizar las API proporcionadas por AEM Componentes principales que se van a ampliar y personalizar la capa de datos.
Lo que va a generar
En este tutorial, vamos a explorar varias opciones para ampliar la capa de datos del cliente de Adobe actualizando WKND Componente Firma. El Firma el componente es un componente personalizado y las lecciones aprendidas en este tutorial se pueden aplicar a otros componentes personalizados.
Objetivos objective
- Inserte datos de componente en la capa de datos ampliando un modelo Sling y un componente HTL
- Utilice las utilidades de capa de datos del componente principal para reducir el esfuerzo
- Utilice los atributos de datos del componente principal para vincularlos a eventos de capa de datos existentes
Requisitos previos prerequisites
A entorno de desarrollo local es necesario para completar este tutorial. AEM Las capturas de pantalla y los vídeos se capturan mediante el SDK as a Cloud Service de que se ejecuta en un macOS. Los comandos y el código son independientes del sistema operativo local a menos que se indique lo contrario.
¿Es novato en el uso de AEM as a Cloud Service? Consulte la siguiente guía para configurar un entorno de desarrollo local con el SDK de AEM as a Cloud Service.
AEM ¿Nuevo en la versión 6.5 de? Consulte la siguiente guía para configurar un entorno de desarrollo local.
Descargar e implementar el sitio de referencia de WKND set-up-wknd-site
Este tutorial amplía el componente Byline en el sitio de referencia de WKND. Clone e instale el código WKND base en su entorno local.
-
Iniciar un inicio rápido local autor AEM instancia 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:
code language-shell $ 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
code language-shell $ cd aem-guides-wknd $ mvn clean install -PautoInstallSinglePackage
note note NOTE AEM Para la versión 6.5 y el paquete de servicio más reciente, añada la variable classic
de perfil al comando Maven:mvn clean install -PautoInstallSinglePackage -Pclassic
-
AEM Abra una nueva ventana del explorador e inicie sesión para acceder a la. Abra un Revista página 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:
code language-js 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.
Actualización del modelo Sling de firma sling-model
Para insertar datos sobre el componente en la capa de datos, primero vamos a actualizar el modelo Sling del componente. A continuación, actualice la interfaz Java™ y la implementación del modelo Sling de Byline para tener un nuevo método getData()
. Este método contiene las propiedades que se van a insertar en la capa de datos.
-
Abra el
aem-guides-wknd
proyecto en el IDE que elija. Vaya acore
módulo. -
Abra el archivo
Byline.java
encore/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java
. -
Añada el método siguiente a la interfaz:
code language-java public interface Byline { ... /*** * Return data about the Byline Component to populate the data layer * @return String */ String getData(); }
-
Abra el archivo
BylineImpl.java
encore/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java
. Es la implementación de laByline
y se implementa como un modelo Sling. -
Agregue las siguientes instrucciones de importación al principio del archivo:
code language-java 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;
El
fasterxml.jackson
Las API se utilizan para serializar los datos que se van a exponer como JSON. ElComponentUtils
AEM Los componentes principales se utilizan para comprobar si la capa de datos está habilitada. -
Añadir el método no implementado
getData()
hastaBylineImple.java
:code language-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, una nueva
HashMap
se utiliza para recopilar las propiedades que se van a exponer como JSON. Observe que los métodos existentes comogetName()
ygetOccupations()
se utilizan. El@type
representa el tipo de recurso único del componente y permite a un cliente identificar fácilmente eventos o déclencheur en función del tipo de componente.El
ObjectMapper
se utiliza 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
core
con sus habilidades con Maven:code language-shell $ cd aem-guides-wknd/core $ mvn clean install -PautoInstallBundle
Actualizar el HTL de firma htl
A continuación, actualice el Byline
HTL. HTL (lenguaje de plantilla de HTML) es la plantilla utilizada para procesar el HTML del componente.
Un atributo de datos especial data-cmp-data-layer
AEM en cada componente de la se utiliza para exponer su capa de datos. AEM El JavaScript proporcionado por los componentes principales de la aplicación busca este atributo de datos. El valor de este atributo de datos se rellena con la cadena JSON devuelta por el modelo de Sling de firma getData()
y se inserta en la capa de datos del cliente de Adobe.
-
Abra el
aem-guides-wknd
proyecto en el IDE. Vaya aui.apps
módulo. -
Abra el archivo
byline.html
enui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html
. -
Actualizar
byline.html
para incluir eldata-cmp-data-layer
atributo:code language-diff <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}"
dondebyline
es el modelo Sling actualizado anteriormente..data
es la notación estándar para llamar a un método Java™ Getter en HTL degetData()
implementado en el ejercicio anterior. -
Abra una ventana de terminal. Genere e implemente solo el
ui.apps
con sus habilidades con Maven:code language-shell $ 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 la variable
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:
code language-js window.adobeDataLayer.getState();
-
Vaya debajo de la respuesta en
component
para encontrar la instancia debyline
se ha añadido el componente a la capa de datos:Debería ver una entrada como la siguiente:
code language-json 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 la variable
HashMap
en el modelo Sling.
Agregar un evento de clic click-event
La capa de datos del cliente de Adobe se basa en eventos y uno de los eventos más comunes para almacenar en déclencheur una acción es el cmp:click
evento. AEM Los componentes principales hacen que sea fácil registrar su componente con la ayuda del elemento de datos: data-cmp-clickable
.
Los elementos en los que se puede hacer clic suelen ser un botón CTA o un vínculo de navegación. Desafortunadamente, el componente Firma no tiene ninguno de estos, pero vamos a registrarlo de todas formas, ya que esto podría ser común para otros componentes personalizados.
-
Abra el
ui.apps
en el IDE -
Abra el archivo
byline.html
enui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html
. -
Actualizar
byline.html
para incluir eldata-cmp-clickable
en el Byline's name elemento:code language-diff <h2 class="cmp-byline__name" + data-cmp-clickable="${byline.data ? true : false}"> ${byline.name} </h2>
-
Abra un terminal nuevo. Genere e implemente solo el
ui.apps
con sus habilidades con Maven:code language-shell $ cd aem-guides-wknd/ui.apps $ mvn clean install -PautoInstallPackage
-
Vuelva al explorador y vuelva a abrir la página con el componente Firma añadido: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.
Para probar el evento, añadiremos manualmente JavaScript a través de la consola para desarrolladores. Consulte Uso de la capa de datos del cliente de Adobe AEM con los componentes principales de para ver un vídeo sobre cómo hacerlo.
-
Abra las herramientas para desarrolladores del explorador e introduzca el siguiente método en la Consola:
code language-javascript 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.
-
Introduzca el siguiente método en la Consola:
code language-javascript 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
cmp:click
y llama albylineClickHandler
.note caution CAUTION Es importante no para actualizar el explorador durante este ejercicio; de lo contrario, se pierde el JavaScript de la consola. -
En el explorador, con la variable Consola Para abrirlo, 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 firma.El
cmp:click
es el más fácil de conectar con. 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 déclencheur uncmp:show
cada vez que se cambia una diapositiva. Consulte la código fuente para obtener más información.
Uso de la utilidad DataLayerBuilder data-layer-builder
Cuando el modelo Sling era actualizado anteriormente en el capítulo, optamos por crear la cadena JSON mediante una HashMap
y configurando cada una de las propiedades manualmente. AEM Este método funciona bien para componentes únicos pequeños, pero para los componentes que amplían los componentes principales esto podría dar como resultado mucho código adicional.
Una clase de utilidad, DataLayerBuilder
, existe para realizar la mayor parte del trabajo pesado. Esto permite que las implementaciones amplíen únicamente las propiedades que desean. Actualicemos el modelo Sling para utilizar la variable DataLayerBuilder
.
-
Vuelva al IDE y vaya al
core
módulo. -
Abra el archivo
Byline.java
encore/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java
. -
Modifique la
getData()
método para devolver un tipo deComponentData
code language-java 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(); }
ComponentData
AEM 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
encore/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java
. -
Añada las siguientes instrucciones de importación:
code language-java import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData; import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;
-
Reemplace el
getData()
con lo siguiente:code language-java @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, la variable DataLayerBuilder se utiliza para ampliar la capa de datos del
Image
componente. Esto rellena previamente el objeto JSON con todos los datos sobre la imagen utilizada. También realiza algunas de las funciones de rutina, como configurar la variable@type
y el identificador único del componente. Observe que el método es pequeño.La única propiedad amplió el
withTitle
que se sustituye por el valorgetName()
. -
Abra una ventana de terminal. Genere e implemente solo el
core
con sus habilidades con Maven:code language-shell $ cd aem-guides-wknd/core $ mvn clean install -PautoInstallBundle
-
Vuelva al IDE y abra
byline.html
archivo enui.apps
-
Actualizar HTL para usar
byline.data.json
para rellenar eldata-cmp-data-layer
atributo:code language-diff <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 del tipo
ComponentData
. Este objeto incluye un método de captadorgetJson()
y se usa para rellenar eldata-cmp-data-layer
atributo. -
Abra una ventana de terminal. Genere e implemente solo el
ui.apps
con sus habilidades con Maven:code language-shell $ cd aem-guides-wknd/ui.apps $ mvn clean install -PautoInstallPackage
-
Vuelva al explorador y vuelva a abrir la página con el componente Firma añadido: 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:
code language-js window.adobeDataLayer.getState();
-
Vaya debajo de la respuesta en
component
para encontrar la instancia debyline
componente:Debería ver una entrada como la siguiente:
code language-json 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
image
objeto dentro debyline
entrada de componente. Tiene mucha más información sobre el recurso en DAM. Observe también que la variable@type
y el id único (en este caso, )byline-136073cfcb
) se han rellenado automáticamente, y la variablerepo:modifyDate
que indica cuándo se modificó el componente.
Ejemplos adicionales additional-examples
-
Otro ejemplo de ampliación de la capa de datos se puede ver inspeccionando la
ImageList
en la base de código WKND:ImageList.java
- Interfaz de Java encore
módulo.ImageListImpl.java
- Modelo Sling encore
módulo.image-list.html
- Plantilla HTL en elui.apps
módulo.
note note NOTE Es un poco más difícil incluir propiedades personalizadas como occupation
al usar el DataLayerBuilder. Sin embargo, si amplía un componente principal que incluye una imagen o una página, la utilidad ahorra mucho tiempo.note note NOTE Si se crea una capa de datos avanzada para objetos reutilizados a lo largo de una implementación, se recomienda extraer los elementos de la capa de datos en sus propios objetos Java™ específicos de la capa de datos. Por ejemplo, los componentes principales de Commerce tienen interfaces añadidas para ProductData
yCategoryData
ya que estos se pueden utilizar en muchos componentes de una implementación de Commerce. Revisar el código en el repositorio aem-cif-core-components para obtener más información.
Enhorabuena. congratulations
Acaba de explorar algunas formas de ampliar y personalizar la capa de datos del cliente de Adobe AEM con componentes de la interfaz de usuario de la interfaz de usuario de la interfaz de usuario de.