Développement 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.

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.

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.

Remarque

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.

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 -

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.

Sur cette page