Le guide Composants communautaires est un outil de développement interactif pour le cadre de composants sociaux (SCF). Il fournit une liste des composants AEM Communities disponibles ou des fonctionnalités plus complexes construites à partir de plusieurs composants.
En plus des informations de base pour chaque composant, le guide permet d'expérimenter comment fonctionnent les composants/fonctionnalités SCF et comment ils peuvent être configurés ou personnalisés.
Pour plus d'informations sur les fondamentaux de développement relatifs à chaque composant, voir Caractéristiques et composants essentiels.
Ce guide est destiné aux installations de développement des instances d’auteur (localhost:4502) et de publication (localhost:4503).
Le site Composants de la communauté est accessible en accédant à
Les interactions avec les composantes Communautés varient selon :
Sur l’auteur, pour passer en mode d’édition, insérez editor.html
ou cf#
comme premier segment de chemin après le nom du serveur :
Interface utilisateur standard:
https://<server>:<port>/editor.html/content/community-components/en.html
IU classique :
https://<server>:<port>/cf#/content/community-components/en.html
En mode d’édition, les liens d’une page ne sont pas principaux.
Pour accéder à une page de composant, sélectionnez d’abord le mode Prévisualisation pour activer les liens.
La page du composant s’affichant dans le navigateur, revenez en 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, vue le guide rapide de création de pages.
Si l’AEM n’est pas familière, vue la documentation sur la gestion de base.
Le guide fournit une liste des composants SCF disponibles pour la prévisualisation et le prototypage le long du côté gauche de la page.
Guide des composants tel qu’il est affiché sur une instance d’auteur en mode d’édition :
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 :
Titre : Nom du composant sélectionné
Bibliothèques côté client : Liste d’une ou de plusieurs catégories obligatoires
Inclus : Si le composant peut être inclus dynamiquement, l’état peut être basculé en mode d’édition de l’auteur :
Exemple de composant ou de fonction : une instance principale du composant ou de la fonction. Si un composant est modifié, il peut l’être avec les modifications apportées aux modèles, CSS et données fournis 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.
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 pour les développeurs sont fournies dans la section Composants et caractéristiques essentielles de la documentation, tandis que les paramètres de la boîte de dialogue sont décrits dans la section Composants des communautés pour les auteurs.
Pour le guide des 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 de manière dynamique, en mode d'édition, sélectionnez le composant et le texte inclus et cliquez sur le doublon pour ouvrir la boîte de dialogue d'édition :
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 l’enfant d’un noeud par).
Si cette option est cochée, le Guide des composants utilise sling pour inclure de manière dynamique un composant du type de ressource du noeud enfant (ressource non existante).
Cette option n’est pas cochée par défaut.
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 de site (non connecté) et en tant que membres disposant de divers privilèges lors de leur connexion.
Gardez à l’esprit que si le SRP est laissé par défaut à JSRP, l’UGC saisi sur l’instance de publication ne sera visible que lors de la publication et *ne sera *pas visible à partir de la console modération de l’instance d’auteur.
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 offrent un moyen de gérer et d’optimiser le téléchargement du code JavaScript et du code CSS utilisés pour rendre le composant dans le navigateur.
Pour plus d'informations, consultez Clientlibs for Communities Components.
Sur l’instance d’auteur, où un utilisateur 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 située à gauche du bouton Impersonate pour saisir le nom d’utilisateur ou sélectionnez 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’emprunt d’identité. Il vous suffit d’utiliser le lien Connexion/Déconnexion pour vous faire passer pour différents utilisateurs, tels que les utilisateurs de démonstration.
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.
Cet outil est en lecture seule. Aucune des modifications apportées aux modèles, CSS ou données n’est enregistrée dans le référentiel.
Pour tester rapidement les personnalisations, la propriété scg:showIde
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 :
Accédez à CRXDE Lite
Par exemple, http://localhost:4503/crx/de
Sélectionnez le noeud jcr:content
du composant.
Par exemple, /content/community-components/en/comments/jcr:content
Ajouter une propriété
scg:showIde
String
true
Sélectionner Enregistrer tout
Rechargement de la page Commentaires dans le guide
http://localhost:4503/content/community-components/en/comments.html
Notez qu’il existe maintenant 3 onglets pour les modèles, CSS et Données.
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 des modifications locales à l’instance de composant exemple située en haut de la page sans affecter le composant dans le référentiel.
L'exécution de la compilation sur les modifications locales mettra en évidence les erreurs en plaçant un point dans la gouttière et en marquant le texte en rouge.
Sélectionnez l’onglet CSS pour afficher le fichier 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 la page CSS à l’instance de composant exemple située 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.
Sélectionnez l’onglet Données pour afficher les données du point de terminaison .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 reliure et mises en évidence dans l’éditeur.