Notions de base des composants

Dans ce chapitre, nous allons explorer la technologie sous-jacente d’un composant Sites Adobe Experience Manager (AEM) au moyen d’une HelloWorld par exemple. De petites modifications seront apportées à un composant existant, couvrant les rubriques de création, HTL, modèles Sling, bibliothèques côté client.

Prérequis

Examinez les outils et les instructions requis pour configurer une environnement de développement local.

L’IDE utilisé dans les vidéos est : Visual Studio Code et le Synchronisation des AEM VSCode module externe

Objectif

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

Ce que vous allez créer

Dans ce chapitre, vous allez apporter plusieurs modifications à une HelloWorld composant. Au cours du processus de mise à jour de la variable HelloWorld vous en apprendrez plus sur les principaux domaines du développement des composants d’AEM.

Projet de démarrage de chapitre

Ce chapitre s’appuie sur un projet générique généré par la fonction AEM Archétype de projet. Regardez la vidéo ci-dessous et passez en revue la 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 d’extraction du projet de démarrage.

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

  1. Dans un répertoire vide, clonez la variable aem-guides-wknd référentiel :

    $ 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.

  2. Accédez au aem-guides-wknd dossier.

    $ cd aem-guides-wknd
    
  3. 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 AEM version 6.5 ou 6.4, ajoutez la variable classic profile à n’importe quelle commande Maven.

    $ mvn clean install -PautoInstallSinglePackage -Pclassic
    
  4. Importez le projet dans l’IDE de votre choix en suivant les instructions pour configurer une 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. Ensuite, nous allons créer un composant simple et examiner comment les valeurs de la boîte de dialogue sont conservées dans AEM.

Vous trouverez ci-dessous les étapes de haut niveau effectuées dans la vidéo ci-dessus.

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

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

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

Boîtes de dialogue définissez les configurations disponibles qui peuvent être créées pour un composant.

Nous mettrons ensuite à jour la variable HelloWorld Script HTL pour afficher un message de bienvenue supplémentaire avant le message texte.

Vous trouverez ci-dessous les étapes de haut niveau effectuées dans la vidéo ci-dessus.

  1. Basculez vers l’IDE et ouvrez le projet sur la ui.apps module .

  2. Ouvrez le helloworld.html et apportez une modification au HTML Markup.

  3. Utilisez les outils IDE tels que Synchronisation des AEM VSCode pour synchroniser la modification du fichier avec l’instance d’AEM locale.

  4. Revenez au navigateur et observez que le rendu du composant a changé.

  5. Ouvrez le .content.xml fichier qui définit la boîte de dialogue pour la variable HelloWorld à l’adresse :

    <code>/aem-guides-wknd/ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/_cq_dialog/.content.xml
    
  6. Mettre à 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>
    
  7. Réouverture du fichier helloworld.html, qui représente le script HTL principal responsable du rendu de la variable HelloWorld composant, situé à l’adresse :

        <code>/aem-guides-wknd.ui.apps/src/main/content/jcr_root/apps/wknd/components/helloworld/helloworld.html
    
  8. Mettre à jour helloworld.html pour effectuer le rendu de la valeur de la variable Salutations textfield dans le cadre d’un H1 tag :

    <div class="cmp-helloworld" data-cmp-is="helloworld">
        <h1 class="cmp-helloworld__title">${properties.title}</h1>
        ...
    </div>
    
  9. Déployez les modifications sur une instance locale d’AEM à l’aide du module externe Développeur ou en utilisant vos compétences Maven.

Modèles Sling

Les modèles Sling sont des objets POJO (Plain Old Java Object) Java pilotés par les annotations. Ils facilitent le mappage des données du JCR aux variables Java et fournissent un certain nombre d’autres détails lors du développement dans le contexte d’AEM.

Ensuite, nous allons apporter quelques mises à jour au HelloWorldModel Modèle Sling afin d’appliquer une logique métier aux valeurs stockées dans le JCR avant de les générer sur la page.

  1. Ouvrir le fichier HelloWorldModel.java, qui est le modèle Sling utilisé avec la variable HelloWorld composant.

    <code>/aem-guides-wknd.core/src/main/java/com/adobe/aem/guides/wknd/core/models/HelloWorldModel.java
    
  2. Ajoutez les instructions d’importation suivantes :

    import org.apache.commons.lang3.StringUtils;
    import org.apache.sling.models.annotations.DefaultInjectionStrategy;
    
  3. Mettez à jour le @Model annotation pour utiliser une DefaultInjectionStrategy:

    @Model(adaptables = Resource.class,
       defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
       public class HelloWorldModel {
       ...
    
  4. Ajoutez les lignes suivantes au HelloWorldModel pour mapper les valeurs des propriétés JCR du composant. title et text 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() {
            ...
    
  5. Ajoutez la méthode suivante : getTitle() au 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 "Default Value here" (Valeur par défaut ici). si la propriété title est nul 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!";
    }
    
  6. Ajoutez la méthode suivante : getText() au 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;
    }
    
  7. Créez et déployez le lot à partir de la core module :

    $ cd core
    $ mvn clean install -PautoInstallBundle
    
    REMARQUE

    Si vous utilisez AEM 6.4/6.5, utilisez mvn clean install -PautoInstallBundle -Pclassic

  8. Mettre à jour le fichier helloworld.html at 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 de la variable HelloWorld model :

    <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 class="cmp-helloworld__item"  data-sly-test="${model.message}">
            <p class="cmp-helloworld__item-label">Model message:</p>
            <pre class="cmp-helloworld__item-output"data-cmp-hook-helloworld="model">${model.message}</pre>
        </div>
    </div>
    
  9. Déployez les modifications sur une instance locale d’AEM à l’aide du module externe de développement Eclipse ou en utilisant vos compétences Maven.

Bibliothèques côté client

Les bibliothèques côté client (clientlibs, pour résumer) offrent un mécanisme d’organisation et de gestion des fichiers CSS et JavaScript nécessaires à une mise en oeuvre d’AEM Sites. Les bibliothèques côté client sont la méthode standard pour inclure du code CSS et JavaScript sur une page dans AEM.

Le ui.frontend est un module découplé. webpack 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 ui.frontend sera exploré plus en détail dans la section Chapitre Bibliothèques côté client.

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

Vous trouverez ci-dessous les étapes de haut niveau effectuées dans la vidéo ci-dessus.

  1. Ouvrez une fenêtre de terminal et accédez au ui.frontend et

  2. Dans le ui.frontend Exécution du répertoire npm run watch command :

    $ npm run watch
    
  3. Basculez vers l’IDE et ouvrez le projet sur la ui.frontend module .

  4. Ouvrez le fichier ui.frontend/src/main/webpack/components/_helloworld.scss.

  5. Mettez à jour le fichier pour afficher un titre rouge :

    .cmp-helloworld {}
    .cmp-helloworld__title {
        color: red;
    }
    
  6. Dans le terminal, l’activité indiquant que la variable ui.frontend module 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
    
  7. Revenez au navigateur et notez que la couleur du titre a changé.

    Mise à jour des bases des composants

Félicitations !

Félicitations, vous venez d’apprendre les bases du développement de composants dans Adobe Experience Manager !

Étapes suivantes

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

Afficher le code terminé sur GitHub ou revoir et déployer le code localement sur la branche Git tutorial/component-basics-solution.

Sur cette page