MooTools
________________________________
Aakash Juneja
Truc Pham
Introduction
MooTools
is a lightweight abstraction layer between
the browser and the code
was authorized and released in
September 2006 by Valerio Proietti.
MooTools’ Components








Core: A collection of utility functions
More: An official collection of add-ons
Class: The base library for Class object
Natives: A collection of JavaScript Native Object
enhancements.
Element: enhancements to the HTML Element object.
Fx: An advanced effects-API to animate page elements.
Request: Includes XHR interface, Cookie, JSON, and
Window: Provides a cross-browser interface to clientspecific information.
Getting started
Need to know Javascript
 Elements
var myElement = new Element(“div”);
myElement.set(“html”, “I am new”);
myElement.setStyle(“border”, “1px solid
#519CE8);
$(“myBox”).grab(myElement);
 Adding text to elements is easy too
$(“myBox”).set(“html”, “Hi there, how are you?”);
Elements (continued)
 $(“someElementID”);
 $(“anyElement”).getElement(“any css selector”);
Examples:
$(“anyElement”).getElement(“span”);
$(“anyElement”).getElement(“a”);
$(“anyElement”).getElement(“input[type=text]”);
The $function
 //classical method for getting an element
var myElement =
document.getElementByID(“myElement”);
 //MooTools’ way:
var myBetterElement = $(“myElement”);
 //this returns reference as an Array of all tags on
the page
var ps = $$(“p”);
Set Properties
 //setting properties is easy in MooTools
$(“myElement”).setProperty(“title”, “I am your element”);
 //removing works almost the same way
$(“myElement”).removeProperty(“title”);
 //getting values is easy
$(“myElement”).getProperty(“id”);
 //similar methods
setProperties, removeProperties, getProperties
The core of MooTools
MooTools stands for My Object Oriented
Tools.
Emphasizes modularity and code reuse with
MooTools Class object.
Class is an object of key/value pairs that can
contain either properties or methods.
Inheritance
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';
}
});
Inheritance
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!
A SlideShow app using MooTools
var SimpleSlideShowDemo = new Class({
Implements: [Options, Events],
options: {
slides: [],
startIndex: 0,
wrap: true
},
initialize: function(options){
this.setOptions(options);
this.addSlides(this.options.slides);
if(this.slides.length) this.showSlide(this.options.startIndex);
},
…………
A SlideShow app using MooTools
addSlides: function(slides){
$$(slides).each(function(slide){
this.slides.include($(slide));
slide.addEvent('click', this.cycleForward.bind(this));
…………
cycleForward: function(){
if($chk(this.now) && this.now < this.slides.length-1)
this.showSlide(this.now+1);
else if ((this.now) && this.options.wrap) this.showSlide(0);
else if(!$defined(this.now))
this.showSlide(this.options.startIndex);
},
A SlideShow app using MooTools
showSlide: function(iToShow){
if (this.fading) return;
var now = this.now;
var currentSlide = this.slides[now];
var slide = this.slides[iToShow];
var fadeIn = function (s){
this.fading = true;
s.setStyles({
display:'block',
visibility: 'visible',
opacity: 0
});
s.get('tween').start('opacity', 1).chain(function(){
this.fading = false;
this.fireEvent('onShow', [slide, iToShow]);
……………..
A SlideShow app using MooTools
window.addEvent('domready', function(){
new SimpleSlideShowDemo({
slides: $$('div.slide')
});
new SimpleImageSlideShowDemo({
imgUrls: [
"http://download.com/i/dl/media/dlimage/10/87/78/108778_medium.jpeg",
"http://download.com/i/dl/media/dlimage/10/87/79/108779_medium.jpeg",
"http://download.com/i/dl/media/dlimage/10/87/81/108781_medium.jpeg"
],
container: $('imgContainer')
});
});
http://mootorial.com/wiki/mootorial/09-howtowriteamootoolsclass
Why choose MooTools?
 MooTools can do all jQuery (sorry for picking on you) can
do.
Frameworks Mottos
jQuery is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that you write JavaScript.
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for
the intermediate to advanced JavaScript developer. It allows you to write powerful,
flexible, and cross-browser code with its elegant, well documented, and coherent API.
 MooTools focuses on inheritance model.
 MooTools encourages code reuse and modular designs
Some of the best MooTools examples
http://www.electricprism.com/aeron/slideshow/
http://digitarald.de/project/remooz/1-0/showcase/flickr-big/
http://www.efectorelativo.net/laboratory/noobSlide/
http://www.nogray.com/time_picker.php.