Componente Web

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

Le applicazioni di esempio sono un ottimo modo per esplorare le funzionalità headless di Adobe Experience Manager (AEM). Questa applicazione per componenti web illustra come eseguire query sui contenuti che utilizzano le API GraphQL dell’AEM utilizzando query persistenti ed eseguire il rendering di una parte dell’interfaccia utente, utilizzando esclusivamente codice JavaScript.

Visualizza codice sorgente su GitHub

Prerequisiti prerequisites

I seguenti strumenti devono essere installati localmente:

Requisiti AEM

Il componente Web funziona con le seguenti opzioni di distribuzione AEM.

L’app di esempio si basa su basic-tutorial-solution.content.zip da installare e la funzionalità configurazioni di implementazione sono al loro posto.

Come usare

Il codice

Di seguito è riportato un riepilogo della modalità di creazione del componente Web, della modalità di connessione a headless AEM per il recupero di contenuti tramite query persistenti GraphQL e della modalità di presentazione dei dati. Il codice completo è disponibile su GitHub.

Tag HTML del componente Web

Un componente web riutilizzabile (o elemento personalizzato) <person-info> viene aggiunto al ../src/assets/aem-headless.html pagina HTML. Supporta host e query-param-value attributi per determinare il comportamento del componente. Il host sostituzioni di valore dell'attributo aemHost valore da aemHeadlessService oggetto in person.js, e query-param-value viene utilizzato per selezionare la persona da riprodurre.

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

Implementazione del componente web

Il person.js definisce la funzionalità del componente Web e di seguito sono riportate le principali caratteristiche salienti.

Implementazione dell’elemento PersonInfo

Il <person-info> l'oggetto class dell'elemento personalizzato definisce la funzionalità utilizzando connectedCallback() metodi del ciclo di vita, associazione di una radice dell'ombra, recupero di query persistenti di GraphQL e manipolazione DOM per creare la struttura DOM dell'ombra interna dell'elemento personalizzato.

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

Registra il <person-info> elemento

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

Condivisione delle risorse tra le origini (CORS)

Questo componente web si basa su una configurazione CORS basata su AEM in esecuzione nell’ambiente AEM di destinazione e presuppone che la pagina host venga eseguita su http://localhost:8080 in modalità di sviluppo e di seguito è riportato un esempio di configurazione CORS OSGi per il servizio AEM Author locale.

Rivedi configurazioni di implementazione per i rispettivi servizi AEM.