Développement d’un composant personnalisé pour AEM Screens developing-a-custom-component-for-aem-screens

AEM 6.5 Plus le dernier Feature Pack Screens.

Lecteur AEM Screens

Environnement de développement local

Dans le gestionnaire de packages CRX, vérifiez que les deux packages suivants sont installés :

1. screens-weretail-run.ui.content-0.0.1-SNAPSHOT.zip
2. screens-weretail-run.ui.apps-0.0.1-SNAPSHOT.zip

Screens We.Retail Exécuter Ui.Apps et Ui.Content packages installés par le biais de CRX Package Manager.

Le package screens-weretail-run.ui.apps installe le code sous /apps/weretail-run.

Ce package contient le code responsable du rendu des composants personnalisés du projet. Ce package comprend le code de composant et tout code JavaScript ou CSS nécessaire. Ce package incorpore également screens-weretail-run.core-0.0.1-SNAPSHOT.jar qui contient tout code Java™ requis par le projet.

Représentation du code ui.apps dans CRXDE Lite

La variable Hello World n’est qu’un espace réservé. Au cours du tutoriel, une fonctionnalité est ajoutée pour permettre à un auteur ou une autrice de mettre à jour le message affiché par le composant.

Le package screens-weretail-run.ui.content installe le code sous :

• /conf/we-retail-run
• /content/dam/we-retail-run
• /content/screens/we-retail-run

Ce package contient le contenu de départ et la structure de configuration nécessaires pour le projet. /conf/we-retail-run contient toutes les configurations pour la variable We.Retail Exécutez le projet. /content/dam/we-retail-run inclut les ressources numériques de départ pour le projet. /content/screens/we-retail-run contient la structure de contenu Screens. Le contenu sous tous ces chemins est principalement mis à jour dans AEM. Pour assurer la cohérence entre les environnements (local, Dev, Stage, Prod), une structure de contenu de base est souvent enregistrée dans le contrôle des sources.

Accédez à AEM Screens > We.Retail Exécutez le projet :

Dans le menu Démarrer d’AEM, sélectionnez l’icône Screens . Vérifiez les We.Retail Exécuter le projet s’affiche.

Dans CRXDE-Lite http://localhost:4502/crx/de/index.jsp (ou l’IDE choisi), accédez à /apps/weretail-run/components/content/helloworld.

Ajoutez les propriétés suivantes au composant helloworld :

    jcr:title="Hello World"
    sling:resourceSuperType="foundation/components/parbase"
    componentGroup="We.Retail Run - Content"

Propriétés de /apps/weretail-run/components/content/helloworld

La variable Hello World étend le composant foundation/components/parbase afin qu’il puisse être correctement utilisé dans un canal de séquence.

Sous /apps/weretail-run/components/content/helloworld, créez un fichier appelé helloworld.html.

Remplissez le fichier avec les éléments suivants :

<!--/*

 /apps/weretail-run/components/content/helloworld/helloworld.html

*/-->

<!--/* production: preview authoring mode + unspecified mode (i.e. on publish) */-->
<sly data-sly-test.production="${wcmmode.preview || wcmmode.disabled}" data-sly-include="production.html" />

<!--/* edit: any other authoring mode, i.e. edit, design, scaffolding, etc. */-->
<sly data-sly-test="${!production}" data-sly-include="edit.html" />

Les composants Screens nécessitent deux rendus différents selon le mode de création utilisé :

1. Production: Mode Aperçu ou Publication (wcmmode=disabled)
2. Modifier  : utilisé pour tous les autres modes de création, c’est-à-dire éditer, concevoir, échafauder, développeur…

helloworld.html fonctionne comme un commutateur, en vérifiant quel mode de création est actif et en redirigeant vers un autre script HTL. Une convention commune utilisée par les composants Screens consiste à utiliser un script edit.html pour le mode d’édition et un script production.html pour le mode de production.

Sous /apps/weretail-run/components/content/helloworld, créez un fichier appelé production.html.

Remplissez le fichier avec les éléments suivants :

<!--/*
 /apps/weretail-run/components/content/helloworld/production.html

*/-->

<div data-duration="${properties.duration}" class="cmp-hello-world">
 <h1 class="cmp-hello-world__message">${properties.message}</h1>
</div>

