Mootools est l’un des nombreux framework JavaScript qui existe. Comme tout framework, il permet de simplifier la tâche des développeurs. En effet, un framework a pour but de définir un environnement de travail en proposant un panel de fonctions (ou de classes dans le cas de la POO). Cet environnement de travail permet ainsi d’éviter les taches répétitives et contraignantes, simplifiant considérablement le développement. Chacun des frameworks Javascript va donc apporter son environnement de travail. Certains sont extrêmement simple et léger en proposant juste quelques fonctions supplémentaires, d’autres sont bien plus complet en offrant un largue éventail de classes et de méthodes. Et Mootools dans tout çà ? Et bien Mootools, n’est ni le plus simple, ni le plus complet, mais il me semble que c’est le plus facile à prendre en main. Comme vous allez le voir, ce framework va considérablement nous simplifier la vie à l’aide de ces classes. Oui, je l’ai pas encore dit mais Mootools est un framework orienté objet (pas la peine de paniquer, vous verrez). Pour une liste plus complète des frameworks existants, merci de se reporter à la fin de l’article.

Où trouver Mootools ??

Bien sûr, vous pourrez trouver Mootools sur leur site web dans la section download. Vous pouvez alors choisir trois types de compression. Non, ça change rien à Mootools, c’est juste que le fichier sera plus ou moins lourd ce qui influencera la vitesse de chargement. Par contre, ça devient parfois illisible mais cela importe peu sauf si vous souhaitez voir comment c’est fait et toucher un peu au cœur de Mootools, (chose que je vous déconseille) dans ce cas prenez la version non compressée. Mais pour récupérer et utiliser Mootools sur votre site, il existe une autre solution : « AJAX Libraries API » par Google. ll vous suffit alors d’insérer le petit bout de code qui suit entre vos balises head et le tour est joué :

<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools-yui-compressed.js" type="text/javascript"><!--mce:0--></script>;

Actuellement, la dernière version stable de Mootools est la 1.2.4. Mais n’hésiter pas à prendre là dernière version de sortie. Vous la trouverez sur la page de la documentation de librairies AJAX. Si vous ne comptez jamais aller toucher au cœur de Mootools, je vous recommande d’utiliser la seconde méthode (et oui, ils sont fort chez Google).

Récupérer un élément dans le Dom :

Pour sélectionner un élément dans le Dom, Mootools propose 2 fonctions essentielles.

• $ : La fonction dollar est l’équivalent de document.getElementById. C’est juste une manière d’écrire les choses pour aller plus vite. Cette fonction retourne un élément.
• $$ : La fonction double dollars fonctionne un peu différemment. Elle prend en argument un sélecteur, comme en CSS, afin de déterminer les éléments à récupérer. Elle retourne par conséquent un tableau d’élément. (Mootools appel ça une collection, mais vous verrez qu’à part quelques méthodes supplémentaires, c’est comme un tableau)

Rien de mieux que quelques exemples pour bien comprendre comment ça fonctionne : La fonction $

<div id="texteImportant">
	Ceci est très <strong>Important</strong></div>

Code html

$("texteImportant").set('text', "Hello Word");

Code javascript

Voir le résultat

Voici un exemple d’utilisation de la fonction $. Comme vous pouvez le voir, le contenu a changé lors de l’exécution du code pour devenir « Hello Word ». Félicitations, vous avez fait votre Hello Word avec Mootools !! La fonction $$

<div class="bordureRouge">
	J'ai pour classe "bordureRoute"</div>
<div class="bordureNoire">
	Moi, j'ai pour classe "bordureNoire"

<div class="bordureRouge">
		Et moi, j'ai la classe "bordureRouge"</div>
</div>
<div class="bordureBleue">
	Quant à moi, j'ai la classe "bordureBleue"

<div class="bordureNoire">
			Pour moi, c'est la classe "bordureNoire"</div>
</div>
<div id="monElement">
	Quant à moi, j'ai pas de classe

<div class="bordureNoire">
			Mais moi, j'ai ai une et c'est "bordureNoire"</div>
</div>

Code html

// On ajoute une propriété CSS sur les élément .bordureRouge
$$(".bordureRouge").setStyle('border', "red 3px solid");

