Créer les 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é.

REMARQUE

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.

Créer le composant Commentaires

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.

  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 : 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. Sélectionner Enregistrer tout

  6. Faites un clic-droit comments.jsp

  7. Sélectionnez Supprimer

  8. Sélectionner Enregistrer tout

create-component

Créer le composant Commentaires 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é : 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. Sélectionner Enregistrer tout

  5. Faites un clic-droit comment.jsp

  6. Sélectionnez Supprimer

  7. Sélectionner Enregistrer tout

create-child-component

create-component-crxde

Copier et modifier les scripts HBS par défaut

Utilisation de CRXDE Lite :

  • Copier comments.hbs

  • Modifiez comments.hbs en :

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

      • Origine social/commons/components/hbs/comments
      • To /apps/custom/components/comments
    • Modifier pour inclure le composant de commentaire personnalisé (~ligne 75) :

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

      • Origine social/commons/components/hbs/comments/comment
      • À /apps/custom/components/comments/comment
  • Sélectionner le noeud /apps/custom

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

commentaires-clientlibs

Enregistrer le modèle et 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 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 :

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électionner Enregistrer tout

Publier l’application

Pour expérimenter le composant étendu dans l’environnement de publication, il est nécessaire de répliquer le composant personnalisé.

L'une des façons de le faire est :

  • De la navigation globale,

    • Sélectionnez Outils > Déploiement > Réplication
    • Sélectionnez Activer l'arborescence
    • Définissez Start Path sur /apps/custom
    • Décochez Modifié uniquement.
    • Bouton Sélectionner Activer

Sur cette page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now