Notions de base des composants

Dernière mise à jour : 2023-10-17

Rubriques :
Core Components
Afficher plus sur ce sujet
Developer Tools
Afficher plus sur ce sujet

Créé pour :
Beginner

Developer

Dans ce chapitre, explorons la technologie sous-jacente d’un composant d’Adobe Experience Manager (AEM) Sites à l’aide d’un simple exemple HelloWorld. De petites modifications sont apportées à un composant existant, couvrant les rubriques sur la création, HTL, les modèles Sling et les bibliothèques côté client.

Prérequis

Examinez les outils et les instructions nécessaires pour configurer un environnement de développement local.

L’IDE utilisé dans les vidéos est Visual Studio Code et le module VSCode AEM Sync.

Objectif

Découvrez le rôle des modèles HTL et des modèles Sling pour effectuer dynamiquement le rendu du HTML.
Découvrez comment les boîtes de dialogue sont utilisées pour faciliter la création de contenu.
Découvrez les principes de base des bibliothèques côté client pour inclure CSS et JavaScript pour prendre en charge un composant.

Ce que vous allez créer

Dans ce chapitre, vous apportez plusieurs modifications à un simple composant HelloWorld. Lorsque vous apporterez des modification au composant HelloWorld, vous découvrirez les principaux domaines du développement de composant d’AEM.

Chapitre sur le projet de démarrage

Ce chapitre s’appuie sur un projet générique généré par l’archétype de projet d’AEM. Regardez la vidéo ci-dessous et examinez les conditions préalables pour commencer.

REMARQUE

Si vous avez terminé avec succès le chapitre précédent, vous pouvez réutiliser le projet et ignorer les étapes de consultation du projet de démarrage.

Ouvrez un nouveau terminal de ligne de commande et effectuez les actions suivantes.

Dans un répertoire vide, clonez le référentiel aem-guides-wknd :
```
$ git clone git@github.com:adobe/aem-guides-wknd.git --branch tutorial/component-basics-start --single-branch
```
REMARQUE

Vous pouvez éventuellement continuer à utiliser le projet généré dans le chapitre précédent, Configuration du projet.
Accédez au dossier aem-guides-wknd.
```
$ cd aem-guides-wknd
```
Créez et déployez le projet sur une instance locale d’AEM avec la commande suivante :
```
$ mvn clean install -PautoInstallSinglePackage
```
REMARQUE

Si vous utilisez la version 6.5 ou 6.4 d’AEM, ajoutez le profil classic à n’importe quelle commande Maven.
```
$ mvn clean install -PautoInstallSinglePackage -Pclassic
```
Importez le projet dans l’IDE de votre choix en suivant les instructions pour configurer un environnement de développement local.

Création de composants

Les composants peuvent être considérés comme de petits blocs de création modulaires d’une page web. Pour réutiliser les composants, ceux-ci doivent pouvoir être configurés. Pour ce faire, utilisez la boîte de dialogue de création. Créons ensuite un composant simple et examinons comment les valeurs de la boîte de dialogue sont conservées dans AEM.

Vous trouverez ci-dessous les étapes générales effectuées dans la vidéo ci-dessus.

Créez une page nommée Principes de base des composants sous WKND Site > US > en.
Ajoutez le composant Hello World sur la page nouvellement créée.
Ouvrez la boîte de dialogue du composant et saisissez du texte. Enregistrez les modifications pour voir le message affiché sur la page.
Passez en mode de développement, affichez le chemin d’accès du contenu dans CRXDE-Lite et examinez les propriétés de l’instance du composant.
Utilisez CRXDE-Lite pour afficher les scripts cq:dialog et helloworld.html depuis /apps/wknd/components/content/helloworld.

HTL (langage de modèle HTML) et boîtes de dialogue

Le langage du modèle HTML ou HTL est un langage de modèle léger côté serveur utilisé par les composants d’AEM pour effectuer le rendu du contenu.

Les boîtes de dialogue définissent les configurations disponibles qui peuvent être effectuées pour un composant.

Nous allons maintenant mettre à jour le script HTL HelloWorld pour afficher un message de salutations supplémentaire avant le message texte.