// On ajoute une bordure noir sur les éléments .bordureNoire
// Mais seulement ceux contenu dans les éléments .bordureBleue
// et #monElement
$$(".bordureBleue .bordureNoire", "#monElement .bordureNoire").setStyle('border', "black 3px solid");

Et le code Javascript qui va avec

Voir le résultat

Comme vous l’avez remarqué, un élément ayant une classe « bordureNoire » n’a pas été affecté par l’ajout du style. Et oui, c’est comme en CSS !!! Pas trop compliqué jusqu’à présent ?? Remarque : Il existe aussi d’autres manières pour récupérer un élément dans le Dom. Patience, nous les verrons plus tard. Bon, tout çà c’est bien joli, mais on pour l’instant on peut pas faire grand chose.

Du style sur votre site :

Pour rajouter du style à un élément, en html, on a 2 solutions :

• Ajouter directement le CSS sur l’élément à l’aide de l’attribut style.
• Ajouter un attribut class sur l’élément et définir la classe CSS dans un fichier externe ou entre des balises style dans le head de votre html

Avec Mootools, c’est pareil. Bon, vous avez déjà pu voir la méthode setStyle dans l’exemple précédent. Mais ce n’est pas la seule méthode pour customiser votre site !! Sur un élément, vous pouvez aussi ajouter directement du style à l’aide de de la méthode setStyles (attention, cette méthode prend un objet au format JSON comme argument), ou bien vous pouvez ajouter ou supprimer des classes CSS à l’aide des méthodes addClass et removeClass. Il est également possible de récupérer le style d’un élément. Pour cela, il existe les méthodes getStyle et getStyles. Enfin, pour vérifier qu’une classe est bien présente sur un élément, il existe la méthode hasClass. Donc pour résumer :

• setStyle : Définit une propriété CSS.
• setStyles : Définit plein de propriétés CSS d’un seul coup.
• getStyle : Retourne la valeur d’une propriété CSS.
• getStyles : Retourne un objet JSON qui contient toutes les propriétés demandées.
• hasClass : Indiquer si une classe existe sur l’élément, retourne un booléen (true / false).
• addClass : Ajoute une classe CSS sur l’élément.
• removeClass : Supprime une la classe CSS sur l’élément

Voici un exemple pour illustrer cela :

<div id="monElement" class="bordureRouge">
	J'ai pour classe "bordureRoute"</div>
<div class="bordureNoire">
	Moi, j'ai pour classe "bordureNoire"

<div class="bordureRouge">
		Et moi, j'ai la classe "bordureRouge"</div>
</div>
<div class="bordureBleue">
	Quant à moi, j'ai la classe "bordureBleue"

<div class="bordureNoire">
			Pour moi, c'est la classe "bordureNoire"</div>
</div>

Code html

/* Ajout de marge pour faciliter la lecture */

.bordureNoire, .bordureRouge, .bordureVerte, .bordureBleue
{ margin: 0.5em; padding: 0.5em 1em; }

/* Quelques bordures */
.bordureNoire { border: solid 3px black; }
.bordureRouge { border: solid 3px red; }
.bordureVerte { border: solid 3px green; }
.bordureBleue { border: solid 3px blue; }

/* Quelques fonds */
.fondNoire { background: black; }
.fondRouge { background: rgb(255,120,120); }
.fondVerte { background: rgb(140,245,140); }
.fondBleue { background: rgb(120,180,255); }

Code CSS

// On vérifie les classes présentent sur #monElement
alert( "mon Element a t il :\n"
	+ "Une bordure noir : " +
		$("monElement").hasClass('bordureNoire') + "\n"
	+ "Une bordure rouge : "
		+ $("monElement").hasClass('bordureRouge') + "\n"
	+ "Et quelle est l'épaisseur de cette bordure ? "
		+ $("monElement").getStyle('border-width') + "\n" );

// On ajoute la classe bordureVerte.
// On peut appliquer une méthode sur
// chaque élément de la collection
$$('.bordureBleue').addClass('bordureVerte');

// On ajoute ici un fond bleu et on souligne tout le texte
$$('.bordureNoire').setStyles({
	'background': 'rgb(120,180,255)',
	'text-decoration': 'underline'
});

