Composants composites dans les SPA

Les composants composites exploitent la nature modulaire des composants d’AEM en combinant plusieurs composants de base pour en constituer un seul. Le cas d’utilisation courant d’un composant composite est celui du composant de carte, composé d’une combinaison des composants image et texte.

Lorsque les composants composites sont correctement implémentés dans la structure de l’éditeur d’application d’une seule page (SPA) d’AEM, les auteurs de contenu peuvent effectuer un glisser-déposer de ces composants comme s’ils le feraient pour d’autres, tout en ayant la possibilité de modifier individuellement chaque constituant du composant composite.

Cet article explique comment ajouter un composant composite à votre application d’une seule page pour travailler en toute transparence avec l’éditeur de SPA d’AEM.

Cas d’utilisation

Cet article utilise le composant de carte type comme cas d’utilisation. Les cartes sont des éléments d’interface utilisateur courants pour de nombreuses expériences numériques. Elles sont généralement constituées d’une image et de texte ou d’une légende associés. L’auteur souhaite pouvoir faire un glisser-déposer de l’ensemble de la carte, mais aussi modifier individuellement l’image de la carte et personnaliser le texte associé.

Prérequis

Les modèles suivants, qui concernent la prise en charge des cas d’utilisation des composants composites, nécessitent les conditions préalables suivantes.

Ajout de composants composites à une SPA

Il existe trois modèles différents pour mettre en œuvre votre composant composite en fonction de l’implémentation de la SPA dans AEM.

Les sections suivantes présentent des exemples d’implémentation de chaque cas à l’aide du composant Carte.

Le composant n’existe pas dans votre projet AEM.

Commencez par créer les composants qui constitueront le composant composite, c’est-à-dire les composants de l’image et de son texte.

  1. Créez le composant texte dans votre projet AEM.

  2. Ajoutez le resourceType correspondant du projet dans le nœud editConfig du composant.

     resourceType: 'wknd-spa/components/text'

  3. Utilisez l’assistant withMappable pour activer la modification du composant.

    export const AEMText = withMappable(Text, TextEditConfig);

Le composant de texte ressemble à ce qui suit.

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);

Si vous créez un composant d’image de la même manière, vous pouvez le combiner avec le composant AEMText dans un nouveau composant de carte, en utilisant les composants d’image et de texte comme composants enfants.

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>
);

Ce composant composite obtenu peut ensuite être placé n’importe où dans l’application et des espaces réservés pour un composant de texte et d’image sont ajoutés dans l’éditeur de SPA. Dans l’exemple ci-dessous, le composant de carte est ajouté au composant principal au-dessous du titre.

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

Un espace réservé vide s’affiche alors pour un texte et une image dans l’éditeur. Lors de la saisie de valeurs pour ces éléments à l’aide de l’éditeur, elles sont stockées selon le chemin de page spécifié, c’est-à-dire /content/wknd-spa/home au niveau racine avec les noms spécifiés dans itemPath.

Composant de carte composite dans l’éditeur

Le composant existe dans votre projet AEM, mais pas le contenu requis.

Dans ce cas, le composant de carte est déjà créé dans votre projet AEM contenant les nœuds de titre et d’image. Les nœuds enfants (texte et image) possèdent les types de ressources correspondants.

Structure de nœud du composant Carte

Vous pouvez ensuite l’ajouter à votre SPA et récupérer son contenu.

  1. Pour cela, créez un composant correspondant dans la SPA. Assurez-vous que les composants enfants sont mappés avec leurs types de ressources AEM correspondants dans le projet SPA. Dans cet exemple, nous utilisons les mêmes composants AEMText et AEMImage que décrit dans le cas précédent.

    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);

  2. Comme il n’y a pas de contenu pour le composant imagecard, ajoutez la carte à la page. Incluez le conteneur existant issu d’AEM dans la SPA.

    • S’il existe déjà un conteneur dans le projet AEM, nous pouvons l’inclure dans la SPA et ajouter le composant au conteneur à partir d’AEM.
    • Assurez-vous que le composant de carte est mappé sur le type de ressource correspondant dans la SPA.
    <ResponsiveGrid
 pagePath='/content/wknd-spa/home'
 itemPath='root/responsivegrid' />

  3. Ajoutez le composant wknd-spa/components/imagecard créé aux composants autorisés pour le composant de conteneur dans le modèle de page.

Désormais, le composant imagecard peut être directement ajouté au conteneur dans l’éditeur d’AEM.

Carte composite dans l’éditeur

Le composant et son contenu requis existent tous deux dans votre projet AEM.

Si le contenu existe dans AEM, il peut être directement inclus dans la SPA en fournissant le chemin d’accès au contenu.

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

Chemin composite dans la structure du nœud

Le composant AEMCard est identique à la valeur définie dans le cas d’utilisation précédent. Ici, le contenu défini à l’emplacement ci-dessus dans le projet AEM est inclus dans la SPA.

Sur cette page