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.
Billets en relation
- Sortie de Mootools 1.1 et liens mootools
- Aide memoire Mootools
- Tutoriel Mootools 1.0 : Slider pour changer largeur interface
- Mootools, liste de plugins et nouveautés
- Tutoriel icones liens externes avec Mootools
