MooTools core

MooTools stands for My Object-Oriented Tools. It is an object-oriented and lightweight javascript framework that was released under the MIT License. It is officially designed as OOP thus allowing all intermediate and advanced software engineers to create more powerful and flexible applications.

MooTools is impressive for being a compilation of javascript utilities. Its great features convinced some major websites use MooTools as their framework which was a great privilege to the MooTools community. It concentrates on making the entire javascript language less demanding to compose in and open up a significant part of javascript’s functionality thus making MooTools also standout among the most popular javascript libraries.

MooTools common key features are DOM Utilities, Animation, Event Handling, CSS3 Selectors and Ajax.

What is MooTools good for?

MooTools is recommended for both intermediate and advanced developers since its good object-oriented features help software engineers to compose large-scale applications with minimum effort and pressure. It presents a tool to develop the general functionality of javascript so that developers can get out of his programming ways. It also helps eliminates some of the frustration a programmer might have when writing a program using pure javascript. It is very useful in that it gives great flexibility over the web outline with the goal that a developer can accomplish what he needs to.

Here are some of MooTools’ advantages over native javascript:

• DOM upgrades

• Empowering software developers to effortlessly include, change, select, and delete DOM components. Storing and recovering data with element storage is also supported.

• Provides a lot of built-in functionality

• Browser compatibility

• Object oriented programming

• A good fit from an engineering perspective

• Built-in functionality

• Help saves time in developing the application

• Closely aligned with how javascript works natively

Examples and Code Snippets

We will make a straightforward slideshow application using MooTools.

We can not deny the fact that adding animations can make a website attractive. For this example, we will actualize a slideshow which includes pictures.

If you need to create a slideshow without controls or events. This might help you.

window.addEvent('domready',function() {

/* settings */

     var showDuration = 3000;

     var container = $('slideshow-container');

     var images = container.getElements('img');

     var currentIndex = 0;

     var interval;

     /* opacity and fade */

     images.each(function(img,i){

     if(i > 0) {

        img.set('opacity',0);

}

});

/* worker */

var show = function() {

    images[currentIndex].fade('out');

    images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');

};

/* start once the page is finished loading */

window.addEvent('load',function(){

interval = show.periodical(showDuration);

});

});

To give you more detail of each function we make :

window.addEvent('domready',function() {

/* settings */

      var showDuration = 3000;

      var container = $('slideshow-container');

      var images = container.getElements('img');

      var currentIndex = 0;

      var interval;

      /* opacity and fade */

      images.each(function(img,i){

      if(i > 0) {

         img.set('opacity',0);

      }

});

In this phase, we create and characterize the duration of our slideshow, we also get the container, slideshow things and set the opacity to 0.

/* worker */

var show = function() {

   images[currentIndex].fade('out');

   images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');

};

At this point, we actually set that every time the picture/slide changed it should fade out.

/* start once the page is finished loading */

window.addEvent('load',function(){

      interval = show.periodical(showDuration);

});

The last code, coordinates the slideshow to start when the page has finished loading.

For another example, we’ll look at an example given on Wikipedia's polymorphism page:

var Animal = new Class({
   initialize: function(name) {
       this.name = name;
   }
});

var Cat = new Class({
   Extends: Animal,

   talk: function() {
       return 'Meow!';
   }
});

var Dog = new Class({
   Extends: Animal,

   talk: function() {
       return 'Arf! Arf!';
   }
});

var animals = {
   a: new Cat('Missy'),
   b: new Cat('Mr. Bojangles'),
   c: new Dog('Lassie')
};

Object.each(animals, function(animal) {
   alert(animal.name + ': ' + animal.talk());
});

// alerts the following:
//
// Missy: Meow!
// Mr. Bojangles: Meow!
// Lassie: Arf! Arf!

So simple right?

Conclusion

For beginners who want to learn a javascript framework or library, the best way to learn it is to start with the easiest one. Unlike other javascript libraries, MooTools is more complex and therefore it is more difficult to learn. It is not recommended for beginners to learn MooTools before gaining some experience, but if you are a serious mid to high level programmer, then MooTools won’t be a problem for you. Hope going through these examples gives you motivation to give MooTools a try.