DocumentationAEM 6.4Guide de Communities

Guide de composants de communauté community-components-guide

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.

Le guide des composants de la communauté est un outil de développement interactif pour la structure de composants sociaux (SCF). Il fournit une liste des composants AEM Communities disponibles ou des fonctionnalités plus complexes composées de plusieurs composants.

Outre les informations de base pour chaque composant, le guide permet d’expérimenter le fonctionnement des composants/fonctionnalités SCF et leur configuration ou personnalisation.

Pour plus d’informations sur les éléments essentiels de développement liés à chaque composant, voir Fonctionnalités et composants essentiels.

Prise en main getting-started

Ce guide est destiné aux installations de développement des instances de création (localhost:4502) et de publication (localhost:4503).

Le site Composants de la communauté est accessible en accédant à

Les interactions avec les composants Communities varient en fonction des éléments suivants :

  • Serveur (auteur ou publication)
  • Si le visiteur du site est connecté ou non
  • S’il est connecté, les privilèges affectés au membre
  • si la SRP par défaut, JSRP, est en cours d’utilisation

Sur l’auteur, pour passer en mode d’édition, insérez l’une des options suivantes : editor.html ou cf# comme premier segment de chemin d’accès après le nom du serveur :

NOTE
En mode d’édition, les liens d’une page ne sont pas principaux.
Pour accéder à une page de composant, sélectionnez tout d’abord le mode Aperçu pour activer les liens.
La page du composant s’affichant dans le navigateur, revenez au mode d’ édition afin d’ouvrir la boîte de dialogue de modification du composant.
Pour obtenir des informations générales sur la création, consultez la guide rapide pour la création de pages.
Si vous ne connaissez pas AEM, consultez la documentation sur gestion de base.

Page d’accueil home-page

Le guide fournit une liste des composants SCF disponibles pour l’aperçu et le prototypage le long du côté gauche de la page.

Guide des composants tel qu’affiché sur une instance de création en mode d’édition :

chlimage_1-404

Pages de composants component-pages

Sélectionnez un composant dans la liste située le long du côté gauche de la page.

chlimage_1-405

Le corps principal du guide affiche :

  1. Titre : Nom du composant sélectionné

  2. Bibliothèques côté client: Liste d’une ou de plusieurs catégories obligatoires

  3. Incluable: Si le composant peut être inclus dynamiquement, l’état peut être basculé en mode d’édition de création :

    • En cas d’ajout, le texte affiché est le suivant : "Ce composant est inclus via son noeud par."
    • Si inclus, le texte affiché est : "Ce composant est inclus dynamiquement."
    • Si elle n’est pas incluse, aucun texte n’est affiché.

  4. Exemple de composant ou de fonctionnalité : une instance principale du composant ou de la fonctionnalité. Si un composant est modifié, il peut l’être avec les modifications apportées aux modèles, aux CSS et aux données fournies dans la section des onglets.

NOTE
Après avoir effectué une sélection à gauche, le composant apparaît en dessous, plutôt qu’à côté, de la liste des composants lorsque la fenêtre du navigateur est trop étroite.

Interactions de création author-interactions

Lorsque vous utilisez le guide sur une instance d’auteur, il est possible de configurer un composant en ouvrant sa boîte de dialogue. Les informations destinées aux développeurs sont indiquées dans la section Principes élémentaires des composants et des fonctionnalités de la documentation, tandis que les paramètres de la boîte de dialogue sont décrits à la section Composants Communities pour les auteurs.

Pour le guide Composants de la communauté , certains paramètres de la boîte de dialogue de composant sont superposés avec la variable Incluable activer/désactiver l’état. Pour basculer entre l’utilisation de la ressource existante ou d’une ressource incluse dynamiquement, en mode d’édition, sélectionnez le composant et le texte inclusible, puis double-cliquez pour ouvrir la boîte de dialogue de modification :

chlimage_1-406

Sous , Modèles tab :

chlimage_1-407

  • Inclure le composant enfant avec sling:include

    Si cette option n’est pas cochée, le guide des composants utilise la ressource existante dans le référentiel (un noeud jcr enfant d’un noeud par).

    • Le texte affiché est : "Ce composant est inclus via son noeud par."

    Si cette case est cochée, le guide des composants utilise sling pour inclure de manière dynamique un composant de resourceType du noeud enfant (ressource non existante).

    • Le texte affiché est : "Ce composant est inclus dynamiquement."

    La case par défaut est décochée.

