3. Une table multimodale
Si nous voulons utiliser la table JavaScript avec un format tabulé et non sous la forme d’une liste, il suffira de remplacer l’appel à la fonction Disp_Nodes_Item_UL par la fonction Disp_Nodes_Table. Mais avec une formulation plus complexe, nous allons devoir gérer quelques problèmes supplémentaires, par exemple :
- Je ne l’ai pas mentionné, mais c’est aussi le cas dans les exemples précédents, il va falloir gérer l’encodage des caractères accentués. Si nous saisissons en Latin-1 des caractères tels que
édans la table JavaScript, ils seront rendus enépar WordPress, car la sortie se fait en UTF-8. Un moyen de contournement est d’éditer dans un IDE tel que SciTE, en mode UTF-8 puis de faire un copier coller de la table JavaScript dans WPCode. - Si nous avons des éléments externes tels que des images, fichiers … il va falloir définir les chemins d’accès dans la table JavaScript. A priori, WPCode considère que les fichiers sont à la racine du site. Que l’on utilise un lien direct (local) ou via un hyperlien, nous devrons probablement indiquer un chemin d’accès absolu et non relatif.
Une fois que nous connaissons ces paramètres, nous pouvons implémenter un nouvel extrait de code compatible avec GXMLPARSER (certaines lignes sont enlevées pour simplifier). Pour éviter les références <A> ou <IMG> trop longues, il est possible d’utiliser des variables intermédiaires, par exemple dimg (chemin d’accès des images, colonne IMG) et dpdb (chemin d’accès des coordonnées PDB, colonne 3DREF) en tant que préfixes. Nous pourrions aussi étendre cette approche pour les hyperliens vers la PDB (de type https://www.rcsb.org/) pour les structures et les ligands. A noter que dans cette table JavaScript, dimg correspond à un préfixe de type chemin d’accès et dpdb à un préfixe de type hyperlien, les deux fonctionnent.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script language=JavaScript> var flags_array = new Array ("TYPE", "SECTOR", "IMG", "DESC", "PROTEIN", "SMILES", "LIG", "3DREF"); var getf_array = new Array ("TYPE", "IMG", "DESC", "PROTEIN", "SMILES", "LIG", "3DREF"); var data_array = new Array(); ... var dimg = "/posts/cxs_wordpress/demo/lig_img/"; var dpdb = "https://buildblog.buildez.fr/posts/cxs_wordpress/demo/lig_ref/"; data_array[data_r++] = new Array ("bglA", "Q08638", "<IMG SRC='"+dimg+"mol-22.png'>", "5-hydroxymethyl-3,4-dihydroxypiperidine inhibiteur BglA", "<A HREF='https://www.rcsb.org/structure/1OIF' target='_blank'>1OIF</A>", "OC[C@H]1CNC[C@@H](O)[C@@H]1O", "<A HREF='https://www.rcsb.org/ligand/ifm' target='_blank'>IFM</A>", "<A HREF='"+dpdb+"ifm_ref.pdb' target='_blank'>ifm_ref</A>"); data_array[data_r++] = new Array ("bglA", "Q08638", "<IMG SRC='"+dimg+"mol-23.png'>", "1-deoxynojirimycin inhibiteur BglA", "<A HREF='https://www.rcsb.org/structure/1OIM' target='_blank'>1OIM</A>", "OC[C@H]1NC[C@H](O)[C@@H](O)[C@@H]1O", "<A HREF='https://www.rcsb.org/ligand/noj' target='_blank'>NOJ</A>", "<A HREF='"+dpdb+"noj_ref.pdb' target='_blank'>noj_ref</A>"); data_array[data_r++] = new Array ("bglA", "Q08638", "<IMG SRC='"+dimg+"mol-24.png'>", "2-deoxy-2-fluoro-glucose substrat BglA", "<A HREF='https://www.rcsb.org/structure/1OIN' target='_blank'>1OIN</A>", "OC[C@H]1O[C@H](O)[C@H](F)[C@@H](O)[C@@H]1O", "<A HREF='https://www.rcsb.org/ligand/g2f' target='_blank'>G2F</A>", "<A HREF='"+dpdb+"g2f_ref.pdb' target='_blank'>g2f_ref</A>"); ... </script> <div id="ResultDiv" style="margin-bottom: 10px !important;"></div> <script language="JavaScript">gxmldisplay_init();</script> <script language="JavaScript">gxmldisplay_selector('n','','','all');</script> <script language="JavaScript">gxmldisplay_selector('y','SECTOR','Q08638','inc');</script> <script language="JavaScript">Disp_Nodes_Table('LIG','ResultDiv','yes');</script> |
Dans l’exemple suivant, la table est triée en fonction de la colonne LIG et elle est directement appelée via un shortcode, la marge du conteneur <DIV> a été modifiée pour être compatible avec l’affichage de cette page.
Nous constatons que le CSS défini via WPCode n’est que partiellement pris en charge, en effet le thème WordPress impose certains paramètres qui n’ont pas été repris et retouchés dans la feuille de style, ceci dit le résultat s’intègre parfaitement dans un article.
Dans ce cas de figure un seul extrait de code est suffisant pour l’affichage de la table car il embarque les données, l’appel aux composants et aux fonctions d’affichage. Ces fonctions génèrent la table (au sens HTML <table>) ou les listes, au vol, dans le composant <div> également intégré dans le snippet.