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). Therefore, your first step is to download the latest released content package from GitHub and to install it on your AEM environments.
There are several ways to automate this, but the simplest way to quickly install a content package on an instance is by using the Package Manager; see Install Packages . Also, once you'll have a publish instance running as well, you'll need to replicate that package to the publisher; see Replicating Packages .

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. indiquer 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"
For instance, look at the title component of the We.Retail reference site , which is a good example of a proxy component that is built that way.

Chargement des styles principaux

  1. If not done yet, create a Client Library that contains all of the CSS and JS files that are needed for your 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 client ont été déployés dans votre environnement AEM avant de passer à la section suivante.

Autorisation des composants

The following steps are performed in the Template Editor .
  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 :