Mapper des composants SPA aux composants AEM map-components

Avant de passer au code SPA, il est important de comprendre le modèle JSON fourni par AEM. Accédez à la bibliothèque de composants principaux et affichez la page du composant de texte. La bibliothèque des composants principaux fournit des exemples de tous les composants principaux AEM.

Sélectionnez l’onglet JSON pour l’un des exemples :

Vous devriez voir trois propriétés : text, richText et :type.

:type est une propriété réservée qui répertorie le sling:resourceType (ou chemin d’accès) du composant AEM. La valeur de :type est utilisée pour mapper le composant AEM au composant SPA.

text et richText sont des propriétés supplémentaires qui sont exposées au composant SPA.

Affichez la sortie JSON à l’adresse http://localhost:4502/content/wknd-spa-react/us/en.model.json. Vous devriez pouvoir trouver une entrée similaire à :

"text": {
    "id": "text-a647cec03a",
    "text": "<p>Hello World! Updated content!</p>\r\n",
    "richText": true,
    ":type": "wknd-spa-react/components/text",
    "dataLayer": {}
   }

Dans l’IDE de votre choix, ouvrez le projet AEM pour la SPA. Développez le module ui.frontend et ouvrez le fichier Text.js sous ui.frontend/src/components/Text/Text.js.

La première zone que nous allons inspecter est la class Text à la ligne 40 :

class Text extends Component {

    get richTextContent() {
        return (<div
                id={extractModelId(this.props.cqPath)}
                data-rte-editelement
                dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(this.props.text)}} />
                );
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        return this.props.richText ? this.richTextContent : this.textContent;
    }
}

Text est un composant standard React. Le composant utilise this.props.richText pour déterminer si le contenu à rendre sera du texte enrichi ou du texte brut. Le « contenu » réel utilisé provient de this.props.text.

Pour éviter une attaque XSS potentielle, le texte enrichi est placé dans une séquence d’échappement via DOMPurify avant d’utiliser dangerouslySetInnerHTML pour effectuer le rendu du contenu. Rappelez les propriétés richText et text du modèle JSON plus tôt dans l’exercice.

Ensuite, ouvrez ui.frontend/src/components/import-components.js jetez un coup d’œil au TextEditConfig à la ligne 86 :