Interactions de publication publish-interactions

Lors de l’utilisation du guide sur une instance de publication, il est possible d’expérimenter les composants et fonctionnalités en tant que visiteur du site (non connecté) et en tant que membres disposant de divers privilèges lorsqu’ils sont connectés.

NOTE
Sachez que si la valeur par défaut de la SRP est définie sur JSRP, alors le contenu généré par l’utilisateur entré sur l’instance de publication sera visible uniquement lors de la publication et ne sera *pas visible depuis la modération sur l’instance d’auteur.

Bibliothèques côté client client-side-libraries

Les bibliothèques côté client (clientlibs) répertoriées pour chaque composant sont les suivantes : required à référencer lorsque le composant est placé sur une page. Les clientlibs permettent de gérer et d’optimiser le téléchargement du code JavaScript et CSS utilisé pour le rendu du composant dans le navigateur.

Pour plus d’informations, voir Clientlibs des composants Communities.

Emprunt d’identité impersonation

Sur l’instance d’auteur, où une personne est souvent connectée en tant qu’administrateur ou développeur, pour que le composant soit connecté en tant qu’autre utilisateur, utilisez la zone de texte située à gauche de la Emprunter l’identité pour saisir le nom d’utilisateur ou sélectionner dans la liste déroulante, puis cliquez sur le bouton . Cliquez sur Rétablir pour vous déconnecter et terminer l’emprunt d’identité.

Il n’est pas nécessaire d’emprunter l’identité de l’instance de publication. Utilisez simplement le lien Connexion/Déconnexion pour emprunter l’identité de divers utilisateurs, tels que le utilisateurs de démonstration.

Personnalisation customization

Une fois activé, chaque composant SCF est disponible pour le prototypage de personnalisations possibles en modifiant temporairement le modèle, le CSS et les données du composant.

Activation de la personnalisation enabling-customization

NOTE
Cet outil est en lecture seule. Aucune des modifications apportées aux modèles, aux CSS ou aux données n’est enregistrée dans le référentiel.

Pour tester rapidement les personnalisations, la méthode scg:showIdedoit être ajoutée au noeud de contenu JCR de la page de composant et définie sur true.

En utilisant le composant de commentaires comme exemple, sur l’instance d’auteur ou de publication, connectez-vous avec les privilèges d’administrateur :

  1. Accédez à CRXDE Lite

    Par exemple : http://localhost:4503/crx/de

  2. Sélectionnez le jcr:content node

    Par exemple, /content/community-components/en/comments/jcr:content

  3. Ajout d’une propriété

    • Nom scg:showIde
    • Type String
    • Valeur true

  4. Sélectionnez Enregistrer tout

  5. Rechargez la page Commentaires du guide.

    http://localhost:4503/content/community-components/en/comments.html

  6. Notez qu’il existe désormais 3 onglets pour les modèles, CSS et Data.

chlimage_1-408 chlimage_1-409

Onglet Modèles templates-tab

Sélectionnez l’onglet Modèles pour afficher les modèles associés au composant.

L’éditeur de modèles permet de compiler et d’appliquer les modifications locales à l’instance d’exemple de composant en haut de la page sans affecter le composant dans le référentiel.

L’exécution de la compilation sur les modifications locales permet de mettre en évidence les erreurs en plaçant un point dans la corbeille et en marquant le texte en rouge.

Onglet CSS css-tab

Sélectionnez l’onglet CSS pour afficher le CSS associé au composant.

Si un composant est un composite de plusieurs composants, certains CSS peuvent être répertoriés sous l’un des autres composants.

L’éditeur CSS permet de modifier et d’appliquer le CSS à l’exemple d’instance de composant en haut de la page.

Une règle peut être sélectionnée pour mettre en surbrillance les parties du DOM à l’aide de cette règle en cliquant sur en regard de la règle dans la barre oblique.

Onglet Données data-tab

Sélectionnez l’onglet Données pour afficher les données du point d’entrée .social.json . Ces données sont modifiables et appliquées à l’exemple d’instance de composant.

Les erreurs de syntaxe peuvent être marquées dans la corbeille et mises en évidence dans l’éditeur.

recommendation-more-help
5d37d7b0-a330-461b-814d-068612705ff6