// On peut aussi enchaîner différentes actions à la suite
// On supprime dans un premier temps la classe bordureRouge
// On ajoute la classe fondRouge
// On définie la taille de la police à 20 pixels
// Et pour finir on change les marges de l'élément
$$(".bordureRouge").removeClass("bordureRouge")
	.addClass('fondRouge')
	.setStyle('font-size', '16px')
	.setStyles({
		margin: "2em",
		padding: "0.5em 1.5em"
	});

Code Javascript

Voir le résultat

Vous voyez, c’est simple comme tout !!! Remarque : il existe aussi une autre méthode qui peut s’avérer pratique. C’est toggleClass. Elle prend comme argument le nom d’une classe. Elle va supprimer la classe si celle-ci est présente ou la rajouter si elle est absente. Cela peut s’avérer pratique si vous souhaiter masquer / afficher un élément. Bon, on peut pas dire que pour l’instant c’est vraiment très dynamique… J’entends déjà mauvaises langues me dire que c’est de l’arnaque ce tuto… Pas de panique !! Vous allez voir avec les événements, ça va clignoter de partout !!

Les événements :

La méthode addEvent est l’une des méthodes que vous allez sans doute le plus utiliser par la suite. Elle permet d’attacher un événement sur un élément. Grâce à cela, vous pouvez déclencher un événement lors du click sur l’élément. Tout les événements que vous connaissez sont bien évidement disponible. Il suffit juste de supprimer le « on » qui précède et le tour est joué !! Si vous souhaitez attacher plusieurs événements, je vous conseille alors la méthode addEvents Mootools propose aussi certains événements qui n’existe pas nativement dans Javascript. C’est le cas de mouseenter, mouseleave et mousewheel. Voici un exemple de ce que l’on peut faire grâce aux événements.

<a id="monElement" href="#">Clique moi</a>
<a id="monElementCopain" href="#">Remettre à zéro mon copain !!</a>
<div id="monAutreElement">Survole moi</div>

Code html

/* On ajoute la main lorsque l'on est sur les liens */
#monElement, #monElementCopain { cursor: pointer; }

/* On ajoute un peu de style sur le second élément
afin que celui-ci soit bien visible */
#monAutreElement {
	background: rgb(120,180,255);
	width: 100%;
	height: 200px;
	margin: 1em;
	line-height: 200px;
	text-align: center;
	font-size: 18px;
}

Code CSS

// On ajoute un événement sur #monElement
$('monElement').addEvent( 'click', function() {
	// this représente ici l'élément #monElement

	// retrieve permet de récupérer une variable
	// stocké dans le registre de l'élément.
	var nombreDeClick = this.retrieve('nombreDeClick', 0) + 1;

	// set avec le premier argument étant "text"
	// permet de modifier le contenu de l'élément
	this.set("text", "J'ai déjà été cliqué " + nombreDeClick + " fois");

	// store permet de définir une variable
	// stocké dans le registre de l'élément.
	this.store('nombreDeClick', nombreDeClick);
});

// Ajout d'un événement sur #monElementCopain
$('monElementCopain').addEvent( 'click', function() {
	// this représente l'élément #monElementCopain

	// eliminate permet de supprimer une variable
	// stocké dans le registre de l'élément
	$('monElement').set('text', "Je suis remis à zéro par mon copain")
	.eliminate('nombreDeClick');

	// Si on passe par $('monElement'), c'est parce que
	// le registre est sur l'élément #monElement
});

// Ajout de multiple événement sur #monAutreElement
$("monAutreElement").addEvents({
	'mouseenter': function() {
		alert("Tu viens de me rentrer dedans !!");
		this.setStyle('background', 'rgb(245,180,120)');
	},
	'mouseleave': function() {
		// set avec le premier argument html permet de
		//modifier le contenu en y injectant du html
		this.setStyle('background', 'rgb(120,180,255)')
		.set('text', "Non, t'en va pas !!**sniff**");
	},
	'mouseover': function (ev) {
		// ev est l'événement qui a été déclenché.
		// C'est un objet qui permet de récupérer des
		// informations comme la touche qui vient d'être
		// pressé ou la position du curseur

		var x =  ev.client.x;
		var y = ev.client.y;
		this.set('text', "la position du curseur est :  x = "+ x +" / y = "+ y +"");
	}
});

Code Javascript

Voir le résultat

Alors, je vous avais dit que ça clignoterait de partout !!!

L’événement DomReady

