Guide de composants de communauté

Le guide 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 associés à chaque composant, voir Notions fondamentales sur les fonctionnalités et les composants.

Prise en main

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 :

  • Le 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 ou non utilisée

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

REMARQUE

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 le guide rapide sur la création de pages.

Si vous ne connaissez pas AEM, consultez la documentation sur la gestion de base.

Page d’accueil

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

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.

REMARQUE

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

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 pour les développeurs sont fournies dans la section Notions fondamentales sur les composants et les fonctionnalités de la documentation, tandis que les paramètres de la boîte de dialogue sont décrits dans la section Composants communautaires 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 l’état de basculement Incluable . 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 l’onglet Modèles :

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

    Cette option n’est pas cochée par défaut.

Interactions de publication

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.

REMARQUE

N’oubliez pas que si la valeur par défaut de la SRP est JSRP, le contenu généré par l’utilisateur entré sur l’instance de publication sera uniquement visible lors de la publication et ne sera *pas *visible à partir de la console modération de l’instance d’auteur.

Bibliothèques côté client

Les bibliothèques côté client (clientlibs) répertoriées pour chaque composant sont celles requises à 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 for Communities Components.

Emprunt d’identité

Sur l’instance d’auteur, où un utilisateur est souvent connecté en tant qu’administrateur ou développeur, pour tester le composant connecté en tant qu’autre utilisateur, utilisez la zone de texte située à gauche du bouton 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 les utilisateurs de démonstration.

Personnalisation

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

REMARQUE

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 propriété 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 noeud jcr:content du composant.

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

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

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

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

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.

Sur cette page