MooTools - Classes

Advertisements

Previous Page
Next Page  

MooTools contains classes of different APIs. Look at the basics of creating and using classes with MooTools. A class is a container for a collection of variables and functions which operate on those variables to perform specific tasks.

Let us discuss the variables, methods, and options in detail.

Variables

Creating a variable is a very simple task. It is like declaring a key/value pairs in hashes. Similarly, you can access the variables in the same manner which means <class_name.variable>. Take a look at the following syntax for creating and accessing variables in classes.

Syntax

//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"
});
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 );
}

Methods

In general, a Method is a function that uses a set of instructions which belongs to a specific class. You can call these functions by using the instance of the class. One more thing whenever you want to call the instance variable into the function you must use this keyword. Take a look at the following syntax for creating and accessing methods.

Syntax

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);
   }
});

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();
}

initialize

initialize is an option in the class object. This helps you create a class setup This also helps you set up user-configuration options and variables. Take a look at the following syntax of initialize option.

Syntax

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;
   }
})

Implementing Options

Implementing options are very helpful for accepting user inputs and building classes. Adding the options functionality to your class is as simple as adding another key/pair to the initialization options for your class. Once this setup is ready, you can override any or all of the default options by passing key/value pairs. It provides the setOptions method. This method allows you to set the options once the class has been initialized. If you want to access the variable from inside the class, use the following syntax.

Syntax

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();
}
Advertisements