30 days of MooTools is a collection of tutorials to learn to use the MooTools javascrit library, first published in 2008 by ConsiderOpen.
The lessons are actually 23, as they where interrupted after this day.
As the original site is currently offline, the tutorials have been collected using the Wayback Machine to make them available to everyone interested in learning to use MooTools.
The tutorials are based on MooTools 1.2 so some parts could be deprecated and they should be updated and expanded based on the new MooTools versions.
The copyright (and gratitude) for the original lessons is hold by ConsiderOpen.
Idea Paolo Manganiello. Licence CC 3.0.
If you haven’t already, be sure and check out the rest of the Mootools 1.2 tutorials in our 30 days series.
Today we’re going to be taking a look at the basics of creating and using classes with Mootools.
To put it simply, a class is a container for a collection of variables and functions which operate on those variables to perform specific tasks. Classes are incredibly helpful when working on a more involved project.
You’ve already seen the use of Hashes with key/value pairs earlier in the series, so the example below of building a class which only contains variables should look pretty familiar:
//Create a new class named class_one
//with two internal variables
var Class_one = new Class({
variable_one : "I'm First",
variable_two : "I'm Second"
});
Similarly, you can access these variables in the same manner as you would access the variables in a hash, note in the code below that we’re creating a new class of the class_one type defined above.
var run_demo_one = function(){
//instantiate a Class_one class called demo_1
var demo_1 = new Class_one();
//Display the variables inside demo_one
alert( demo_1.variable_one );
alert( demo_1.variable_two );
}
Method is the term used to refer to functions which belong to a specific class. These methods have to be called from an instance of this class, and can’t be called on their own. You define a method just like you would define a variable, except instead of giving it a static value, you pass it an anonymous function:
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);
}
});
Note the use of this in the example above. Because the variables that these methods operate on are internal to the class, you need to access those variables using this, otherwise you’ll just get an undefined value.
//Works
working_method : function(){
alert('First Value : ' + this.variable_one);
},
//Doesn't work
broken_method : function(){
alert('Second Value : ' + variable_two);
}
Calling the methods of the newly created class works like accessing the class variables
var run_demo_2 = function(){
//Instantiate a version of class_two
var demo_2 = new Class_two();
//Call function_one
demo_2.function_one();
//Call function_two
demo_2.function_two();
}
The initialize option in the Class object gives you a place to put any set-up work that needs to be done for the class, as well as giving you a place to setup user-configurable options and variables. You define it just like you define a method:
var Myclass = new Class({
//Define an initalization function with one parameter
initialize : function(user_input){
//create a value variable belonging to
//this class and assign it the value
//of the user input
this.value = user_input;
}
})
You can also use the initialization to change other options or behavior:
var Myclass = new Class({
initialize : function(true_false_value){
if (true_false_value){
this.message = "Everything this message says is true";
} else {
this.message = "Everything this message says is false";
}
}
})
//Will set myClass_instance.message to
//"Everything this message says is true"
var myclass_instance = new Myclass(true);
//Will set myClass_instance.message to
//"Everything this message says is false"
var myclass_instance = new Myclass(false);
All this works right alongside with any other variable or method declarations you’d like to make. Just remember the commas after each { key/value hash }. It’s really easy to miss one and spend absurd amounts of time tracking down non-existent bugs.
var Class_three = new Class({
//Function run when class is created
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";
}
},
//Method Definitions
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();
}
When building classes, it’s often helpful to define some default values for the class to start with if the user doesn’t provide any input. You can do this manually by setting up default values in the initialization function, checking each of them to see if a parameter was passed, and replacing the default values when necessary. Or you could just make use of the Options class provided by Mootools in Class.extras.
Adding the options functionality to your class is as simple as adding another key/value pair to the initialization options for your class:
var Myclass = new Class({
Implements: Options
})
Don’t worry to much about the details of the Implements option, we’ll be digging into that in more detail tomorrow. So now that you’ve got a class with the Options functionality, you need to define your default options. Just like everything else, this is done by adding another key/value pair to the class initialization options. Instead of passing a single value however, you’ll be defining a nested key value/set like so:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Option",
option_two : "Second Option"
}
})
Now that we’ve got the default values set, we need a way for the user to override those default values when instantiating the class. All you need to do is add one line to your initialize function, and Options takes care of the rest:
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
//Override both of the default options
var class_instance = new Myclass({
options_one : "Override First Option",
options_two : "Override Second Option"
});
//Override one of the default options
var class_instance = new Myclass({
options_two : "Override Second Option"
})
Note the use of the setOptions method in the initialization function. This is a method that is provided by Options, and also allows you to set the options once the class has been instantiated.
var class_instance = new Myclass();
//Set the first option
class_instance.setOptions({
options_one : "Override First Option"
});
Once the options have been set, you can access them through the options variable
var class_instance = new Myclass(); //Get the value of the first option var class_option = class_instance.options.options_one; //class_option is now equal to "First Default Option"
If you want to access the variable from inside the class, be sure to use the this syntax:
var Myclass = new Class({
Implements: Options,
options: {
option_one : "First Default Option",
option_two : "Second Default Option"
}
test : function(){
//Note that we're using this to
//refer to the class
alert(this.option_two);
}
});
var class_instance = new Myclass();
//Will pop-up an alert saying "Second Default Option"
class_instance.test();
All this wrapped together in a class looks like this :
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();
}
//Create a new class_four class with
//a new option called new_variable
var run_demo_6 = function(){
var demo_6 = new Class_four({new_option : "This is a new option"});
demo_6.show_options();
}
Those of you familiar with PHP may recognize the print_r() command used by the show_options method in the example below:
show_options : function(){
alert(print_r(this.options, true));
}
This isn’t a native javascript function, but is a piece of code from the PHP2JS project run by Kevin van Zonneveld. For those of you not versed in PHP, the print_r() function gives you a formatted string out the key/value pairs in an array. It’s an incredibly useful tool for debugging your scripts, a copy of the function is included in the downloadable zip and I highly recommend it’s use for testing and exploration.
var Class_five = new Class({
//We're using options
Implements: Options,
//Set our default options
options : {
option_one : "DEFAULT_1",
option_two : "DEFAULT_2",
},
//Have our initialization function
//set the options using setOptions
initialize : function(options){
this.setOptions(options);
},
//Method to send an alert with a
//formatted printout of the options array
show_options : function(){
alert(print_r(this.options, true));
},
//Method to switch the values
//of the two options using 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();
}
Mootools Class Documentation
Mootools Class.extras Documentation
print_r() reference