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 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.

Create the Comments Component

Ces instructions spécifient une valeur de groupe autre que .hidden afin que le composant puisse être rendu disponible à partir du navigateur 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. Browse to CRXDE|Lite ( http://localhost:4502/crx/de/index.jsp )
  2. 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éer un dossier nommé composants
  3. Sélectionner le /apps/custom/components noeud
    • Créer > Composant..
      • Libellé : commentaires
      • Titre : Commentaires Alt
      • Description : Autre style de commentaires
      • Super Type : social/biens communs/composants/hbs/commentaires
      • Groupe : Personnalisé
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Sélectionnez Suivant
    • Cliquez sur OK
  4. Développez le noeud qui vient d’être créé : /apps/custom/components/comments
  5. Select Save All
  6. Right-click comments.jsp
  7. Sélectionner Supprimer
  8. Select Save All

Créer un 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. Navigate to the /apps/custom/components/comments node
  2. Cliquez avec le bouton droit sur le noeud.
    • Sélectionnez Créer > Composant...**
      • Libellé : commentaire
      • Titre : Commentaire Alt
      • Description : Autre style de commentaire
      • 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

Copier et modifier les 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, 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 clientlib 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
    • Ajoutez à 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

Enregistrement du modèle et de la Vue 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 les recherches /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 et la vue SCF JS pour le type de ressource personnalisé.
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);

  • Select Save All

Publication de l’application

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
    • Select Tools > Deployment > Replication
    • Sélectionner Activer l'arborescence
    • Définir Start Path sur /apps/custom
    • Désélectionner uniquement modifié
    • Sélectionner le bouton Activer