De gegevenslaag van de Cliënt van de Adobe met AEM Componenten aanpassen customize-data-layer

Een lokale QuickStart starten auteur instantie van AEM die wordt uitgevoerd op http://localhost:4502.

Open een eindvenster en kloon de WKND codebasis gebruikend Git:

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

Implementeer de WKND-codebasis in een lokale instantie van AEM:

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

Open een nieuw browservenster en meld u aan bij AEM. Een Tijdschrift pagina als: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Er wordt een voorbeeld weergegeven van de component Naamregel die aan de pagina is toegevoegd als onderdeel van een ervaringsfragment. U kunt het ervaringsfragment bekijken op http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.html

Open de ontwikkelaarsgereedschappen en voer de volgende opdracht in het dialoogvenster Console:

window.adobeDataLayer.getState();

Om de huidige staat van de gegevenslaag op een AEM plaats te zien inspecteer de reactie. U moet informatie over de pagina en de afzonderlijke componenten bekijken.

Merk op dat de component Byline niet in de Laag van Gegevens vermeld is.

Open de aem-guides-wknd project in winde van uw keus. Ga naar de core -module.

Het bestand openen Byline.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Voeg onder methode aan de interface toe:

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

Het bestand openen BylineImpl.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java. Het is de uitvoering van de Byline en wordt geïmplementeerd als een Sling Model.

Voeg de volgende instructies voor importeren toe aan het begin van het bestand:

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;

De fasterxml.jackson APIs wordt gebruikt om de gegevens in series te vervaardigen die als JSON moeten worden blootgesteld. De ComponentUtils van AEM Core Components worden gebruikt om te controleren of de gegevenslaag is ingeschakeld.

Niet-geïmplementeerde methode toevoegen getData() tot 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;
    }
}

Bij de bovenstaande methode wordt een nieuwe HashMap wordt gebruikt om de eigenschappen vast te leggen die als JSON moeten worden blootgesteld. Bestaande methoden zoals getName() en getOccupations() worden gebruikt. De @type vertegenwoordigt het unieke middeltype van de component, het staat een cliënt toe om gebeurtenissen en/of trekkers gemakkelijk te identificeren die op het type van component worden gebaseerd.

De ObjectMapper wordt gebruikt om de eigenschappen van een serienummer te voorzien en een JSON-tekenreeks te retourneren. Deze JSON-tekenreeks kan vervolgens in de gegevenslaag worden geïnjecteerd.

Open een terminalvenster. Alleen de core met uw Maven-vaardigheden:

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

Open de aem-guides-wknd project in winde. Ga naar de ui.apps -module.

Het bestand openen byline.html om ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Bijwerken byline.html om de data-cmp-data-layer kenmerk:

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

De waarde van data-cmp-data-layer is ingesteld op "${byline.data}" waar byline Dit is het verkoopmodel dat eerder is bijgewerkt. .data is de standaardnotatie voor het aanroepen van een Java™ Getter-methode in HTML van getData() die in de vorige exercitie zijn uitgevoerd.

Open een terminalvenster. Alleen de ui.apps met uw Maven-vaardigheden:

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

Ga terug naar de browser en open de pagina opnieuw met een component Byline: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Open de ontwikkelaarsgereedschappen en inspecteer de HTML-bron van de pagina voor de Byline-component:

U moet zien dat de data-cmp-data-layer is gevuld met de JSON-tekenreeks uit het Sling-model.

Open de ontwikkelaarsgereedschappen van de browser en voer de volgende opdracht in het dialoogvenster Console:

window.adobeDataLayer.getState();

Navigeren onder de reactie onder component om de instantie van het byline is toegevoegd aan de gegevenslaag:

U zou een ingang als het volgende moeten zien:

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"

Merk op dat de belichte eigenschappen dezelfde zijn als die zijn toegevoegd in de HashMap in het verkoopmodel.

Open de ui.apps module in uw winde

Het bestand openen byline.html om ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html.

Bijwerken byline.html om de data-cmp-clickable kenmerk op de Byline name element:

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

