Guide des composants de communauté community-components-guide

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 Adobe Experience Manager (AEM) Communities disponibles ou les fonctionnalités les plus complexes créées à partir 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 Notions fondamentales sur les fonctionnalités et les composants.

Commencer getting-started

Ce guide est destiné aux installations de développement des instances d’auteur (localhost:4502) et aux instances 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 :

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 :

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 :

Pages de composants component-pages

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

Le corps principal du guide affiche :

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 pour les développeurs sont fournies dans la section Composants et Notions fondamentales sur 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 des composants de la communauté, certains paramètres de la boîte de dialogue des composants sont superposés à 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 inclusible, puis double-cliquez pour ouvrir la boîte de dialogue de modification :

Sous l’onglet Modèles :

Interactions Publish 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.

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

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 JavaScript et du CSS utilisés pour le rendu du composant dans le navigateur.

Pour plus d’informations, voir Clientlibs for Communities Components.

Emprunt d’identité impersonation

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électionnez dans la liste déroulante, puis cliquez sur le bouton. Cliquez sur Rétablir pour vous déconnecter et mettre fin à 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 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

Pour tester rapidement les personnalisations, la propriété scg:showIde doit être ajoutée au noeud de contenu JCR de la page de composants 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 :

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.