Vous trouverez ci-dessous les étapes générales effectuées dans la vidéo ci-dessus.

Basculez vers l’IDE et ouvrez le projet sur le module ui.apps.
Ouvrez le fichier helloworld.html et mettez à jour le balisage HTML.
Utilisez les outils de l’IDE tels que VSCode AEM Sync pour synchroniser la modification du fichier avec l’instance AEM locale.
Revenez sur le navigateur et observez que le rendu du composant a changé.

Ouvrez le fichier .content.xml qui définit la boîte de dialogue du composant HelloWorld à :

<code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml

Mettez à jour la boîte de dialogue pour ajouter un champ de texte supplémentaire nommé Titre avec le nom ./title :

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <title
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Title"
                        name="./title"/>
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="./text"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

Rouvrez le fichier helloworld.html, qui représente le script HTL principal responsable du rendu du composant HelloWorld depuis le chemin d’accès ci-dessous :
```
    <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
```

Mettez à jour helloworld.html pour effectuer le rendu de la valeur du champ de texte Salutations dans le cadre d’une balise H1 :

<div class="cmp-helloworld" data-cmp-is="helloworld">
    <h1 class="cmp-helloworld__title">${properties.title}</h1>
    ...
</div>

Déployez les modifications sur une instance locale d’AEM à l’aide du module de développement ou de vos compétences Maven.

Modèles Sling

Les modèles Sling sont des objets POJO (Plain Old Java™ Object) Java™ pilotés par des annotations qui facilitent le mappage des données du JCR avec les variables Java™. Ils apportent aussi plusieurs autres subtilités lorsqu’ils sont développés dans le contexte d’AEM.

Ensuite, effectuons des mises à jour sur le modèle Sling HelloWorldModel pour appliquer une logique commerciale aux valeurs stockées dans le JCR avant de les générer sur la page.

Ouvrez le fichier HelloWorldModel.java, qui est le modèle Sling utilisé avec le composant HelloWorld.

<code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java

Ajoutez les instructions d’importation suivantes :

import org.apache.commons.lang3.StringUtils;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;

Mettez à jour l’annotation @Model pour utiliser DefaultInjectionStrategy :

