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

Leer hoe te om de Laag van Gegevens van de Cliënt van de Adobe met inhoud van douane AEM Componenten aan te passen. Meer informatie over het gebruik van API's van Core Components AEM om uit te breiden en past u de gegevenslaag aan.

Wat u gaat bouwen

Byline-gegevenslaag

In dit leerprogramma, onderzoeken wij diverse opties om de Laag van Gegevens van de Cliënt van de Adobe uit te breiden door WKND bij te werken Byline-component. De Naamregel component is een aangepaste component en de lessen die u in deze zelfstudie hebt geleerd, kunt u toepassen op andere aangepaste componenten.

Doelstellingen objective

  1. Injecteer componentgegevens in de gegevenslaag door een Sling Model en component HTML uit te breiden
  2. Gebruik gegevenslaaghulpprogramma's van de Core Component om de inspanning te verminderen
  3. Gegevenskenmerken van de kerncomponent gebruiken om deze aan te sluiten op bestaande gegevenslaaggebeurtenissen

Vereisten prerequisites

A plaatselijke ontwikkelomgeving is nodig om deze zelfstudie te voltooien. Schermafbeeldingen en video worden vastgelegd met de AEM as a Cloud Service SDK die op een macOS wordt uitgevoerd. Opdrachten en code zijn onafhankelijk van het lokale besturingssysteem, tenzij anders aangegeven.

Nieuw bij AEM as a Cloud Service? Kijk uit de volgende handleiding voor het instellen van een lokale ontwikkelomgeving met de AEM as a Cloud Service SDK.

Nieuw bij AEM 6.5? Kijk uit de volgende gids voor het opzetten van een lokale ontwikkelomgeving.

De WKND-referentiesite downloaden en implementeren set-up-wknd-site

Deze zelfstudie breidt de component Byline in de WKND-verwijzingssite uit. Klonen en de WKND-codebasis installeren in uw lokale omgeving.

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

  2. Open een eindvenster en kloon de WKND codebasis gebruikend Git:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd.git
    
  3. Implementeer de WKND-codebasis in een lokale instantie van AEM:

    code language-shell
    $ cd aem-guides-wknd
    $ mvn clean install -PautoInstallSinglePackage
    
    note note
    NOTE
    Voor AEM 6.5 en het nieuwste servicepack voegt u de classic profiel voor de Maven-opdracht:
    mvn clean install -PautoInstallSinglePackage -Pclassic
  4. 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.

    Byline-component op pagina

    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

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

    code language-js
    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.

    Reactie gegevenslaag Adoben

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

Het model voor bylineverkoop bijwerken sling-model

Als u gegevens over de component in de gegevenslaag wilt injecteren, moet u eerst het Sling Model van de component bijwerken. Werk vervolgens de Java™-interface en Sling Model-implementatie van de Byline bij om een nieuwe methode te gebruiken getData(). Deze methode bevat de eigenschappen die in de gegevenslaag moeten worden geïnjecteerd.

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

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

    Naamregel Java-interface

  3. Voeg onder methode aan de interface toe:

    code language-java
    public interface Byline {
        ...
        /***
         * Return data about the Byline Component to populate the data layer
         * @return String
         */
        String getData();
    }
    
  4. 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.

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

    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;
    

    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.

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

    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.

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

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

De HTML voor naamregel bijwerken htl

Werk vervolgens de Byline HTL. HTL (de Taal van het Malplaatje van HTML) is het malplaatje wordt gebruikt om de HTML van de component terug te geven die.

Een speciaal gegevenskenmerk data-cmp-data-layer op elke AEM wordt Component gebruikt om zijn gegevenslaag bloot te stellen. JavaScript dat wordt geleverd door AEM Core Components, zoekt naar dit gegevenskenmerk. De waarde van dit gegevenskenmerk wordt gevuld met de JSON-tekenreeks die wordt geretourneerd door het Byline Sling Model getData() methode, en in de laag van de Gegevens van de Cliënt van de Adobe geïnjecteerd.

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

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

    Byline HTML

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

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

    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.

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

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  5. 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.

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

    Byline-gegevenslaag

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

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

    code language-js
    window.adobeDataLayer.getState();
    
  8. Navigeren onder de reactie onder component om de instantie van het byline is toegevoegd aan de gegevenslaag:

    Bylinedeel van de gegevenslaag

    U zou een ingang als het volgende moeten zien:

    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"
    

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

Een klikgebeurtenis toevoegen click-event

