Les composants fixes offrent une certaine flexibilité pour la création SPA contenu. Toutefois, cette approche est rigide et nécessite que les développeurs définissent la composition exacte du contenu modifiable. Pour prendre en charge la création d’expériences exceptionnelles par les auteurs, SPA Editor prend en charge l’utilisation de composants de conteneur dans le SPA. Les composants de conteneur permettent aux auteurs de faire glisser des composants autorisés dans le conteneur et de les créer, comme ils le peuvent dans la création AEM Sites traditionnelle.
Dans ce chapitre, nous allons ajouter un conteneur modifiable à la vue d’accueil permettant aux auteurs de composer et de mettre en page des expériences de contenu enrichi à l’aide AEM composants principaux React directement dans le SPA.
Pour ajouter un composant de conteneur à la vue d’accueil :
Pour placer une zone modifiable dans la vue Accueil, nous devons :
@adobe/aem-react-editable-components
withMappable
afin que les développeurs puissent le placer dans le SPAMapTo
afin qu’il puisse être réutilisé dans d’autres composants de conteneur, en imbriquant effectivement des conteneurs.Pour ce faire :
Ouvrez le projet SPA dans votre IDE.
Créez un composant React à l’adresse src/components/aem/AEMResponsiveGrid.js
Ajoutez le code suivant à AEMResponsiveGrid.js
// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
// Import the base ResponsiveGrid component
import { ResponsiveGrid } from "@adobe/aem-react-editable-components";
// The sling:resourceType for which this Core Component is registered with in AEM
const RESOURCE_TYPE = "wcm/foundation/components/responsivegrid";
// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
emptyLabel: "Layout Container", // The component placeholder in AEM SPA Editor
isEmpty: function(props) {
return props.cqItemsOrder == null || props.cqItemsOrder.length === 0;
}, // The function to determine if this component has been authored
resourceType: RESOURCE_TYPE // The sling:resourceType this SPA component is mapped to
};
// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(ResponsiveGrid, EditConfig);
// withMappable allows the component to be hardcoded into the SPA; <AEMResponsiveGrid .../>
const AEMResponsiveGrid = withMappable(ResponsiveGrid, EditConfig);
export default AEMResponsiveGrid;
Le code est similaire AEMTitle.js
que a importé le composant Titre des composants principaux de la portée AEM.
Le fichier AEMResponsiveGrid.js
doit se présenter comme suit :
Maintenant que le composant ResponsiveGrid AEM est enregistré dans et disponible pour une utilisation dans le SPA, nous pouvons le placer dans la vue d’accueil.
Ouvrez et modifiez react-app/src/App.js
Importez le composant AEMResponsiveGrid
et placez-le au-dessus du composant <AEMTitle ...>
.
Définissez les attributs suivants sur le composant <AEMResponsiveGrid...>
pagePath = '/content/wknd-app/us/en/home'
itemPath = 'root/responsivegrid'
Cela indique à ce composant AEMResponsiveGrid
de récupérer son contenu de la ressource AEM :
/content/wknd-app/us/en/home/jcr:content/root/responsivegrid
itemPath
correspond au noeud responsivegrid
défini dans le Remote SPA Page
modèle d’AEM et est automatiquement créé sur les nouvelles pages AEM créées à partir du modèle d’ Remote SPA Page
.
Mettez à jour App.js
pour ajouter le composant <AEMResponsiveGrid...>
.
...
import AEMResponsiveGrid from './components/aem/AEMResponsiveGrid';
...
function Home() {
return (
<div className="Home">
<AEMResponsiveGrid
pagePath='/content/wknd-app/us/en/home'
itemPath='root/responsivegrid'/>
<AEMTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='title'/>
<Adventures />
</div>
);
}
Le fichier Apps.js
doit se présenter comme suit :
Pour tirer pleinement parti des conteneurs d’expérience de création flexibles fournis dans SPA Editor. Nous avons déjà créé un composant Titre modifiable, mais nous allons en faire quelques autres qui permettent aux auteurs d’utiliser des composants principaux Texte et Image AEM WCM dans le nouveau composant de conteneur ajouté.
Ouvrez le projet SPA dans votre IDE.
Créez un composant React à l’adresse src/components/aem/AEMText.js
Ajoutez le code suivant à AEMText.js
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { TextV2, TextV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
const RESOURCE_TYPE = "wknd-app/components/text";
const EditConfig = {
emptyLabel: "Text",
isEmpty: TextV2IsEmptyFn,
resourceType: RESOURCE_TYPE
};
MapTo(RESOURCE_TYPE)(TextV2, EditConfig);
const AEMText = withMappable(TextV2, EditConfig);
export default AEMText;
Le fichier AEMText.js
doit se présenter comme suit :
Ouvrez le projet SPA dans votre IDE.
Créez un composant React à l’adresse src/components/aem/AEMImage.js
Ajoutez le code suivant à AEMImage.js
import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
import { ImageV2, ImageV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
const RESOURCE_TYPE = "wknd-app/components/image";
const EditConfig = {
emptyLabel: "Image",
isEmpty: ImageV2IsEmptyFn,
resourceType: RESOURCE_TYPE
};
MapTo(RESOURCE_TYPE)(ImageV2, EditConfig);
const AEMImage = withMappable(ImageV2, EditConfig);
export default AEMImage;
Créez un fichier SCSS src/components/aem/AEMImage.scss
qui fournit des styles personnalisés pour AEMImage.scss
. Ces styles ciblent les classes CSS de notation BEM du composant principal React AEM.
Ajoutez le SCSS suivant à AEMImage.scss
.cmp-image__image {
margin: 1rem 0;
width: 100%;
border: 0;
}
Importer AEMImage.scss
dans AEMImage.js
...
import './AEMImage.scss';
...
AEMImage.js
et AEMImage.scss
doivent se présenter comme suit :
Les nouveaux composants AEMText
et AEMImage
SPA sont référencés dans le SPA et sont instanciés dynamiquement en fonction du JSON renvoyé par l’. Pour vous assurer que ces composants sont disponibles pour la SPA, créez des instructions d’importation pour eux dans App.js
Ouvrez le projet SPA dans votre IDE.
Ouvrez le fichier src/App.js
Ajouter des instructions d’importation pour AEMText
et AEMImage
...
import AEMText from './components/aem/AEMText';
import AEMImage from './components/aem/AEMImage';
...
Le résultat doit se présenter comme suit :
Si ces importations sont et non ajoutées, le code AEMText
et AEMImage
ne seront pas appelés par SPA et, par conséquent, les composants ne sont pas enregistrés par rapport aux types de ressources fournis.
AEM composants de conteneur utilisent des stratégies pour dicter leurs composants autorisés. Il s’agit d’une configuration essentielle lors de l’utilisation de SPA Editor, puisque seuls AEM composants principaux de la gestion du contenu web qui ont mappé des homologues de composants de base sont rendus par le . Assurez-vous que seuls les composants pour lesquels nous avons fourni SPA implémentations sont autorisés :
AEMTitle
mappé à wknd-app/components/title
AEMText
mappé à wknd-app/components/text
AEMImage
mappé à wknd-app/components/image
Pour configurer le conteneur reponsivegrid du modèle Page de SPA distante :
Connexion à l’auteur AEM
Accédez à Outils > Général > Modèles > Application WKND
Modifier Page SPA rapport
Sélectionnez Structure dans le sélecteur de mode en haut à droite.
Appuyez pour sélectionner le conteneur de mises en page.
Appuyez sur l’icône Stratégie dans la barre contextuelle.
À droite, sous l’onglet Composants autorisés, développez APPLICATION WKND - CONTENT
Assurez-vous que seuls les éléments suivants sont sélectionnés :
Appuyez sur Terminé
Avec la SPA mise à jour afin d’incorporer la balise <AEMResponsiveGrid...>
, les wrappers de trois composants principaux React AEM (AEMTitle
, AEMText
et AEMImage
), et l’ est mise à jour avec une stratégie de modèle correspondante, nous pouvons commencer à créer du contenu dans le composant de conteneur.
Connexion à l’auteur AEM
Accédez à Sites > Application WKND
Appuyez sur Home et sélectionnez Edit dans la barre d’actions supérieure.
Sélectionnez Modifier dans le sélecteur de mode en haut à droite de l’éditeur de page.
Recherchez la zone modifiable Conteneur de mises en page 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 mises en page
Faites glisser les composants pour les réorganiser dans l’ordre suivant :
____ Autoriser le composant ____ Titlecomponent
____ Autoriser le composant ____ d’image
____ Autoriser le composant ____ de texte
Vos composants sont maintenant créés, mais empilés verticalement.
Utilisez AEM mode Mise en page pour ajuster la taille et la mise en page des composants.
Passez en mode Mise en page à l’aide du sélecteur de mode en haut à droite.
____ Redimensionner les composants Image et Texte de sorte qu’ils soient côte à côte
____ Aperçu des modifications dans AEM éditeur de page
Actualisez l’application WKND s’exécutant localement sur http://localhost:3000 pour afficher les modifications créées.
Vous avez ajouté un composant de conteneur qui permet aux auteurs d’ajouter des composants modifiables à l’application WKND ! Vous savez maintenant comment :
L’étape suivante consiste à utiliser cette même technique pour ajouter un composant modifiable à un itinéraire Adventure Details dans le SPA.