Fardeen GHULAM Parrain de la mafia multimédia

Tutoriel Mootools, framework Javascript gratuit

Bon les noobs, aujourd'hui nous allons voir un ptit tutoriel sur Mootools, le framework Javascript qui va te permettre de faire plein de trucs de fous et grâce auquel tu va bientôt pouvoir te la péter auprès de tes amis geeks

Oui parce que en ce moment c'est la mode les frameworks (=bibliothèque de classes spécialisées orientées objet, eh oui je t'explique tout ami noob) et il est important que tu sois au top niveau.

Je te tutoie parce que, par défaut, tu es mon ami, allez sois sympa quoi Mais ne t'inquiète pas , je ne le ferais pas souvent Allez trêve de plaisanterie, c'est parti !

Ce tutoriel est basé sur la version 0.83 de Mootools, il se peut donc que certaines choses ne fonctionnent pas avec la version 1.0 . D'autres tutoriels sur Mootools sont disponibles.

Pourquoi Mootools ?

Pour comprendre ce choix, regardons rapidement ce qui existe en ce moment (cette liste n'est pas exhaustive, c'est juste un aperçu):

• Dojo
  J'ai pas vraiment eu le temps de tester mais l'ayant déjà vu en action dans une appli d'un pote , je sais qu'elle est très puissante mais je ne saurais t'en dire plus. Si tu as des infos ,hésite pas les commentaires sont là pour ça
• Yahoo! UI Library
  Le framework de Yahoo, j'ai testé rapidement , c'est très bien documenté comme d'habitude, c'est clair avec plein d'exemples (à condition de lire de l'anglais )
  Le seul défaut que j'ai pu trouver, c'est le poids, pour faire des effets de base ça me parait trop 50ko.
  Sur ce blog, tu pourras voir des exemples très impressionnants de ce qu'il est possible de faire avec le framework de Yahoo!. En particulier cet exemple d'intégration de commentaire qui déboite est très bien faite.
• script.aculo.us
  Un des premiers framework que j'ai utilisé, très puissant, un peu trop lourd niveau poids, de belles démos sur le site, mais une documentation pas suffisament claire à mon goût.
• ByteFX
  Ce n'est pas réellement un framework , plutôt une petite librairie vraiment orienté effets visuels simples. Une documentation et un site vraiment léger, comme le poids de cette librairie
• Moo.fx
  Toute petite librairie comme ByteFX. Orientée effets visuels également. Mootools se base sur cette librairie.

Toutes ces frameworks sont très bien mais puisqu'il fallait en choisir un, que je venais justement de tester Mootools, qu'il me paraissait vraiment prometteur, puissant, souvent mis à jour avec une belle communauté derrière, je me suis dit qu'il fallait que je vous en fasse profiter.

Oui, je sais, je suis trop bon.

Présentation de Mootools

Je suppose que tu as déjà ouvert le site de Mootools dans un autre onglet de ton tout nouveau Firefox 2.0 , si ce n'est pas le cas , c'est le moment ou jamais Je te conseille même d'installer Firebug, ca te sera utile.

Tu remarqueras qu'il y a plein de blabla écrit en tout petit et en anglais, je suppose que tu ne l'a pas lu c'est pourquoi je vais t'en faire un petit resumé :

Mootools c'est un framework javascript orienté objet, très modulaire et léger. Il est compatible avec une grande majorité de navigateurs et un choix parmi plus de 15 scripts, plugins, addons est disponible.(Effets, Ajax,Drag and Drop, liste organisable, gestion de cookie et bien plus encore !)
Tres modulaire car il est possible de télécharger une version de Mootools qui correspond exactement à vos besoin avec l'outil dédié spécifique.

Alors pour bien comprendre ce que peut faire Mootools, on peut déjà avoir un aperçu des nombreuses démos disponibles sur le site . Il y en a d'autres sympas,là , ici, là et relà .

On peut voir également quelques projets plus aboutis comme :

• Slimbox, clone de Lightbox en plus puissant mais basé sur Mootools.
• Transcorner qui permet de faire des cadres arrondis sans images , qu'avec Mootools, très facilement.
• Un slider facilement modifiable et puissant.
• Un diaporama configurable.

Il suffit de regarder les sources de ces exemples pour voir la relative simplicité d'utilisation de Mootools.

Bon il est temps de s'y mettre...

Télécharger Mootools :

Pour commencer il nous faut télécharger Mootools.

Voila comment se présente l'outil de téléchargement de Mootools dans lequel on peut choisir quels sont les scripts que nous voulons.

Il y a 4 catégories :

