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 dei contenuti possono trascinare e rilasciare tali componenti come farebbero con qualsiasi altro componente, ma hanno comunque la possibilità di 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 sarà 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 al componente definito ​ nel caso d'uso precedente. Qui il contenuto definito nella posizione precedente nel progetto AEM è incluso nell'applicazione a pagina singola.