Webbkomponent
[AEM as a Cloud Service]{class="badge informative"}
Exempelprogram är ett bra sätt att utforska Adobe Experience Manager headless-funktioner (AEM). Detta Web Component-program visar hur du använder AEM GraphQL API:er med beständiga frågor och återger en del av användargränssnittet, vilket uppnås med ren JavaScript-kod.
Visa källkoden på GitHub
Förutsättningar prerequisites
Följande verktyg bör installeras lokalt:
AEM
Webbkomponenten fungerar med följande AEM distributionsalternativ.
- AEM as a Cloud Service
- Lokal konfiguration med AEM Cloud Service SDK
- Kräver [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%2FDK jcr%3AlastModified&orderby.sort=desc&layout=list&p.offset=0&p.limit=14) (vid anslutning till lokal AEM 6.5 eller AEM SDK)
Den här exempelappen förlitar sig på basic-tutorial-solution.content.zip som ska installeras och de nödvändiga distributionskonfigurationerna finns på plats.
person.js
-fil.Så här använder du
-
Klona
adobe/aem-guides-wknd-graphql
-databasen:code language-shell $ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
-
Navigera till underkatalogen
web-component
.code language-shell $ cd aem-guides-wknd-graphql/web-component
-
Redigera filen
.../src/person.js
om du vill inkludera AEM anslutningsinformation:Uppdatera
aemHost
i objektetaemHeadlessService
så att den pekar på din AEM Publish-tjänst.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
Om du ansluter till en AEM författartjänst anger du lokala AEM användarautentiseringsuppgifter i objektet
aemCredentials
.code language-plain # For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance) username=admin password=admin
-
Öppna en terminal och kör kommandona från
aem-guides-wknd-graphql/web-component
:code language-shell $ npm install $ npm start
-
Ett nytt webbläsarfönster öppnar den statiska HTML-sidan som bäddar in webbkomponenten på http://localhost:8080.
-
Webbkomponenten Personinformation visas på webbsidan.
Koden
Nedan följer en sammanfattning av hur webbkomponenten är uppbyggd, hur den ansluter till AEM Headless för att hämta innehåll med GraphQL beständiga frågor och hur dessa data presenteras. Den fullständiga koden finns på GitHub.
HTML-tagg för webbkomponent
En återanvändbar webbkomponent (ett anpassat element) <person-info>
har lagts till på sidan ../src/assets/aem-headless.html
HTML. Den stöder attributen host
och query-param-value
för att driva komponentens beteende. host
-attributets värde åsidosätter aemHost
-värdet från aemHeadlessService
-objektet i person.js
, och query-param-value
används för att välja den person som ska återges.
<person-info
host="https://publish-p123-e456.adobeaemcloud.com"
query-param-value="John Doe">
</person-info>
Implementering av webbkomponenter
person.js
definierar webbkomponentens funktioner och nedan är viktiga högdagrar.
Implementering av PersonInfo-element
Det anpassade elementets klassobjekt <person-info>
definierar funktionaliteten med hjälp av livscykelmetoderna connectedCallback()
, bifogar en skuggrot, hämtar GraphQL beständig fråga och DOM-manipulering för att skapa det anpassade elementets interna skugg-DOM-struktur.
// 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));
}
}
Registrera elementet <person-info>
// Define the person-info element
customElements.define("person-info", PersonInfo);
Cross-origin resource sharing (CORS)
Den här webbkomponenten är beroende av en AEM baserad CORS-konfiguration som körs på AEM och förutsätter att värdsidan körs på http://localhost:8080
i utvecklingsläge och nedan är ett exempel på CORS OSGi-konfiguration för den lokala AEM författartjänsten.
Granska distributionskonfigurationerna för respektive AEM.