Tutoriel de développement : création d’une navigation partagée avec l’aide d’AEM Content Services

AEM moderne peut diffuser du contenu sans tête sur plusieurs canaux, qu’il s’agisse d’applications React ou Vue, d’applications mobiles natives ou d’une autre plate-forme non AEM. Ceci est accompli grâce au module intégré d’AEM services de contenu. Voici des fragments de contenu importants qui fournissent les éléments de base pour exposer le contenu de manière sans tête. Ceux-ci fonctionnent en tandem avec l’API GraphQL, permettant aux canaux externes d’accéder au contenu.

Une architecture hybride est une architecture dans laquelle votre projet AEM diffuse du contenu via des composants HTL rendus (headful) et diffuse du contenu au format JSON, à l’aide des fonctionnalités sans tête d’AEM.

Lors de l’établissement ou de l’amélioration d’une marque, la cohérence est importante ! Cet article plonge dans les détails d’un cas d’utilisation hybride dans lequel la navigation sur le site principal d’une marque est utilisée sur le site principal AEM et une application React. Ainsi, rationalisation de l’utilisation du logo de la marque et partage d’un ensemble commun d’éléments de navigation. Les clients du site principal et de l’application React voient une apparence familière, avec des éléments de navigation communs placés à côté de ceux spécifiques au canal.

Il y a beaucoup de code et de matériel de configuration AEM à couvrir, ceci est donc divisé en plusieurs parties. Dans la première partie, nous discuterons de la configuration du composant HTL, des services de support et du modèle de fragment de contenu. La deuxième partie nous fera sortir d’AEM pour créer l’application React qui consomme le JSON de navigation. Sans plus attendre, allons-y !

Projet AEM et instance locale

J’ai généré mon projet en utilisant l’archétype AEM pour Maven. J’ai utilisé les options par défaut. Notez que nous ne déploierons aucun code React sur AEM (sans utiliser ui.frontend). Pour simuler une application React véritablement découplée, nous l’exécuterons localement en tant qu’application autonome.

Vous devez disposer d’au moins un auteur AEM local pour vous suivre. Pour le code AEM, nous le déploierons uniquement vers un auteur local.

Code AEM

Construire le composant

HTL

Le composant HTL est simple, juste une déclaration de variable d’utilisation intelligente des données pour le modèle, une section pour le logo, le bouton de recherche et de navigation mobile, un bouton d’accueil créé de manière statique et une liste générée de boutons de navigation. Cela utilise Sling pour créer la liste de liens à partir de la structure du site au lieu de créer manuellement chaque lien de bouton.

Deux éléments clés à noter ci-dessous.

La déclaration de variable modèle :

data-sly-use.navigation="com.perficient.pocs.core.models.Navigation"

L’appel data-sly-list utilisant le modèle getNavLinks méthode:

                <sly data-sly-list.link="${navigation.navLinks}"> 

<li class="site-menu-item"><a class="link" href="https://blogs.perficient.com/2024/05/13/dev-tutorial-building-a-shared-navigation-with-help-from-aem-content-services-part-1/${link.path}.html">${link.title}</a></li> 

                </sly>

Dialogue

Le dialogue se compose de quatre champs :

1. Un sélecteur d’actifs (configuré avec rootPath de /content/dam) pour le logo de la marque
2. Sélecteur de page d’accueil (configuré avec rootPath de /content) pour sélectionner la page d’accueil
3. Champ de texte du lien de la page d’accueil pour définir un titre de lien de page d’accueil convivial
4. Sélecteur de chemin de page de démarrage (configuré avec rootPath de /content) pour définir le point de départ dans la structure du site à partir duquel générer les liens.

Il y a aussi un extraClientlibs propriété avec une valeur de chaîne multi (tableau) de nav.authoring, défini sur le nœud cq:dialog. L’inclusion de cette catégorie de bibliothèque client est nécessaire pour inclure et exécuter JavaScript dans une bibliothèque client de création uniquement et uniquement pour les instances de ce composant.

Création de Clientlib

La bibliothèque client de création se compose d’un seul script, navJsonUpdater.js.

Ce script attache un écouteur au document.

