Les composants fixes offrent une certaine flexibilité pour créer du contenu SPA, mais cette approche est rigide et nécessite que le développement définisse la composition exacte du contenu modifiable. Pour que les créateurs et créatrices puissent proposer des expériences exceptionnelles, l’éditeur de SPA prend en charge l’utilisation de composants de conteneur dans la SPA. Les composants de conteneur permettent aux créateurs et créatrices de glisser-déposer des composants autorisés dans le conteneur afin de les créer, tout comme ils procèdent dans la création traditionnelle d’AEM Sites.
Dans ce chapitre, nous ajoutons un conteneur modifiable à la vue d’accueil, ce qui permet aux créateurs et créatrices de composer et de mettre en page des expériences de contenu riches à l’aide des composants React modifiables directement dans la SPA.
Pour ajouter un composant de conteneur à la vue d’accueil :
ResponsiveGrid
du composant React modifiable d’AEMPour ajouter un domaine modifiable à la vue d’accueil :
Ouvrez et modifiez react-app/src/components/Home.js
Importez le composant ResponsiveGrid
depuis @adobe/aem-react-editable-components
et ajoutez-le au composant Home
.
Définissez les attributs suivants sur le composant <ResponsiveGrid...>
.
pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Cette instruction indique au composant ResponsiveGrid
de récupérer son contenu à partir de la ressource AEM :
/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
L’attribut itemPath
est mappé au nœud responsivegrid
défini dans le modèle AEM Remote SPA Page
et est automatiquement créé sur les nouvelles pages AEM conçues à partir du modèle AEM Remote SPA Page
.
Mettez à jour Home.js
de sorte à ajouter le composant <ResponsiveGrid...>
.
...
import { ResponsiveGrid } from '@adobe/aem-react-editable-components';
...
function Home() {
return (
<div className="Home">
<ResponsiveGrid
pagePath='/content/wknd-app/us/en/home'
itemPath='root/responsivegrid'/>
<EditableTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='title'/>
<Adventures />
</div>
);
}
Le fichier Home.js
doit se présenter comme suit :
Vous pouvez pleinement tirer parti de l’expérience de création flexible fournie par les conteneurs dans l’éditeur de SPA. Nous avons déjà créé un composant Titre modifiable. Nous allons à présent en ajouter quelques autres pour permettre aux créateurs et créatrices d’utiliser des composants Texte et Image modifiables dans le nouveau composant ResponsiveGrid ajouté.
Les nouveaux composants React modifiables Texte et Image sont créés à l’aide du modèle de définition de composant modifiable exporté dans les composants fixes modifiables.
Ouvrez le projet SPA dans votre IDE.
Créez un composant React sous src/components/editable/core/Text.js
.
Ajoutez le code suivant à Text.js
.
import React from 'react'
const TextPlain = (props) => <div className={props.baseCssClass}><p className="cmp-text__paragraph">{props.text}</p></div>;
const TextRich = (props) => {
const text = props.text;
const id = (props.id) ? props.id : (props.cqPath ? props.cqPath.substr(props.cqPath.lastIndexOf('/') + 1) : "");
return <div className={props.baseCssClass} id={id} data-rte-editelement dangerouslySetInnerHTML={{ __html: text }} />
};
export const Text = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-text'
}
const { richText = false } = props
return richText ? <TextRich {...props} /> : <TextPlain {...props} />
}
export function textIsEmpty(props) {
return props.text == null || props.text.length === 0;
}
Créez un composant modifiable React sous src/components/editable/EditableText.js
.
Ajoutez le code suivant à EditableText.js
.
import React from 'react'
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Text, textIsEmpty } from "./core/Text";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/text";
const EditConfig = {
emptyLabel: "Text",
isEmpty: textIsEmpty,
resourceType: RESOURCE_TYPE
};
export const WrappedText = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Text, "cmp-text"), textIsEmpty, "Text V2")
return <Wrapped {...props} />
};
const EditableText = (props) => <EditableComponent config={EditConfig} {...props}><WrappedText /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableText);
export default EditableText;
L’implémentation du composant Texte modifiable doit se présenter comme suit :
Ouvrez le projet SPA dans votre IDE.
Créez un composant React sous src/components/editable/core/Image.js
.
Ajoutez le code suivant à Image.js
.
import React from 'react'
import { RoutedLink } from "./RoutedLink";
export const imageIsEmpty = (props) => (!props.src) || props.src.trim().length === 0
const ImageInnerContents = (props) => {
return (<>
<img src={props.src}
className={props.baseCssClass + '__image'}
alt={props.alt} />
{
!!(props.title) && <span className={props.baseCssClass + '__title'} itemProp="caption">{props.title}</span>
}
{
props.displayPopupTitle && (!!props.title) && <meta itemProp="caption" content={props.title} />
}
</>);
};
const ImageContents = (props) => {
if (props.link && props.link.trim().length > 0) {
return (
<RoutedLink className={props.baseCssClass + '__link'} isRouted={props.routed} to={props.link}>
<ImageInnerContents {...props} />
</RoutedLink>
)
}
return <ImageInnerContents {...props} />
};
export const Image = (props) => {
if (!props.baseCssClass) {
props.baseCssClass = 'cmp-image'
}
const { isInEditor = false } = props;
const cssClassName = (isInEditor) ? props.baseCssClass + ' cq-dd-image' : props.baseCssClass;
return (
<div className={cssClassName}>
<ImageContents {...props} />
</div>
)
};
Créez un composant modifiable React sous src/components/editable/EditableImage.js
.
Ajoutez le code suivant à EditableImage.js
.
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import { Image, imageIsEmpty } from "./core/Image";
import React from 'react'
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: imageIsEmpty,
resourceType: RESOURCE_TYPE
};
const WrappedImage = (props) => {
const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Image, "cmp-image"), imageIsEmpty, "Image V2");
return <Wrapped {...props}/>
}
const EditableImage = (props) => <EditableComponent config={EditConfig} {...props}><WrappedImage /></EditableComponent>
MapTo(RESOURCE_TYPE)(EditableImage);
export default EditableImage;
Créez un fichier SCSS src/components/editable/EditableImage.scss
qui fournit des styles personnalisés à EditableImage.scss
. Ces styles ciblent les classes CSS du composant React modifiable.
Ajoutez le SCSS suivant à EditableImage.scss
.
.cmp-image__image {
margin: 1rem 0;
width: 100%;
border: 0;
}
Importez EditableImage.scss
dans EditableImage.js
.
...
import './EditableImage.scss';
...
L’implémentation du composant Image modifiable doit se présenter comme suit :
Les nouveaux composants React EditableText
et EditableImage
sont référencés dans la SPA et sont instanciés dynamiquement en fonction du code JSON renvoyé par AEM. Pour vous assurer que ces composants sont disponibles pour la SPA, créez les instructions d’importation correspondantes dans Home.js
.
Ouvrez le projet SPA dans votre IDE.
Ouvrez le fichier src/Home.js
.
Ajoutez des instructions d’importation pour AEMText
et AEMImage
.
...
// The following need to be imported, so that MapTo is run for the components
import EditableText from './editable/EditableText';
import EditableImage from './editable/EditableImage';
...
Le résultat doit ressembler à ceci :
Si ces importations ne sont pas ajoutées, les codes EditableText
et EditableImage
ne sont pas appelés par la SPA. Par conséquent, les composants ne sont pas mappés aux types de ressources fournis.
Les composants de conteneur AEM utilisent des stratégies pour dicter leurs composants autorisés. Il s’agit d’une configuration essentielle lors de l’utilisation de l’éditeur de SPA, car seuls les composants AEM ayant mappé des homologues de composant de SPA sont rendus par la SPA. Assurez-vous que seuls les composants pour lesquels nous avons fourni des implémentations de SPA sont autorisés :
EditableTitle
mappé à wknd-app/components/title
EditableText
mappé à wknd-app/components/text
EditableImage
mappé à wknd-app/components/image
.Pour configurer le conteneur reponsivegrid du modèle de page de SPA distante :
Connectez-vous au service de création AEM.
Accédez à Outils > Général > Modèles > Application WKND.
Modifiez la page de SPA distante.
Sélectionnez Structure dans le sélecteur de mode en haut à droite.
Cliquez pour sélectionner le conteneur de disposition.
Cliquez sur l’icône Stratégie dans la barre contextuelle.
Sur la droite, sous l’onglet Composants autorisés, développez APPLICATION WKND - CONTENU.
Assurez-vous que seuls les éléments suivants sont sélectionnés :
Appuyez sur Terminé.
Après la mise à jour de la SPA pour incorporer <ResponsiveGrid...>
et les wrappers pour trois composants React modifiables (EditableTitle
, EditableText
, et EditableImage
), et la mise à jour d’AEM avec une stratégie de modèle correspondante, nous pouvons commencer à créer du contenu dans le composant de conteneur.
Connectez-vous au service de création AEM.
Accédez à Sites > Application WKND.
Cliquez sur Accueil, puis sélectionnez Modifier dans la barre d’actions du haut.
Sélectionnez Modifier dans le sélecteur de mode en haut à droite de l’éditeur de page.
Recherchez le domaine modifiable du conteneur de disposition sous le titre.
Ouvrez la barre latérale de l’éditeur de page, puis sélectionnez la vue Composants.
Faites glisser les composants suivants dans le conteneur de disposition :
Faites glisser les composants pour les réorganiser dans l’ordre suivant :
Créez le composant de titre.
Créez le composant d’image.
Créez le composant de texte.
Vos composants ont été créés, mais s’empilent verticalement.
Utilisez le mode de disposition d’AEM pour ajuster la taille et la mise en page des composants.
Basculez sur le mode de disposition à l’aide du sélecteur de mode situé en haut à droite.
Redimensionnez les composants Image et Texte, de manière à ce qu’ils soient côte à côte ;
Prévisualisez vos modifications dans l’éditeur de page d’AEM.
Actualisez l’application WKND s’exécutant localement sur http://localhost:3000 pour afficher les modifications.
Vous avez ajouté un composant de conteneur qui autorise les composants modifiables à être ajoutés par les créateurs et créatrices sur l’application WKND. Vous savez maintenant comment :
ResponsiveGrid
du composant React modifiable d’AEM dans la SPAL’étape suivante utilise cette même technique pour ajouter un composant modifiable à un itinéraire Détails de l’Adventure dans la SPA.