DocumentationAEM 6.4Guide de Communities

Création des composants create-the-components

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

Créé pour :

  • User
CAUTION
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.

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

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

Création du composant Commentaires create-the-comments-component

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.

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

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

    • Sélectionnez la /apps node

      • Créer un dossier named custom

    • Sélectionnez la /apps/custom node

      • Créer un dossier named components

  3. Sélectionnez la /apps/custom/components node

    • 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

    • Sélectionnez 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

chlimage_1-70

Création du composant Commentaire enfant create-the-child-comment-component

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.

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

  2. Cliquez avec le bouton droit sur le noeud

    • Sélectionner 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

    • Sélectionnez 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

chlimage_1-71 chlimage_1-72

Copie et modification des scripts HBS par défaut copy-and-modify-the-default-hbs-scripts

Utilisation CRXDE Lite:

  • Copier comments.hbs

  • Modifier comments.hbs à :

    • Modifiez la valeur de la variable data-scf-component attribute (~line 20) :

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

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

      • Remplacer {{include this resourceType='social/commons/components/hbs/comments/comment'}}
      • Avec {{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)

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

  • Sélectionner /apps/custom node

  • Sélectionnez Enregistrer tout

Création d’un dossier de bibliothèques clientes create-a-client-library-folder

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 :

      • Nom categories Type String Valeur cq.social.author.hbs.comments Multi
      • Nom dependencies Type String Valeur cq.social.scf Multi

  • Sélectionnez Enregistrer tout

  • Avec /apps/custom/components/comments/clientlibcomme noeud 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

chlimage_1-73

Enregistrement du modèle et de la vue SCF register-the-scf-model-view

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:

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

Publication de l’application publish-the-app

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électionner Outils > Déploiement > Réplication
    • Sélectionner Activate Tree
    • Définir Start Path: to /apps/custom
    • Décocher Only Modified
    • Sélectionner Activatebutton
recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6