3. La page HTML

Le code suivant va montrer comment les composants Javascript sont utilisés, cette page (fichier index_obj.html) est utilisable en local ou sur un serveur. La source de donnée est une table Javascript data_obj.js que l’on peut appeler dans la section <HEAD> de la page. Puis on peut appeler le composant GXMLDISPLAY (fichier gxmldisplay_obj.js) proprement dit.

<HTML>

<HEAD>

<TITLE>GXMLDISPLAY - Disp_Nodes_Table demo</TITLE>

<SCRIPT LANGUAGE="JavaScript">gxmldisplay_init();</SCRIPT>

</HEAD>

<P>Exemple of small molecules list</P>

<FORM>

<SCRIPT LANGUAGE="JavaScript">gxmldisplay_selector('n','','','all');</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">gxmldisplay_selector('y','SECTOR','Q08638','inc');</SCRIPT>

<TR>

</TR>

</TABLE>

</FORM>

</TD>

</TR>

<SMALL><I>Use buttons to display the sorted lists.</I></SMALL></TD></TR>

</TABLE>

<P>nb: Canonical SMILES (CACTVS) are used.</P>

</BODY>

</HTML>

Enfin GXMLDISPLAY est initialisé par la fonction gxmldisplay_init. Cette fonction doit être appelée après l’ensemble des modules Javascript, c’est un détail de cadencement qui est important.

Tri et affichage

Les appels de la fonction Disp_Nodes_Table permettent la sélection des colonnes à trier et déclenchent leur affichage en tant que table HTML dans un conteneur <DIV>. Ces appels sont associés à des boutons placés au dessus de la table à produire, on peut évidemment appeler ces fonctions sans utiliser des boutons. Par exemple le code suivant peut être appelé dans une page HTML, et affichera la colonne PROTEIN dans le conteneur qui a pour identité "ResultDiv", sans tri ascendant de la colonne (valeur ‘no’ au lieu de ‘yes’):

1	<SCRIPT LANGUAGE="JavaScript">Disp_Nodes_Table('PROTEIN','ResultDiv','no');</SCRIPT>

L’affichage se fait donc soit dans l’ordre des données, soit en triant une colonne (boutons). Il s’agit d’un tri étendu, l’ordre dans les colonnes est modifié en correspondance de la colonne triée et qui est affichée en premier dans la table. Les données initiales sont préservées car c’est la table disp_array qui est utilisée pour l’affichage et qui est générée par la fonction Make_Data :

function Make_Data(fc)

{

var i = 0;

var j = 0;

var k = 0;

for (i=0; i<ObjData.data_r; i++)

{ for (j=0;j<ObjData.data_c;j++) { disp_array[i][j]=""; }

if (mask_array[fc] == 1)

{ disp_array[i][0] = ObjData.data_array[i][fc];

k = 1;

for (j=0; j<ObjData.flags_n; j++)

{ if ((mask_array[j] == 1) && (j != fc))

{ disp_array[i][k] = ObjData.data_array[i][j];

k = k + 1;

}

...

Il ne s’agit pas d’une forme de tri en place, il y a des avantage et inconvénients à la méthode. Une fois qu’on utilise une table déjà triée, la fonction Disp_Nodes_Table devient alors très simple dans son écriture, il s’agit de dérouler disp_array et de l’écrire dans le conteneur <DIV> correspondant :

/////////////////////////////////////////////////////////////////////////////////

// Disp_Nodes_Table

/////////////////////////////////////////////////////////////////////////////////

function Disp_Nodes_Table(keyword,Container,is_sort)

{

var j = 0;

var k = 0;

var Result = "";

var key = -1;

Make_Mask_Array();

key = Keyword_to_Key(keyword);

if (key == -1) { return; }

Make_Data(key);

Result = '<TABLE CELLPADDING="4" CELLSPACING="2" BORDER="0">';

// Result +="<TR>" + Make_Table_Title(key) + "</TR>";

Result +="<TR BGCOLOR=#CFCFCF>" + Make_Columns_Titles(key) + "</TR>";

if (is_sort == 'yes') { disp_array.sort(); }

for (j=0; j<ObjData.data_r; j++)

{ if (disp_array[j][ObjData.data_c] == "y")

{ Result += "<TR BGCOLOR='#EFEFEF' VALIGN='Top'>";

for (k=0; k<cols_n; k++)

{ Result += '<TD class="gxml-table-td">';

Result += '<P class="gxml-table-td">';

Result += disp_array[j][k];

Result += "</P>"

Result += "</TD>"

}

Result += "</TR>";

}

Result += "</TABLE>";

// return Result;

// document.write(Result);

document.getElementById(Container).innerHTML = Result;

}

Nous accumulons les données dans la variable Result que nous affectons au conteneur <DIV> dans la dernière ligne de la fonction.

Rendu de la table dynamique

Au final nous obtenons une table dynamique, l’exemple montre le résultat (image suivante) sous Google Chrome, à partir d’un serveur, avec une table triée en fonction de la colonne LIG. Le résultat sera similaire sous Microsoft Edge et d’autres navigateurs basés sur Chromium. Dans les premières versions de GXMLDISPLAY, il fallait prendre en compte des types de navigateurs différents, avec le temps ce code a été simplifié et convient à la plupart des dispositifs.

A l’utilisation, nous nous rendons compte que ce système facilite une meilleure expérience utilisateur dès que l’on fait du tri étendu, donc intégrer des boutons pour le tri est important.
Dans les colonnes LIG et PROTEIN, les liens sont cliquables et déclenchent l’ouverture d’une page dans un nouvel onglet. Dans le cas de la colonne 3DREF l’affichage dépendra de la configuration du poste client, soit un téléchargement, soit un téléchargement puis l’affichage via une application gérant le type de fichier (testé avec Biovia Discovery Studio Visualizer). Par exemple pour le ligand CGB impliqué dans l’entrée 2CBV de la PDB.

On peut aussi produire une table dynamique avec un affichage 3D intégré, en couplant l’écosystème GXMLDISPLAY avec d’autres composants Javascript pour l’affichage.

Liens et lectures

Chromium [ https://fr.wikipedia.org/wiki/Chromium ].
Algorithme de tri [ https://fr.wikipedia.org/wiki/Algorithme_de_tri ].

Pages : 1 2 3 4 5 6