De gegevenslaag van de Cliënt van de Adobe is gebeurtenis gedreven en één van de gemeenschappelijkste gebeurtenissen om een actie teweeg te brengen is cmp:click gebeurtenis. Met de AEM Core-componenten kunt u uw component eenvoudig registreren met behulp van het gegevenselement: data-cmp-clickable.

De klikbare elementen zijn gewoonlijk een knoop CTA of een navigatiekoppeling. Jammer genoeg heeft de component van de Byte geen van deze maar wij laten het op om het even welke manier registreren aangezien dit voor andere douanecomponenten gemeenschappelijk zou kunnen zijn.

  1. Open de ui.apps module in uw winde

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

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

    code language-diff
      <h2 class="cmp-byline__name"
    +    data-cmp-clickable="${byline.data ? true : false}">
         ${byline.name}
      </h2>
    
  4. Open een nieuwe terminal. Alleen de ui.apps met uw Maven-vaardigheden:

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  5. 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.

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

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

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

  7. Voer de volgende methode in het dialoogvenster Console:

    code language-javascript
    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.

    note caution
    CAUTION
    Het is belangrijk niet als u de browser gedurende deze oefening wilt vernieuwen, anders gaat de console-JavaScript verloren.
  8. In de browser, met de Console Open, klik de naam van de auteur in de component Byline:

    Byline-component geklikt

    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.

Het hulpprogramma DataLayerBuilder gebruiken data-layer-builder

Wanneer het verkoopmodel bijgewerkt eerder in het hoofdstuk hebben we ervoor gekozen de JSON-tekenreeks te maken met behulp van een HashMap en de eigenschappen handmatig in te stellen. Deze methode werkt prima voor kleine eenmalige componenten, maar voor componenten die de AEM Core Components uitbreiden, kan dit in veel extra code resulteren.

Een hulpprogrammaklasse, DataLayerBuilder, bestaat om het grootste deel van de zware hef uit te voeren. Hierdoor kunnen implementaties alleen de gewenste eigenschappen uitbreiden. Werk het verkoopmodel bij en gebruik het DataLayerBuilder.

  1. Terugkeer aan winde en navigeer aan winde core -module.

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

  3. Wijzig de getData() methode om een type van terug te keren ComponentData

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

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

  5. Voeg de volgende instructies voor importeren toe:

    code language-java
    import com.adobe.cq.wcm.core.components.models.datalayer.ComponentData;
    import com.adobe.cq.wcm.core.components.models.datalayer.builder.DataLayerBuilder;
    
  6. Vervang de getData() methode met het volgende:

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

    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().

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

    code language-shell
    $ cd aem-guides-wknd/core
    $ mvn clean install -PautoInstallBundle
    
  8. Terugkeren naar de IDE en de byline.html bestand onder ui.apps

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

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

    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.

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

    code language-shell
    $ cd aem-guides-wknd/ui.apps
    $ mvn clean install -PautoInstallPackage
    
  11. 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.

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

    code language-js
    window.adobeDataLayer.getState();
    
  13. Navigeren onder de reactie onder component om de instantie van het byline component:

    Byline-gegevenslaag bijgewerkt

    U zou een ingang als het volgende moeten zien:

    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"
    

    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.

Aanvullende voorbeelden additional-examples

  1. 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.
    note note
    NOTE
    Het is iets moeilijker om aangepaste eigenschappen zoals occupation wanneer u de DataLayerBuilder. Als u echter een Core-component uitbreidt die een afbeelding of pagina bevat, bespaart het hulpprogramma veel tijd.
    note note
    NOTE
    Als het bouwen van een geavanceerde Laag van Gegevens voor voorwerpen die door een implementatie worden hergebruikt, wordt het geadviseerd om de elementen van de Laag van Gegevens in hun eigen gegeven laag-specifieke voorwerpen te halen Java™. Zo hebben de Componenten van de Kern van de Handel interfaces voor toegevoegd ProductData en CategoryData aangezien deze in het kader van een handelsuitvoering voor veel onderdelen kunnen worden gebruikt. Controleren de code in de reactie aem-cif-core-components voor meer informatie .

Gefeliciteerd! congratulations

U verkende enkel een paar manieren om de Laag van de Gegevens van de Cliënt van de Adobe met AEM componenten uit te breiden en aan te passen!

Aanvullende bronnen additional-resources

recommendation-more-help
bb44cebf-d964-4e3c-b64e-ce882243fe4d