Bon, pour l’instant, je vous ai présenté quelques événements que l’on peut appliquer sur n’importe quel élément. Cependant, je vous en ai caché un qui est pourtant essentiel !! Vous l’avez sûrement compris, il s’agit de l’événement DomReady. Cette événement est particulier puisqu’il ne s’attache qu’à l’élément window. Il est déclenché au moment où le Dom est chargé. J’entends déjà quelques personnes sceptiques qui se disent « Et mais c’est la même chose que l’événement (on)Load, je vois pas de différence… ». Détrompez-vous !! Cet événement est différent de l’événement Load. L’événement DomReady se déclenchera lorsque le Dom sera chargé alors que l’événement Load se déclenchera une fois que toute la page sera chargée, ce qui comprend, le Dom et les images.

<div id="eventDomReady">Le dom n'est pas encore chargé</div>
<div id="eventLoad">La page n'est pas encore chargé</div>
<div class="center">
	<img title="Mon image" src="mon-image-tres-lourde.jpg" alt="Mon image" /></div>

Code html

// Événement qui se déclenchera lorsque le Dom
// aura été chargé
window.addEvent('domready', function() {
	$('eventDomReady').set('text', 'Le dom est chargé');
});

// Événement qui se déclenchera lorsque la page
// aura été chargé
window.addEvent('load', function() {
	$('eventLoad').set('text', 'Le page est chargée');
});

Code Javascript

Voir le résultat

Vous avez compris l’idée ? C’est assez simple, au final… Mais pourquoi cet événement est-il si important ?? Ah, voilà, une question intéressante !! Cet événement est très important parce que c’est au déclenchement de cette événement que l’on pourra modifié notre page grâce à Mootools en lui donnant du style et du dynamisme. En effet, on ne peut agir sur les éléments du Dom que si ceux-ci sont bien présent dans le Dom !!

Naviguer dans le Dom

Pour ceux d’entre vous qui n’aiment pas le bateau, rassurez-vous, il n’y a rien à craindre !! Et non, personne va se noyer (en tout cas, j’espère que ce ne sera pas dans mon discours) Bon, pour trouver un élément, vous savez déjà l’essentiel. Mais pour se déplacer, c’est autre chose. On va voir comment naviguer sur une mer en furie avec les méthodes que Mootools nous offre. Tous d’abord, commençons par les méthodes getElement et getElements. Pourquoi ?? Euh, parce que c’est la plus simple à utiliser. Comme la fonction $$, ces méthodes prennent en arguments un sélecteur. Elles vont chercher parmi les descendants de l’élément courant tout ceux qui répondent au critère du sélecteur. getElements retournera tous les éléments dans un tableau tandis que getElement retournera uniquement le premier élément qui correspond. Une autre méthode vous sera aussi parfois utile, c’est la méthode getParent. Elle fait exactement le contraire de getElement !! Hein, comment ça le contraire ?? Et bien, au lieu de chercher parmi les descendants (les enfants quoi…) de l’élément courant, elle regardera parmi les parents, c’est à dire les éléments plus haut dans le Dom. De même, getParents est l’inverse de getElements. Vous pouvez aussi récupérer le premier et le dernier enfant de l’élément courant à l’aide de la méthode getFirst et getLast. Vous pouvez aussi leur passer un sélecteur si vous le souhaitez mais dans la majorité des cas, vous verrez que c’est totalement inutile. Enfin, une toute dernière méthode pourra vous être utile, c’est la méthode hasChild. Par rapport aux autres, méthodes, elle ne vous permettra pas de vous déplacer dans le Dom (Pas trop triste j’espère). hasChild fonctionne un peu différemment des autres méthodes puisqu’il faut lui passer un élement ou une chaîne de caractère représentant un id. Elle permet de vérifier que l’élément passer en argument est bien un enfant de l’élément courant. Encore, je ne vous ai pas tout présenté. Voici une liste complète de méthodes afin de pouvoir se déplacer dans le Dom :

• getElement
• getElements
• getElementById
• getPrevious
• getAllPrevious
• getNext
• getAllNext

• getFirst
• getLast
• getParent
• getParents
• getChildren
• hasChild

