Show Menu
SUJETS×

Utilisation des composants principaux

Pour que les composants principaux soient opérationnels dans votre propre projet, vous devez suivre quatre étapes qui sont détaillées dans les sections ci-dessous :
Pour obtenir des instructions plus générales pour commencer avec la configuration du projet, les composants principaux, les modèles modifiables, les bibliothèques clientes et le développement des composants, le tutoriel en plusieurs parties suivant peut vous intéresser : Prise en main du développement AEM Sites – Tutoriel WKND

Téléchargement et installation 

Les composants principaux ont avant tout été conçus pour être flexibles. La publication plus régulière de nouvelles versions des composants principaux permet à Adobe d'être plus flexible lors de la diffusion de nouvelles fonctionnalités. Les développeurs peuvent ensuite être flexibles dans les composants qu'ils choisissent d'intégrer dans leurs projets et dans la fréquence à laquelle ils souhaitent les mettre à jour.
C'est pourquoi les composants principaux ne font pas partie du démarrage rapide lors du démarrage en mode de production (sans exemple de contenu). C’est pourquoi la première étape consiste à télécharger le dernier module de contenu publié à partir de GitHub et à l’installer dans vos environnements AEM.
Il existe plusieurs manières d’automatiser cette opération, mais la méthode la plus simple pour installer rapidement un module de contenu sur une instance consiste à utiliser le gestionnaire de modules. Consultez la section Installation des modules . En outre, une fois qu’une instance de publication s’exécute, vous devrez répliquer ce module dans l’éditeur. Consultez la section Réplication des modules .

Création des composants proxy

Pour des raisons expliquées dans la section Modèle de composant proxy , les composants principaux ne doivent pas être directement référencés à partir du contenu. Pour éviter cela, ils appartiennent tous à un groupe de composants masqué ( .core-wcm ou .core-wcm-form ), ce qui les empêchera de s'afficher directement dans l'éditeur.
Au lieu de cela, des composants spécifiques au site doivent être créés, pour définir le nom et le groupe du composant que vous souhaitez afficher aux auteurs de page, puis ils doivent être référencés à un composant principal comme super-type. Ces composants spécifiques au site sont parfois nommés « composants proxy », car ils ne doivent rien contenir et servent principalement à définir la version d'un composant à utiliser pour le site. Toutefois, lors de la personnalisation des composants principaux , ces composants proxy jouent un rôle essentiel pour la personnalisation des balises et des logiques.
Ainsi, pour chaque composant principal à utiliser pour un site, vous devez :
  1. créer un composant proxy correspondant dans le dossier des composants du site,
    Exemple sous /apps/my-site/components Créer un nœud de titre de type cq:Component
  2. pointer vers la version de composant principal correspondante avec le super-type,
    Exemple Ajouter la propriété suivante : sling:resourceSuperType="core/wcm/components/title/v1/title"
  3. définir le groupe, le titre et la description facultative du composant. Ces valeurs sont spécifiques au projet et déterminent la manière dont le composant est exposé aux auteurs.
    Exemple Ajoutez les propriétés suivantes :
    componentGroup="My Site"
    jcr:title="Title"  
    jcr:description="Section Heading"
    
    
Par exemple, consultez le composant Titre du site de référence We.Retail , qui constitue un bon exemple de composant proxy créé de cette manière.

Chargement des styles principaux

  1. Si ce n’est pas encore fait, créez une bibliothèque cliente qui contient tous les fichiers CSS et JS nécessaires à votre site.
  2. Dans la bibliothèque cliente de votre site, ajoutez les dépendances aux composants principaux qui peuvent être nécessaires. Pour ce faire, ajoutez une propriété embed .
    Par exemple, pour inclure les bibliothèques clientes de tous les composants principaux v1, la propriété à ajouter serait :
    embed="[  
    core.wcm.components.image.v1,  
    core.wcm.components.list.v1,  
    core.wcm.components.breadcrumb.v1,  
    core.wcm.components.form.container.v1,  
    core.wcm.components.form.text.v1  
    ]"
    
    
Assurez-vous que vos composants proxy et vos bibliothèques clientes ont été déployés dans votre environnement AEM avant de passer à la section suivante.

Autorisation des composants

Les étapes suivantes sont effectuées dans l’ éditeur de modèles .
  1. Dans l'éditeur de modèles, sélectionnez le conteneur de mises en page et ouvrez sa stratégie.
  2. Dans la liste des composants autorisés, sélectionnez les composants proxy créés précédemment, qui doivent s'afficher sous le groupe de composants qui leur est affecté. Ensuite, appliquez les modifications.
  3. (Facultatif) Les composants qui ont une boîte de dialogue de conception peuvent être préconfigurés.
C’est terminé ! Dans les pages créées à partir du modèle modifié, vous devez maintenant pouvoir utiliser les composants nouvellement créés.
À lire aussi :