web2 - Jeremi

Hier, j'ai decouvert grace a stephane Lauriere la Simile Timeline. J'adore le concept de cette timeline. En gros, ca s'utilise comme une google maps (a la difference pret qu'elle lit un fichier xml, je n'ai pas trouve comment lui donner les valeurs directement). Tout est en javascript.

Il y a plein d'applications possible tel que le suivi des modifications d'un wiki dans le temps, la representation d'un agenda...

Je me suis amuse a faire une petite demo avec qui liste mes articles de blog sur cette frise temporaire. Bien sur, c'est base sur XWiki. Le code est tout simple :

J'ai une premiere page wiki qui va lire le fux rss de mon blog en utilisant le plugin de flux rss dans une page apelle "xml":

{pre}
<data>
#set($feed = $xwiki.feed.getFeed("http://www.jeremi.info/index.php/feed/rss2"))
#foreach($entry in $feed.entries)
<event start="$entry.getPublishedDate().toLocaleString()" title="$entry.title">$xwiki.getXMLEncoded($entry.description.value) ... $xwiki.getXMLEncoded("<a href=$entry.link>Suite</a>")
</event>
#end
</data>
{/pre}

et une deuxieme page qui contient le code de la timeline:

{pre}
<html>
  <head>
<style type="text/css">
.timeline-default {
    font-family: Trebuchet MS, Helvetica, Arial, sans serif;
    font-size: 8pt;
    border: 1px solid #aaa;
}
.timeline-event-bubble-body {
    font-family: Trebuchet MS, Helvetica, Arial, sans serif;
    font-size: 10pt;
}
</style>
    <script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"></script>
  </head>
<body onload="onLoad();" onresize="onResize();">
<script type="text/javascript">

function onLoad() {
  var eventSource = new Timeline.DefaultEventSource();
            var theme = Timeline.ClassicTheme.create();
            theme.event.label.width = 250; // px
            theme.event.bubble.width = 250;
            theme.event.bubble.height = 200;
  var bandInfos = [
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           "Sep 10 2006 00:00:00 GMT",
        width:          "70%", 
        intervalUnit:   Timeline.DateTime.DAY, 
        intervalPixels: 200,
        theme:          theme
    }),
    Timeline.createBandInfo({
        eventSource:    eventSource,
        date:           "Sep 10 2006 00:00:00 GMT",
        width:          "30%", 
        intervalUnit:   Timeline.DateTime.MONTH, 
        intervalPixels: 200,
        theme:          theme,
        showEventText:  false, 
        trackHeight:    0.5,
        trackGap:       0.2
    })
  ];
  bandInfos[1].syncWith = 0;
  bandInfos[1].highlight = true;
  
  tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
  Timeline.loadXML("xml?xpage=rdf", function(xml, url) { eventSource.loadXML(xml, url); });
}

var resizeTimerID = null;
function onResize() {
    if (resizeTimerID == null) {
        resizeTimerID = window.setTimeout(function() {
            resizeTimerID = null;
            tl.layout();
        }, 500);
    }
}
</script>
<div id="my-timeline" class="timeline-default" style="height: 200px; border: 1px solid #aaa"></div>

  </body>
</html>
{/pre}

et voila le resultat.

Cette librairie, a la difference des google maps, est disponible sous la licence BSD, qui est une licence tres permissive.

Jeremi

Mot clé - web2

What is the web?

mini exemple avec Simile Timeline et XWiki

nuage de tags

Subscribe