Documentation AEM 6.5 Guide de Communities

Création des composants create-the-components

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Rubriques :
Communities

Créé pour :

Développeur

L’exemple d’extension de composants utilise le système de commentaires, 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 valeur Group 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 à l’utilisation du fichier HBS par défaut.

Accédez à CRXDE|Lite (http://localhost:4502/crx/de/index.jsp)
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éez un dossier nommé components
Sélectionnez le noeud /apps/custom/components .
- Créer > Composant…
  - Libellé : commentaires
  - Titre : Alt Comments
  - Description : Autre style de commentaires
  - Super Type : social/commons/components/hbs/comments
  - Groupe : Personnalisé
- Sélectionnez Suivant
- Sélectionnez Suivant
- Sélectionnez Suivant
- Sélectionnez OK.
Développez le noeud créé : /apps/custom/components/comments
Sélectionnez Enregistrer tout
Clic droit comments.jsp
Sélectionnez Supprimer
Sélectionnez Enregistrer tout

create-component

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

Ces instructions définissent Group sur .hidden, car seul le composant parent doit être inclus dans une page.

La suppression du fichier JSP créé automatiquement est due à l’utilisation du fichier HBS par défaut.

Accédez au noeud /apps/custom/components/comments
Cliquez avec le bouton droit sur le noeud.
- Sélectionnez Créer > Composant….
  - Libellé : commentaire
  - Titre : Alt Comment
  - 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.
Développez le noeud créé : /apps/custom/components/comments/comment
Sélectionnez Enregistrer tout
Clic droit comment.jsp
Sélectionnez Supprimer
Sélectionnez Enregistrer tout

create-child-component

create-component-crxde

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

Utilisation de CRXDE Lite :

Copier comments.hbs
- De /libs/social/commons/components/hbs/comments{1
- À /apps/custom/components/comments
Modifiez comments.hbs sur :
- Modifiez la valeur de l’attribut data-scf-component (~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
- De /libs/social/commons/components/hbs/comments/comment
- À /apps/custom/components/comments/comment
Modifiez comment.hbs sur :
- 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 le noeud /apps/custom
Sélectionnez Enregistrer tout

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

Pour éviter d’avoir à inclure 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). Cependant, cette bibliothèque cliente doit également être 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 :
  - 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 le noeud /apps/custom/components/comments/clientlibs sélectionné, créez trois fichiers :
- Nom : css.txt
- Nom : js.txt
- Nom : customcommentsystem.js
Saisissez 'customcommentsystem.js' comme contenu de js.txt.
Sélectionnez Enregistrer tout

comments-clientlibs

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

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 JavaScript (dans la bibliothèque cliente) pour enregistrer le modèle SCF JS et 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

Publish 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, procédez comme suit :

À partir 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 Uniquement Modifié
- Bouton Sélectionner Activer

recommendation-more-help

81e2cd9d-0789-409d-b87c-2a8ce4f28791