Documentation AEM Guide des composants principaux

Développement des composants principaux

Dernière mise à jour : 27 juin 2025

Rubriques :
Composants de base

Créé pour :

Développeur
Administration

Les composants principaux fournissent des composants de base robustes et extensibles qui offrent de riches fonctionnalités, une diffusion en continu, un contrôle de version des composants, une mise en œuvre moderne, un balisage Lean et une exportation JSON de contenu.

CONSEIL

Avez-vous envisagé Edge Delivery Services pour AEM ?

Vous pouvez continuer à utiliser les méthodes décrites dans ce document pour les projets existants. Toutefois, pour les nouveaux projets, Adobe recommande d’utiliser Edge Delivery Services.

Réussir avec les composants principaux

Les composants principaux sont puissants, flexibles et faciles à utiliser et personnaliser. Suivez quelques instructions pour vous assurer que votre projet utilisant les composants principaux soit une réussite.

Migration vers les composants principaux

Tout nouveau projet doit être implémenté avec les composants principaux. Toutefois, les projets existants disposent généralement de mises en œuvre étendues des composants de base.

Migration à partir des composants de base

Un travail plus important sur un projet existant (par exemple une création de nouvelle image ou une restructuration globale) offre souvent une chance d’effectuer une migration vers les composants principaux. Pour faciliter cette migration, Adobe fournit un certain nombre d’outils de migration pour inciter l’adoption des composants principaux et de la dernière technologie AEM.

Les outils de modernisation AEM permettent de convertir facilement :

Les modèles statiques en modèles modifiables
Les configurations de la conception en politiques
Les composants de base en composants principaux
L’interface utilisateur classique en interface utilisateur tactile

Pour plus d’informations sur l’utilisation de ces outils, voir leur documentation.

REMARQUE

Les outils de modernisation AEM ont été créés par la communauté et ne sont pas pris en charge ni garantis par Adobe.

Migration par déplacement vers AEM as a Cloud Service

AEM as a Cloud Service incluant automatiquement la dernière version des composants principaux, lorsque vous effectuez une transition à partir d’une installation On-Premise d’AEM, vous devez supprimer toute dépendance aux composants principaux dans votre fichier de projet pom.xml.

Les composants de proxy fonctionnent toujours comme avant, car les proxys pointent vers le supertype nécessaire et le chemin d’accès du supertype contient la version. Ainsi, la simple suppression de la dépendance permet aux composants principaux de fonctionner dans AEM as a Cloud Service comme ils le faisaient dans la version On-Premise.

Comme pour tout autre projet AEM as a Cloud Service, vous devrez ajouter une dépendance au fichier jar du SDK AEM. Cette étape est nécessaire même si elle n’est pas spécifique aux composants principaux.

<dependency>
   <groupId>com.adobe.aem</groupId>
   <artifactId>aem-sdk-api</artifactId>
</dependency>

Pour plus d’informations sur les projets AEM as a Cloud Service, consultez le document Structure de projet AEM.

Prise en charge des composants principaux

Les composants principaux font partie intégrante d’AEM et sont pris en charge en l’état, selon les mêmes conditions que s’ils étaient fournis dans le cadre du Quickstart.

Comme pour les autres fonctionnalités du produit AEM, la règle générale est la suivante : les composants sont d’abord annoncés comme étant obsolètes, puis supprimés au plus tôt pour la version AEM suivante. Cela permet aux clients d’avoir au moins un cycle de publication pour passer à la nouvelle version du composant avant l’abandon de sa prise en charge.

La version de chaque composant indique clairement les versions d’AEM prises en charge. Lorsque la prise en charge d’une version d’AEM est interrompue, la prise en charge des composants principaux de cette version d’AEM est prise en charge.

Pour plus d’informations sur la prise en charge des personnalisations des composants, voir la page Personnalisation des composants principaux.

Fonctionnalités techniques

Le tableau ci-après présente les différences entre les composants principaux et les composants de base.

Pour plus d’informations sur leurs capacités de création et les options pour les préconfigurer, reportez-vous à la page de création qui leur a été consacrée.

Fonction

Composant principal

Composant de base

Logique d’implémentation

POJO Java avec les annotations de modèles Sling.

Code JSP

Définition de balisage

Syntaxe du modèle de langage HTML (HTL)

Code JSP

Assainissement XSS

Automatisée par HTL

Essentiellement manuelle

Nommage des classes CSS

Convention d’affectation de noms normalisée basée sur la notification Block Element Modifier (BEM) (à partir de la version 2.0.0)

Modèles personnalisés

Définition de boîte de dialogue

Coral 3

Interface utilisateur Coral 2 + Classique

Sortie JSON

Exportateur de modèles Sling avec sérialisation Jackson

