Webcomponent

[AEM zonder hoofd 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 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 JavaScript.

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

Deze voorbeeldtoepassing is afhankelijk van basic-tutorial-solution.content.zip en de vereiste implementatieconfiguraties zijn geïnstalleerd.

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 is te vinden op GitHub.

HTML-tag van webcomponent

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

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

Webcomponentimplementatie

De person.js Hiermee definieert u de functionaliteit van de webcomponent en hieronder ziet u de belangrijkste hooglichten van de component.

Implementatie van het element PersonInfo

De <person-info> het klassenobject van het aangepaste element definieert de functionaliteit door het connectedCallback() levenscyclusmethoden, het koppelen van een schaduwhoofdmap, het ophalen van GraphQL-permanente query 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));
    }
}

Registreer de <person-info> element

    // 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 loopt http://localhost:8080 in ontwikkelingswijze en hieronder is een steekproefCORS OSGi configuratie voor de lokale dienst van de AEMAuteur.

Gelieve te herzien implementatieconfiguraties voor de respectieve AEM.