Mootools en 30 jours : jour 1 - Introduction

I. Introduction à la librairie Mootools 1.2

Ce tutoriel ainsi que les tutoriels à venir dans la même série (mootools en 30 jours) sont des traductions en français des tutoriels originaux écrits par consider open. L'article original en anglais se trouve ici : 30 Days of Mootools 1.2 Tutorials - Day 1 - Intro to the Library. Merci à Troy pour son autorisation d'utilisation de cette série de tutoriels.

Nous avons reçu récemment des demandes de tutoriels pour Mootools 1.2 et cela nous a semblé être une bonne idée, donc allons-y. Ces tutoriels ne nécessitent aucune connaissance préalable de Mootools ou du JavaScript, mais il vous faudra tout de même des connaissances basiques en html et CSS.

Introduction à la librairie javascript Mootools

Mootools 1.2 est une librairie javascript puissante et de taille raisonnable, faite pour faciliter le développement JavaScript intéractif. Prenons un seul cas, pensez aux nombreuses choses que Mootools peut faire en tant qu'extension CSS. Par exemple, avec CSS vous pouvez changer une propriété hover seulement (quand votre souris passe sur un élément). Le Javascript vous permet d'accéder à plus d'évènements (clic, survol de souris, touches de clavier tapées, ...) et il devient presque facile de profiter de tous ces avantages avec Mootools.

De plus, Mootools possède tout un panel d'extensions qui ne vous permettront pas seulement de changer les propriétés des éléments (comme au survol de la souris), mais elles vous permettent aussi le “morph“ ou “tween“, vous donnant ainsi la possibilité de créer des effets d'animations sur des éléments, comme l'on en voit beaucoup sur le web depuis quelques temps.

Mais c'est juste un exemple, Mootools peut vous permettre de faire beaucoup plus de choses. Pendant les 30 prochains jours, nous allons nous étudier plus précisément la librairie Mootools, en explorant tout, des tableaux et fonctions au FX.Slide et autres plugins fournis.

II. Explications

Installation de Mootools 1.2

Tout d'abord, téléchargez et installez le noyau (core) de la librairie Mootools 1.2.

  1. Téléchargez la librairie Mootools 1.2 Core
  2. Uploadez la librairie de Mootools 1.2 sur votre serveur ou espace de travail
  3. Faites un lien vers la librairie Mootools 1.2 Core entre les balises de votre page -

2. Créer un fichier JavaScript externe et faire le lien vers celui-ci dans votre :

A partir de là, vous pouvez utiliser l'une ou l'autre des méthodes. J'appellerai souvent des fonctions dans l'évènement domready à l'intérieur des balises script, mais je placerai les fonctions dans un fichier JavaScript externe.

Placer dans le domready

Les fonctions Mootools doivent être appelées dans l'évènement domready.

window.addEvent('domready', function() {
exampleFunction();
});

Placer dans une Fonction

Vous pouvez quand même placer vos fonctions en dehors du domready, puis les appeler à l'intérieur de celui-ci.

var exampleFunction = function() {
alert('hello')
};

window.addEvent('domready', function() {
exampleFunction();
});

Description de la librairie

Pour ce premier tutoriel, nous allons regarder de plus près les composants importants de l'architecture de la librairie et allons découvrir ainsi quelques fonctionnalités basiques.

Noyau

Le noyau contient des fonctions basiques de la librairie Mootools, facilite la réalisation de tâches basiques et renforce beaucoup de fonctionnalités pré-existantes (nous verrons ça plus loin). Les suivantes ne sont que des exemples des possibilités de Mootools mais ne remplaceront pas la lecture de la documentation Mootools.

Natif

Cette partie de la librairie contient aussi des outils basiques, vous permettant de manipuler les tableaux (une liste de valeurs ou objets), fonctions, nombres, chaines de caractères, hashes et évènements. Voici quelques-uns des outils fournis en Natif :

  • Creation d'un script qui s'applique à chaque objet d'un tableau - .each();
  • Obtenir le dernier élément d'un tableau - .getLast();
  • Creation d'un évènement période tous les x millisecondes - .periodical();
  • Arrondir un nombre décimal - .round();
  • Convertir un rgb en HEX - .rgbToHex();

Classes

Une classe JavaScript (c'est différent d'une classe CSS), est un objet réutilisable avec des fonctionnalités. Pour en savoir plus sur les classes de Mootools, vous pouvez lire l'introduction rapide de Valerio (Mootools Classes - How to Use Them). Je peux vous recommander aussi David Walsh's Mootools Class Template.

Elements

