Componente web

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

Las aplicaciones de ejemplo son una buena manera de explorar las capacidades sin encabezado de Adobe Experience Manager AEM (). AEM Esta aplicación de componente web muestra cómo realizar consultas en el contenido utilizando API de GraphQL de la aplicación, utilizando consultas persistentes y representando una parte de la interfaz de usuario, todo ello realizado utilizando código JavaScript puro.

Ver el código fuente en GitHub

Requisitos previos prerequisites

Las siguientes herramientas deben instalarse localmente:

AEM requisitos de

AEM El componente web funciona con las siguientes opciones de implementación de.

Esta aplicación de ejemplo se basa en basic-tutorial-solution.content.zip que se va a instalar y los necesarios configuraciones de implementación están en su lugar.

Cómo usar

El código

AEM A continuación se muestra un resumen de cómo se crea el componente web, cómo se conecta a las consultas sin encabezado para recuperar contenido mediante consultas persistentes de GraphQL y cómo se presentan esos datos. El código completo se encuentra en GitHub.

Etiqueta de HTML de componente web

Un componente web reutilizable (también conocido como elemento personalizado) <person-info> se añade a ../src/assets/aem-headless.html página del HTML. Admite host y query-param-value atributos para controlar el comportamiento del componente. El host anulaciones de valor del atributo aemHost valor de aemHeadlessService objeto en person.js, y query-param-value se utiliza para seleccionar la persona que se va a procesar.

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

Implementación de componentes web

El person.js define la funcionalidad del componente web y, a continuación, se muestran los aspectos destacados de la misma.

Implementación del elemento PersonInfo

El <person-info> el objeto class del elemento personalizado define la funcionalidad mediante el uso del connectedCallback() métodos de ciclo de vida, adjuntar una raíz central, recuperar consultas persistentes de GraphQL y manipular DOM para crear la estructura DOM central interna del elemento personalizado.

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

Registre el <person-info> elemento

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

Uso compartido de recursos de origen cruzado (CORS)

AEM AEM Este componente web se basa en una configuración CORS basada en el que se ejecuta en el entorno de destino de la aplicación y supone que la página host se ejecuta en http://localhost:8080 AEM en el modo de desarrollo y a continuación se muestra una configuración OSGi de CORS de ejemplo para el servicio local de creación de.

Consulte las configuraciones de implementación AEM para el servicio respectivo de la.