@Model(adaptables = Resource.class,
   defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
   public class HelloWorldModel {
   ...

Ajoutez les lignes suivantes à la classe HelloWorldModel pour mapper les valeurs des propriétés JCR title et text du composant aux variables Java™ :

...
@Model(adaptables = Resource.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class HelloWorldModel {

    ...

    @ValueMapValue
    private String title;

    @ValueMapValue
    private String text;

    @PostConstruct
    protected void init() {
        ...

Ajoutez la méthode suivante getTitle() à la classe HelloWorldModel qui renvoie la valeur de la propriété nommée title. Cette méthode ajoute une logique supplémentaire pour renvoyer une valeur de chaîne de « Default Value here! » (Valeur par défaut ici) si la propriété title est null ou vide :
```
/***
*
* @return the value of title, if null or blank returns "Default Value here!"
*/
public String getTitle() {
    return StringUtils.isNotBlank(title) ? title : "Default Value here!";
}
```

Ajoutez la méthode suivante getText() à la classe HelloWorldModel qui renvoie la valeur de la propriété nommée text. Cette méthode transforme la chaîne en caractères majuscules.

    /***
    *
    * @return All caps variation of the text value
    */
public String getText() {
    return StringUtils.isNotBlank(this.text) ? this.text.toUpperCase() : null;
}

Créez et déployez le lot à partir du module core :
```
$ cd core
$ mvn clean install -PautoInstallBundle
```
REMARQUE

Pour les versions 6.4 et 6.5 d’AEM, utilisez mvn clean install -PautoInstallBundle -Pclassic.
Mettez à jour le fichier helloworld.html sur aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/content/helloworld/helloworld.html pour utiliser les méthodes nouvellement créées du modèle HelloWorld.

Le modèle HelloWorld est appelé pour cette instance de composant via la directive HTL : data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel", enregistrant l’instance dans la variable model.

L’instance de modèle HelloWorld est désormais disponible dans le fichier HTL via la variable model à l’aide de HelloWord. Ces appels de méthodes peuvent utiliser une syntaxe de méthode abrégée. Par exemple, ${model.getTitle()} peut être raccourci en ${model.title}.

De même, tous les scripts HTL sont injectés avec les objets globaux accessibles en utilisant la même syntaxe que les objets de modèle Sling.
```
<div class="cmp-helloworld" data-cmp-is="helloworld"
    data-sly-use.model="com.adobe.aem.guides.wknd.core.models.HelloWorldModel">
    <h1 class="cmp-helloworld__title">${model.title}</h1>
    <div class="cmp-helloworld__item" data-sly-test="${properties.text}">
        <p class="cmp-helloworld__item-label">Text property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${properties.text}</pre>
    </div>
    <div class="cmp-helloworld__item" data-sly-test="${model.text}">
        <p class="cmp-helloworld__item-label">Sling Model getText() property:</p>
        <pre class="cmp-helloworld__item-output" data-cmp-hook-helloworld="property">${model.text}</pre>
    </div>
</div>
```
Déployez les modifications sur une instance locale d’AEM à l’aide du module de développement Eclipse ou de vos compétences Maven.

Bibliothèques côté client

Les bibliothèques côté client, ou clientlibs, offrent un mécanisme d’organisation et de gestion des fichiers CSS et JavaScript nécessaire à une implémentation d’AEM Sites. Les bibliothèques côté client sont la méthode standard pour inclure CSS et JavaScript sur une page dans AEM.

Le module ui.frontend est un projet webpack découplé qui est intégré au processus de génération. Cela permet l’utilisation de bibliothèques front-end populaires telles que Sass, LESS et TypeScript. Le module ui.frontend est étudié plus en détail dans le chapitre sur les bibliothèques côté client.

Ensuite, mettez à jour les styles CSS pour le composant HelloWorld.

Vous trouverez ci-dessous les étapes générales effectuées dans la vidéo ci-dessus.

Ouvrez une fenêtre de terminal et accédez au répertoire ui.frontend.
Maintenant que vous vous trouvez dans le répertoire ui.frontend, exécutez la commande npm install npm-run-all --save-dev pour installer le module de nœud npm-run-all. Cette étape est requise sur le projet d’AEM généré par l’archétype 39. Elle n’est pas obligatoire dans la version à venir de l’archétype.
Exécutez ensuite la commande npm run watch :
```
$ npm run watch
```
Basculez vers l’IDE et ouvrez le projet sur le module ui.frontend.
Ouvrez le fichier ui.frontend/src/main/webpack/components/_helloworld.scss.

Mettez à jour le fichier pour afficher un titre rouge :

.cmp-helloworld {}
.cmp-helloworld__title {
    color: red;
}

Dans le terminal, vous devriez voir l’Activityqui indique que le module ui.frontend compile et synchronise les modifications avec l’instance locale d’AEM.

Entrypoint site 214 KiB = clientlib-site/site.css 8.45 KiB clientlib-site/site.js 206 KiB
2022-02-22 17:28:51: webpack 5.69.1 compiled successfully in 119 ms
change:dist/index.html
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies

Revenez sur le navigateur et notez que la couleur du titre a changé.

Félicitations.

Félicitations, vous avez appris les bases du développement de composants dans Adobe Experience Manager.

Étapes suivantes

Familiarisez-vous avec les pages et les modèles d’Adobe Experience Manager dans le chapitre suivant, Pages et modèles. Comprenez comment les composants principaux sont traités par proxy dans le projet et découvrez les configurations de stratégie avancées des modèles modifiables pour créer un modèle de page d’article bien structuré.

Affichez le code terminé sur GitHub ou vérifiez et déployez le code localement sur la branche Git tutorial/component-basics-solution.

Page précédente

Notions de base des composants

Prérequis

Objectif

Ce que vous allez créer

Chapitre sur le projet de démarrage

Création de composants

HTL (langage de modèle HTML) et boîtes de dialogue

Modèles Sling

Bibliothèques côté client

Félicitations.

Étapes suivantes

Sur cette page

Voir suivant :

Formation

Documentation

Communauté

Assistance

Ressources

Compte Adobe

Adobe