Componenti compositi negli SPA composite-components-in-spas

I componenti compositi utilizzano la natura modulare dei componenti di AEM combinando più componenti di base in un singolo 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 di AEM, gli autori di contenuto 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 senza problemi con l’Editor SPA di AEM.

Caso d’uso use-case

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 prerequisites

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

Aggiunta di componenti compositi a un’applicazione a pagina singola adding-composite-components

Esistono tre modelli diversi per implementare il componente composito a seconda dell’implementazione dell’applicazione a pagina singola in AEM.

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

Il componente non esiste nel progetto AEM. component-does-not-exist

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

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 di applicazioni a pagina singola. 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.

Il componente esiste nel progetto AEM, ma il contenuto richiesto no. content-does-not-exist

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

Puoi quindi aggiungerlo all’applicazione a pagina singola e recuperarne il contenuto.

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

Il componente e il relativo contenuto richiesto sono entrambi presenti nel progetto AEM. both-exist

Se il contenuto esiste in AEM, può essere incluso direttamente nell’applicazione a pagina singola fornendo il percorso del contenuto.

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

Il componente AEMCard corrisponde a ​ definito nel caso d'uso precedente. In questo caso, il contenuto definito nella posizione precedente nel progetto AEM è incluso nell’applicazione a pagina singola.