AEM 6.4 a atteint la fin de la prise en charge étendue et cette documentation n’est plus mise à jour. Pour plus d’informations, voir notre période de support technique. Rechercher les versions prises en charge here.
L’exemple d’extension de composants utilise le système de commentaires, qui est en fait composé de deux composants.
Les deux composants doivent être mis en place, en particulier si vous personnalisez l’apparence d’un commentaire publié.
Un seul système de commentaires par page de site est autorisé.
De nombreuses fonctionnalités de Communities incluent déjà un système de commentaires dont resourceType peut être modifié pour référencer le système de commentaires étendu.
Ces instructions spécifient une Groupe valeur autre que .hidden
le composant peut donc être rendu disponible à partir de l’explorateur de composants (sidekick).
La suppression du fichier JSP créé automatiquement est due au fait que le fichier HBS par défaut sera utilisé à la place.
Accédez à CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
Créez un emplacement pour les applications personnalisées :
Sélectionnez la /apps
node
Sélectionnez la /apps/custom
node
Sélectionnez la /apps/custom/components
node
Créer > Composant…
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez OK
Développez le noeud que vous venez de créer : /apps/custom/components/comments
Sélectionnez Enregistrer tout
Faites un clic-droit comments.jsp
Sélectionnez Supprimer
Sélectionnez Enregistrer tout
Ces instructions sont définies Groupe to .hidden
car seul le composant parent doit être inclus dans une page.
La suppression du fichier JSP créé automatiquement est due au fait que le fichier HBS par défaut sera utilisé à la place.
Accédez au /apps/custom/components/comments
node
Cliquez avec le bouton droit sur le noeud
Sélectionner Créer > Composant…
*.hidden*
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez OK
Développez le noeud que vous venez de créer : /apps/custom/components/comments/comment
Sélectionnez Enregistrer tout
Faites un clic-droit comment.jsp
Sélectionnez Supprimer
Sélectionnez Enregistrer tout
Utilisation CRXDE Lite:
Copier comments.hbs
Modifier comments.hbs
à :
Modifiez la valeur de la variable data-scf-component
attribute (~line 20) :
social/commons/components/hbs/comments
/apps/custom/components/comments
Modifiez pour inclure le composant de commentaire personnalisé (~line 75) :
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
Copier comment.hbs
Modifier comment.hbs
à :
Modifier la valeur de l’attribut data-scf-component (~ ligne 19)
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
Sélectionner /apps/custom
node
Sélectionnez Enregistrer tout
Pour éviter d’avoir à inclure explicitement cette bibliothèque cliente, la valeur de catégories de la bibliothèque cliente du système de commentaires par défaut peut être utilisée ( cq.social.author.hbs.comments
), mais cette bibliothèque cliente sera également incluse pour toutes les instances du composant par défaut.
Utilisation CRXDE Lite:
Sélectionner /apps/custom/components/comments
node
Sélectionner Créer un noeud
Nom : clientlibs
Type : cq:ClientLibraryFolder
Ajouter à Propriétés tab :
categories
Type String
Valeur cq.social.author.hbs.comments
Multi
dependencies
Type String
Valeur cq.social.scf
Multi
Sélectionnez Enregistrer tout
Avec /apps/custom/components/comments/clientlib
comme noeud sélectionné, créez 3 fichiers :
css.txt
js.txt
Saisissez "customcommentsystem.js" comme contenu de js.txt
Sélectionnez Enregistrer tout
Lors de l’extension (remplacement) d’un composant SCF, resourceType est différent (le recouvrement utilise le mécanisme de recherche relatif qui effectue des recherches dans /apps
before /libs
afin que resourceType reste identique). C’est pourquoi il est nécessaire d’écrire du code JavaScript (dans la bibliothèque cliente) pour enregistrer le modèle SCF JS et l’afficher pour la ressource personnalisée resourceType.
Saisissez le texte suivant comme contenu de customcommentsystem.js
:
(function($CQ, _, Backbone, SCF) {
"use strict";
var CustomComment = SCF.Components["social/commons/components/hbs/comments/comment"].Model;
var CustomCommentView = SCF.Components["social/commons/components/hbs/comments/comment"].View;
var CustomCommentSystem = SCF.Components["social/commons/components/hbs/comments"].Model;
var CustomCommentSystemView = SCF.Components["social/commons/components/hbs/comments"].View;
SCF.registerComponent('/apps/custom/components/comments/comment', CustomComment, CustomCommentView);
SCF.registerComponent('/apps/custom/components/comments', CustomCommentSystem, CustomCommentSystemView);
})($CQ, _, Backbone, SCF);
Pour tester le composant étendu dans l’environnement de publication, il est nécessaire de répliquer le composant personnalisé.
Pour ce faire, une méthode consiste à
À partir de la navigation globale
Activate Tree
Start Path
: to /apps/custom
Only Modified
Activate
button