Componente Web

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

Visualizza la codice sorgente su GitHub

Prerequisiti

È necessario installare localmente i seguenti strumenti:

• JDK 11 (se ci si connette a AEM locale 6.5 o AEM SDK)
• Node.js v10+
• npm 6+
• Git

Requisiti AEM

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

• AEM as a Cloud Service
• Configurazione locale tramite l’SDK di AEM Cloud Service
• AEM 6.5 SP13+ QuickStart

Tutte le implementazioni richiedono la tutorial-solution-content.zip dal File della soluzione da installare e da installare Configurazioni di distribuzione sono eseguite.

Come utilizzare

1. Clona il adobe/aem-guides-wknd-graphql archivio:

   $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
   

2. Passa a web-component sottodirectory.

   $ cd aem-guides-wknd-graphql/web-component
   

3. Modifica le .../src/person.js per includere i dettagli di connessione AEM:

   In aemHeadlessService oggetto, aggiornare aemHost per puntare al servizio AEM Publish.

   # AEM Server namespace
   aemHost=https://publish-p65804-e666805.adobeaemcloud.com
   
   # AEM GraphQL API and Persisted Query Details
   graphqlAPIEndpoint=graphql/execute.json
   projectName=my-project
   persistedQueryName=person-by-name
   queryParamName=name
   

   Se ti connetti a un servizio AEM Author, nella aemCredentials fornire le credenziali utente AEM locali.

   # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
   username=admin
   password=admin
   

4. Apri un terminale ed esegui i comandi da aem-guides-wknd-graphql/web-component:

   $ npm install
   $ npm start
   

5. Viene visualizzata una nuova finestra del browser in cui viene aperta la pagina HTML statica che incorpora il componente Web in http://localhost:8080.

6. La Informazioni sulla persona Il componente Web viene visualizzato nella pagina Web.

Il codice

Di seguito è riportato un riepilogo di come viene generato il componente Web, di come si connette a AEM Headless per recuperare il contenuto utilizzando le query persistenti GraphQL e di come tali dati vengono presentati. Il codice completo è disponibile in GitHub.

Tag HTML componente Web

Un componente Web riutilizzabile (aka elemento personalizzato) <person-info> viene aggiunto al ../src/assets/aem-headless.html pagina HTML. Supporta host e query-param-value per determinare il comportamento del componente. La host sostituzioni dei valori dell'attributo aemHost valore da aemHeadlessService oggetto in person.jse query-param-value viene utilizzato per selezionare la persona di cui eseguire il rendering.

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

Implementazione di un componente web

La person.js definisce la funzionalità del componente Web e di seguito sono riportati i principali elementi di rilievo.

Implementazione dell’elemento PersonInfo

La <person-info> l’oggetto classe dell’elemento personalizzato definisce la funzionalità utilizzando connectedCallback() metodi del ciclo di vita, associazione di una radice shadow, recupero di query persistenti GraphQL e manipolazione DOM per creare la struttura DOM 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._path);
        personImgElement.setAttribute('alt', person.fullName);
        ...
        this.shadowRoot.appendChild(templateContent.cloneNode(true));
    }
}

Registrare <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 sia in esecuzione su http://localhost:8080 in modalità di sviluppo e di seguito è riportato un esempio di configurazione CORS OSGi per il servizio AEM Author locale.

Consulta configurazioni di distribuzione per il rispettivo servizio AEM.

Risorse Business.Adobe.com