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’aspect d’un commentaire publié.
Un seul système de commentaires par page de site est autorisé.
De nombreuses fonctions de communautés 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 valeur Groupe autre que .hidden
afin que le composant puisse être disponible à partir du navigateur du composant (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 le noeud /apps
Sélectionnez le noeud /apps/custom
Sélectionnez le noeud /apps/custom/components
Créer > Composant…
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez Suivant
Cliquez sur OK
Développez le noeud qui vient d’être créé : /apps/custom/components/comments
Sélectionner Enregistrer tout
Cliquez avec le bouton droit comments.jsp
Sélectionner Supprimer
Sélectionner Enregistrer tout
Ces instructions définissent Groupe sur .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 noeud /apps/custom/components/comments
Cliquez avec le bouton droit sur le noeud.
Sélectionnez Créer > Composant…
*.hidden*
Sélectionnez Suivant
Sélectionnez Suivant
Sélectionnez Suivant
Cliquez sur OK
Développez le noeud qui vient d’être créé : /apps/custom/components/comments/comment
Sélectionner Enregistrer tout
Cliquez avec le bouton droit comment.jsp
Sélectionner Supprimer
Sélectionner Enregistrer tout
Utilisation de CRXDE Lite :
Copier comments.hbs
Modifiez comments.hbs
en :
Modifiez la valeur de l’attribut data-scf-component
(~ligne 20) :
social/commons/components/hbs/comments
/apps/custom/components/comments
Modifier pour inclure le composant de commentaire personnalisé (~ligne 75) :
{{include this resourceType='social/commons/components/hbs/comments/comment'}}
{{include this resourceType='/apps/custom/components/comments/comment'}}
Copier comment.hbs
Modifiez comment.hbs
en :
Modifier la valeur de l’attribut data-scf-component (~ ligne 19)
social/commons/components/hbs/comments/comment
/apps/custom/components/comments/comment
Sélectionner le noeud /apps/custom
Sélectionner Enregistrer tout
Pour éviter d'avoir à inclure explicitement cette bibliothèque cliente, la valeur de catégorie de la bibliothèque clientlib 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 de CRXDE Lite :
Sélectionner le noeud /apps/custom/components/comments
Sélectionnez Créer un noeud
Nom : clientlibs
Type : cq:ClientLibraryFolder
Ajoutez à l'onglet Propriétés :
categories
String
NomTypeValeur cq.social.author.hbs.comments
Multi
dependencies
String
NomTypeValeur cq.social.scf
Multi
Sélectionner Enregistrer tout
Avec le noeud /apps/custom/components/comments/clientlib
s sélectionné, créez 3 fichiers :
css.txt
js.txt
Saisissez "customcommentsystem.js" comme contenu de js.txt
Sélectionner Enregistrer tout
Lors de l'extension (remplacement) d'un composant SCF, resourceType est différent (l'incrustation utilise le mécanisme de recherche relatif qui recherche /apps
avant /libs
pour 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 et la vue SCF JS pour le type de ressource personnalisé.
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 expérimenter le composant étendu dans l’environnement de publication, il est nécessaire de répliquer le composant personnalisé.
Une façon de le faire est
A partir de la navigation globale
Activate Tree
Start Path
: à /apps/custom
Only Modified
Activate
bouton