Mootools en 30 jours : jour 18 - Les classes partie 1

I. Introduction aux classes Mootools

Si vous ne l'avez pas encore fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Aujourd'hui nous allons jeter un oeil aux bases de la création et utilisation des classes avec Mootools.

Pour faire simple, une classe contient une collection de variables et fonctions qui opèrent sur ces variables pour réaliser des tâches spécifiques. Les classes sont incroyablement utiles quand vous travaillez sur un projet un peu plus complexe.

II. Explications

Les variables

Vous avez déjà vu l'utilisation des Hashs avec des paires de clé/valeur dans un précédent tutoriel sur les périodes et Hash, donc l'exemple ci-dessous qui consiste à construire une classe qui contient seulement des variables ne devrait pas vous poser de problème :

//Création d'une classe nommée class_one
//avec deux variables internes
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});

De façon similaire, vous pouvez accéder à ces variables de la même façon que vous accéderiez aux variables d'un hash. Notez sur l'exemple ci-dessous que nous créons une nouvelle classe du type class_one défini plus haut.

var run_demo_one = function(){
//instantie une classe Class_one appelée demo_1
var demo_1 = new Class_one();
//Affiche les variables à l'intérieur de demo_1
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}



Méthodes / Fonctions

Méthode est le terme utilisé pour faire référence à des fonctions qui appartiennent à une classe spécifique. Ces méthodes doivent être appelées à partir d'une instance de cette classe, et ne peuvent pas être appelées toutes seules. Vous définissez une méthode tout comme vous définiriez une variable, sauf qu'au lieu de lui donne une valeur statique, vous lui passez une fonction anonyme :

var Class_two = new Class({
variable_one : "I'm First",
variable_two : "I'm Second",
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});

Notez l'utilisation de this dans l'exemple ci-dessus. Comme les variables sur lesquelles cette méthode agit sont internes à la classe, il vous faut accéder à ces variables en utilisant this, autrement vous obtiendrez juste une valeur non définie.

	//Fonctionne
working_method : function(){
alert('First Value : ' + this.variable_one);
},
//Ne fonctionne pas
broken_method : function(){
alert('Second Value : ' + variable_two);
}

Appeler les méthodes de cette classe nouvellement créée fonctionne de la même façon que l'accès aux variables de la classe

var run_demo_2 = function(){
//Instantie une version de class_two
var demo_2 = new Class_two();
//Appel function_one
demo_2.function_one();
//Appel function_two
demo_2.function_two();
}



initialize :

L'option initialize de l'objet classe vous donne un endroit où placer toutes vos tâches de configuration qui ont besoin d'être réalisée pour la classe, et vous donne aussi un endroit pour configurer les options et variables utilisateurs. Vous la définissez tout comme vous définissez une méthode :

var Myclass = new Class({
//Definit une fonction initalization avec un paramètre
initialize : function(user_input){
//créé une variable qui appartient à la classe
//et lui assigne la valeur
//de user input
this.value = user_input;
}
})

Vous pouvez aussi utiliser initialization pour changer d'autres options ou comportements :

var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "Tout ce que ce message dit est vrai";
}
else {
this.message = "Tout ce que ce message dit est faux";
}
}
})
 
//définira myClass_instance.message sur
//"Tout ce que dit ce message est vrai"
var myclass_instance = new Myclass(true);
 
//définira myClass_instance.message sur
//"Tout ce que dit ce message est faux"
var myclass_instance = new Myclass(false);

Tout cela fonctionne bien avec n'importe quelle autre variable ou déclaration de méthode que vous souhaitez ajouter. Rappelez vous juste les virgules après chaque { hash key/value }. C'est vraiment facile d'en oublier une et de passer un temps énorme à retrouver des erreurs de ce genre.

var Class_three = new Class({
//Fonction qui se lance quand la classe est créée
initialize : function(one, two, true_false_option){
this.variable_one = one;
this.variable_two = two;
if (true_false_option){
this.boolean_option = "True Selected";
}
else {
this.boolean_option = "False Selected";
}
},
//Définitions de Méthodes
function_one : function(){
alert('First Value : ' + this.variable_one);
},
function_two : function(){
alert('Second Value : ' + this.variable_two);
}
});
 
var run_demo_3 = function(){
var demo_3 = new Class_three("First Argument", "Second Argument");
demo_3.function_one();
demo_3.function_two();
}



Options d'implémentation

Quand vous construisez des classes, ça aide souvent de définir des valeurs par défaut pour que la classe démarre bien même si l'utilisateur ne lui précise aucune entrée. Vous pouvez faire ça manuellement en définissant des valeurs par défaut dans la fonction "initialization", en vérifiant chacun d'eux pour voir si un paramètre est passé, et en remplaçant la valeur par défaut lorsque c'est nécessaire. Ou vous pouvez juste utiliser la classe Options fournie par Mootools dans les Class.extras.

