Webcomponent

[AEM, hoofdloos as a Cloud Service]{class="badge informative"}

Voorbeeldtoepassingen zijn een geweldige manier om de mogelijkheden zonder kop van Adobe Experience Manager (AEM) te verkennen. Deze toepassing van de Component van Web toont aan hoe te om inhoud te vragen gebruikend AEM GraphQL APIs gebruikend persisted vragen en een gedeelte van UI terug te geven, verwezenlijkt gebruikend zuivere code van JavaScript.

Bekijk de broncode op GitHub

Vereisten prerequisites

De volgende gereedschappen moeten lokaal worden geïnstalleerd:

AEM

De component van het Web werkt met de volgende AEM plaatsingsopties.

Dit voorbeeld app baseert zich op basis-tutorial-solution.content.zipom worden geïnstalleerd en de vereiste plaatsingsconfiguratieszijn op zijn plaats.

Hoe wordt het gebruikt

De code

Hieronder volgt een overzicht van hoe de Component van het Web wordt gebouwd, hoe het met AEM Headless verbindt om inhoud terug te winnen gebruikend GraphQL voortgeduurde vragen, en hoe dat gegeven wordt voorgesteld. De volledige code kan op GitHubworden gevonden.

HTML-tag van webcomponent

Een herbruikbare webcomponent (ook bekend als aangepast element) <person-info> wordt toegevoegd aan de pagina ../src/assets/aem-headless.html HTML. De klasse ondersteunt host - en query-param-value -kenmerken om het gedrag van de component te stimuleren. De waarde van het kenmerk host overschrijft aemHost value from aemHeadlessService -object in person.js en query-param-value wordt gebruikt om de te renderen persoon te selecteren.

    <person-info
        host="https://publish-p123-e456.adobeaemcloud.com"
        query-param-value="John Doe">
    </person-info>

Webcomponentimplementatie

In person.js wordt de functionaliteit van de webcomponent gedefinieerd. Hieronder vindt u belangrijke markeringen.

Implementatie van het element PersonInfo

Het klassenobject van het <person-info> aangepaste element definieert de functionaliteit met behulp van de levenscyclusmethoden van connectedCallback() , het koppelen van een schaduwhoofdmap, het ophalen van GraphQL-query's die nog steeds worden uitgevoerd en DOM-manipulatie om de interne schaduw-DOM-structuur van het aangepaste element te maken.

// Create a Class for our Custom Element (person-info)
class PersonInfo extends HTMLElement {

    constructor() {
        ...
        // Create a shadow root
        const shadowRoot = this.attachShadow({ mode: "open" });
        ...
    }

    ...

    // lifecycle callback :: When custom element is appended to document
    connectedCallback() {
        ...
        // Fetch GraphQL persisted query
        this.fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue).then(
            ({ data, err }) => {
                if (err) {
                    console.log("Error while fetching data");
                } else if (data?.personList?.items.length === 1) {
                    // DOM manipulation
                    this.renderPersonInfoViaTemplate(data.personList.items[0], host);
                } else {
                    console.log(`Cannot find person with name: ${queryParamValue}`);
                }
            }
        );
    }

    ...

    //Fetch API makes HTTP GET to AEM GraphQL persisted query
    async fetchPersonByNamePersistedQuery(headlessAPIURL, queryParamValue) {
        ...
        const response = await fetch(
            `${headlessAPIURL}/${aemHeadlessService.persistedQueryName}${encodedParam}`,
            fetchOptions
        );
        ...
    }

    // DOM manipulation to create the custom element's internal shadow DOM structure
    renderPersonInfoViaTemplate(person, host){
        ...
        const personTemplateElement = document.getElementById('person-template');
        const templateContent = personTemplateElement.content;
        const personImgElement = templateContent.querySelector('.person_image');
        personImgElement.setAttribute('src',
            host + (person.profilePicture._dynamicUrl || person.profilePicture._path));
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

Het element <person-info> registreren

    // Define the person-info element
    customElements.define("person-info", PersonInfo);

Delen van bronnen van oorsprong (CORS)

Deze Component van Web baseert zich op een op AEM-gebaseerde configuratie CORS die op het doel AEM milieu loopt en veronderstelt dat de gastheerpagina op http://localhost:8080 op ontwikkelingswijze en hieronder een configuratie van steekproefCORS OSGi voor de lokale dienst van de AEMAuteur loopt.

Gelieve te herzien plaatsingsconfiguratiesvoor de respectieve AEM dienst.