Fardeen GHULAM Parrain de la mafia multimédia

Sortie de Mootools 1.0 ! Quoi de neuf ?

Enfin la sortie de la nouvelle mouture de Mootools ! Pour cette occasion le site de Mootools fait fait peau neuve et la documentation aussi d'ailleurs

Alors quelles sont les nouveautées au programme ? Pour le savoir, clique sur lire la suite

Pour ceux qui debarquent et ne connaissent pas encore Mootools, je vous conseille la lecture de ces billets, en particulier celui-ci.

De nouvelles classes ont fait leur apparition comme Utility.js, Event.js, Common.js, Hash.js ainsi que d'autres que je vais aborder brievement dans la suite. (pour certains des exemples qui suivent je me suis inspiré de cet article en anglais très bien fait)

Exemple commun

On commence par déclarer une variable que je réutiliserais tout au long de la presentation des nouvelles fonctionnalités de Mootools 1.0 .

//on declare un tableau avec des donnees
var monTableau = {
bombasses: ['Jennifer', 'Lorie', 'Lolita'],
beauxgosses: ['George', 'Sim', 'Carlos'],
};
//on affecte le tableau a notre variable donnees, cette variable sera reutilisé dans d'
var TAB = monTableau ;

Classe Utility

C'est pas vraiment une "vraie" classe, elle regroupe plutot quelques petites fonctions utiles comme $pick,$type, $random , window.xxx , plus d'infos ici.

//Nouveau window.xxx
//window.ie	mis a vrai si le navigateur est n'importe quel Internet Explorer
//window.ie6	mis a vrai si le navigateur est Internet Explorer 6
//window.gecko mis a vrai si le navigateur est Mozilla / Gecko
//...
if(window.ie6){ //si on est sur IE6
//$pick: retourne le premier argument s'il est definit, sinon le deuxieme
var personne = $pick(TAB.caexistepas, TAB.beauxgosses); // Comme TAB.caexistepas n'est pas definie, personne == TAB.beauxgosses
//$type: Retourne le type de la variable
var typePersonne = $type(personne); //on obtient  array (tableau)
var personneAuHasard = TAB.bombasses[$random(0,2)]; //  Choisis une bombasse parmis les 3 au hasard
}

Classe Event

Cette classe pemet de gérer les evenements et c'est vraiment pas mal comme on peut le voir dans l'exemple suivant.

//capture l evenement on keydown du champ textarea monTextArea
$('monTextArea').onkeydown = function(e){
var evt = new Event(e);
alert(evt.target); // => affiche la cible, donc monTextArea

//si on appuie sur echap
if(evt.key == 'esc') {
//on ferme la fenetre par ex
}else if(evt.control && evt.alt && evt.key == 'delete'){
//si on appuie sur ctrl+al+supp , on affiche un gestionnaire de tache par ex
}
};

//fonction bindWithEvent , permet d'affecter un evenement a une fonction
function maFonction(event){
alert(event.clientx) //retourne la coordonnees X de la souris
};
monElement.onclick = maFonction.bindWithEvent(monElement);

Classe Hash

Permet de faire un Hash (j'ai pas trouvé de traduction dont je sois sur, alors j'laisse ce nom de drogue ) d'un objet (permet une manipulation plus simple)

//on creer un Hash de notre objet qu'on avait creer precedemment
var dataHash = new Hash(TAB); //faire $H(TAB) revient au meme
//s'il la cle bombasses existe
if(dataHash.hasKey('bombasses')){
//on recupere les donnees
var bombasses = dataHash.get('bombasses'); // on recupere  ['Jennifer', 'Lorie', 'Lolita']
}

//on recupere les cles du Hash
var hashKeys = dataHash.keys(); // => ['bombasses', 'beauxgosses']
//on vide notre hash (pas de jeu de mot malvenu svp)
//on parcourt les cles
for(var key in hashKeys){
key = hashKeys[key];
//mootools etends la classe Array donc il faut
//passer les fonctions
if($type(key) == 'function') break;
dataHash.remove(key);
}
//on verifie que le hash est vide
dataHash.empty();// renvoit vraie

