Webkomponente

Beispielanwendungen eignen sich hervorragend, um die Headless-Funktionen von Adobe Experience Manager (AEM) zu erkunden. Diese Webkomponentenanwendung zeigt, wie Sie Inhalte mithilfe AEM GraphQL-APIs mithilfe persistenter Abfragen abfragen und einen Teil der Benutzeroberfläche rendern können, was mit reinem JavaScript-Code erreicht wird.

Webkomponente mit AEM Headless

Anzeigen der Quellcode auf GitHub

Voraussetzungen

Die folgenden Tools sollten lokal installiert werden:

  • [JDK 11](https://experience.adobe.com/#/downloads/content/software-distribution/en/general.html?1_group.propertyvalues.property=.%2Fjcr%3Acontent%2Fmetadata%2Fdc%3AsoftwareType&1_group.propertyvalues.operation=equals&1_group.propertyvalues.0_values=software-type%3Atooling&fulltext=Oracle%7E+JDK%7E+11%7E&orderby=%40jcr%3Acontent Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14) (bei Verbindung mit dem lokalen AEM 6.5 oder AEM SDK)
  • Node.js v10+
  • npm 6+
  • Git

AEM

Die Webkomponente funktioniert mit den folgenden AEM Bereitstellungsoptionen.

Bei allen Implementierungen ist die tutorial-solution-content.zip von Lösungsdateien installiert und erforderlich Bereitstellungskonfigurationen ausgeführt werden.

WICHTIG

Die Webkomponente ist für die Verbindung mit einer AEM-Veröffentlichung -Umgebung kann jedoch Inhalte von der AEM-Autoreninstanz beziehen, wenn die Authentifizierung in der Webkomponente person.js -Datei.

Informationen zur Verwendung

  1. Klonen Sie die adobe/aem-guides-wknd-graphql repository:

    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Navigieren Sie zu web-component Unterverzeichnis.

    $ cd aem-guides-wknd-graphql/web-component
    
  3. Bearbeiten Sie die .../src/person.js -Datei, die die AEM Verbindungsdetails enthält:

    Im aemHeadlessService -Objekt, aktualisieren Sie die aemHost , um auf Ihren AEM-Veröffentlichungsdienst zu verweisen.

    # 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
    

    Wenn Sie eine Verbindung zu einem AEM-Autorendienst herstellen, finden Sie im aemCredentials -Objekt, geben Sie die Anmeldeinformationen der lokalen AEM an.

    # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
    username=admin
    password=admin
    
  4. Öffnen Sie ein Terminal und führen Sie die Befehle aus aem-guides-wknd-graphql/web-component:

    $ npm install
    $ npm start
    
  5. Ein neues Browserfenster öffnet die statische HTML-Seite, die die Webkomponente unter http://localhost:8080.

  6. Die Personeninformationen Die Webkomponente wird auf der Webseite angezeigt.

Der Code

Nachstehend finden Sie eine Zusammenfassung dazu, wie die Webkomponente erstellt wurde, wie sie eine Verbindung zu AEM Headless herstellt, um Inhalte mithilfe von GraphQL-gespeicherten Abfragen abzurufen, und wie diese Daten dargestellt werden. Der vollständige Code finden Sie unter GitHub.

HTML-Tag der Webkomponente

Eine wiederverwendbare Webkomponente (auch als benutzerdefiniertes Element bezeichnet) <person-info> wird zum ../src/assets/aem-headless.html HTML. Es unterstützt host und query-param-value -Attribute, um das Verhalten der Komponente zu fördern. Die host -Wertüberschreibungen des -Attributs aemHost Wert aus aemHeadlessService -Objekt in person.jsund query-param-value wird verwendet, um die Person auszuwählen, die gerendert werden soll.

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

Implementierung von Webkomponenten

Die person.js definiert die Webkomponentenfunktion und darunter sind die wichtigsten Highlights.

Element-Implementierung von PersonInfo

Die <person-info> Das Klassenobjekt des benutzerdefinierten Elements definiert die Funktionalität mithilfe der connectedCallback() Lebenszyklusmethoden, Anhängen eines Shadow-Stamms, Abrufen einer von GraphQL beibehaltenen Abfrage und DOM-Manipulation, um die interne Shadow-DOM-Struktur des benutzerdefinierten Elements zu erstellen.

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

Registrieren Sie die <person-info> element

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

Cross-Origin Resource Sharing (CORS)

Diese Webkomponente beruht auf einer AEM-basierten CORS-Konfiguration, die in der Ziel-AEM-Umgebung ausgeführt wird, und geht davon aus, dass die Hostseite auf http://localhost:8080 im Entwicklungsmodus und darunter finden Sie eine Beispielkonfiguration für CORS OSGi für den lokalen AEM-Autorendienst.

Bitte überprüfen Sie Bereitstellungskonfigurationen für den jeweiligen AEM.

CORS-Konfiguration

Auf dieser Seite