moins52, le blog

Non ce blog n’est pas complètement à l’abandon. Il est juste moins prioritaire que pas mal d’autres trucs ces temps-ci.

J’ai quand même pris le temps d’apprendre un peu plus à utiliser JQuery. J’en ai profité pour réaliser Heaver-it un petit gestionnaire de Post-it® virtuel en JQuery et PHP.

Post-it® étant une marque déposée et n’ayant pas envie de me prendre un procès, j’emploierai le terme de note dans la suite de l’article.

CE QUE JE VEUX
L’idée donc est de pouvoir gérer le backlog d’un projet AGILE au format électronique (Parce que je trouve que les notes adhésive en papier c’est pas Green IT).
Les données doivent pouvoir être sauvegardées dans le dépôt SVN, GIT ou autre. Ce qui facilite la gestion de projet à distance par exemple.

Une version démo est accessible là : DEMO !

TECHNIQUEMENT PARLANT
Heaver-it est réalisé en JQuery, JQuery UI et utilise PHP pour la sauvegarde des données. Les données sont sauvegardées au format JSON.
Je ne suis pas super satisfait de l’utilisation du PHP car ça oblige à avoir un serveur PHP mais je ne voyais comment faire la sauvegarde autrement. Si Dr Benton passe par là il me dira peut-être d’utiliser Node.js.

PLUS EN DETAIL
Le code est assez simple et je ne présenterai ici que quelques astuces qui m’ont paru intéressantes durant la réalisation. Ça pourra servir à d’autres ou à mon « moi futur » .

ONE PLUGIN TO RULE THEM ALL
Pour chaque transformer une div en une note virtuelle il faut appliquer un certain nombre de plugins. J’ai donc créé un plugin qui regroupe tous les autres.
Le plugin s’appelle comme ça

<script>
$(function() {
$('#mydiv').taskify();
});
</script>

Il permet d’appliquer à « mydiv » en un ligne les plugins click, draggable et editable nécessaire pour en faire une note virtuelle. Yeah !

ONE PLUGIN TO BIND THEM
Lorsqu’on modifie quelque chose sur le backlog le bouton de sauvegarde prend en compte qu’il y a eu une modification. Pour réaliser cela j’ai utilisé la gestion d’évènements de JQuery.
Venant du monde Java ce fonctionnement m’a beaucoup rappelé le système des ActionListener.

J’ajoute donc au bouton « Save » la classe actionlistener.

<a href="#" class="actionlistener">Save</a>

Je définis ce que doit faire le bouton « Save » lorsqu’il y a une modification. Dans mon cas le texte change et devient « Save Now ».

$<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal;">( "#save" ).bind("modification", function () { $( "#save span" ).html("Save Now"); });[/</span>javascript]</pre>
Il n'y a plus qu'à déclencher l'événement "modification" sur tous les éléments implémentant la classe "actionlistener" pour chaque action modifiant le backlog.

1$<span style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; line-height: 19px; white-space: normal;">( ".actionlistener" ).trigger("modification");

Le fonctionnement est le même pour la gestion des plans. Lorsqu’on clique sur une note, un événement est déclenché informant toutes les notes que la note du plan N passe au premier plan.

$(".task").trigger("putTaskOnTop", [$$.css('zIndex')]);

Toutes les notes sont informées du déclenchement. Celle par qui l’événement a été déclenché passe au premier plan. Les notes qui se trouvent sur les plans supérieurs descendent d’un cran.

// Puts task on top
 $$.bind("putTaskOnTop", function(event, zIndex) {
 // Lows tasks currently on higher levels
 if (zIndex < $$.css('zIndex')) {
 $$.css({
 zIndex: $$.css('zIndex') - 1
 });
 }
 // Puts the one task on top
 else if (zIndex == $$.css('zIndex')) {
 $$.css({
 zIndex: $(".task").length - 1
 });
 }
 });

ONE PLUGIN TO BRING THEM ALL AND IN GITHUB SHARE THEM
Heaver-it est disponible sous licence GPL. Tout est publié sur GitHub ici.

CONCLUSION
Voilà ma première publication Open Source. Mon premier plugin JQuery. C’est ma Maman qui va être fière de son fiston.

Pour réaliser cet article et le plugin taskify, je me suis pas mal inspiré d’un article Jay Salvat sur la conception de plugin JQuery.

[picto]