• Main Lib : La librairie indispensable
• Native Scripts : composé de 4 scripts afin de gérer les fonctions, les tableaux, les chaines et les éléments
• Addons : Fx.js permet de gérer les effets de base, Dom.js les éléments DOM, Ajax.js pour pouvoir faire le malin avec des chargements de données sans rechargement de page et enfin Drag.js pour gérer les Drag d'un objet.
• Plugins : Windows.js pour avoir des infos sur la fenêtre, Cookie.js pour gérer tres facilement les Cookies, Json.js pour la syntaxe Json mais je connais pas trop alors je ne préfere pas trop m'étendre, Sortables pour pouvoir organiser des listes par exemple, FxPack, FxUtils et Fxtransitions pour des effets graphiques plus avancées, Tips.js pour les infobulles et Accordion.js permet les affichages en accordéons.

Il est à noter que certains addons ou plugins dépendent d'autres scripts qui seront alors automatiquement cochés.
Pour tester une première fois je vous conseille de tout cocher.

Une fois les choix effectués il est possible de récupérer le fichier Javascript en version plus ou moins compressée. Plus on compresse, plus le fichier Javascript généré devient illisible par un éditeur. On ne va pas avoir besoin de modifier le fichier alors autant compresser au maximum. (version non compressée : 90ko , compressée : 24ko)

Utilisation de Mootools par la pratique : Création d'une galerie

Pour comprendre comment utiliser Mootools , mettons nous en situation

Nous allons faire une jolie galerie avec au programme : un effet accordéon, un peu d'ajax, des infobulles,du slimbox avec une petite pincée de CSS et de HTML. Voila le résultat final qu'on va devrait obtenir :

J'ai mis des bonnasses pour ce tutoriel mais vous êtes pas obligé de faire tout comme moi . Disons que c'est plus motivant pour travailler

Allez c'est parti pour 7 étapes de folies !

Etape 1 : On définit notre menu accordéon en HTML

Alors pour commencer on va créer un fichier tutoriel_mootools.html dans lequel on va inclure notre fichier Javascript fraichement téléchargé. (je suppose que les 2 fichiers sont dans le même répertoire, on va faire au plus simple)

<!-- inclusion du fichier Mootools-->

<script src="mootools.release.83.js" type="text/javascript"></script>

On y ajoute le code de base HTML pour notre menu de navigation (je suppose que tu sais au moins les bases, sinon tu peux toujours aller voir chez là pour rattraper ton retard).

  <!-- ici notre barre de navigation en accordeon-->

 
<h4 class="toggler"><a href="#cat_blonde">Blonde (3)</a></h4>
 
<ul>
<li><a href="javascript:afficher('pamela');">Pamela</a></li>
<li><a href="javascript:afficher('jordan');">Jordan</a></li>
<li><a href="javascript:afficher('ophelie');">Ophélie</a></li>
</ul>
<h4 class="toggler"><a href="#cat_brune">Brune (2)</a></h4>
 
<ul>
<li><a href="javascript:afficher('jessica');">Jessica</a></li>
<li><a href="javascript:afficher('jennifer');">Jennifer</a></li>
</ul>
<h4 class="toggler"><a href="#cat_rousse">Rousse (1)</a></h4>
 
<ul>
<li><a href="javascript:afficher('julia');">Julia</a></li>
</ul>
<!-- ici notre conteu mis a jour en ajax-->

 

On obtient donc ce résultat pour l'étape 1. N'hésite pas à regarder les sources (clic droit -> voir source).

Pour l'instant la fonction afficher() n'est pas encore définie ni les classes CSS. Les classes serviront pour les CSS mais également pour l'effet accordéons que nous verrons dans l'étape 3 . Le div contenu servira pour l'étape 4.

Etape 2 : Rendons le menu un peu moins moche

On ajoute un petit peu de CSS :

 /* rendons notre barre de nav un peu plus belle*/
/* rendons notre barre de nav un peu plus belle*/
#barre_navigation {
width : 200px;
padding: 0 ;
margin : 0;
float : left ;
}

#barre_navigation h4{
padding: 4px 10px ;
font-size: 12px;
font-weight: normal;
text-transform: uppercase;
color: #FFF;
background: #3399ff;
cursor: pointer;
margin : 0 0 1px 0 ;
}

#barre_navigation a{
text-decoration : none;
}

#barre_navigation ul{
padding: 4px 2px 4px 10px;;
font-size: 11px;
color: #FFF;

}

#barre_navigation ul li{
list-style-type : none;
padding : 2px 0 2px 0;
margin : 0;
}

#barre_navigation ul li a {
text-decoration: none;
color: #FFF;
}

#barre_navigation ul li a:hover {
text-decoration: none;
color: #FFF;
background-color: #FF3366;
}

On obtient ce résultat pour l'étape 2.

Etape 3 : On ajoute du Javascript, ca bouge !

On rentre enfin dans le vif du sujet . Donc là nous allons ajouter le code Javascript nécessaire pour la mise en place de l'effet accordeon pour notre menu. J'ai placé ce code à la fin du fichier.

