Guide de composants de communauté

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.

Prise en main

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 à

• https://<server>:<port>/content/community-components/en.html

Les interactions avec les composantes Communautés varient selon :

• Serveur (auteur ou publication)
• Indique si le visiteur du site est connecté ou non
• S'il est connecté, les privilèges affecté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 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

Page d’accueil

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 :

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 de l’auteur :

   • S’il est 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."
   • S’il n’est pas inclus, aucun texte n’est affiché.

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

Interactions de l’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 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).

  • 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 du type de ressource 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 de site (non connecté) et en tant que membres disposant de divers privilèges lors de leur connexion.

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

Emprunt d’identité

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.

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

Pour tester rapidement les personnalisations, la propriété scg:showIdedoit ê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

   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électionner Enregistrer tout

5. Rechargement de la page Commentaires dans le guide

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

6. Notez qu’il existe maintenant 3 onglets pour les modèles, CSS et Données.

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

Onglet CSS

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.

Onglet Données

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.