Mootools en 30 jours : jour 14 - Périodes et Hash

I. Introduction Périodes et Hash avec Mootools 1.2

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Le tutoriel d'aujourd'hui va se composer de deux parties, la première sur .periodical(); puis nous allons faire une introduction aux hashes. Les périodes portent bien leurs noms, une période lancera une fonction... périodiquement. D'autre part, les Hashes sont des pairs de clé/valeur. Ne vous inquiétez pas si vous ne connaissez pas encore bien les hashes, je vais faire une introduction rapide là-dessus aujourd'hui et vous donner quelques liens pour pouvoir approfondir. Et comme à chaque fois avec Mootools, si vous voyez bien comment cela s'utilise, c'est facile à utiliser et ça aide beaucoup.

II. Explications

.periodical()

Les Bases

Tout ce que vous avez à faire est d'ajouter .periodical(); à la fin de la fonction, et votre fonction se lancera périodiquement. Comme toujours, il va y avoir quelques choses qu'il faudra définir. Pour les débutants, vous aurez besoin d'une fonction sur laquelle vous attacherez une période, et précisant la fréquence à laquelle vous voulez que la fonction se lance (exprimé en millisecondes).

var periodicalFunction = function(){
alert('encore');
}
 
window.addEvent('domready', function() {
//le nombre a la fin indique la fréquence d'exécution, en millisecondes
var periodicalFunctionVar = periodicalFunction.periodical(100);
});

.bind(); intégré

.periodical inclut une super fonctionnalité, elle peut automatiquement passer une variable en second paramètre. Par exemple, si vous vouliez passer une variable en dehors du domready, vous pourriez l'attacher à la fonction que vous lancez périodiquement en la plaçant dans un second paramètre.

window.addEvent('domready', function() {
//met quelque chose dans une variable
var passedVar = $('elementID');
//puis periodicalFunction pourra utiliser "this"
//qui fera référence à "passedVar"
var periodicalFunctionVar = periodicalFunction.periodical(100, passedVar);
});

Stopper une fonction périodique

$clear()

