Bonsoir,
Je profite d’un week-end loin de Paris et d’un long voyage en train pour décrire (mais avec beaucoup de retard) un petit mashup que j’ai réalisé pour le site @.ampère et l’histoire de l’électricité. L’idée de départ était de développer des chronologies avec l’outil Timeline mis au point par le MIT et que pas mal de développeurs connaissent et utilisent. Timeline permet de créer des frises chronologiques à l’image de celles encore présentes dans les livres scolaires d’histoire (nous avons tous rêvés devant ces frises en couleurs présentant l’histoire de l’Homme par exemple). C’est outil utilise des éléments en javascript et du XML : c’est donc un système basé sur AJAX. Dans le site @.ampère nous voulions faire une frise avec des éléments historiques différents le tout devant être synchronisé :
- une sous-frise sur les grands personnages de l’histoire de l’électricité
- une sous-frise sur les grandes découvertes de ce même domaine
Dans Timeline, les évènements (events) sont stockés dans un fichier XML très simple. Dans le but d’inclure Timeline dans le système d’information (SI) du site, nous avons utilisé deux tables MySQL pour mettre les données brutes (date, contenu de l’évènement, etc.). Un script PHP utilisant DOM réalise alors une présentation XML de ces données : en sortie, nous avons deux fichiers XML, un pour chaque sous-frise, qui sont normés suivant le schéma des fichier nécessaire au fonctionnement de Timeline. Nos deux tables MySQL sont indépendantes du système AJAX de Timeline : c’est PHP/DOM qui formate les données en XML suivant la grammaire Timeline. Nous avons d’ailleurs un autre programme PHP qui présente ces même données sous la forme d’une page web classique. Le schéma suivant en résume le modèle :
Les deux fichiers XML sont stockés dans un répertoire du serveur et chargé dans l’application AJAX qui gère Timeline. Le XML resemble à ceci :
<?xml version="1.0" encoding="iso-8859-1"?><data> <event start="Jan 00 1544 00:00:00 GMT" end="Jan 00 1603 00:00:00 GMT"
image="AMP_1015.jpg" isDuration="true" title="William GILBERT">(1544-1603)</event><event start="Jan 00 1666 00:00:00 GMT" end="Jan 00 1736 00:00:00 GMT"
isDuration="true" title="Stephen GRAY">(1666-1736)</event> ...
</data>
Pour le tout fonctionne, il nous a fallu ajouter un petit programme php de vérification de la forme des dates/heures histoire de ne pas avoir de bug dans l’une des deux sous-frises. Pour terminer nous avons ajouté, dans le fichier javascript de la frise (main.js) qui pilote l’affichage écran, les instructions suivantes :
bandInfos[1].eventPainter.setLayout(bandInfos[1].eventPainter.getLayout());
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos, Timeline.HORIZONTAL);
Timeline.loadXML("kronos1.xml", function(xml, url) { eventSourceA.loadXML(xml, url); });
Timeline.loadXML("kronos2.xml", function(xml, url) { eventSourceB.loadXML(xml, url); });
Nous avons une « bandInfos » dans laquelle nous « chargeons » les deux fichier XML : kronos1.xml et kronos2.xml. Ce chargement est réalisé au sein des deux eventSource (A et B). Ce fichier, main.js, qui est un fichier javascript pur est chargé dans une page HTML (ou PHP dans notre cas) par l’utilisation d’une simple balise <script> dans l’entête. La frise « double » est ensuite affiché dans le code HTML via un « id » de balise <div> :
<div id="my-timeline" style="height:800px; width:100%;"></div>
Le tour est joué, nous avons une belle frise chronologique présentant de façon synoptique ces deux types d’évènements. Voici le résultat :
Bonne fin de week-end,
Stéphane.
PS : Merci à Marie-Hélène Wronecki pour le travail sur la base de données MySQL.