Documentazione AEM as a Cloud Service Guida utente

Componenti compositi negli SPA

Ultimo aggiornamento: 6 febbraio 2025

Argomenti:
Sviluppo

Creato per:

Amministratore
Sviluppatore

I componenti compositi utilizzano la natura modulare dei componenti dell’AEM combinando più componenti di base in un unico componente. Un caso d’uso comune di componente composito è il componente scheda, costituito da una combinazione dei componenti immagine e testo.

Quando i componenti compositi vengono implementati correttamente nel framework dell’Editor applicazioni a pagina singola (SPA) dell’AEM, gli autori dei contenuti possono trascinare e rilasciare tali componenti come farebbero con qualsiasi altro componente, ma possono comunque modificare singolarmente ogni componente che costituisce il componente composito.

Questo articolo illustra come aggiungere un componente composito all’applicazione a pagina singola per lavorare direttamente con l’editor SPA dell’AEM.

IMPORTANT

L'editor per applicazioni a pagina singola (o editor SPA) è stato dichiarato obsoleto per i nuovi progetti. Continua a essere supportato da Adobe per i progetti esistenti, ma non dovrebbe essere utilizzato per i nuovi progetti. Gli editor preferiti per la gestione dei contenuti headless in AEM sono ora i seguenti:

Editor universale per la modifica visiva di contenuti headless.
Editor frammenti di contenuto per la modifica di contenuti headless basata su modulo.

Caso d’uso

Questo articolo utilizza il componente tipico della scheda come caso d’uso di esempio. Le schede sono un elemento dell’interfaccia utente comune per molte esperienze digitali e sono in genere costituite da un’immagine e dal testo o dalla didascalia associati. L’autore desidera poter trascinare e rilasciare l’intera scheda, ma può modificare singolarmente l’immagine della scheda e personalizzare il testo associato.

Prerequisiti

I seguenti modelli per il supporto dei casi di utilizzo dei componenti compositi richiedono i seguenti prerequisiti.

L’istanza di sviluppo AEM è in esecuzione localmente sulla porta 4502 con un progetto di esempio.
Hai un'app React esterna funzionante abilitata per la modifica in AEM.
L'app React è caricata nell'editor AEM tramite il componente RemotePage.

Aggiunta di componenti compositi a un SPA

Esistono tre diversi modelli per implementare il componente composito a seconda dell’implementazione SPA all’interno dell’AEM.

Il componente non esiste nel progetto AEM.
Il componente è presente nel progetto AEM, ma il contenuto richiesto non lo è.
Il componente e il contenuto richiesto sono entrambi presenti nel progetto AEM.

Le sezioni seguenti forniscono esempi di implementazione di ogni caso utilizzando il componente scheda come esempio.

Il componente non esiste nel progetto AEM.

Inizia creando i componenti che costituiranno il componente composito, ovvero i componenti per l’immagine e il relativo testo.

Crea la componente testo nel progetto AEM.
Aggiungi il resourceType corrispondente dal progetto nel nodo editConfig del componente.
resourceType: 'wknd-spa/components/text'
Utilizza l'helper withMappable per abilitare le modifiche per il componente.
export const AEMText = withMappable(Text, TextEditConfig);

Il componente testo è simile al seguente.

import React from 'react';
import { withMappable } from '@adobe/aem-react-editable-components';

export const TextEditConfig = {
  emptyLabel: 'Text',
  isEmpty: function(props) {
    return !props || !props.text || props.text.trim().length < 1;
  },
  resourceType: 'wknd-spa/components/text'
};

export const Text = ({ cqPath, richText, text }) => {
  const richTextContent = () => (
    <div className="aem_text"
      id={cqPath.substr(cqPath.lastIndexOf('/') + 1)}
      data-rte-editelement
      dangerouslySetInnerHTML={{__html: text}} />
  );
  return richText ? richTextContent() : (
     <div className="aem_text">{text}</div>
  );
};

export const AEMText = withMappable(Text, TextEditConfig);

Se si crea un componente immagine in modo simile, è possibile combinarlo con il componente AEMText in un nuovo componente scheda, utilizzando i componenti immagine e testo come elementi figlio.

import React from 'react';
import { AEMText } from './AEMText';
import { AEMImage } from './AEMImage';

export const AEMCard = ({ pagePath, itemPath}) => (
  <div>
    <AEMText
       pagePath={pagePath}
       itemPath={`text`} />
    <AEMImage
       pagePath={pagePath}
       itemPath={`image`} />
   </div>
);

Questo componente composito risultante può ora essere posizionato ovunque nell’app e aggiungerà segnaposto per un componente testo e immagine nell’editor SPA. Nell’esempio seguente, il componente scheda viene aggiunto al componente Home sotto il titolo.

function Home() {
  return (
    <div className="Home">
      <h2>Current Adventures</h2>
      <AEMCard
        pagePath='/content/wknd-spa/home' />
    </div>
  );
}

Nell’editor verrà visualizzato un segnaposto vuoto per un testo e un’immagine. Quando si immettono valori per questi elementi utilizzando l'editor, questi vengono memorizzati nel percorso di pagina specificato, ovvero /content/wknd-spa/home a livello principale con i nomi specificati in itemPath.

Componente scheda composita nelleditor

Il componente esiste nel progetto AEM, ma il contenuto richiesto no.

In questo caso, il componente scheda è già stato creato nel progetto AEM contenente il titolo e i nodi immagine. I nodi secondari (testo e immagine) dispongono dei tipi di risorse corrispondenti.

Struttura del nodo del componente scheda

Puoi quindi aggiungerlo all’SPA e recuperarne il contenuto.

Crea un componente corrispondente nell’SPA a questo scopo. Assicurati che i componenti secondari siano mappati sui corrispondenti tipi di risorse AEM all’interno del progetto SPA. In questo esempio vengono utilizzati gli stessi componenti AEMText e AEMImage descritti nel caso precedente.

import React from 'react';
import { Container, withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { Text, TextEditConfig } from './AEMText';
import Image, { ImageEditConfig } from './AEMImage';

export const AEMCard = withMappable(Container, {
  resourceType: 'wknd-spa/components/imagecard'
});

MapTo('wknd-spa/components/text')(Text, TextEditConfig);
MapTo('wknd-spa/components/image')(Image, ImageEditConfig);

Poiché non è presente alcun contenuto per il componente imagecard, aggiungi la scheda alla pagina. Includere nell’SPA il contenitore esistente dell’AEM.
- Se il progetto AEM contiene già un contenitore, possiamo includerlo nell’SPA e aggiungerlo al contenitore dall’AEM.
- Assicurati che il componente della scheda sia mappato sul tipo di risorsa corrispondente nell’SPA.
<ResponsiveGrid pagePath='/content/wknd-spa/home' itemPath='root/responsivegrid' />
Aggiungi il componente wknd-spa/components/imagecard creato ai componenti consentiti per il componente contenitore nel modello di pagina.

Ora il componente imagecard può essere aggiunto direttamente al contenitore nell'editor AEM.

Scheda composita nelleditor

Il componente e il contenuto richiesto sono entrambi presenti nel progetto AEM.

Se il contenuto esiste nell’AEM, può essere incluso direttamente nell’SPA fornendo il percorso del contenuto.

<AEMCard
    pagePath='/content/wknd-spa/home'
    itemPath='root/responsivegrid/imagecard' />

Percorso composito nella struttura del nodo

Il componente AEMCard corrisponde a definito nel caso d'uso precedente. In questo caso, il contenuto del progetto AEM, definito nel punto precedente, è incluso nell’SPA.

recommendation-more-help