Servlet Sling par défaut

Contrôle de version

Pour le modèle et le HTL

Aucun

Tests

Tests unitaires + tests d’intégration

Tests d’intégration

Diffusion

Via le site GitHub public

Via Quickstart

Licence

Licence Apache

Adobe propriétaire

Contribution

Via une demande d’extraction

Impossible

Accessibilité

Totalement conforme à la norme WCAG 2.0 AA

Partiellement conforme à la norme WCAG 2.0 AA

Liste des composants

Le tableau ci-après répertorie les composants principaux disponibles, les liens vers leur API, et indique quels composants de base ils remplacent.

Composant principal

Description

Composants de base remplacés

Page

Page réactive fonctionnant avec l’éditeur de modèles

/libs/foundation/components/page /libs/wcm/foundation/components/page

Chemin de navigation

Navigation dans la hiérarchie des pages

/libs/foundation/components/breadcrumb

Titre

Titre H1-H6

/libs/foundation/components/title /libs/wcm/foundation/components/title

Texte

Texte enrichi

/libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text

Image

Chargement intelligent et différé de la taille optimale du rendu

/libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image

Liste

Liste des pages

/libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list

Partage sur les réseaux sociaux

Widget de partage Facebook et Pinterest

-

Conteneur de formulaires

Système de paragraphe de formulaire réactif

/libs/foundation/components/form/start /libs/foundation/components/form/end

Texte du formulaire

Champ de saisie de texte

/libs/foundation/components/form/text /libs/foundation/components/form/password

Options du formulaire

Champ de saisie d’options multiples

/libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown

Formulaire masqué

Champ de saisie masqué

/libs/foundation/components/form/hidden

Bouton de formulaire

Bouton Envoyer ou personnalisé

/libs/foundation/components/form/submit

Navigation

Composant de navigation sur le site qui répertorie la hiérarchie de la page imbriquée

/libs/foundation/components/topnav /libs/foundation/components/mobiletopnav

Navigation par langue

Sélecteur de langue et de pays qui répertorie la structure de langue globale

-

Recherche rapide

Composant de recherche qui affiche les résultats sous forme de suggestions sur place dans un menu déroulant

/libs/foundation/components/search

Teaser

Permet à l’auteur de contenu de créer facilement un teaser vers un contenu supplémentaire à l’aide d’une image, d’un titre ou d’un texte enrichi et de lier un contenu supplémentaire ou d’effectuer d’autres actions

-

Onglets

Permet à l’auteur de contenu d’organiser le contenu de la page dans plusieurs onglets

-

Carrousel

Permet à l’auteur de contenu d’organiser le contenu dans un carrousel de diapositives

/libs/foundation/components/carousel

Fragment de contenu

Permet l’affichage d’un fragment de contenu

-

Liste de fragments de contenu

Permet l’affichage d’une liste de fragments de contenu

-

Séparateur

Sépare le contenu d’une page

-

Accordéon

Organise les panneaux de contenu dans un accordéon réductible

-

Conteneur

Organise les composants dans un conteneur

-

Bouton

Crée un bouton sur une page

-

Téléchargement

Ajoute une ressource téléchargeable à une page

-

Fragment d’expérience

Ajout d’un fragment d’expérience à une page

/libs/cq/experience-fragments/editor/components/experiencefragment

Incorporer

Incorporation d’une ressource externe dans une page

-

Barre de progression

Fournit une représentation visuelle de la progression par rapport à un objectif

-

Visionneuse PDF

Présente un document PDF sur une page

-

Mise à niveau des composants principaux

L’un des avantages des composants versionnés est qu’ils permettent de séparer la migration vers une nouvelle version d’AEM de la migration vers les nouvelles versions des composants. En outre, si de nouvelles versions de composants sont disponibles, ils permettent la migration individuelle de chaque composant vers la nouvelle version.

Les migrations vers une nouvelle version d’AEM n’auront aucune incidence sur le fonctionnement des composants principaux, à condition que leurs versions prennent également en charge la nouvelle version d’AEM vers laquelle est effectuée la migration. Les personnalisations apportées aux composants principaux ne doivent pas être affectées tant qu’elles n’utilisent pas d’API obsolètes ou supprimées.

Les migrations vers de nouvelles versions des composants principaux n’auront aucune incidence sur le fonctionnement du composant. De plus, de nouvelles fonctionnalités peuvent être ajoutées pour les auteurs de pages, ce qui peut nécessiter une configuration par un éditeur de modèles, au cas où le comportement par défaut ne serait pas souhaité. Il est toutefois possible que des personnalisations doivent être adaptées. Pour plus d’informations, voir la page Personnalisation des composants principaux.

recommendation-more-help