Le composant GXMLDISPLAY peut être étendu de manière à compléter les représentations, nous pouvons passer d’un affichage tabulaire à des listes d’items statiques ou ouvrantes. Nous conserverons le même modèle de table dynamique, avec les propriétés de tri étendu. Il suffira simplement de changer la fonction d’affichage dans le formulaire HTML, ces fonctions utilisent les mêmes données (table Javascript) et la même feuille de style que la fonction Disp_Nodes_Table de GXMLDISPLAY.

Publication initiale : buidez.net (2011) – revu et mis à jour en 2025.

1. Affichage en liste

Nous allons reprendre la même table Javascript que celle qui a été utilisée dans l’article [ Javascript : GXMLDISLAY et tables dynamiques ] sur ce blog. Nous avons donc un mélange de texte, de liens (locaux ou vers la PDB), d’images locales. Dans la page HTML, l’entête et le sélecteur sont identiques, soit :

La seule chose qui change c’est l’appel à la fonction Disp_Nodes_Item au lieu de Disp_Nodes_Table. Le rendu ne va plus se faire sous la forme d’une table, mais sous la forme d’une liste, comme dans l’image suivante. Cette liste peut inclure des images, la colonne qui est triée affiche ses données dans une première ligne (dans l’exemple il s’agit de la colonne LIG) puis après un retour à la ligne, les autres données sont affichées, séparées par des virgules.

En mode liste, les images ont tendance à perturber l’affichage, mais l’objectif ici est de montrer que c’est possible. Cette liste est dynamique, chaque boutons déclenche un tri étendu différent.

2. En liste avec des items (UL)

Une autre possibilité est d’utiliser la fonction Disp_Nodes_Item_UL. Dans ce cas, au lieu d’avoir la colonne triée en tête de paragraphe, nous l’avons comme première donnée d’items de type <LI> inclus dans un bloc <UL>, le rendu correspond à une liste à puces (<UL> pour liste non ordonnée: Unordered List). L’image suivante montre le résultat, dans le cas ou la colonne SMILES est la directrice :

Les données de la colonne triée apparaissent en gras dans les deux cas, conformément à la feuille de style CSS, qu’il s’agisse de Disp_Nodes_Item_UL ou Disp_Nodes_Item.

3. Avec des listes ouvrantes

Dans ce cas, nous n’avons que l’item correspondant à la colonne triée qui apparait. Mais lorsque l’on clique dessus, le contenu de la ligne s’affiche, comme dans le cas de la fonction Disp_Nodes_Item. Si nous recliquons sur l’item de départ, la ligne se referme. Pour utiliser cette fonctionnalité il faut appeler la fonction Disp_Nodes_Outline dans le formulaire. Il faut également inclure le module javascript outlines.js dans l’entête de la page HTML :

Nous constatons que le reste est totalement identique au deux autres exemples précédents. Dans le rendu suivant, les données sont triées selon la colonne DESC et nous voyons deux lignes ouvertes pour les ligands NOJ et IFM, les autres sont fermées :

L’utilisation de listes ouvrantes permet d’avoir des affichages plus compacts, le défaut est que pour la colonne triée, il ne faut pas utiliser des données de type URL ou lien, sinon quand on va cliquer dessus, c’est le lien qui répondra et non l’ouverture/fermeture de l’item de la liste.

4. Test Drive

Trois démos live sont disponibles pour l’utilisation d’items et de listes ouvrantes. Les données sont les mêmes que dans les exemples précédents et les liens sont actifs :

• Items [ https://buildblog.buildez.fr/posts/cxs_gxmldisplay/demo/index_obj_item.html ].
• Items avec puces [ https://buildblog.buildez.fr/posts/cxs_gxmldisplay/demo/index_obj_itemul.html ].
• Liste ouvrante [ https://buildblog.buildez.fr/posts/cxs_gxmldisplay/demo/index_obj_outlines.html ].

La liste ouvrante utilisée avec la colonne IMG pour le tri est intéressante : nous avons des des images (formules développées de molécules) qui sont cliquables et donnent les informations une fois ouvertes.

En conséquence, il serait intéressant de d’intégrer ce mode avec un affichage tabulaire. Prenons le cas de molécules, par exemple un fichier SDF, après génération des images et récupération des descripteurs dans une table Javascript. Nous pourrions créer deux modes : tableur ou matrice de molécules comme dans Chemaxon Marvin View. Ce qui permettrait de réaliser une ‘vue’ pour une collection moléculaire, sachant que des outils comme RDKit génèrent rapidement des images à partir de formules développées (SMILES ou MDL Mol). Ici nous utilisons des images statiques pour les molécules, si nous voulions les générer d’une manière dynamique (par exemple à partir des chaines SMILES) il faudrait recourir à des bibliothèques externes pour effectuer la depiction puis le rendu.

5. Conclusion

Ces codes fonctionnent, comme dans le cas de Disp_Nodes_Table, de la même manière sur serveur et en local, on peut les utiliser dans beaucoup de cas de figure, et sans faire appel à des bibliothèques Javascript complexes ou hébergées hors du périmètre.

Le code OUTLINES est aussi vintage que GXMLDISPLAY, la dernière version date de 2004, mais il fonctionne toujours et est compatible Chromium. Il est utile de disposer de modes de représentation sous la forme de liste, dans certains l’expérience utilisateur est meilleure que pour des données tabulaires, notamment pour des données essentiellement textuelles ou hiérarchisées. Mais le composant n’est pas destiné à gérer plusieurs niveaux d’imbrication, à la base il s’agit de données tabulaires.