//exemple de la doc , pas besoin de traduire je pense
var hash = new Hash({a: 'hi', b: 'world', c: 'howdy'});
hash.remove('b'); // b is removed.
hash.set('c', 'hello');
hash.get('c'); // returns 'hello'
hash.length // returns 2 (a and b)

Classe Color

La classe Color permet tout un tas de fonctions spécifiques à la couleur :

var noir= new Color('#000');
var violet = new Color([255,0,255]);
// melange du noir avec du blanc(#fff) et violet, avec 10% de la nouvelle couleur a chaque fois
var violetfonce= noir.mix('#fff', violet , 10);
//on affecte la couleur a monDiv
$('monDiv').setStyle('background-color', violetfonce);
//quelques autres fonctions pour la couleur
//invert, setHue, setSaturation, setBrightness ...

Classe Common

La classe Common regroupe quelques fonctions communes. La fonction chain est vraiment cool :

//on definit un effet d'opacite sur un element
var myFx = new Fx.Style('element', 'opacity');
//on definit une 'chaine' d'actions grace a la fonction chain
myFx.start(1,0).chain(function(){
myFx.start(0,1);
}).chain(function(){
myFx.start(1,0);
}).chain(function(){
myFx.start(0,1);
});
//l'element va apparait et disparaitre trois fois

Classe XHR

Je ne comprend pas trop l'utilité pour l'instant de cette classe qui fait la même chose que la classe Ajax.

//fonction lorsque la requete est completé
var showSucces = function(request){
alert(request)
};

//handler function when something went wrong
var showFailure = function(request){
alert(request)
};

//sending a XMLHTTPRequest
var testXHR = new XHR(
{
method: 'get',
onSucces: showSucces,
onFailure: showFailure,
}).send('http://example.com/script.php','mootools=wicked_cool&favorite=solutoire.com'

Classe Asset

Cette classe là, je l'attendais avec impatience Elle permet de charger dynamiquement des images, CSS ou fichiers javascripts :

var imgCpt = 1; //compteur image
//la fonction montreProgression est appelée a chaque fois qu'une image est chargee
var montreProgression = function(){
alert(imgCount + ' image(s) chargées!');
imgCpt++;
};

var img = new Array(); //tableau d'image utile pour la fonction
//la fonction chargementTermine est appele lorsque toutes les images sont terminees
var chargementTermine = function(){
//on injecte les images chargées
//on parcourt le tableau d'images
for(var item in img){
if($type(img[item]) == 'function') break; //on verifie que c'est pas une fonction
img[item].injectInside('monElement'); //on affiche les photos ds le div monElement
}
};

//va afficher un alert a chaque image chargee
//on lance le prechargement de 2 images : testimg1.jpg et testimg2.jpg
var img = new Asset.images(['testimg1.jpg','testimg2.jpg'],{
onProgress: montreProgression ,
onComplete: chargementTermine
});

//on peut faire la meme chose avec une seule image (pas de s  Asset.image)
//new Asset.image('/images/myImage.png', {id: 'myImage', title: 'myImage', onload: myFunction});
//avec les CSS
//new Asset.css('/css/myStyle.css', {id: 'myStyle', title: 'myStyle'});
//avec les JS
//new Asset.javascript('/scripts/myScript.js', {id: 'myScript'});

Les plugins

De nouveaux plugins sont dorénavant integrés avec cette version de Mootools (j'en avais parle ici) comme le slider, le scroller, le smoothscroll . Dommage que le calendrier ne soit pas integré mais ça ne saurait tarder puisque la version 1.1 est déjà sur les rails

J'en profite pour également vous filez Mootable, plugin qui permet de générer un tableau classable par colonne, redimensionnable ... Puissant mais en cours de developpement.

Conclusion

Voila pour un aperçu rapide de ce nouveau Mootools 1.0, il y a le gros du changement, les details vous les decouvrirez tout seuls, comme des grands.

Là les amis, vous êtes au top de la Mootools fraicheur ! Alors merci qui ?

Si vous découvrez des trucs chanmé biens sur la nouvelle version de Mootools, hésitez pas à partager dans les commentaires. Vive la Net Solidarité !

PS: J'en chie ai du mal avec mon clavier qwerty alors désolé pour le manque d'accents.