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’apparence d’un commentaire publié.

Créer le composant Commentaires

Ces instructions spécifient une valeur Groupe autre que .hidden afin que le composant puisse ê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.

1. Accédez à CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)

2. Créez un emplacement pour les applications personnalisées :

   • Sélectionnez le noeud /apps

     • Créer un dossier nommé personnalisé

   • Sélectionnez le noeud /apps/custom

     • Création de composants nommés dossiers

3. Sélectionnez le noeud /apps/custom/components

   • Créer > Composant…

     • Libellé : commentaires
     • Titre : Commentaires Alt
     • Description : Style de commentaire alternatif
     • Super Type : social/commons/components/hbs/comments
     • Groupe : Personnalisé

   • Sélectionnez Suivant

   • Sélectionnez Suivant

   • Sélectionnez Suivant

   • Cliquez sur OK

4. Développez le noeud que vous venez de créer : /apps/custom/components/comments

5. Sélectionnez Enregistrer tout.

6. Faites un clic-droit comments.jsp

7. Sélectionnez Supprimer

8. Sélectionnez Enregistrer tout.

Créer le composant Commentaire enfant

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.

1. Accédez au noeud /apps/custom/components/comments

2. Cliquez avec le bouton droit sur le noeud

   • Sélectionnez Créer > Composant…

     • Libellé : comment
     • Titre : Commentaire Alt
     • Description : Autre style de commentaire
     • Super Type : social/commons/components/hbs/comments/comment
     • Groupe: *.hidden*

   • Sélectionnez Suivant

   • Sélectionnez Suivant

   • Sélectionnez Suivant

   • Cliquez sur OK

3. Développez le noeud que vous venez de créer : /apps/custom/components/comments/comment

4. Sélectionnez Enregistrer tout.

5. Faites un clic-droit comment.jsp

6. Sélectionnez Supprimer

7. Sélectionnez Enregistrer tout.

Copiez et modifiez les scripts HBS par défaut

Utilisation de CRXDE Lite :

• Copier comments.hbs

  • De /libs/social/commons/components/hbs/comments
  • À /apps/custom/components/comments

• Modifiez comments.hbs en :

  • Modifiez la valeur de l’attribut data-scf-component (~line 20) :

    • Origine social/commons/components/hbs/comments
    • To /apps/custom/components/comments

  • Modifiez pour inclure le composant de commentaire personnalisé (~line 75) :

    • Remplacer {{include this resourceType='social/commons/components/hbs/comments/comment'}}
    • Par {{include this resourceType='/apps/custom/components/comments/comment'}}

• Copier comment.hbs

  • De /libs/social/commons/components/hbs/comments/comment
  • À /apps/custom/components/comments/comment

• Modifiez comment.hbs en :

  • Modifier la valeur de l’attribut data-scf-component (~ ligne 19)

    • Origine social/commons/components/hbs/comments/comment
    • À /apps/custom/components/comments/comment

• Noeud /apps/custom

• Sélectionnez Enregistrer tout.

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

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 de CRXDE Lite :

• Noeud /apps/custom/components/comments

• Sélectionnez Créer un noeud

  • Nom : clientlibs

  • Type : cq:ClientLibraryFolder

  • Ajoutez à l’onglet Propriétés :

    • ​​categories ​​String NameTypeValue cq.social.author.hbs.comments Multi
    • ​​dependencies ​​String NameTypeValue cq.social.scf Multi

• Sélectionnez Enregistrer tout.

• Avec le noeud /apps/custom/components/comments/clientlibs sélectionné, créez 3 fichiers :

  • Nom : css.txt
  • Nom : js.txt
  • Nom : customcommentsystem.js

• Saisissez 'customcommentsystem.js' comme contenu de js.txt

• Sélectionnez Enregistrer tout.

Enregistrement du modèle et de la vue SCF

Lors de l’extension (remplacement) d’un composant SCF, le paramètre resourceType est différent (le recouvrement utilise le mécanisme de recherche relatif qui recherche /apps avant /libs afin que le paramètre 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 :

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

• Sélectionnez Enregistrer tout.

Publier l’application

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

  • Sélectionnez Outils > Déploiement > Réplication
  • Sélectionner Activate Tree
  • Définissez Start Path : à /apps/custom
  • Décochez Only Modified
  • Bouton Sélectionner Activate