//pour commencer avec les elements fermés au départs
var stretchers = $$('div.accordeon');
stretchers.each(function(item){
item.setStyles({'height': '0', 'overflow': 'hidden'});
});

//au chargement de la page
window.onload = function(){

var togglers = $$('h4.toggler'); //on met dans la variable togglers tous les div H4 de la page appartenant a la classe toggler. C'est la syntaxe $$ de element de Mootools qui permet cela très facilement

var bgFx = []; //variable pour la gestion des couleurs de fond

togglers.each(function(toggler, i){
toggler.defaultColor = toggler.getStyle('background-color');

//fx creation
bgFx[i] = new Fx.Color(toggler, 'background-color', {wait: false});
});

// creation de l'effet accordeon
//syntaxe : new Fx.Accordion(quel_div_visible, quel_div_a_afficher, {options eventuelles});
var myAccordion = new Fx.Accordion(togglers, stretchers, { opacity: false, start: false, transition: Fx.Transitions.quadOut,

onActive: function(toggler, i){
bgFx[i].toColor('#FF3366'); //quand un element est actif
toggler.getFirst().setStyle('color', '#fff');
},

onBackground: function(toggler, i){
bgFx[i].clearTimer(); //quand un element n'est actif
toggler.setStyle('background-color', toggler.defaultColor);
toggler.getFirst().setStyle('color', '#222');
}
});

//permet de reouvrir directement le bon element
//grace à l'url test.html#cat_a_ouvrir
function checkHash(){
var found = false;
$$('h4.toggler a').each(function(link, i){
if (window.location.hash.test(link.hash)){
myAccordion.showThisHideOpen(i);
found = true;
}
});
return found;
}

if (!checkHash()) myAccordion.showThisHideOpen(0);

};

On obtient le résultat de l'étape 3.

J'ai commenté brievement le code afin que tu puisses bien tout comprendre mais sans le surcharger. Je détaillerais certains points au fur et à mesure des étapes. Examinons certaines lignes importantes :

var stretchers = $$('div.accordeon');
var togglers = $$('h4.toggler');

Cette syntaxe vraiment puissante permet grâce à la classe Element de Mootools de pouvoir accéder à n'importe quel élément(div,a,b,h1,span...) de la page, peu importe le navigateur utilisé.

Il existe de nombreux moyens d'accéder à un élement comme par exemple :

$S('a') //renvoie un tableau de tous les élements < a > de la page
$S('a', 'b') //renvoie un tableau de tous les élements < a > et < strong >
$S('#monElement') //tableau de tous les éléments avec un id='monElement'
$S('#monElement a.maClasse') //tableau avec tous les éléments < a class="maClasse" > contenus dans l'element avec un id='monElement'
$E('a', 'monElement') //renvoie le Premier élement < a > de l'élement avec un id='monElement'

Cette liste est loin d'être exhaustive mais elle vous permet de voir la puissance de Mootools pour la sélection des éléments. N'hésitez pas à regarder la documentation de Mootools très bien faite.(en anglais)

Etape 4 : Ajoutons un peu d'ajax

Maintenant que notre menu est fonctionnel , il est temps de faire apparaitre nos images. Un repertoire /images contiendra nos images en version miniature et le repertoire /images_big celle en taille normale. Ces deux dossier étant dans le même répertoire que notre fichier tutoriel_mootools.html .

Tout d'abord nous allons créer notre fichier PHP (recuperer_photo.php) qui va récuperer les images que nous souhaitons :

//petit script PHP qui permet de récuper l'image selon le parametre prenom entré
$repertoire = opendir("./images");
//on parcourt le dossier images
while ($entree = readdir($repertoire)) {
if ($entree != "." && $entree != ".." && strstr($entree,$_POST['prenom'])) //si le nom du fichier contient le prenom
$tFichiers[] = filemtime("./images/".$entree)."+".$entree;
}
//on ferme le repertoire
closedir($repertoire);
//on les range pr le fun 
rsort($tFichiers);

//on les affiche
for ($cpt = 0; $cpt < sizeof($tFichiers); $cpt++) {
$tVals = explode("+", $tFichiers[$cpt]);
echo "<a title="Image : " rel="lightbox" href="http://fardeen.biz/wp-admin/images_big/"><img src="http://fardeen.biz/wp-admin/images/$tVals%5B1%5D" alt="" /></a>";
}

Ceci étant fait, nous allons ajouter encore un peu de code javascript pour afficher les images lorsqu'on cliquera sur un des éléments du menu.

//fonction qui va afficher les photo
function afficher(prenom) {
//syntaxe : ajax(quel_fichier, {options})
//postBody est le parametre envoyé au fichier PHP
new ajax('recuperer_photo.php',{postBody:'prenom='+prenom, onComplete: photoFinished, update: 'contenu',method: 'post'}).request();
}
//fonction appelée à la fin de la requete ajax de la fonction afficher()
function photoFinished(request){
alert('chargement photo fini  ');
}

