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 las API de GraphQL de la interfaz de usuario de la aplicación de datos de uso de consultas persistentes y representando una parte de la interfaz de usuario, todo ello realizado utilizando código JavaScript puro.

AEM

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 depende de basic-tutorial-solution.content.zip que se va a instalar y de que se hayan implementado las configuraciones de implementación necesarias.

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

Se agrega un componente web reutilizable (también conocido como elemento personalizado) <person-info> a la página del HTML ../src/assets/aem-headless.html. Admite los atributos host y query-param-value para controlar el comportamiento del componente. El valor del atributo host invalida el valor aemHost del objeto aemHeadlessService en person.js, y query-param-value se usa para seleccionar a 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

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 objeto de clase del elemento personalizado <person-info> define la funcionalidad mediante los métodos de ciclo de vida connectedCallback(), adjuntando una raíz central, recuperando la consulta persistente de GraphQL y la manipulación 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));
    }
}

Registrar el elemento <person-info>

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

Uso compartido de recursos de origen cruzado (CORS)

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

AEM Revise configuraciones de implementación para obtener el servicio correspondiente de la aplicación de.