Webcomponent

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

Voorbeeldtoepassingen zijn een geweldige manier om de mogelijkheden zonder kop van Adobe Experience Manager (AEM) te verkennen. Deze toepassing van de Component van Web toont aan hoe te om inhoud te vragen gebruikend AEM GraphQL APIs gebruikend persisted vragen en een gedeelte van UI terug te geven, verwezenlijkt gebruikend zuivere code van JavaScript.

Component van het Web met AEM Zwaartepunt

Bekijk de broncode op GitHub

Vereisten prerequisites

De volgende gereedschappen moeten lokaal worden geïnstalleerd:

AEM

De component van het Web werkt met de volgende AEM plaatsingsopties.

  • AEM as a Cloud Service
  • De lokale opstelling die SDK van AEM Cloud Servicegebruikt
    • Vereist [ 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%2 Fjcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14) (als het verbinden met lokale AEM 6.5 of AEM SDK)

Dit voorbeeld app baseert zich op basis-tutorial-solution.content.zipom worden geïnstalleerd en de vereiste plaatsingsconfiguratieszijn op zijn plaats.

IMPORTANT
De Component van het Web wordt ontworpen om met een AEM milieu van Publish te verbinden, nochtans kan het inhoud van AEM Auteur als de authentificatie in het 2} 🔗 dossier van de Component van het Web {wordt verstrekt.person.js

Hoe wordt het gebruikt

  1. De gegevensopslagruimte adobe/aem-guides-wknd-graphql klonen:

    code language-shell
    $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
    
  2. Ga naar de submap web-component .

    code language-shell
    $ cd aem-guides-wknd-graphql/web-component
    
  3. Bewerk het .../src/person.js -bestand om de AEM verbindingsgegevens op te nemen:

    Werk in het aemHeadlessService -object de aemHost bij zodat deze naar uw AEM Publish-service verwijst.

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

    Als u verbinding maakt met een AEM-auteurservice, geeft u in het aemCredentials -object lokale AEM gebruikersgegevens op.

    code language-plain
    # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
    username=admin
    password=admin
    
  4. Open een terminal en voer de opdrachten uit vanuit aem-guides-wknd-graphql/web-component :

    code language-shell
    $ npm install
    $ npm start
    
  5. Een nieuw browser venster opent de statische pagina van de HTML die de Component van het Web in http://localhost:8080inbedt.

  6. De Component van het Web van Info van de Persoon wordt getoond op de Web-pagina.

De code

Hieronder volgt een overzicht van hoe de Component van het Web wordt gebouwd, hoe het met AEM Headless verbindt om inhoud terug te winnen gebruikend GraphQL voortgeduurde vragen, en hoe dat gegeven wordt voorgesteld. De volledige code kan op GitHubworden gevonden.

HTML-tag van webcomponent

Een herbruikbare webcomponent (ook bekend als aangepast element) <person-info> wordt toegevoegd aan de pagina ../src/assets/aem-headless.html HTML. De klasse ondersteunt host - en query-param-value -kenmerken om het gedrag van de component te stimuleren. De waarde van het kenmerk host overschrijft aemHost value from aemHeadlessService -object in person.js en query-param-value wordt gebruikt om de te renderen persoon te selecteren.

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

Webcomponentimplementatie

In person.js wordt de functionaliteit van de webcomponent gedefinieerd. Hieronder vindt u belangrijke markeringen.

Implementatie van het element PersonInfo

Het klassenobject van het <person-info> aangepaste element definieert de functionaliteit met behulp van de levenscyclusmethoden van connectedCallback() , het koppelen van een schaduwhoofdmap, het ophalen van GraphQL-query's die nog steeds worden uitgevoerd en DOM-manipulatie om de interne schaduw-DOM-structuur van het aangepaste element te maken.

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

Het element <person-info> registreren

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

Delen van bronnen van oorsprong (CORS)

Deze Component van Web baseert zich op een op AEM-gebaseerde configuratie CORS die op het doel AEM milieu loopt en veronderstelt dat de gastheerpagina op http://localhost:8080 op ontwikkelingswijze en hieronder een configuratie van steekproefCORS OSGi voor de lokale dienst van de AEMAuteur loopt.

Gelieve te herzien plaatsingsconfiguratiesvoor de respectieve AEM dienst.

recommendation-more-help
e25b6834-e87f-4ff3-ba56-4cd16cdfdec4