Show Menu
SUJETS×

Création des composants

L’exemple d’extension de composants utilise le système de commentaires, qui est en fait composé de deux composants.
  • Commentaires - Système de commentaires englobant qui est le composant placé sur une page
  • Commentaire - Composant qui capture une instance d’un commentaire publié
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 du 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.

Create the Comments Component

Ces instructions spécifient une valeur Groupe autre que .hidden pour que le composant puisse être rendu 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.
  1. Créez un emplacement pour les applications personnalisées :
    • Sélectionner le /apps noeud
      • Créer un dossier nommé personnalisé
    • Sélectionner le /apps/custom noeud
      • Création d’un dossier nommé composants
  2. Sélectionner le /apps/custom/components noeud
    • Créer > Composant...
      • Étiquette : commentaires
      • Titre : Commentaires Alt
      • Description : Style alternatif des commentaires
      • Super Type : social/commons/components/hbs/commentaires
      • Groupe : Personnalisé
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Cliquez sur OK
  3. Développez le noeud qui vient d’être créé : /apps/custom/components/comments
  4. Select Save All
  5. Right-click comments.jsp
  6. Sélectionner Supprimer
  7. Select Save All

Création du composant de commentaire enfant

Ces instructions définissent le 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.
  1. Accédez au /apps/custom/components/comments noeud
  2. Cliquez avec le bouton droit sur le noeud.
    • Sélectionnez Créer > Composant...
      • Étiquette : commentaire
      • Titre : Commentaire Alt
      • Description : Style de commentaire alternatif
      • Super Type : social/commons/composants/hbs/commentaires/commentaire
      • Groupe : *.hidden*
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Cliquez sur OK
  3. Développez le noeud qui vient d’être créé : /apps/custom/components/comments/comment
  4. Select Save All
  5. Right-click comment.jsp
  6. Sélectionner Supprimer
  7. Select Save All

Copie et modification des scripts HBS par défaut

Using CRXDE Lite :

Création d’un dossier de bibliothèques clientes

Pour éviter d’avoir à inclure explicitement cette bibliothèque cliente, il est possible d’utiliser la valeur de pour la bibliothèque clientlib du système de commentaires par défaut ( cq.social.author.hbs.comments ), mais cette bibliothèque cliente sera également incluse pour toutes les instances du composant par défaut.
Using CRXDE Lite :
  • Sélectionner le /apps/custom/components/comments noeud
  • Sélectionner Créer un noeud
    • Nom : clientlibs
    • Type : cq:ClientLibraryFolder
    • Ajouter à l’onglet Propriétés :
      • Nom categories Type String Valeur cq.social.author.hbs.comments``Multi
      • Nom dependencies Type String Valeur cq.social.scf``Multi
  • Select Save All
  • Le noeud /apps/custom/components/comments/clientlib s étant sélectionné, créez 3 fichiers :
    • Nom : css.txt
    • Nom : js.txt
    • Nom : customcommentsystem.js
  • Saisissez "customcommentsystem.js" comme contenu de js.txt
  • Select Save All

Enregistrer le modèle et le SCF

Lors de l’extension (remplacement) d’un composant SCF, resourceType est différent (l’incrustation utilise le mécanisme de recherche relatif qui effectue la recherche /apps avant /libs de sorte 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 le pour le paramètre resourceType personnalisé.
Entrez le texte suivant comme contenu de customcommentsystem.js :

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);

  • Select Save All

Publication de l’application

Pour expérimenter le composant étendu dans le de publication , il est nécessaire de répliquer le composant personnalisé.
Une manière de le faire est
  • A partir de la navigation globale
    • Sélectionnez Outils > Déploiement > Réplication.
    • Sélectionner Activate Tree
    • Définir Start Path : to /apps/custom
    • Désélectionner Only Modified
    • Sélectionner le Activate bouton