const TextEditConfig = {
emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

Le code ci-dessus est chargé de déterminer quand effectuer le rendu de l’espace réservé dans l’environnement de création AEM. Si la méthode isEmpty renvoie true, l’espace réservé est alors rendu.

Enfin, jetez un coup d’œil à l’appel MapTo à la ligne 94 :

export default MapTo('wknd-spa-react/components/text')(LazyTextComponent, TextEditConfig);

MapTo est fourni par le SDK AEM SPA Editor JS (@adobe/aem-react-editable-components). Le chemin d’accès wknd-spa-react/components/text représente le code sling:resourceType du composant AEM. Ce chemin d’accès est mis en correspondance avec le code :type exposé par le modèle JSON observé précédemment. MapTo prend soin d’analyser la réponse du modèle JSON et de transmettre les valeurs correctes en tant que props au composant SPA.

Vous pouvez trouver la définition du composant Text AEM à ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/text.

Dans le code du projet, ouvrez le fichier import-components.js à ui.frontend/src/components.
Ce fichier importe tous les composants SPA qui mappent vers les composants AEM. Étant donné la nature dynamique de la mise en œuvre de l’éditeur de SPA, nous devons référencer explicitement tous les composants SPA liés à des composants pouvant faire l’objet d’une création AEM. Cela permet à un créateur ou une créatrice AEM de choisir d’utiliser un composant où il ou elle le souhaite dans l’application.

Les instructions d’importation suivantes incluent les composants SPA écrits dans le projet :

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';

Il existe plusieurs autres imports de @adobe/aem-core-components-react-spa et @adobe/aem-core-components-react-base. Ceux-ci importent les composants principaux React et les rendent disponibles dans le projet actuel. Ils sont ensuite mappés à des composants AEM spécifiques au projet à l’aide du code MapTo, comme avec l’exemple de composant Text précédent.

Dans l’écran de démarrage AEM, accédez à Outils > Modèles > WKND SPA React.

Sélectionnez et ouvrez le modèle Page SPA à modifier.

Sélectionnez le conteneur de disposition et cliquez sur son icône politique pour modifier la politique :

Sous Composants autorisés > WKND SPA React - Contenu > vérifiez Image, Teaser, et Titre.

Sous Composants par défaut > Ajouter un mappage et sélectionnez le composant Image : WKND SPA React - Contenu  :

Saisissez un type MIME d’image/*.

Cliquez sur Terminé pour enregistrer les mises à jour des politiques.

Dans le Conteneur de disposition, cliquez sur l’icône politique pour le composant Texte.

Créez une politique nommée WKND SPA Text. Sous Plugins > Formatage, cochez toutes les cases pour activer des options de formatage supplémentaires :

Sous Plugins > Styles de paragraphe, cochez la case pour activer les styles de paragraphe  :

Cliquez sur Terminé pour enregistrer la mise à jour de la politique.

Accédez à la page d’accueil http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html.

Vous devriez maintenant pouvoir utiliser les composants supplémentaires Image, Teaser et Titre sur la page.

Vous devriez également pouvoir modifier le composant Text et ajouter des styles de paragraphe supplémentaires en mode plein écran.

Vous pouvez aussi glisser et déposer une image à partir de l’Outil de recherche de ressources  :

Testez les composants Titre et Teaser.

Ajoutez vos propres images via AEM Assets ou installez la base de code terminée pour la norme Site de référence WKND. Le site de référence WKND inclut de nombreuses images qui peuvent être réutilisées sur la SPA WKND. Le package peut être installé à l’aide du gestionnaire de packages d’AEM.

Dans un navigateur, accédez à http://localhost:4502/content/wknd-spa-react/us/en.model.json

Le composant de conteneur de disposition comporte un sling:resourceType de wcm/foundation/components/responsivegrid et est reconnu par l’éditeur de SPA avec la propriété :type, comme les composants Text et Image.

Les mêmes fonctionnalités de redimensionnement d’un composant à l’aide du mode de disposition sont disponibles avec l’éditeur de SPA.

Revenez sur http://localhost:4502/editor.html/content/wknd-spa-react/us/en/home.html. Ajoutez d’autres composants Image et essayez de les redimensionner à l’aide de l’option Disposition  :

Rouvrez le modèle JSON http://localhost:4502/content/wknd-spa-react/us/en.model.json et observez les columnClassNames dans le fichier JSON :

Le nom de la classe aem-GridColumn--default--4 indique que le composant doit comporter 4 colonnes en largeur sur une grille de 12 colonnes. Vous trouverez davantage d’informations sur la grille réactive ici.

Revenez à l’IDE et dans le module ui.apps, il existe une bibliothèque côté client définie à l’adresse ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/clientlibs/clientlib-grid. Ouvrez le fichier less/grid.less.

Ce fichier détermine les points d’arrêt (default, tablet, et phone) utilisés par le conteneur de disposition. Ce fichier est conçu pour être personnalisé selon les spécifications du projet. Actuellement, les points d’arrêt sont définis sur 1200px et 768px.

Vous devez pouvoir utiliser les capacités réactives et les stratégies de texte enrichi mises à jour du composant Text pour créer une vue de ce type :

Dans l’IDE Visual Studio Code, assurez-vous que VSCode AEM Sync est installé via l’extension Marketplace :

Développez le module ui.content dans l’explorateur de projets et accédez à /conf/wknd-spa-react/settings/wcm/templates.

Faites un Clic droit sur le dossier templates et sélectionnez Importer depuis le serveur AEM  :

Répétez les étapes pour importer du contenu, mais sélectionnez le dossier stratégies situé à l’emplacement /conf/wknd-spa-react/settings/wcm/templates/policies.

Examinez le filter.xmlfichier situé à l’emplacement ui.content/src/main/content/META-INF/vault/filter.xml.

<!--ui.content filter.xml-->
<?xml version="1.0" encoding="UTF-8"?>
 <workspaceFilter version="1.0">
     <filter root="/conf/wknd-spa-react" mode="merge"/>
     <filter root="/content/wknd-spa-react" mode="merge"/>
     <filter root="/content/dam/wknd-spa-react" mode="merge"/>
     <filter root="/content/experience-fragments/wknd-spa-react" mode="merge"/>
 </workspaceFilter>

Le fichier filter.xml doit identifier les chemins d’accès des nœuds installés avec le package. Remarquez l’élément mode="merge" sur chacun des filtres qui indique que le contenu existant ne sera pas modifié et que seul du nouveau contenu est ajouté. Étant donné que les personnes créatrices de contenu peuvent mettre à jour ces chemins, il est important qu’un déploiement de code ne remplace pas le contenu. Voir la Documentation FileVault pour plus d’informations sur l’utilisation des éléments de filtre.

Comparez ui.content/src/main/content/META-INF/vault/filter.xml et ui.apps/src/main/content/META-INF/vault/filter.xml pour comprendre les différents nœuds gérés par chaque module.

Accédez aux exemples d’images dans la bibliothèque de composants principaux.

Les propriétés de src, alt et title sont utilisées pour remplir le composant SPA d’Image.

Créez ensuite un nouveau dossier nommé Image sous ui.frontend/src/components.

Sous le dossier Image, créez un nouveau fichier nommé Image.js.

Ajoutez les instructions import suivantes à Image.js :

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

Ajoutez ensuite le ImageEditConfig pour déterminer quand afficher l’espace réservé dans AEM :

export const ImageEditConfig = {

    emptyLabel: 'Image',

    isEmpty: function(props) {
        return !props || !props.src || props.src.trim().length < 1;
    }
};

L’espace réservé affiche si la propriété src n’est pas définie.

Implémentez ensuite la classe Image :

 export default class Image extends Component {

    get content() {
        return <img     className="Image-src"
                        src={this.props.src}
                        alt={this.props.alt}
                        title={this.props.title ? this.props.title : this.props.alt} />;
    }

    render() {
        if(ImageEditConfig.isEmpty(this.props)) {
            return null;
        }

        return (
                <div className="Image">
                    {this.content}
                </div>
        );
    }
}

Le code ci-dessus génère un <img> en fonction des propriétés src, alt et title transmises par le modèle JSON.

Ajoutez le code MapTo pour mapper le composant React au composant AEM :

MapTo('wknd-spa-react/components/image')(Image, ImageEditConfig);

Notez bien que la chaîne wknd-spa-react/components/image correspond à l’emplacement du composant AEM dans ui.apps à : ui.apps/src/main/content/jcr_root/apps/wknd-spa-react/components/image.

Créez un nouveau fichier nommé Image.css dans le même répertoire et ajoutez les éléments suivants :

.Image-src {
    margin: 1rem 0;
    width: 100%;
    border: 0;
}

Dans Image.js, ajoutez une référence au fichier dans la partie supérieure et sous les instructions import :

import React, {Component} from 'react';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Image.css');

Ouvrez le le fichier ui.frontend/src/components/import-components.js et ajoutez une référence au nouveau composant Image :

import './Page/Page';
import './Text/Text';
import './Container/Container';
import './ExperienceFragment/ExperienceFragment';
import './Image/Image'; //add reference to Image component

Dans import-components.js, commentez l’image du composant principal React :

//MapTo('wknd-spa-react/components/image')(ImageV2, {isEmpty: ImageV2IsEmptyFn});

Cela garantit que notre composant d’image personnalisé est bien utilisé à sa place.

À partir de la racine du projet, déployez le code SPA vers AEM à l’aide de Maven :

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

Examinez la SPA dans AEM. Les composants d’image de la page doivent continuer à fonctionner. Examinez la sortie générée et vous devriez voir le balisage de notre composant d’image personnalisé au lieu du composant principal React.

Balisage du composant d’image personnalisé

<div class="Image">
    <img class="Image-src" src="/content/image-src.jpg">
</div>

Balisage d’image du composant principal React

<div class="cmp-image cq-dd-image">
    <img src="/content/image-src.jpg" class="cmp-image__image">
</div>

Il s’agit d’une bonne introduction à l’extension et à l’implémentation de vos propres composants.