25th déc 2007
Mootools, a super lightweight web2.0 javascript framework
Présent dans la grande famille des framework javacript, Mootools est un de mes… mon préféré ! Dès que je suis confronté à un nouveau projet web qu’il soit personnel ou professionnel je pense directement Mootools. Merci à Magu(s) de m’avoir fait découvrir cette incontournable librairie js.
1. Framework javascript ?
C’est un ensemble de fonctions, classes javascript liées entre elles facilitant la création d’application web. Utilisant le DOM qui lui donne la possibilité de manipuler dynamiquement le contenu dans la page, il n’y a plus de limite d’utilisation.. mise à part ceux du navigateur utilisé par l’internaute. Souvent Orienté objet, ces framework sont très faciles d’utilisation et suivent une logique compréhensible de tous programmeurs.
2. Travailler avec Mootools?
Il n’existe pas plus facile à intégrer mais il est nécessaire d’avoir quelques bases en javascript pour son utilisation
Introduction au javascript par Serge P. -
Programmation Orientée Objet avec le javascript par Thierry Templier
2.1 Téléchargement
Télécharger mootools est très facile, il suffit de se rendre sur cette page et de choisir les composants dont on a besoin (ici tous), la compression du fichier .js (javascript packer fait gagner près de 60% sur la taille du fichier .js).
2.2 Ajouter à votre page
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ />
<title>Hello Mootools!</title>
<script type=“text/javascript” src=“js/mootools-release-1.11.js”></script>
<script type=“text/javascript”>
window.addEvent(‘domready’, function() {
// ICI VOTRE CODE JS
});
</script>
</head>
<body>
</body>
</html>
La fonction "domready" permet d’exécuter le code javascript lorsque le dom est prêt, c-a-d quand tous les éléments html de la page sont chargés et pas quand la page entière est chargée (css, images, animations, …) voir DomReady vs Load
2.3 Exemples d’utilisation
Action sur un lien :
ajax
Imaginons que nous avons un lien sur lequel une action précise doit se passer (Confirmation, affichage d’une image, requête ajax, …), il suffit de donner une valeur à l’identifiant du lien :
<a href="#" id="id_du_lien">Charger le contenu dynamiquement</a>
et d’ajouter l’action que l’on souhaite par le biais de la fonction addEvent, Ici on demande l’évènement sur le click de la souris sur le lien.
ajax
$(‘id_du_lien’).addEvent(‘click’, function() {
console.log("click ok");
})
J’utilise console.log("click ok"); au lieu de alert("click ok"); pour faciliter le débogage du script à l’aide de Firebug.
Imaginez que vous avez des calculs de prix à déboguer, les dizaines d’alertes javascript vont vous faire péter les plombs tandis qu’avec la console de Firebug une liste de logs se crée.
Requête Ajax
Effectuer une requête ajax n’a jamais été aussi simple, il suffit d’utiliser la fonction new Ajax dans une action ou dans une fonction que l’on peut appeler sur un lien:
ajax
$(’start’).addEvent(‘click’, function(e) {
e = new Event(e).stop();
var url = "http://demos.mootools.net/demos/Ajax/lipsum.html";
/**
* The simple way for an Ajax request, use onRequest/onComplete/onFailure
* to do add your own Ajax depended code.
*/
new Ajax(url, {
method: ‘get’,
update: $(‘log’)
}).request();
});
var url: Définition de l’url de la page à charger dynamiquement
method: Get ou post
update: Div ou bloc à mettre à jour avec le contenu de la page que l’on appelle
Plusieurs paramètres comme onRequest/onComplete/onFailure peuvent être ajoutés. (ex : un gif loading pendant la requête)
3. Demos, tutoriels et plugins disponibles.
Demos
Voici la page de démonstration officielle du site mootools: Mootools demos - start
Tutoriels
Tutoriel officiel sur clientside: The Mootorial (en)
Tutoriel video sur Beautyindesign.com: User Experience with javascript
Plugins
Mootools 1.0+ Plugins, Examples, Tutorials & Demos List (en)
33 plugins pour Mootools que vous devriez connaitre !
Une adaptation est nécessaire mais ce framework vous fera gagner un temps précieux par la suite !
Présent dans la grande famille des framework javacript, Mootools est un de mes… mon préféré ! Dès que je suis confronté à un nouveau projet web qu’il soit personnel ou professionnel je pense directement Mootools. Merci à Magu(s) de m’avoir fait découvrir cette incontournable librairie js.
1. Framework javascript ?
C’est un ensemble de fonctions, classes javascript liées entre elles facilitant la création d’application web. Utilisant le DOM qui lui donne la possibilité de manipuler dynamiquement le contenu dans la page, il n’y a plus de limite d’utilisation.. mise à part ceux du navigateur utilisé par l’internaute. Souvent Orienté objet, ces framework sont très faciles d’utilisation et suivent une logique compréhensible de tous programmeurs.
2. Travailler avec Mootools?
Il n’existe pas plus facile à intégrer mais il est nécessaire d’avoir quelques bases en javascript pour son utilisation
Introduction au javascript par Serge P. -
Programmation Orientée Objet avec le javascript par Thierry Templier2.1 Téléchargement
Télécharger mootools est très facile, il suffit de se rendre sur cette page et de choisir les composants dont on a besoin (ici tous), la compression du fichier .js (javascript packer fait gagner près de 60% sur la taille du fichier .js).
2.2 Ajouter à votre page
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><html><head><meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1″ /><title>Hello Mootools!</title><script type=“text/javascript” src=“js/mootools-release-1.11.js”></script><script type=“text/javascript”>window.addEvent(‘domready’, function() {// ICI VOTRE CODE JS});</script></head><body></body></html>La fonction "domready" permet d’exécuter le code javascript lorsque le dom est prêt, c-a-d quand tous les éléments html de la page sont chargés et pas quand la page entière est chargée (css, images, animations, …) voir DomReady vs Load
2.3 Exemples d’utilisation
Action sur un lien :
ajaxImaginons que nous avons un lien sur lequel une action précise doit se passer (Confirmation, affichage d’une image, requête ajax, …), il suffit de donner une valeur à l’identifiant du lien :
<a href="#" id="id_du_lien">Charger le contenu dynamiquement</a>et d’ajouter l’action que l’on souhaite par le biais de la fonction addEvent, Ici on demande l’évènement sur le click de la souris sur le lien.
ajax
$(‘id_du_lien’).addEvent(‘click’, function() {
console.log("click ok");})J’utilise
console.log("click ok");au lieu dealert("click ok");pour faciliter le débogage du script à l’aide de Firebug.
Imaginez que vous avez des calculs de prix à déboguer, les dizaines d’alertes javascript vont vous faire péter les plombs tandis qu’avec la console de Firebug une liste de logs se crée.
Requête Ajax
Effectuer une requête ajax n’a jamais été aussi simple, il suffit d’utiliser la fonction new Ajax dans une action ou dans une fonction que l’on peut appeler sur un lien:
ajax
$(’start’).addEvent(‘click’, function(e) {e = new Event(e).stop();var url = "http://demos.mootools.net/demos/Ajax/lipsum.html";/*** The simple way for an Ajax request, use onRequest/onComplete/onFailure* to do add your own Ajax depended code.*/new Ajax(url, {method: ‘get’,update: $(‘log’)}).request();});var url: Définition de l’url de la page à charger dynamiquement
method: Get ou post
update: Div ou bloc à mettre à jour avec le contenu de la page que l’on appellePlusieurs paramètres comme onRequest/onComplete/onFailure peuvent être ajoutés. (ex : un gif loading pendant la requête)
3. Demos, tutoriels et plugins disponibles.
Demos
Voici la page de démonstration officielle du site mootools: Mootools demos - start
Tutoriels
Tutoriel officiel sur clientside: The Mootorial (en)
Tutoriel video sur Beautyindesign.com: User Experience with javascriptPlugins
Mootools 1.0+ Plugins, Examples, Tutorials & Demos List (en)
33 plugins pour Mootools que vous devriez connaitre !
Une adaptation est nécessaire mais ce framework vous fera gagner un temps précieux par la suite !
Posted in Application web, Mootools | No Comments »