L’illustration ci-dessus représente les balises de production du composant Hello World. Un attribut data-duration est inclus, car le composant est utilisé sur un canal de séquence. L’attribut data-duration est utilisé par le canal de séquence pour savoir pendant combien de temps un élément de séquence doit être affiché.

Le composant effectue le rendu d’un div et d’une balise h1 avec du texte. ${properties.message} est une partie du script HTL qui génère le contenu d’une propriété JCR nommée message. Une boîte de dialogue est créée ultérieurement pour permettre à l’utilisateur de saisir une valeur pour la variable message texte de la propriété.

Notez également que la notation BEM (Block Element Modifier) est utilisée avec le composant. BEM est une convention de codage CSS qui facilite la création de composants réutilisables. BEM est la notation utilisée par Composants principaux d’AEM.

Sous /apps/weretail-run/components/content/helloworld, créez un fichier appelé edit.html.

Remplissez le fichier avec les éléments suivants :

<!--/*

 /apps/weretail-run/components/content/helloworld/edit.html

*/-->

<!--/* if message populated */-->
<div
 data-sly-test.message="${properties.message}"
 class="aem-Screens-editWrapper cmp-hello-world">
 <p class="cmp-hello-world__message">${message}</p>
</div>

<!--/* empty place holder */-->
<div data-sly-test="${!message}"
     class="aem-Screens-editWrapper cq-placeholder cmp-hello-world"
     data-emptytext="${'Hello World' @ i18n, locale=request.locale}">
</div>

La balise ci-dessus est modifiée pour le composant Hello World. Le premier bloc affiche une version modifiée du composant si le message de boîte de dialogue a été renseigné.

Le second bloc est rendu si aucun message de boîte de dialogue n’a été saisi. Dans ce cas, cq-placeholder et data-emptytext peuvent afficher le libellé Hello World en guise d’espace réservé. La chaîne du libellé peut être internationalisée en utilisant i18n afin de prendre en charge la création pour plusieurs paramètres régionaux.

Boîte de dialogue Copier l’image Screens à utiliser pour le composant Hello World.

Il est plus facile de commencer à partir d’une boîte de dialogue existante, puis d’apporter des modifications.

1. Copiez la boîte de dialogue depuis : /libs/screens/core/components/content/image/cq:dialog
2. Collez la boîte de dialogue sous /apps/weretail-run/components/content/helloworld

Mettre à jour la boîte de dialogue Hello World afin d’inclure un onglet pour le message.

Mettez à jour la boîte de dialogue afin qu’elle corresponde à ce qui suit. La structure de nœud JCR de la boîte de dialogue finale est présentée ci-dessous en XML :

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0" xmlns:cq="https://www.day.com/jcr/cq/1.0" xmlns:jcr="https://www.jcp.org/jcr/1.0" xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Hello World"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs"
        size="L">
        <items jcr:primaryType="nt:unstructured">
            <message
                jcr:primaryType="nt:unstructured"
                jcr:title="Message"
                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">
                            <message
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Message for component to display"
                                fieldLabel="Message"
                                name="./message"/>
                        </items>
                    </column>
                </items>
            </message>
            <sequence
                jcr:primaryType="nt:unstructured"
                jcr:title="Sequence"
                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">
                            <duration
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/numberfield"
                                defaultValue=""
                                fieldDescription="Amount of time the image is shown in the sequence, in milliseconds"
                                fieldLabel="Duration (milliseconds)"
                                min="0"
                                name="./duration"/>
                        </items>
                    </column>
                </items>
            </sequence>
        </items>
    </content>
</jcr:root>

Le champ de texte du message est enregistré dans une propriété nommée message et que le champ numérique de la durée est enregistré dans une propriété nommée duration. Ces deux propriétés sont toutes deux référencées dans /apps/weretail-run/components/content/helloworld/production.html par HTL en tant que ${properties.message} et ${properties.duration}.

Hello World - Boîte de dialogue terminée

Créez un dossier pour les bibliothèques côté client pour le composant Hello World.

Sous /apps/weretail-run/components/content/helloworld, créez un dossier nommé clientlibs.

Sous la clientlibs créer un dossier, créer un noeud nommé shared de type cq:ClientLibraryFolder.

Ajoutez les propriétés suivantes à la bibliothèque cliente partagée :

• allowProxy   Boolean   true

• categories| Chaîne[] | cq.screens.components

Propriétés de /apps/weretail-run/components/content/helloworld/clientlibs/shared

