Personnaliser l'affichage d'un arbre

Découpage des fichiers

Les JSP qui participent à l'affichage de l'arbre en front office sont :

• /src/main/webapp/WEB-INF/jsp/fo/tags/tag_arbre.jsp (point d'entrée qui affiche l'ensemble de l'arbre)
• /src/main/webapp/WEB-INF/jsp/fo/tags/noeud_arbre.jsp (affiche tout un niveau de l'arbre, cette JSP est appelée de façon récursive)
• /src/main/webapp/WEB-INF/jsp/fo/tags/item_arbre.jsp (affichage d'un bloc de l'arbre)

Les feuilles de style contenant les règles d'affichage de l'arbre en front office sont :

• /src/main/webapp/resources/styles/arbre.css

Les scripts qui gèrent l'interaction entre les différents éléments de l'arbre sont :

• /src/main/webapp/resources/scripts/affichage_arbre.js

Données fournies

Si l'affichage de l'arbre doit être revu de fond en comble, il est important de connaître les données qui sont fournies à partir du point d'entrée de l'affichage (tag_arbre.jsp).
Pour récupérer les données, voici le code à ajouter dans la JSP :

<%@ page import="com.univ.utils.ContexteUniv" %>
<%@ page import="com.univ.utils.ContexteUtil" %>
<%@ page import="fr.kosmos.web.extensions.arbre.viewmodel.ArbreViewModel" %><%
ContexteUniv ctx = ContexteUtil.getContexteUniv();
ArbreViewModel arbre = (ArbreViewModel)ctx.getData("arbre"); %>

À partir de là, nous avons un objet de type ArbreViewModel qui sera en mesure de nous fournir toutes les données dont nous avons besoin.
Voici la composition de cet objet :

• String code : Code du nœud courant
• String modalite : Titre, résumé de ce nœud
• String contenu : Contenu (si nécessaire) de ce nœud
• String introEnfant : L'introduction à la sélection suivante
• List<ArbreViewModel> noeudsEnfants : Liste des nœuds enfants du nœud courant.

À présent, le but est d'itérer sur chaque nœud en affichant ses informations et pour chaque nœud, de "descendre" dans l'arborescence (grâce à noeudsEnfants) pour afficher les informations des nœuds enfants (petits-enfants, arrières-petits-enfants…).
 

Flux HTML de l'arbre

Exemple minimaliste :

<div class="tag-arbre"> <!-- Produit par tag_arbre.jsp -->
  <ul id="arbre-yyyy-xxxx" data-arbre-id="xxxx" data-profondeur="0" class="tag-arbre__liste tag-arbre__liste--0"> <!-- Produit par noeud_arbre.jsp -->
    <li data-noeud-id="zzzz" class="tag-arbre__element"> <!-- Produit par noeud_arbre.jsp -->
      <a href="#arbre-yyyy-zzzz" class="tag-arbre__bloc bloc-arbre" aria-labelledby="arbre-yyyy-xxxx"> <!-- Produit par noeud_arbre.jsp -->
        <span class="bloc-arbre__modalite">Lorem ipsum</span> <!-- Produit par item_arbre.jsp -->
        <span class="bloc-arbre__info">Dolor sit</span> <!-- Produit par item_arbre.jsp -->
        <span class="bloc-arbre__modalite"></span> <!-- Produit par item_arbre.jsp -->
      </a> <!-- Produit par noeud_arbre.jsp -->
      <ul id="arbre-yyyy-zzzz" data-arbre-id="zzzz" data-profondeur="1" class="tag-arbre__liste tag-arbre__liste--1"> <!-- Produit par noeud_arbre.jsp -->
        <li data-noeud-id="aaaa" class="tag-arbre__element"> <!-- Produit par noeud_arbre.jsp -->
          <div class="tag-arbre__bloc bloc-arbre" aria-labelledby="arbre-yyyy-xxxx"> <!-- Produit par noeud_arbre.jsp -->
            <span class="bloc-arbre__modalite">Lorem ipsum</span> <!-- Produit par item_arbre.jsp -->
            <span class="bloc-arbre__info">Dolor sit</span> <!-- Produit par item_arbre.jsp -->
            <span class="bloc-arbre__intro"></span> <!-- Produit par item_arbre.jsp -->
          </div> <!-- Produit par noeud_arbre.jsp -->
        </li> <!-- Produit par noeud_arbre.jsp -->
      </ul> <!-- Produit par noeud_arbre.jsp -->
    </li> <!-- Produit par noeud_arbre.jsp -->
  </ul> <!-- Produit par noeud_arbre.jsp -->
</div> <!-- Produit par tag_arbre.jsp -->

Détail des classes utilisées

Les classes utilisées respectent la convention BEM.
Classes présentes dans le flux :

• tag-arbre : objet englobant toute la structure de l'arbre
• tag-arbre__liste : un niveau de l'arbre
• tag-arbre__liste--x : qualifie la profondeur du niveau de l'arbre (x = entier ≥ 0)
• tag-arbre__element : élément de l'arbre
• tag-arbre__bloc : bloc à l'intérieur d'un élément
• bloc-arbre : bloc de l'arbre
• bloc-arbre__modalite : représentation de la modalité dans le bloc
• bloc-arbre__info : représentation des informations dans le bloc
• bloc-arbre__intro : représentation de l'intro dans le bloc

Autres classes ajoutées en JS :

• tag-arbre__liste--selected : qualifie un niveau de l'arbre comme sélectionné
• tag-arbre__element--displayed : qualifie un élément de l'arbre comme affiché

Fonctionnement dynamique

Le fonctionnement proposé par l'extension implémente un arbre dans lequel les feuilles peuvent être sélectionnées, niveau après niveau. Chaque fois qu'une feuille de l'arbre est sélectionnée, le niveau change d'apparence pour mettre en valeur le bloc qui a été activé, et les bloc du niveau suivant sont affichés.