L'ajout de la fonctionnalité options à votre classe est aussi simple qu'ajouter une autre paire de clé/valeur aux options d'initialization pour votre classe :

var Myclass = new Class({
Implements: Options
})

Ne vous inquiétez pas trop à propos des détails de l'option Implements, nous verrons cela plus en détails demain. Donc maintenant que vous avez une classe avec la fonctionnalité "Options", vous devez définir vos options par défaut. Tout comme d'habitude, ça se fait en ajoutant une paire de clé/valeur aux options d'initialization. Toutefois au lieu de passer une simple valeur, vous pouvez définir plusieurs groupes de clé/valeur comme ceci :

var Myclass = new Class({
Implements: Options,
options: {
option_one : "Premier Option",
option_two : "Seconde Option"
}
})

Maintenant que vos valeurs par défaut sont configurées, nous avons besoin d'un moyen pour que l'utilisateur puisse écraser ces valeurs par défaut lors de l'instanciation de la classe. Tout ce que vous avez besoin de faire est d'ajouter une ligne à votre fonction initialize, et "Options" s'occupe du reste :

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
initialize: function(options){
this.setOptions(options);
}
})

Once this is set up, you can override any or all of the default options by passing it key/value pairs

//Ecrase chacunes des options par défaut
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
 
//Ecrase une des options par défaut
var class_instance = new Myclass({
options_two : "Override Second Option"
})

Notez l'utilisation de la méthode setOptions dans la fonction "initialization". C'est une méthode fournie par Options, et vous permet aussi de définir les options quand la classe à été instanciée :

var class_instance = new Myclass();
//Set the first option
class_instance.setOptions({options_one : "Override First Option"});

Quand les options ont été configurées, vous pouvez accéder à celles-ci par la variable options.

var class_instance = new Myclass();
//Obtient la valeur de la premiere option
var class_option = class_instance.options.options_one;
//class_option est maintenant égal à "First Default Option"

Si vous voulez accéder à la variable à l'intérieur de la classe, assurez-vous d'utiliser la syntaxe avec this :

var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
//Notez que nous utilisons this
//pour faire référence à la classe
alert(this.option_two);
}
});
 
var class_instance = new Myclass();
//Ouvrira une alerte disant "Second Default Option"
class_instance.test();

Tout ceci mis ensemble dans une classe ressemblera à cela :

var Class_four = new Class({	
Implements: Options,
options: {
option_one : "Default Value For First Option",
option_two : "Default Value For Second Option",
},
initialize: function(options){
this.setOptions(options);
},
show_options : function(){
alert(this.options.option_one + "\n" + this.options.option_two);
},
});
 
var run_demo_4 = function ){
var demo_4 = new Class_four({
option_one : "New Value"
});
demo_4.show_options();
}
 
var run_demo_5 = function(){
var demo_5 = new Class_four();
demo_5.show_options();
demo_5.setOptions({option_two : "New Value"});
demo_5.show_options();
}
 
//Creation d'un nouvelle classe class_four avec
//une nouvelle option appelée new_variable
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}



III. Conclusion du tutorial

Exemple

Ceux de vous qui maîtrisent le PHP reconnaîtront la commande print_r() utilisé par la méthode show_options dans l'exemple ci-dessous :

 show_options : function(){
alert(print_r(this.options, true));
}

Ce n'est pas une fonction javascript native, mais un morceau de code du projet PHP2JS lancé par Kevin van Zonneveld. Pour ceux qui ne connaissent pas bien le PHP, la fonction print_r() vous donne une chaîne en formatant les paires de clé/valeur dans un tableau. C'est un outil incroyablement utile pour débugger vos scripts, une copie de la fonction est incluse dans le zip téléchargeable et je vous recommande vivement de l'utiliser pour le tester et l'explorer.

var Class_five = new Class({
//Nous utilisons les options
Implements: Options,
//Définissons nos options par défaut
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
//notre fonction d'initialization
//définissez les options avec setOptions
initialize : function(options){
this.setOptions(options);
},
//La Methode pour envoyer une alerte avec une
//sortie formatée en tableau d'options
show_options : function(){
alert(print_r(this.options, true));
},
//La méthode pour changer les valeurs
//de deux options en utilisant setOptions
swap_options : function(){
this.setOptions({
option_one : this.options.option_two,
option_two : this.options.option_one
})
}
});
 
function demo_7(){
var demo_7 = new Class_five();
demo_7.show_options();
demo_7.setOptions({option_one : "New Value"});
demo_7.swap_options();
demo_7.show_options();
}

Pour en savoir plus

Télécharger un zip contenant tout ce qu'il vous faut pour débuter

Mootools Class Documentation
Mootools Class.extras Documentation
print_r() reference

Tutoriel de demain

Jour 19 - Les infobulles