Le applicazioni di esempio sono un ottimo modo per esplorare le funzionalità headless di Adobe Experience Manager (AEM). Questa applicazione per componenti web illustra come eseguire query sui contenuti che utilizzano le API GraphQL dell’AEM utilizzando query persistenti ed eseguire il rendering di una parte dell’interfaccia utente, utilizzando esclusivamente codice JavaScript.
Visualizza codice sorgente su GitHub
I seguenti strumenti devono essere installati localmente:
Il componente Web funziona con le seguenti opzioni di distribuzione AEM.
Tutte le distribuzioni richiedono tutorial-solution-content.zip
dal File di soluzione da installare e necessario Configurazioni di implementazione vengono eseguite.
Il componente Web è progettato per connettersi a un Pubblicazione AEM Tuttavia, può originare il contenuto da AEM Author se l’autenticazione viene fornita nel file del componente Web person.js
file.
Clona il adobe/aem-guides-wknd-graphql
archivio:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Accedi a web-component
sottodirectory.
$ cd aem-guides-wknd-graphql/web-component
Modifica il .../src/person.js
file per includere i dettagli di connessione AEM:
In aemHeadlessService
oggetto, aggiorna aemHost
per puntare al servizio di pubblicazione AEM.
# 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
Se ti connetti a un servizio AEM Author, nel aemCredentials
, fornire le credenziali utente AEM locali.
# For Basic auth, use AEM ['user','pass'] pair (for example, when connecting to local AEM Author instance)
username=admin
password=admin
Apri un terminale ed esegui i comandi da aem-guides-wknd-graphql/web-component
:
$ npm install
$ npm start
Una nuova finestra del browser apre la pagina HTML statica che incorpora il componente Web in http://localhost:8080.
Il Informazioni persona Il componente Web viene visualizzato nella pagina Web.
Di seguito è riportato un riepilogo della modalità di creazione del componente Web, della modalità di connessione a headless AEM per il recupero di contenuti tramite query persistenti GraphQL e della modalità di presentazione dei dati. Il codice completo è disponibile su GitHub.
Un componente web riutilizzabile (o elemento personalizzato) <person-info>
viene aggiunto al ../src/assets/aem-headless.html
pagina HTML. Supporta host
e query-param-value
attributi per determinare il comportamento del componente. Il host
sostituzioni di valore dell'attributo aemHost
valore da aemHeadlessService
oggetto in person.js
, e query-param-value
viene utilizzato per selezionare la persona da riprodurre.
<person-info
host="https://publish-p65804-e666805.adobeaemcloud.com"
query-param-value="John Doe">
</person-info>
Il person.js
definisce la funzionalità del componente Web e di seguito sono riportate le principali caratteristiche salienti.
Il <person-info>
l'oggetto class dell'elemento personalizzato definisce la funzionalità utilizzando connectedCallback()
metodi del ciclo di vita, associazione di una radice dell'ombra, recupero di query persistenti di GraphQL e manipolazione DOM per creare la struttura DOM dell'ombra interna dell'elemento personalizzato.
// 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));
}
}
<person-info>
elemento // Define the person-info element
customElements.define("person-info", PersonInfo);
Questo componente web si basa su una configurazione CORS basata su AEM in esecuzione nell’ambiente AEM di destinazione e presuppone che la pagina host venga eseguita su http://localhost:8080
in modalità di sviluppo e di seguito è riportato un esempio di configurazione CORS OSGi per il servizio AEM Author locale.
Rivedi configurazioni di implementazione per i rispettivi servizi AEM.