Show Menu
SUJETS×

Développement des composants principaux

Présentation

Les composants principaux fournissent des composants de base robustes et extensibles dont les points forts sont les suivants :
Les composants principaux requièrent AEM 6.3 ou une version ultérieure ainsi que Java 8. Ils requièrent aussi l’utilisation de modèles modifiables .
Les composants principaux ne fonctionnent pas avec l’interface utilisateur classique ni avec les modèles statiques.

Présentation de la session Gems

Pour une présentation des composants principaux, des fonctionnalités qu’ils proposent et de leur utilisation dans AEM, consultez la session AEM Gems sur les composants principaux AEM.
Gems sur Adobe Experience Manager est une série de séances approfondies sur des aspects techniques réalisées par des experts Adobe. Cette série complète la documentation du produit et de tous les autres canaux techniques, ce qui permet aux développeurs de communiquer entre eux et d’approfondir un sujet spécifique.

Tutoriel du développeur WKND

Commencez à développer AEM Sites avec des composants principaux en suivant ce tutoriel détaillé.

Archétype de projet AEM

L’archétype de projet AEM crée un projet Adobe Experience Manager minimal comme point de départ pour vos propres projets, y compris un exemple helloworld de composant HTML personnalisé avec SlingModels pour la logique et l’implémentation appropriée des composants principaux avec le modèle de proxy recommandé.

Distribués sur github

Les composants principaux sont développés et distribués via GitHub.
CODE SUR GITHUB
Vous pouvez trouver le code de cette page sur GitHub.
Reportez-vous à la documentation sur l’ utilisation des composants principaux pour savoir comment commencer à les utiliser dans votre projet.
Le fait que les composants principaux se trouvent sur GitHub permet d’effectuer des mises à jour fréquentes et de tenir compte des commentaires de la communauté des développeurs AEM. En outre, cela permet aux clients et aux partenaires de suivre des modèles similaires lors de la création de composants personnalisés.
Pour connaître les dernières modifications apportées aux composants principaux, vous pouvez consulter le référentiel des composants principaux sur GitHub.

Bibliothèque de composants

Consultez la bibliothèque des composants , qui présente la version actuelle des composants principaux et fournit des exemples d’utilisation.

Exemple de contenu en mode d’exécution

Les composants principaux sont visibles dans le Quickstart lorsque l’exemple de contenu est présent, car le site de référence We.Retail les utilise. Toutefois, lors de l’exécution en production (en mode d’exécution
nosamplecontent
, sans exemple de contenu activé), les composants principaux ne sont plus présents et doivent être installés sur les instances AEM par l’équipe de développement et/ou d’exploitation.
Dans les environnements de production, exécutez toujours le Quickstart en mode d’exécution
nosamplecontent
. Pour utiliser les composants principaux en mode d’exécution
nosamplecontent
, suivez les instructions de la page de documentation sur l’ utilisation 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
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
Interface utilisateur Coral 2 + Classique
Sortie JSON
# (https://sling.apache.org/documentation/bundles/application d’une seule pages.html#exporter-framework-since-130)
Servlet Sling par défaut
Création de versions
Aucun
Tests
Tests unitaires + tests d’intégration
Tests d’intégration
Diffusion
Via Quickstart
Licence
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 réactive fonctionnant avec l’éditeur de modèles
/libs/foundation/components/page /libs/wcm/foundation/components/page
Navigation dans la hiérarchie des pages
/libs/foundation/components/breadcrumb
Titre H1-H6
/libs/foundation/components/title /libs/wcm/foundation/components/title
Texte enrichi
/libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
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 des pages
/libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
Widget de partage Facebook et Pinterest
-
Système de paragraphe de formulaire réactif
/libs/foundation/components/form/start /libs/foundation/components/form/end
Champ de saisie de texte
/libs/foundation/components/form/text /libs/foundation/components/form/password
Champ de saisie d’options multiples
/libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Champ de saisie masqué
/libs/foundation/components/form/hidden
Bouton Envoyer ou personnalisé
/libs/foundation/components/form/submit
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
Sélecteur de langue et de pays qui répertorie la structure de langue globale
-
Composant de recherche qui affiche les résultats sous forme de suggestions sur place dans un menu déroulant
/libs/foundation/components/search
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
-
Permet à l’auteur de contenu d’organiser le contenu de la page dans plusieurs onglets
-
Permet à l’auteur de contenu d’organiser le contenu dans un carrousel de diapositives
/libs/foundation/components/carousel
Permet l’affichage d’un fragment de contenu
-
Permet l’affichage d’une liste de fragments de contenu
-
Sépare le contenu d’une page
-
Organise les panneaux de contenu dans un accordéon réductible
-
Organise les composants dans un conteneur
-
Crée un bouton sur une page
-
Ajoute une ressource téléchargeable à une page
-
Ajout d’un fragment d’expérience à une page
/libs/cq/experience-fragments/editor/components/experiencefragment
Incorporation d’une ressource externe dans une page
-

Composants à venir

Pour obtenir un aperçu de la feuille de route des composants principaux à venir, voir le wiki du projet sur GitHub .

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 .

Quand utiliser les composants principaux ?

Les composants principaux étant nouveaux et offrant plusieurs avantages, il est recommandé que les nouveaux projets AEM les utilisent. Pour les projets existants, une migration doit être envisagée dans le cadre d’un travail plus important, par exemple une création de nouvelle image ou une restructuration globale.
Par conséquent, Adobe donne les recommandations suivantes :
  • Nouveaux projets
    Les nouveaux projets doivent toujours tenter d’utiliser les composants principaux. Si les composants principaux ne peuvent pas être utilisés directement ou étendus pour répondre aux exigences du projet, créez un composant personnalisé d’après l’architecture du composant définie dans les composants principaux. Sauf si cela est impossible, évitez d’utiliser les composants de base .
  • Projets existants
    Il est recommandé de continuer à utiliser les composants de base , à moins qu’une restructuration de sites ou de composants ne soit planifiée. Comme la plupart des projets existants les utilisent largement, les composants de base continueront à être pris en charge .
  • Nouveaux composants personnalisés
    Vous pouvez évaluer si un composant principal existant peut être personnalisé . Dans le cas contraire, vous devez créer un nouveau composant personnalisé suivant les instructions des composants .
  • Composants personnalisés existants
    Si vos composants fonctionnent comme prévu, conservez-les tels quels. Dans le cas contraire, reportez-vous à la section « Nouveaux composants personnalisés » ci-dessus.

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.
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 stratégies
  • 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 .
Les outils de modernisation AEM ont été créés par la communauté et ne sont pas pris en charge ni garantis par Adobe.

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 .

Prise en charge des composants de base

Dans la mesure où les composants de base ont servi de fondation à une multitude de développement de projets sur de nombreuses versions d’AEM, ils seront toujours pris en charge dans un futur prévisible.
Toutefois, Adobe met désormais l’accent sur les composants principaux et de nouvelles fonctionnalités leur seront ajoutées, alors que la plupart des composants de base ont été abandonnés avec AEM 6.5 et seuls les correctifs leur seront dorénavant appliqués.
À lire aussi :