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

Begin een lokale auteur van Quickstart ​ ​instantie van AEM die in http://localhost:4502lopen.

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. Open a 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 Fragment van de Ervaring in http://localhost:4502/editor.html/content/experience-fragments/wknd/language-masters/en/contributors/stacey-roswells/byline.htmlbekijken

Open uw ontwikkelaarshulpmiddelen en ga het volgende bevel in de Console in:

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 het aem-guides-wknd project in winde van uw keus. Navigeer naar de module core .

Open het bestand 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();
}

Open het bestand BylineImpl.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/impl/BylineImpl.java . Dit is de implementatie van de interface 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 API's worden gebruikt om de gegevens te serialiseren die als JSON worden weergegeven. De ComponentUtils van AEM Core Components wordt gebruikt om te controleren of de gegevenslaag is ingeschakeld.

Voeg de niet-geïmplementeerde methode getData() toe aan 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;
    }
}

In de bovenstaande methode wordt een nieuwe HashMap gebruikt om de eigenschappen vast te leggen die als JSON moeten worden weergegeven. Bestaande methoden zoals getName() en getOccupations() worden gebruikt. @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.

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

Open een terminalvenster. Alleen de module core bouwen en implementeren met behulp van uw Maven-vaardigheden:

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

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

Open het bestand byline.html om ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html .

Werk byline.html bij om het kenmerk data-cmp-data-layer op te nemen:

  <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}" where byline is the Sling Model updated. .data is de standaardnotatie voor het aanroepen van een Java™ Getter-methode in HTML van getData() die in de vorige oefening is geïmplementeerd.

Open een terminalvenster. Alleen de module ui.apps bouwen en implementeren met behulp van uw Maven-vaardigheden:

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

Keer aan browser terug en open de pagina met een component van de Byline opnieuw: 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 de ontwikkelaarshulpmiddelen van browser en ga het volgende bevel in de Console in:

window.adobeDataLayer.getState();

Navigeer onder het antwoord onder component om te zoeken naar de instantie van de component byline die aan de gegevenslaag is toegevoegd:

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"

Let erop dat de belichte eigenschappen dezelfde zijn als die in de HashMap in het Sling-model zijn toegevoegd.

Open de module ui.apps in uw winde

Open het bestand byline.html om ui.apps/src/main/content/jcr_root/apps/wknd/components/byline/byline.html .

Update byline.html om het data-cmp-clickable attribuut op het 2} naam element van de Byline {te omvatten:

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

Open een nieuwe terminal. Alleen de module ui.apps bouwen en implementeren met behulp van uw Maven-vaardigheden:

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

Terugkeer aan browser en heropen de pagina met de toegevoegde component van de Byline: 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 Gebruikend de Laag van de Gegevens van de Cliënt van de Adobe met AEM Componenten van de Kernvoor een video op hoe te om dit te doen.

Open de de ontwikkelaarshulpmiddelen van browser en ga de volgende methode in de Console in:

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.

Ga de volgende methode in de Console in:

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

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

In browser, met de open Console van 0} {, klik de naam van de auteur in de component van de Naamregel:

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

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

Ga terug naar winde en navigeer aan de core module.

Open het bestand Byline.java om core/src/main/java/com/adobe/aem/guides/wknd/core/models/Byline.java .

Wijzig de methode getData() om een type ComponentData te retourneren

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.

Open het bestand 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 methode getData() door 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 bovengenoemde fragment, wordt DataLayerBuildergebruikt om de gegevenslaag van de Image component uit te breiden. Hierdoor wordt het JSON-object vooraf gevuld met alle gegevens over de gebruikte afbeelding. Er worden ook enkele routinefuncties uitgevoerd, zoals het instellen van de @type en de unieke id van de component. De methode is klein.

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

Open een terminalvenster. Alleen de module core bouwen en implementeren met behulp van uw Maven-vaardigheden:

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

Ga terug naar de IDE en open het bestand byline.html onder ui.apps

Werk de HTML bij die u byline.data.json wilt gebruiken om het kenmerk data-cmp-data-layer te vullen:

  <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 wordt gebruikt om het kenmerk data-cmp-data-layer te vullen.

Open een terminalvenster. Alleen de module ui.apps bouwen en implementeren met behulp van uw Maven-vaardigheden:

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

Terugkeer aan browser en heropen de pagina met de toegevoegde component van de Byline: http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html.

Open de de ontwikkelaarshulpmiddelen van browser en ga het volgende bevel in de Console in:

window.adobeDataLayer.getState();

Navigeer onder het antwoord onder component naar de instantie van de component byline :

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 het byline -componentitem. Dit heeft veel meer informatie over de activa in de DAM. Let ook op: de @type en de unieke id (in dit geval byline-136073cfcb ) zijn automatisch ingevuld en de repo:modifyDate die aangeeft wanneer de component is gewijzigd.

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

• ImageList.java - Java-interface in de module core .
• ImageListImpl.java - Sling Model in de module core .
• image-list.html - HTML-sjabloon in de module ui.apps .