Le applicazioni di esempio sono un ottimo modo per esplorare le funzionalità headless di Adobe Experience Manager (AEM). Questa applicazione componente web illustra come eseguire query sul contenuto utilizzando AEM API GraphQL utilizzando query persistenti ed eseguire il rendering di una parte dell’interfaccia utente, eseguita utilizzando un puro codice JavaScript.
Visualizza la codice sorgente su GitHub
È necessario installare localmente i seguenti strumenti:
Il componente Web funziona con le seguenti opzioni di distribuzione AEM.
Tutte le implementazioni richiedono la tutorial-solution-content.zip
dal File della soluzione da installare e da installare Configurazioni di distribuzione sono eseguite.
Il componente Web è progettato per la connessione a un Pubblicazione AEM ambiente, tuttavia può generare contenuto da AEM Author se l’autenticazione è fornita nel componente Web person.js
file.
Clona il adobe/aem-guides-wknd-graphql
archivio:
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git
Passa a web-component
sottodirectory.
$ cd aem-guides-wknd-graphql/web-component
Modifica le .../src/person.js
per includere i dettagli di connessione AEM:
In aemHeadlessService
oggetto, aggiornare aemHost
per puntare al servizio AEM Publish.
# 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, nella 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
Viene visualizzata una nuova finestra del browser in cui viene aperta la pagina HTML statica che incorpora il componente Web in http://localhost:8080.
La Informazioni sulla persona Il componente Web viene visualizzato nella pagina Web.
Di seguito è riportato un riepilogo di come viene generato il componente Web, di come si connette a AEM Headless per recuperare il contenuto utilizzando le query persistenti GraphQL e di come tali dati vengono presentati. Il codice completo è disponibile in GitHub.
Un componente Web riutilizzabile (aka elemento personalizzato) <person-info>
viene aggiunto al ../src/assets/aem-headless.html
pagina HTML. Supporta host
e query-param-value
per determinare il comportamento del componente. La host
sostituzioni dei valori dell'attributo aemHost
valore da aemHeadlessService
oggetto in person.js
e query-param-value
viene utilizzato per selezionare la persona di cui eseguire il rendering.
<person-info
host="https://publish-p65804-e666805.adobeaemcloud.com"
query-param-value="John Doe">
</person-info>
La person.js
definisce la funzionalità del componente Web e di seguito sono riportati i principali elementi di rilievo.
La <person-info>
l’oggetto classe dell’elemento personalizzato definisce la funzionalità utilizzando connectedCallback()
metodi del ciclo di vita, associazione di una radice shadow, recupero di query persistenti GraphQL e manipolazione DOM per creare la struttura DOM 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 sia in esecuzione su http://localhost:8080
in modalità di sviluppo e di seguito è riportato un esempio di configurazione CORS OSGi per il servizio AEM Author locale.
Consulta configurazioni di distribuzione per il rispettivo servizio AEM.