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.
Now that we’ve got our base class defined, we can access its functionality by creating another class which implements it. Note in the example below that our new class isn’t doing anything but implementing BaseClass.
//Build a class called ImplementingClass
var ImplementingClass = new Class({
//All we do is implement Baseclass
Implements : BaseClass
});
Now we can create an instance of ImplementingClass and access the functionality defined in BaseClass completely transparently.
var demo_one = function(){
//Create a new instance of ImplementingClass
var test_class = new ImplementingClass();
//Call testFunction, which is defined in BaseClass
test_class.testFunction();
}
You can do the same with variables and the initialize function. Pretty much everything you define in the base class will be transferred to the implementing class, as if you declared it in the implementing class.
Note: We’re going to be using this version of BaseClass in the rest of the examples.
var BaseClass = new Class({
//Assign the parameter value
//to the inputVariable variable
//belonging to this class
initialize: function(input){
this.inputVariable = input;
},
//Display the value of inputVariable
testFunction : function(){
alert('BaseClass.testFunction() : ' + this.inputVariable);
},
//Define an internal variable
//for all instances of this class
definedVariable : "Defined in BaseClass"
});
var ImplementingClass = new Class({
//Once again, all we're doing
//is implementing the BaseClass
Implements : BaseClass
});
The demo below demonstrates how the initialization routine, function calls, and variables are all accessed as if they belonged to the implementing class.
var demo_two = function(){
//Build an instance of ImplementingClass
var test_class = new ImplementingClass('this is the input value');
//Call testFunction() (defined in BaseClass)
test_class.testFunction();
//Display definedVariable
alert('test_class.testVariable : ' + test_class.definedVariable);
}
Once you’ve implemented a class, you can add whatever functionality you want to the implementing class definition.
var ImplementingClass = new Class({
Implements : BaseClass,
//Both of these are defined in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
},
//Neither of these are defined in BaseClass
anotherDefinedVariable : "Also Defined in ImplementingClass",
anotherTestFunction : function(){
alert('This function is defined in ImplementingClass');
}
});
Note that we’re redefining testFunction and definedVariable in the implementing class as well as adding a new function and variable. Be aware that if you try to define a function or a variable that’s already declared in the base class using implements, the definition in the base class will supersede the definition in the implementing class. Check out the demo to see what I mean
var demo_three = function(){
//Build an instance of ImplementingClass
var test_class = new ImplementingClass('this is the input value');
//(defined in BaseClass)
test_class.testFunction();
//Display definedVariable (defined in BaseClass)
alert('test_class.testVariable : ' + test_class.definedVariable);
// (defined in ImplementingClass)
test_class.anotherTestFunction();
//Display anotherDefinedVariable (defined in ImplementingClass)
alert('test_class.anotherDefinedVariable : ' + test_class.anotherDefinedVariable);
}
For situations where you want to overwrite what is defined in the base class you can use Extends. Simply replace the Implements with Extends.
var ExtendingClass = new Class({
//Note the use of Extends instead of Implements
Extends : BaseClass,
//Both of these are defined in BaseClass,
//but since we're using extend instead of
//implement, these override the ones defined
//in BaseClass
definedVariable : "Defined in ImplementingClass",
testFunction : function(){
alert('This function is also defined in BaseClass');
}
});
var demo_four = function(){
//Build an instance of ImplementingClass
var test_class = new ExtendingClass('this is the input value');
//Call testFunction() (defined in BaseClass and ExtendingClass)
test_class.testFunction();
//Display definedVariable (defined in BaseClass and ExtendingClass)
alert('test_class.definedVariable : ' + test_class.definedVariable);
}
Another useful feature when using extends is the ability to overwrite the initialization function defined in the base class while still running the initialization function. So if you define this initialization function in a base class…
initialize : function(){
alert('base class');
}
…and then define this initialization function in the extending class, you’ll get two alerts saying “base class” and “extending class.”
initialize : function(){
//Call parent constructor
this.parent();
alert('extending class');
}
If the parent initialization function is expecting input, make sure to require the same input and pass it on to the parent constructor. In the example below, note that we’re not assigning the input value to anything here—simply passing it on to the parent constructor which takes care of it for us.
var ExtendingClass = new Class({
//Once again, we're extending, not implementing
Extends : BaseClass,
initialize: function(input){
//Calling this.parent runs the initialization
//function defined in the baseclass
this.parent(input);
//Doing so allows us to do additional
//setup tasks during initialization without
//rewriting the initalization code from the
//base class
this.otherVariable = "Original Input Was : " + input;
}
});
var demo_five = function(){
//Build our class
var test_class = new ExtendingClass('this is the input value');
//run testFunction
test_class.testFunction();
//display otherVariable
alert("test_class.otherVariable : " + test_class.otherVariable);
}
Not only can you use implement and extends within your class definitions, you can also use them on preexisting classes to add functionality one piece at a time. For this example we’re going to be using a simple calculator class which can add and subtract two numbers that you define when creating the class.
var Calculator = new Class({
//Set two variables during initialization
initialize: function(first_number, second_number){
this.first = first_number;
this.second = second_number;
},
//Function to add the two internal
//variables and return the result
add : function(){
result = this.first + this.second;
alert(result);
},
//Function to subtract the two internal
//variables and return the result
subtract : function(){
result = this.first - this.second;
alert(result);
}
});
While that’s all well and good if you’re just looking to add or subtract numbers, what if you want to multiply them? Using .implement(), we can just add a function on to the class and use it as if we had created another class that implemented Calculator as a base.
var demo_six = function(){
//implement a new function
//in the calculator class
Calculator.implement({
//Function to multiply the two internal
//variables and return the result
multiply : function(){
result = this.first * this.second;
alert(result);
}
});
//Build a calculator class
var myCalculator = new Calculator(100, 50);
//Call the multiply function
myCalculator.multiply();
}
In part I of Classes, we used the print_r function for javascript debugging. Using implement, we can make it incredibly painless to print out the contents of the variable class simply by implementing a function in the Calculator class.
var demo_seven = function(){
//Implement a function to print out
//the contents of the Calculator class
Calculator.implement({
show_class : function(){
alert(print_r(this, true));
}
});
//Build a calculator
var myCalculator = new Calculator(100, 50);
//Show the class details
myCalculator.show_class();
}
While neat, this isn’t a particularly useful feature for the calculator class due to its relatively straightforward nature. However, since most of the Mootools objects are built as classes, we can use the same methodology on them to get something a little more useful.
The example below implements a function which throws out a pop-up window containing the structure of whatever HTML element you’d like to examine. This functionality is now automatically added to any HTML element you interact with, so all you have to do is add a showStructure() command to your element to get a full description of what that element is holding.
var demo_eight = function(){
Element.implement({
showStructure : function(){
//the < and > have been removed from the pre tags
//because they're interpreted by the browser, and
//wordpress isn't taking nicely to character codes
//embedded in pre blocks
var structure = 'pre' + print_r(this, true) + '/pre';
//Open a popup window
newWindow = window.open('','Element Debug','height=600,width=600,scrollbars=yes');
//Write the structure into the popup window
newWindow.document.write(structure);
}
});
$('demo_eight').showStructure();
}
Note: you’ll need to disable popup blockers for this to work.
Mootools Class Docs
An excellent discussion of some of the finer points of classes in Mootools.
Morph multiple elements with Fx.Morph