Nous obtenons ce résultat pour l'étape 4.

On peut voir que la fonction Ajax est très facile à utiliser.

Etape 5 : Affichage des photos un peu plus esthétique

On ajoute un peu de CSS :

#contenu {
background-color: black;
}

#contenu img{
padding : 1px ;
border : 1px solid #FF3366;
margin: 0px 10px 0px 10px;
}

Et on remplace la fonction alert par un petit effet de clignotement :

//on definit un effet de couleur pour la couleur de fond du div contenu
var effetCouleur = new Fx.Color('contenu', 'background-color');

et on remplace la fonction photoFinished() :

function photoFinished(request){
//on lance un effet de changement couleur lorsque chargement est terminé
//il est important de bien affecté une valeur de départ au div contenu
effetCouleur.fromColor('#ff3366');
//alert('chargement photo fini  ');
}

On obtient ce résultat pour l'étape 5. On a bientôt fini , courage

Etape 6 : Des ptites infobulles pour le plaisir

Pour ajouter des infobulles , il nous suffit d'ajouter ce code à la fonction photoFinished() . Ce code n'est pas placé dans la fonction par hasard, lorsque toutes les liens des images sont chargés on applique ensuite les infobulles.

//pour les infobulles
//syntaxe new Tips(quelElement,{options})
//on place ici la fonction pour l'appliquer quand toutes les images sont chargées
var myTips = new Tips($ES('a','contenu'), {
maxTitleChars: 50, //des titres avec une longueur max de 50
maxOpacity: .85, //un peu de transparence
className: 'infobulle' //quel classe CSS pour notre petite infobulle
});

On ajoute la CSS correspondante pour notre infobulle :

.infobulle{
background-color: #FF3366;
padding : 6px;
border : 1px solid #000;
font: lighter 10px/1.3 Verdana,Arial,sans-serif;
text-decoration: none;
text-align: center;
}

Et voila le résultat pour cette étape 6.

La fonction pour l'affichage des infobulles est aussi extremement facile à mettre en place.

Etape 7 : La touche finale : Slimbox

Quand on clique sur une des images, on quitte la gallerie. C'est ergonomiquement intolérable !

Pour remédier à cela nous allons ajouter Slimbox très facilement. Tout d'abord il suffit de télécharger ce script basé sur Mootools sur le site de son auteur ou directement ici. (script de 7 Ko, très léger) Puis on va le décompresser à la racine de notre dossier de travail.

On inclus les fichiers nécessaires :

<script src="js/slimbox.js" type="text/javascript"></script>

On ajoute le code Javascript pour l'affichage avec Slimbox :

//affiche une image avec l'effet lightbox de slimbox
function montrer_image(image,titre) {
Lightbox.show(image, titre);
}

Et enfin on va changer légerement notre fichier PHP pour qu'un clic sur une image appelle notre fonction Javascript montrer_image();

echo "<a title="Image : " rel="lightbox[photo]" href="javascript:montrer_image('images_big/'.$tVals[1].','.$tVals[1].';"><img src="/images/$tVals[1]" alt="" /></a>";

Nous obtenons enfin notre résultat final .

 

Conclusion

Comme vous avez pu le constatez grâce à Mootools il est assez facile d'obtenir des applications riches sans trop d'efforts.

L'objectif n'étant pas la réalisation de la galerie (il en existe déjà tellement) mais plutôt l'apprentissage de Mootools, il reste evidemment de nombreuses améliorations possibles à apporter à cette galerie comme des effets graphiques avancés, une gestion de drag and drop et même eventuellement une gestion des cookies pour sauvegarder un caddie d'image par exemple. Je viendrais peut-être ajouter ces améliorations à ce tutoriel si il est apprécié et peut-être qu'ensemble, on fera LA galerie du web 4.0

Edit : la suite est disponible !

D'ailleurs si vous avez apprécié ou pas ce tutoriel, je vous remercierai de m'en faire part par le biais des commentaires. Ca me motivera en refaire d'autre parcque bordel c'était long . Vous pouvez telecharger toutes les sources de ce tutoriel . (l'archive contient egalement les fichiers de la suite de ce tuto)

PS : Si j'ai fais des erreurs , des oublis , n'hésitez pas également à commenter pour améliorer ce tutorial.

Bises à tous

Un nouveau tutoriel d'une application Google Map réalisée avec PHP et Mootools existe maintenant , il reprend en partie ce tutoriel mais dans le cadre d'une application avec Google Map.
Il existe maintenant la suite de ce tutoriel qui aborde le drag and drop et la gestion d'un caddie grâce au cookie.