Pour arrêter une fonction qui s'exécute périodiquement après qu'elle soit initiée (comme nous l'avons au dessus), vous pouvez utiliser $clear();. C'est très simple à utiliser :

//nous annulons la variable dans laquelle nous avons mis
// la fonction périodique

$clear(periodicalFunctionVar);

Exemple

Pour tout mettre ensemble, utilisons quelques-unes des choses que nous avons appris jusqu'à maintenant (et quelques nouvelles) pour créer un timer. Tout d'abord, définissons le html du code, puis nous allons inclure un bouton "start", un bouton "pause" (stop) et un bouton "reset". De plus, nous allons créer une barre qui s'allonge pendant que le temps d'exécution passe. Enfin, nous devons avoir un endroit pour écrire le temps d'exécution du timer en cours.




 

 

 
 
0

Maintenant, pour le code Mootools.

var timerFunction = function(){
//chaque fois que cette fonction est appelée
//la variable currentTime s'incrémentera
//remarquez aussi l'utilisation de "this.counter"
//"this" est le hash
//et "counter" est la clé
//plus là-dessus ci-dessous
var currentTime = this.counter++;
//ici nous changeons le contenu du div d'affichage
//du timer pour l'actualiser
$('timer_display').set('text', currentTime);
//puis nous changeons la largeur de la barre de progression
$('timer_bar').setStyle('width', currentTime);
}
 
window.addEvent('domready', function() {
//voici un hash simple avec une paire de clé/valeur
var currentCounter = new Hash({counter: 0});
//nous initions notre période et passons la variable hash
var simpleTimer = timerFunction.periodical(100, currentCounter);
 
//comme nous ne voulons pas lancer le timer au chargement
//nous l'arretons
$clear(simpleTimer);
 
//ajoute un évènement au bouton start
//cela relancera le timer
$('timer_start').addEvent("click", function(){
simpleTimer = timerFunction.periodical(100, Site);
});
 
//cela stoppera la période, et fait clignoter la barre
$('timer_stop').addEvent("click", function(){
$clear(simpleTimer);
$('timer_bar').highlight('#EFE02F');
});
 
$('timer_reset').addEvent("click", function(){
//pour réinitialiser: arrêtez d'abord la période
$clear(simpleTimer);
//et mettez le compteur à 0
//nous en parlerons plus après
currentCounter .set('counter', 0);
//
$('timer_display').set('text', Site.counter);
$('timer_bar').setStyle('width', 0);
});
});



 
0


Introduction aux Hashes

Créer un nouveau hash

Il y a des petites choses que vous ne connaissiez peut-être pas encore dans l'exemple précédént. Tout d'abord, nous utilisons un hash. Les Hashs sont des pairs de clé/valeur, et ils ressemblent à un tableau dans le sens où ils contiennent plusieurs objets, mais à chaque objet qu'ils contiennent est aussi affecté une clé. Avant toute chose, regardons comment construire un nouveau hash :

var hashVar = new Hash({
'firstKey': 0,
'secondKey': 0
});

Vous mettez donc la clé à gauche et la valeur à droite. Il y a beaucoup d'avantages à utiliser un système comme celui-là. Tout d'abord, vous pouvez multiplier les groupe dans un objet simple. La récupération devient plus facile et c'est génial pour conserver une organisation de vos données complexes.

.set() et .get()

Vous pouvez aussi utiliser les .set() et .get(), qui doivent maintenant être familiés, avec les clés hash. Quand vous voulez définir, vous déclarez la clé, puis la valeur à assigner. Quand vous voulez obtenir, vous déclarez juste la clé que vous voulez. C'est tout ce qu'il y a à faire.

//considérons le hash ci-dessous
//ici nous définissons le firstKey à 200
hashVar.set('firstKey', 200);
 
//ici nous récupérons la valeur de firstKey, qui est donc 200
var hashValue = hashVar.get('firstKey');

Vous pouvez aussi récupérer une valeur en vous référant à hash.NomClé :

var hashValue = hashVar.firstKey;
//revient au même que :
var hashValue = hashVar.get('firstKey');

Ajouter une nouvelle paire à un hash

.extend();

Vous pouvez ajouter un nouveau groupe de paires clé/valeur (ou plusieurs groupes) avec .extend(). Avant tout, créons un objet contenant de nouvelles paires.

//voici un objet generique
//il contient des paires de clé/valeur
//mais ce n'est pas un hash
var genericObject = {
'third': 450,
'fourth': 89
};

Si nous voulons ajouter ce groupe de paires à notre hash existant, nous appelons juste .extend(); sur le hash original.

//maintenant hashVar contient toutes les paires dans genericObject
hashVar.extend(genericObject);

Note: Toutes les clés en double seront écrasées par le second groupe. Donc, si vous avez “firstKey”: “letterA” dans le hash original, et que vous l'étendez avec “firstKey”: “letterB,” le hash produit en résultat contiendra, “firstKey”: “letterB.”

Combiner deux hashes

.combine();

Cette fonction vous permet de combiner deux hashs, et de garder les originaux s'il y a des clés en double. Autrement, cela fonctionne comme .extend.

Supprimer une paire d'un hash

.erase();

Nous avons déjà vu celui-ci auparavant. Il fonctionne de la façon dont on peut s'y attendre. Vous citez le hash, puis vous ajoutez .erase();, et enfin vous placez la clé à supprimer à l'intérieur des parenthèses :

hashVar.erase('firstKey');

Hashs et .each()

Les Hashs ont une relation spéciale avec .each(), et quand vous bouclez sur un hash, la fonction vous passera la “valeur” comme premier paramètre et la "clé" comme second paramètre - c'est comme quand vous utilisez .each sur un array et que cela inclut chaque “objet” en premier paramètre.

hashVar.each(function(value, key) {
//cela enverra une alerte pour chaque paire du hash
alert(key + ":" + value);
});

III. Conclusion du tutorial

Pour en savoir plus

C'est tout ce que nous allons voir sur les hashs pour le moment. Quand nous irons plus loin dans la série, nous aurons d'autres occasions de voir plus de possibilités d'utilisation. Mais pour le moment, j'espère que cela vous servira d'introduction au concept si ce genre de choses est nouveau pour vous. Bientôt, nous aborderons les classes, et les choses commenceront vraiment à se relier. Pour le moment, vous pouvez regarder la section sur les hashs dans les docs Mootools.

Télécharger un zip contenant tout ce qu'il faut pour débuter

Il inclut le noyau Mootools 1.2, les exemples ci-dessus, un fichier javascript externee, une page html simple et un fichier css.

Tutoriel de demain

Apprendre comment définir et configurer un slider Mootools