La propriété catégories est une chaîne qui identifie la bibliothèque cliente. La catégorie cq.screens.components est utilisé en mode Edition et Aperçu/Production. Par conséquent, tout fichier CSS/JS défini dans la bibliothèque sharedclientlib est chargé dans tous les modes.

Il est recommandé de ne jamais exposer directement les chemins d’accès à /apps dans un environnement de production. La propriété allowProxy garantit que la bibliothèque cliente CSS et JS est référencée par le biais d’un préfixe of/etc.clientlibs.

Créez un fichier appelé css.txt sous le dossier partagé.

Remplissez le fichier avec les éléments suivants :

#base=css

styles.less

Créez un dossier appelé css sous le dossier shared. Ajoutez un fichier appelé style.less sous le dossier css. La structure des bibliothèques clientes doit maintenant ressembler à celle-ci :

Dans ce tutoriel, au lieu d’écrire des CSS directement, on utilise LESS. LESS est un précompilateur CSS répandu prenant en charge les mixins, fonctions et variables CSS. Les bibliothèques clientes AEM prennent en charge la compilation LESS de manière native. Il est possible d’utiliser Sass ou d’autres pré-compilateurs, mais la compilation doit être réalisée en dehors d’AEM.

Remplissez /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less avec les éléments suivants :

/**
    Shared Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/shared/css/styles.less

**/

.cmp-hello-world {
    background-color: #fff;

 &__message {
  color: #000;
  font-family: Helvetica;
  text-align:center;
 }
}

Copiez et collez le shared dossier de bibliothèque cliente pour créer une bibliothèque cliente nommée production.

Copiez la bibliothèque cliente partagée pour créer une bibliothèque cliente de production.

Mettez à jour le categories de la bibliothèque cliente de production à définir cq.screens.components.production.

Cela permet de s’assurer que les styles sont chargés uniquement en mode Aperçu/Production.

Propriétés pour /apps/weretail-run/components/content/helloworld/clientlibs/production.

Remplissez /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less avec les éléments suivants :

/**
    Production Styles
   /apps/weretail-run/components/content/helloworld/clientlibs/production/css/styles.less

**/
.cmp-hello-world {

    height: 100%;
    width: 100%;
    position: fixed;

 &__message {

  position: relative;
  font-size: 5rem;
  top:25%;
 }
}

Les styles ci-dessus affichent le message centré au milieu de l’écran, mais uniquement en mode Production.

Dans CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs, accédez à /apps/settings/wcm/designs.

Créez un nœud sous le dossier designs, nommé we-retail-run avec un type de cq:Page.

Sous la page we-retail-run, ajoutez un autre nœud nommé jcr:content de type nt:unstructured. Ajoutez les propriétés suivantes au nœud jcr:content :

Page de conception à /apps/settings/wcm/designs/we-retail-run.

Dans le menu AEM, accédez à Screens > We.RetailExécuter > et sélectionnez Canaux.

Sélectionnez la variable Créer button

1. Choisir Créer une entité

Dans l’assistant de création :

Étape du modèle - choisissez Canal de séquence

1. Étape des propriétés

• Onglet de base > Titre = Canal inactif
• Onglet Canal > Cochez Passer le canal en ligne

Ouvrez les propriétés de page pour le canal inactif.

Mettez à jour le champ Conception afin qu’il pointe vers /apps/settings/wcm/designs/we-retail-run, la page de conception créée dans la section précédente.

Configuration de conception pointant vers /apps/settings/wcm/designs/we-retail-run

Modifiez le canal inactif nouvellement créé pour pouvoir l’ouvrir.

Basculez le mode Page vers le mode Conception.

1. Sélectionnez la variable clé Icône dans le système de paragraphes (parsys) afin de pouvoir configurer les composants autorisés.

2. Sélectionnez la variable Screens et la variable We.RetailRun - Content groupe.

Passez la page en mode Modifier. Le composant Hello World peut désormais être ajouté à la page et combiné avec d’autres composants de canal de séquence.

Dans CRXDE Lite http://localhost:4502/crx/de/index.jsp#/apps/settings/wcm/designs/we-retail-run/jcr%3Acontent/sequencechannel/par, accédez à /apps/settings/wcm/designs/we-retail-run/jcr:content/sequencechannel/par. Notez que la components propriété inclut désormais group:Screens, group:We.Retail Run - Content.

Configuration de la conception sous /apps/settings/wcm/designs/we-retail-run