Les éléments de classes apportent quelques-unes des fonctionnalités les plus utiles de la librairie Mootools. C'est avec ceux-ci que vous sélectionnerez les éléments Dom, manipulerez leurs propriétés et positions, et changerez leurs styles CSS. Voici quelques uns de ces super outils fournis par Mootools afin de manipuler les éléments Dom :

  • Selection du premier élément DOM, ID ou classe d'un certain type - .getElement();
  • Selection de tous les éléments DOM, ID ou classe d'un certain type - .getElements();
  • Ajout d'une classe à un élément - .addClass();
  • Obtenir la valeur d'une propriété d'un élément - .getProperty();
  • Changer la valeur d'une propriété d'un élément - .setProperty();
  • Obtenir la valeur d'une propriété de style d'un élément - .getStyle();
  • Changer la valeur d'une propriété de style d'un élément - .setStyle();
  • Avoir les coordonnées d'un élément - .getCoordinates();

Utilitaires

Les utilitaires apportent des sélecteurs logiques plus raffinés, contiennent l'évènement domready, vous fournissent des outils pour gérer les appels AJAX, vous permettent de gérer simplement les cookies et contiennent même la fonctionnalité “swiff“ qui vous permet d'interfacer le JavaScript avec ActionScript.

FX

C'est probablement la partie la plus fun de Mootools. Avec les FX (comprenez "effets"), vous pouvez créer des effets “tween“ et “morph“ qui ajoutent des animations à vos objets DOM.

  • Créer une animation de transition entre deux valeurs de style (exemple : aggrandir un div tout doucement) - var myFx = new Fx.Tween(element);
  • Créer une animation de transition entre plusieurs valeurs de style différentes (exemple : aggrandir un div tout doucement + changer la couleur de fond, pendant que vous rendez la bordure plus épaisse) - var myFx = new Fx.Morph(element);

Request

Contient des outils pour utiliser facilement les fonctionnalités Javascripts XMLHttpRequest (Ajax). En plus de traiter entièrement les requêtes/réponses, "Request" peut traiter spécifiquement les réponses en HTML ou Javascript Object Notation (JSON).

Plugins

Les plugins Mootools étendent les fonctionnalités du noyau, vous permettant ainsi d'ajouter facilement des fonctionnalités UI à vos projets web. La liste de plugins contient notamment :

  • Fx.Slide
  • Fx.Scroll
  • Fx.Elements
  • Drag
  • Drag.Move
  • Color
  • Group
  • Hash.Cookie
  • Sortables
  • Tips
  • SmoothScroll
  • Slider
  • Scroller
  • Assets
  • Accordion

Le grand puzzle

Avant le prochain tutoriel, prenez un peu de temps pour voir la documentation de Mootools. Même si vous ne comprenez pas tout, lisez la juste et absorbez ce que vous pouvez. Pendant les 29 prochains jours, nous nous plongerons un peu plus dans les différents élements de la librairie et couperons Mootools en quelques pièces plus faciles à avaler, mais avant, regardez bien le menu pour avoir une vue d'ensemble.

Pour en savoir plus

Un zip avec tout ce dont vous avez besoin pour commencer

Il inclut une copie du noyau de la librairie Mootools 1.2, un fichier html simple, un fichier JavaScript externe pour vos fonctions et une feuille de style css. Le html est bien documenté (mais en anglais) et inclut l'évènement domready.

Autres tutoriaux sur Mootools

Voici une liste de quelques autres tutoriels : Mootorials pour vous aider à démarrer.

Les traductions de Mootools en 30 jours

Speak english? Here is original 30 days of mootools article

Hablas Español? Echa un vistazo a la traducción de alainalemany.com

Une traduction en Chinois est également prévue pour bientôt.

Mootools 1.2 Cheat Sheet

Voici un bon sommaire des fonctionnalités de Mootools 1.2. Le lien : Mootools 1.2 Cheat Sheet

Forum Mootools

Si vous voulez discuter de Mootools avec d'autres personnes, voir des exemples de code ou poser des questions spécifiques, c'est le lieu approprié. Il est très récent, mais il monte : Mootools 1.2 forum

III. Conclusion du tutorial

Demain

Visitez notre Jour 2 : tutoriel sur les sélecteurs de Mootools 1.2

Le planning (à venir)

Voici un aperçu des différents sujets que nous aborderons dans cette série :

Demande de tutoriels ?

Le but est d'avancer en douceur, afin de gérer les problèmes les plus complexes plus tard dans la série de tutoriels. Nous aimerions avoir vos retours : sur quelle partie aimeriez-vous apprendre des choses ? Quel genre de projet aimeriez-vous voir dans ce tutoriels ? N'hésitez pas à laisser vos commentaires, questions ou suggestions. Merci, en espérant que ces tutoriels vous seront utiles.