Vous verrez que pour se déplacer, déterminer les éléments voisins, les parents et les enfants, ces méthodes ne sont pas toutes utile. Mais Mootools nous en offre beaucoup, donc si vous y voyez une utilité, n’hésitez pas à l’utiliser. Le plus grand mystère reste pour moi la méthode getElementById. En pensant au $ et à l’unicité d’un id, vous comprendrez sûrement pourquoi… Bon, après ce long discours, quelques exemples s’imposent :

<div id="monGrandParent" class="bordureNoire">
	Je suis le grand père (et je ne begaie pas !!)

<div id="monParent">
		Je suis le parent avec 3 enfants

<div>Je suis le premier enfant de mon parent !!</div>

<div id="monElement" class="bordureBleue">
			Coucou !!! C'est moi et ma famille

<div class="monPremierEnfant">
				Je suis un enfant, le premier !!

<div class="monPetitEnfant">Coucou !!</div>
</div>

<div class="fondRouge">
				Je suis cadet et j'ai un caractère de feu !!</div>

<div>Moi je suis un enfant, le troisième du nom.</div>

<div>Je suis le dernier enfant...</div>
</div>

<div>Vous avez vu la famille de mon grand frère !!</div>
</div>
</div>

Code html

// On crée ici un nouvel élément a (un lien)
// En premier argument, il faut passer la balise (tag)
// de l'élément et en second les propriétés de l'élément
// A noter : la propriétés style doit être passer avec un S à
// la fin si elle est au format JSON
var element = new Element('a', {
	'text': "Exemple 1",
	events: {
		'click': function() {
			// La méthode get avec comme premier argument
			// permet de récupérer le text contenu dans l'élément
			// .monPetitEnfant en supprimant les balises html
			var text = $('monElement').getElement('.monPetitEnfant')
						.get('text');
			$('result').set('html', "le résultat est :
<div>" + text + "</div>
");
		}
	}
});

// La méthode inject permet d'injecter un élément
// dans le dom par rapport à un autre élément.
// on peut éventuellement préciser la position
// par rapport à l
element.inject('result', 'before');

// Création d'un second élément et injection
// dans le dom
new Element('a', {
	'text': "Exemple 2",
	events: {
		'click': function() {
			var text = $('monElement').getParent()
						.get('text');
			$('result').set('html', "le résultat est :
<div>" + text + "</div>
");
		}
	}
}).inject('result', 'before');

// Création du troisième exemple
new Element('a', {
	'text': "Exemple 3",
	events: {
		'click': function() {
			var text = $('monElement').getParent('.bordureNoire')
						.get('text');
			$('result').set('html', "le résultat est :
<div>" + text + "</div>
");
		}
	}
}).inject('result', 'before');

// Et le dernier exemple
new Element('a', {
	'text': "Exemple 4",
	events: {
		'click': function() {
			var text = $('monElement').getParent('.bordureNoire')
						.getElement('.fondRouge')
						.getNext()
						.get('text');
			$('result').set('html', "le résultat est :
<div>" + text + "</div>
");
		}
	}
}).inject('result', 'before');

Code Javascript

Voir le résultat

Oui, je sais beaucoup trop d’enfants et de parents dans cette famille…. Bonjour les repas de famille !!… Mais c’est comme ça dans le html, chacun est un voisin de l’autre et beaucoup ont des enfants !! Ne vous découragez pas. Ca vous sera très utile par la suite afin de faire des choses vraiment époustouflantes !!

Dans la pratique : vérifier un formulaire

Le but de l’exercice est de vérifier, pour un formulaire (donné), que tous les champs sont bien remplie et qu’il est bien correct. Si l’un des champs est mal remplie, vous devez en informer l’utilisateur. Mais commme tout ceci semble presque trop facile avec Mootools, on va rajouter un peu de difficulté et énnoncer quelques directives.

• Le html ne doit pas être modifié.
• Le pseudo doit faire plus de trois lettres.
• La fonction « alert » ne doit pas être utilisé.
• Les champs érronés ou vide devront avoir une bordure rouge.
• La validité du mail doit être vérifiée mais cela ne devra pas empecher de valider le formulaire.
• Les boutons « Tout sélectionner » doivent cochez tout les éléments de leur block
• Si le boutons « non » est cliqué, vous devez masquer ce qui est en dessous

<form id="formulaire" action="#" method="get">

<fieldset>
		<legend> Inscription </legend>
		<dl>

			<dt><label for="inputPseudo">Pseudo</label></dt>
			<dd><input id="inputPseudo" name="pseudo" type="text" /></dd>

			<dt><label for="inputMail">Mail</label></dt>
			<dd><input id="inputMail" name="mail" type="text" /></dd>

			<dt><label for="inputMotDePasse">Mot de passe</label></dt>
			<dd><input id="inputMotDePasse" name="mail" type="password" /></dd>

			<dt><label for="inputConfirmMotDePasse">Confirmer le mot de passe</label></dt>
			<dd><input id="inputConfirmMotDePasse" name="mail" type="password" /></dd>

			<dt><label>Recevoir les actualités</label></dt>
			<dd>
				<input id="inputActuOui" checked="checked" name="actualite" type="radio" value="oui" /> <label for="inputActuOui">Oui</label>
				<input id="inputActuNon" name="actualite" type="radio" value="non" /> <label for="inputActuNon">Non</label>

<div class="section">
					<input id="actuJQuery" name="actuChoix" type="checkbox" value="jquery" /> <label for="actuJQuery">jQuery</label>
					<input id="actuPrototype" name="actuChoix" type="checkbox" value="prototype" /> <label for="actuPrototype">Prototype</label>
					<input id="actuExtJS" name="actuChoix" type="checkbox" value="extjs" /> <label for="actuExtJS">Ext-JS</label>
					<input id="actuMotools" name="actuChoix" type="checkbox" value="mootools" /> <label for="actuMotools">Mootools</label>

<div><a>Tout sélectionner</a></div>
</div>

<div class="section">
					<input id="actuPhpNet" name="actuChoix" type="checkbox" value="phpnet" /> <label for="actuPhpNet">php.net</label>
					<input id="actuZend" name="actuChoix" type="checkbox" value="zend" /> <label for="actuZend">Zend</label>
					<input id="actuSymphony" name="actuChoix" type="checkbox" value="symphony" /> <label for="actuSymphony">Symphony</label>

<div><a>Tout sélectionner</a></div>
</div>
			</dd>

			<dt></dt>
			<dd class="right">
				<input type="reset" value="Remettre à zéro" />
				<input type="submit" value="Valider" />
			</dd>

		</dl>
</fieldset>
</form>

Code html

Faire le TP (utilisé le fichier tp.js et tp.css) | Correction

Liste exhaustive des frameworks Javascript

• jQuery : Un framework Javascript très apprécié par les développeurs grâce à la multitude de widgets existant. Facile à prendre en main mais c’est une tout autre affaire lorsqu’il s’agit de créer un widget.
• Prototype : Un framework extrèmement apprécié par les développeurs. Pourquoi ?? Et bien parce que script.aculo.us …
• script.aculo.us : Repose sur Prototype, uniquement dédié aux effets visuels. Les démos valent vraiment le détour.
• Dojo : Pas celui que je vous conseillerai… (surtout que je viens de passer sur leur site et qu’un exemple sur trois fonctionne… ou alors c’est chez moi que ça bug)
• Ext-JS récemment renommé Sencha : Très apprécié par bon nombre de développeurs. Je ne pourrais pas trop en parler, mais il a la réputation d’être assez maniable et extrèmement puissant. Là aussi, la page de démo vaut le détour
• YUI (Yahoo User Interface) : Je n’oserais me prononcé. Leur site provoque en moi une réaction allergique instantanée et tout me dit de fuir loin, très loin le rapidement possible. Surtout si on accède à la doc api… Là, c’est fini.
• midori : Je ne connais pas trop. Mais, même si leur site est moche, il semble vraiment fonctionnel. Enfin, j’ai particulièrement apprécié la doc avec des exemples que l’on peut lancer grâce à des petits boutons [Run]. Cela permet d’appréhender facilement et rapidement le framework.
• MochiKit : Sans avis.
• DHX : Sans avis.
• qooxdoo : Sans avis.

Pour information, lors d’un sondage d’un peu plus de 200 personnes réalisé sur le forum de Developpez.com entre entre 11 frameworks Javascript, jQuery avait 50 % des votes, Prototype & Script.aculo.us arrivait en seconde position, puis venait Prototype et Mootools se partageant le 3ième position. Voir le fil de la discussion

Pas d articles similaires.