Open een nieuwe terminal. Alleen de ui.apps met uw Maven-vaardigheden:

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

Ga terug naar de browser en open de pagina opnieuw met de component Byline toegevoegd: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Om onze gebeurtenis te testen, zullen wij manueel wat JavaScript toevoegen gebruikend de ontwikkelaarsconsole. Zie Het gebruiken van de Laag van de Gegevens van de Cliënt van de Adobe met AEM Componenten van de Kern voor een video over hoe u dit kunt doen.

Open de ontwikkelaarsgereedschappen van de browser en voer de volgende methode in het dialoogvenster Console:

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']);
    }
}

Deze eenvoudige methode moet de klik van de naam van de component Byline afhandelen.

Voer de volgende methode in het dialoogvenster Console:

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

De bovenstaande methode duwt een gebeurtenisluisteraar op de gegevenslaag om naar cmp:click gebeurtenis en roept de bylineClickHandler.

In de browser, met de Console Open, klik de naam van de auteur in de component Byline:

U zou het consolebericht moeten zien Byline Clicked! en de naam van de Naamregel.

De cmp:click De gebeurtenis is het eenvoudigst om in te sluiten. Voor complexere componenten en om ander gedrag te volgen is het mogelijk om douane JavaScript toe te voegen en nieuwe gebeurtenissen te registreren. Een goed voorbeeld is de Carousel-component, die een cmp:show gebeurtenis telkens wanneer een dia wordt geschakeld. Zie de broncode voor meer informatie.

Terugkeer aan winde en navigeer aan winde core -module.

Het bestand openen Byline.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java.

Wijzig de getData() methode om een type van terug te keren 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();
}

ComponentData is een object dat wordt geleverd door AEM Core Components. Het resulteert in een Koord JSON, enkel zoals in het vorige voorbeeld, maar voert ook veel extra werk uit.

Het bestand openen BylineImpl.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java.

Voeg de volgende instructies voor importeren toe:

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

Vervang de getData() methode met het volgende:

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

De component Byline gebruikt gedeelten van de component van de Kern van het Beeld opnieuw om een beeld te tonen die de auteur vertegenwoordigen. In het bovenstaande fragment worden de DataLayerBuilder wordt gebruikt om de gegevenslaag van Image component. Hierdoor wordt het JSON-object vooraf gevuld met alle gegevens over de gebruikte afbeelding. Het doet ook enkele routinetaken zoals het plaatsen van @type en de unieke id van de component. De methode is klein.

De enige eigenschap breidde de withTitle die wordt vervangen door de waarde van getName().

Open een terminalvenster. Alleen de core met uw Maven-vaardigheden:

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

Terugkeren naar de IDE en de byline.html bestand onder ui.apps

HTML bijwerken voor gebruik byline.data.json om de data-cmp-data-layer kenmerk:

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

We retourneren nu een object van het type ComponentData. Dit object bevat een methode getter getJson() en dit wordt gebruikt om de data-cmp-data-layer kenmerk.

Open een terminalvenster. Alleen de ui.apps met uw Maven-vaardigheden:

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

Ga terug naar de browser en open de pagina opnieuw met de component Byline toegevoegd: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Open de ontwikkelaarsgereedschappen van de browser en voer de volgende opdracht in het dialoogvenster Console:

window.adobeDataLayer.getState();

Navigeren onder de reactie onder component om de instantie van het byline component:

U zou een ingang als het volgende moeten zien:

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"

Let op: er is nu een image object binnen byline componentitem. Dit heeft veel meer informatie over de activa in de DAM. Let er ook op dat de @type en de unieke id (in dit geval byline-136073cfcb) automatisch zijn ingevuld, en de repo:modifyDate Dit geeft aan wanneer de component is gewijzigd.

Een ander voorbeeld om de gegevenslaag uit te breiden kan worden bekeken door het inspecteren van ImageList component in de WKND-codebasis:

• ImageList.java - Java-interface in de core -module.
• ImageListImpl.java - Verkoopmodel in het dialoogvenster core -module.
• image-list.html - HTML-sjabloon in het ui.apps -module.