$(document).on("click", ".cq-dialog-submit", function (e) {

Lorsque l’événement click est déclenché, un appel est effectué pour récupérer le composant propriétés d’instance au format JSON. Les propriétés du chemin du logo créé et du chemin de début de navigation sont extraites :

var componentPath = $(this).closest(".cq-dialog").attr("action"); 

             type: 'GET', 

            url: componentPath + ".json", 

            success: function(data) { 

      // Extract the logo and startPath property values from the JSON response 

                var brandLogo = data["brandLogo"]; 

                var startPath = data["startPath"];

Ensuite, un appel POST est effectué vers un navigationJsonUpdateServlet (plus de détails à ce sujet ci-dessous), avec le logo et le chemin de démarrage comme paramètres de requête.

type: 'POST', 

url: '/bin/navigationJsonUpdateServlet', 

data: { 

    // Add the logo and startPath properties to the data object. 

    brandLogo: brandLogo, 

    startPath: startPath 

},

La servlet invoque le Services de navigation getNavigationAsJson méthode pour conserver les éléments de navigation dans un fragment de contenu.

Construire les classes Bundle/Sling

Modèle de composant de navigation

La Navigation modèle utilise les valeurs de dialogue brandLogo et startPath pour appeler le service de navigation. obtenirNavigation méthode. Cela génère une liste des pages que le composant doit restituer via data-sly-list.link=”${navigation.navLinks}” comme mentionné ci-dessus.

@PostConstruct 

protected void init() { 

    navLinks = navigationService.getNavigation(request, startPath);      

} 

 public List<NavigationItem> getNavLinks() { 

    return navLinks; 

}

Èmeest modèle pcules un demander de s’opposer à la navigation service à récupérer la page ressources sous le chemin de démarrage.

Service de navigation

Le Service de navigation L’interface de classe est explicite, je ne mentionnerai donc que brièvement qu’elle expose les méthodes de navigation get.

Implémentation du service de navigation

Le NavigationServiceImpl la classe contient le obtenirNavigation méthode. Cette méthode parcourt les ressources enfants de premier niveau de la valeur startPath (en tant que ressource Sling). Il ajoute le titre de page de chaque ressource enfant, le nom du nœud de page et le chemin d’accès à une liste de tableaux, en tant que NavigationItem (plus d’informations à ce sujet dans un instant).

Cette classe contient également le getNavigationAsJson méthode. C’est semblable au obtenirNavigation méthode, avec la distinction importante que la sortie est un objet JSON contenant un tableau des mêmes propriétés de ressource enfant.

Le Élément de navigation class est un simple pojo, définissant les propriétés d’objet de chaque élément du tableau de navigation :

public NavigationItem(String title, String name, String path) { 

    this.title = title; 

    this.name = name; 

    this.path = path; 

}

Servlet de mise à jour JSON de navigation

Enfin, le code du bundle est le NavigationJsonUpdateServlet. Cette servlet est invoquée via le navJsonUpdater.js scénario. La servlet écrit le chemin DAM du logo de la marque et le tableau JSON d’éléments de navigation dans un fragment de contenu :

String brandLogo = ""; 

if (Objects.nonNull(request.getParameter("brandLogo"))) { 

    brandLogo = request.getParameter("brandLogo"); 

} 

String startPath = request.getParameter("startPath"); 

ArrayNode navigationJsonArray =  NavigationService.getNavigationAsJson(request, startPath); 

 

ResourceResolver resourceResolver = request.getResourceResolver(); 

String navFragmentPath = "/content/dam/perficientpocs/navigation-fragment-demo/jcr:content/data/master"; 

Resource navFragmentResource = resourceResolver.getResource(navFragmentPath); 

 

try { 

    if (Objects.nonNull(navFragmentResource)) { 

        ModifiableValueMap map = navFragmentResource.adaptTo(ModifiableValueMap.class); 

        map.put("brandLogo", brandLogo); 

        map.put("generatedNavigationList", navigationJsonArray.toString()); 

        resourceResolver.commit(); 

    }

Composant AEM rendu

Avec les classes de composants et de services ci-dessus, vous devez ajouter votre nouveau composant de navigation aux stratégies de modèle, de préférence à la liste des composants autorisés pour un modèle de fragment d’expérience (XF). Vous pouvez ensuite ajouter le composant à un XF de navigation pour l’utiliser sur plusieurs pages de la structure de votre site. Pour le style, j’ai ajouté un bibliothèque client de composants avec du CSS et du JS (je ne couvrirai pas leur contenu ici, mais ils sont disponibles dans le référentiel).

Voici à quoi ressemble le composant dans mon instance de test, une fois ajouté à une page et créé :

Vue du bureau

Vues mobiles

J’espère que vous ne jugerez pas trop durement ma conception. Outre le lien Accueil, le reste de ces liens ont été générés par le composant pour moi. Tout ce que j’avais à faire était de fournir un startPath !

(J’ai également sélectionné l’image du logo du DAM).

Le modèle de fragment de contenu et… le fragment

Vous souhaiterez créer un modèle de fragment de contenu. Le modèle doit contenir un type de données de référence de contenu champ de référencement du logo de la marque et d’un Type de données d’objet JSON champ pour le JSON de navigation.

Ensuite, vous devrez créer un fragment de contenu en utilisant votre nouveau modèle.

Les champs du logo de la marque et de la liste de navigation peuvent être laissés vides puisqu’ils sont renseignés via le servlet :

Dans le NavigationJsonUpdateServlet, assurez-vous de mettre à jour le navFragmentPath valeur avec le chemin vers le /jcr:contenu/données/maître nœud pour votre fragment.

Pensées finales

Eh bien, cela faisait beaucoup de code AEM. À ce stade, vous devriez disposer d’un composant qui génère des éléments de navigation à utiliser sur votre site AEM et en tant qu’objet JSON à utiliser ailleurs. Comme mentionné, nous sortirons d’AEM pour la partie 2, afin de créer une application qui consomme le fragment de contenu et est automatiquement mise à jour lorsque les éléments de navigation changent. Nous en reparlerons bientôt !