Vous pouvez choisir la durée du programme (1000 ms par défaut) et le déclencher en cliquant sur le bouton "Afficher".
À l'ouverture, la table est triée en ordre ascendant sur le TimeStamp exprimé en millisecondes.
<script type="text/javascript">
$(document).ready(function(){
// l'utilisateur peut appeler plusieurs fois le programme, mais il ne doit y avoir qu'un objet « contrôleur »
var objTotal = null;
// l'utilisateur crée et initialise l'objet « contrôleur » en cliquant sur le bouton « Afficher »
// l'objet « contrôleur » se charge du bon fonctionnement du programme et de l'affichage des résultats
// l'affichage des résultats nécessite le plugin jquery.tablesorter.min.js et la feuille de style trierTable.css
$("#btn").click(function(){
if (objTotal != null) {
objTotal = null;
}
objTotal = new Total($("#choix").val(), "affiche");
});
});
</script>
Le fichier testEvent4Modele.js contient les objets Pair et Impair :
(function($){
Pair = function(){
this.number = 0;
}
Pair.prototype = {
add:function(obj){
this.number++;
if ((this.number % 2 == 0) &&
(obj != null) && (obj != undefined) &&
(obj.eventName != null) && (obj.eventName != undefined)){
var objEvent = new $.Event(obj.eventName);
objEvent.dvjh = {
length:1,
p1Name:"Pair",
p1Data:this.number
};
$(obj).trigger(objEvent);
}
}
};
Impair = function(){
this.number = 0;
}
Impair.prototype = {
add:function(obj){
this.number++;
if ((this.number % 2 != 0) &&
(obj != null) && (obj != undefined) &&
(obj.eventName != null) && (obj.eventName != undefined)){
var objEvent = new $.Event(obj.eventName);
objEvent.dvjh = {
length:1,
p1Name:"Impair",
p1Data:this.number
};
$(obj).trigger(objEvent);
}
}
};
})(jQuery);
Le fichier testEvent4Vue.js contient l'objet Table (il construit une table, triable avec le plugin jquery.tablesorter.min.js et la feuille de style trierTable.css) :
(function($){
Table = function(){
this.eventName = "tableEvent.Table";
this.th = null;
this.trs = new Array();
this.init();
}
Table.prototype = {
init:function(){
var self = this; // bonne pratique car jQuery peut modifier this
$(this).bind(self.eventName, self.afficherEventHandler);
},
afficherEventHandler:function(event){
if ((event.dvjh != null) && (event.dvjh != undefined) && (event.dvjh.length == 1)){
if (this.th == null) {
this.th = event.dvjh.p1Name;
}
this.trs.push(event.dvjh.p1Data);
}
return false;
},
print:function(id){
if (this.th != null && this.trs[0] != null){
var self = this; // bonne pratique car jQuery peut modifier this
var t0 = this.trs[0][3];
var tableID = "vue" + t0;
var deltaT = new Array();
deltaT.push(0);
for(var i = 1; i < this.trs.length; i++){
deltaT.push(this.trs[i][3] - t0);
}
// suppprime une éventuelle table précédente
$("#"+id).find(".tablesorter").remove();
var elClone = $("#"+id).clone(true);
var tdlength = this.th.length;
var trlength = this.trs.length;
var table = $("<table id='" + tableID + "' class='tablesorter'></table>").appendTo(elClone);
var thead = $("<thead></thead>").appendTo(table);
var tfoot = $("<tfoot></tfoot>").appendTo(table);
var tbody = $("<tbody></tbody>").appendTo(table);
var trhead = $("<tr></tr>").appendTo(thead);
var trfoot = $("<tr></tr>").appendTo(tfoot);
for(var i = 0; i < tdlength; i++) {
$("<th>" + self.th[i] + "</th>").appendTo(trhead);
$("<th>" + self.th[i] + "</th>").appendTo(trfoot);
}
$("<th>Delta T ms</th>").appendTo(trhead);
$("<th>Delta T ms</th>").appendTo(trfoot);
var trbody = null;
for(var j = 0; j < trlength; j++) {
trbody = $("<tr></tr>").appendTo(tbody);
for(var i = 0; i < tdlength; i++) {
$("<td>" + self.trs[j][i] + "</td>").appendTo(trbody);
}
$("<td>" + deltaT[j] + "</td>").appendTo(trbody);
}
$("#"+id).replaceWith(elClone);
$("#"+tableID).tablesorter({
sortList: [[3,0]],
widgets: ['zebra'],
headers: {
4:{sorter: false}
}
});
} else {
$("#"+id).html("<p>Il n'y a aucune information à afficher !</p>");
}
}
};
})(jQuery);
Le fichier testEvent4Controleur.js contient l'objet Total (l'objet chargé de l'exécution du programme) :
(function($){
Total = function(millisecondes, divID){
this.eventName = "totalEvent.Total";
this.number = 0;
this.source = "";
this.total = 0;
this.timeStamp = 0;
this.output = new Table();
this.pair = new Pair();
this.impair = new Impair();
this.init(millisecondes, divID);
}
Total.prototype = {
init:function(milliseconds, divID){
var t = milliseconds || 1000;
var self = this; // bonne pratique car jQuery peut modifier this
$(this).bind(self.eventName, self.totalEventHandler);
// window.setInterval et window.setTimeout modifient this
var pairInterval = window.setInterval(function(){
self.pair.add(self);
}, 30);
var impairInterval = window.setInterval(function(){
self.impair.add(self);
}, 40);
window.setTimeout(function(){
window.clearInterval(pairInterval);
window.clearInterval(impairInterval);
self.output.print(divID);
}, t);
},
totalEventHandler:function(event){
if ((event.dvjh != null) && (event.dvjh != undefined) && (event.dvjh.length == 1)){
this.number = event.dvjh.p1Data;
this.source = event.dvjh.p1Name;
this.total += this.number;
this.timeStamp = event.timeStamp;
if ((this.output != null) && (this.output != undefined) &&
(this.output.eventName != null) && (this.output.eventName != undefined)){
var self = this; // bonne pratique car jQuery peut modifier this
var outputEvent = new $.Event(self.output.eventName);
outputEvent.dvjh = {
length:1,
p1Name:new Array("Total", "Nombre", "Source", "TimeStamp ms"),
p1Data:new Array(this.total, this.number, this.source, this.timeStamp)
};
$(this.output).trigger(outputEvent);
}
}
return false;
}
};
})(jQuery);