Show Menu
SUJETS×

Guide de composants de communauté

Le guide Composants communautaires est un outil de développement interactif pour le cadre des composantes sociales (SCF) . Il fournit une liste des composants AEM Communities disponibles ou des fonctionnalités plus complexes créées à partir de plusieurs composants.
En plus des informations de base pour chaque composant, le guide permet d'expérimenter le fonctionnement des composants/fonctionnalités SCF et la manière dont ils peuvent être configurés ou personnalisés.
Pour plus d’informations sur les fondamentaux de développement relatifs à chaque composant, voir Fonctionnalités et composants essentiels .

Prise en main

Ce guide est destiné aux installations de développement des instances d’auteur (localhost:4502) et de publication (localhost:4503).
Pour accéder au site Composants de la communauté, accédez à
Les interactions avec les composantes des communautés varient selon les éléments suivants :
  • Le serveur (auteur ou publication)
  • Indique si le visiteur du site est connecté ou non
  • Si vous êtes connecté, les privilèges attribués au membre
  • Indique si le SRP par défaut, JSRP , est utilisé ou non
Sur l’auteur, pour passer en mode d’édition, insérez soit editor.html , soit cf# comme premier segment de chemin après le nom du serveur :
En mode d’édition, les liens d’une page ne sont pas actifs.
Pour accéder à une page de composant, sélectionnez d’abord le mode Aperçu pour activer les liens.
La page de composant étant affichée dans le navigateur, revenez en mode d’édition afin d’ouvrir la boîte de dialogue de modification du composant.
For general authoring information, view the quick guide to authoring pages .
If not familiar with AEM, view the documentation on basic handling .

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 affiché sur une instance d’auteur en mode d’édition :

Pages de composants

Sélectionnez un composant dans la liste située le long du côté gauche de la page.
Le corps principal du guide s’affiche :
  1. Titre : Nom du composant sélectionné
  2. Bibliothèques côté client : Liste d’une ou de plusieurs catégories obligatoires
  3. Inclus : Si le composant peut être inclus dynamiquement, l’état peut être basculé en mode d’édition Auteur :
    • Si vous l’ajoutez, 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 ce n’est pas le cas, aucun texte n’est affiché.
  4. Exemple de composant ou de fonction : instance active du composant ou de la fonction. Si un composant, il peut être modifié par les modifications apportées aux modèles, aux feuilles de style CSS et aux données fournies dans la section d’onglet.
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 Auteur

Lors de l’utilisation du 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 fournies dans la section Essentials des composants et des fonctionnalités de la documentation, tandis que les paramètres des boîtes de dialogue sont décrits dans la section Composants des communautés pour les auteurs.
Pour le guide Composants de la communauté, certains paramètres de la boîte de dialogue des composants sont superposés avec l’état de bascule 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 inclus, puis double-cliquez pour ouvrir la boîte de dialogue de modification :
Sous l’onglet Modèles :
  • 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 qui est un enfant d’un noeud par).
    • le texte affiché est : "Ce composant est inclus via son noeud par." Si cette option est cochée, le Guide des composants utilise sling pour inclure de manière dynamique un composant de la ressourceType 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 lors de leur connexion.
Sachez que si le SRP est laissé par défaut à JSRP , l’UGC saisi sur l’instance de publication est uniquement visible lors de la publication et *n’est pas *visible depuis la console de 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 pour être référencées lorsque le composant est placé sur une page. Les clientlibs fournissent un moyen de gérer et d’optimiser le téléchargement du code JavaScript et CSS utilisé pour rendre le composant dans le navigateur.
Pour plus d’informations, consultez Clientlibs for Communities Components .

Emprunt d’identité

Dans l’instance d’auteur, où l’un d’eux est souvent connecté en tant qu’administrateur ou développeur, pour expérimenter le composant connecté en tant qu’autre utilisateur, utilisez la zone de texte à gauche du bouton d’emprunt d’identité pour saisir le nom d’utilisateur ou effectuez une sélection dans la liste déroulante, puis cliquez sur le bouton. Cliquez sur Rétablir pour vous déconnecter et terminer l’emprunt d’identité.
L’instance de publication n’a pas besoin de s’incarner. Il vous suffit d’utiliser le lien Connexion/Déconnexion pour vous faire passer pour des utilisateurs variés, tels que les utilisateurs de la démonstration.

Personnalisation

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

Activation de la personnalisation

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 scg:showIde propriété doit être ajoutée au noeud JCR de contenu de la page de composant et définie sur true.
Utilisation du composant de commentaires comme exemple, sur l’instance d’auteur ou de publication, connecté avec des droits d’administrateur :
  1. Accédez à CRXDE Lite
  2. Sélectionnez le jcr:content noeud du composant
    Par exemple, /content/community-components/en/comments/jcr:content
  3. Ajouter une propriété
    • Nom scg:showIde
    • Type String
    • Valeur true
  4. Select Save All
  5. Rechargement de la page Commentaires dans le guide
  6. Notez qu’il existe maintenant 3 onglets pour les modèles, CSS et Data.

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 de composant exemple en haut de la page sans affecter le composant dans le référentiel.
L’exécution de la compilation sur les modifications locales met en évidence les erreurs en plaçant un point dans la gouttière et en marquant le texte en rouge.

Onglet CSS

Sélectionnez l’onglet CSS pour afficher le fichier CSS associé au composant.
Si un composant est un composite de plusieurs composants, certaines feuilles de style CSS peuvent être répertoriées sous l’un des autres composants.
L’éditeur CSS permet de modifier la page CSS et de l’appliquer à 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 gouttière.

Onglet Données

Sélectionnez l’onglet Données pour afficher les données du point de fin .social.json. Ces données sont modifiables et appliquées à l’instance de composant exemple.
Les erreurs de syntaxe peuvent être marquées dans la gouttière et mises en évidence dans l’éditeur.