MooTools Basic: Creating Classes MooTools


MooTools is an object oriented web application framework. You know, OOP is identical to the classes. What will become of OOP without classes? Of course it was not OOP name. Likewise with MooTools. MooTools is a JavaScript library that can effectively implement the use of classes.

Creating Classes MooTools

The following formula for making MooTools Class:

var ClassName = new Class({ properties });

Here's an example of creating a class

var Car = new Class(
{
	Implements : [ Options ], 
	options : {
		name : 'Honda',
		type : 'Jazz',
		year : 2010
	},
	
	initialize : function( options )
	{
		this.setOptions( options );	
	},
	
	park: function()
	{
	alert( this.options.name + ' is parking.' );
	},
	
	run: function()
	{
	alert( this.options.name + ' is running.' );
	}
});

Here's a description of the structure of the class above:

  1. We make a basic class like the following:
    var Car = new Class({ });
    
  2. Next we make Implements Property. This property implements inform you whether there are class properties/ methods and others are included as part of this class.
    Implements : [ Options ],
    
  3. Next we define the Options property. The options property to define the default option on our classes are:
    	options : {
    		name : 'Honda',
    		type : 'Jazz',
    		year : 2010
    	},
    
  4. Next we make the Initialize method. The Initialize method executes a block of code when an instance of the class is created.
    	initialize : function( options )
    	{
    		this.setOptions( options );	
    	},
    
  5. Next we create a method for the class. In this example we create two methods:
    	park: function()
    	{
    	alert( this.options.name + ' is parking.' );
    	},
    	
    	run: function()
    	{
    	alert( this.options.name + ' is running.' );
    	}
    

Okay, we'll try to implement the class. To try it, you must create an instance of the class. Here's an example:

var myCar = new Car({ });
myCar.park();

Here's the complete code:

<html>
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js">
</script>
<script type="text/javascript">
var Car = new Class(
{
	Implements : [ Options ], 
	options : {
		name : 'Honda',
		type : 'Jazz',
		year : 2010
	},
	
	initialize : function( options )
	{
		this.setOptions( options );	
	},
	
	park: function()
	{
	alert( this.options.name + ' is parking.' );
	},
	
	run: function()
	{
	alert( this.options.name + ' is running.' );
	}
});

var myCar = new Car({ });
myCar.park();
</script>
</head>
<body>
</body>
</html>

PHPEveryday.com MooTools Creating classes MooTools

Now we try to give another option at the instance of the class:


var myCar = new Car({ 
	name : 'nissan',
	type : 'livina',
	year : 2010
});

myCar.park();
PHPEveryday.com MooTools Creating classes MooTools, give other option

Example shows the value at the options:

<html>
<head>
<script type="text/javascript" src="mootools-1.2.4-core-nc.js">
</script>
<script type="text/javascript">
var Car = new Class(
{
	Implements : [ Options ], 
	options : {
		name : 'Honda',
		type : 'Jazz',
		year : 2010
	},
	
	initialize : function( options )
	{
		this.setOptions( options );	
	},
	
	park: function()
	{
		alert( this.options.name + ' is parking.' );	
	},
	
	run: function()
	{
		alert( this.options.name + ' is running.' );	
	}
});

var myCar = new Car({ 
	name : 'nissan',
	type : 'livina',
	year : 2010
});

document.write( 'My car\'s brand is ' + myCar.options.name + '.</br>');
document.write( 'My car\'s type is ' + myCar.options.type + '.</br>');
document.write( 'My car\'s manufacture year is ' + myCar.options.year + '.');
</script>
</head>
<body>
</body>
</html>
PHPEveryday.com MooTools Creating classes MooTools, show option value



Bookmark and Share Tag: MooTools, JavaScript, JavaScript Framework, Unobtrusive JavaScript, Application Framework, Object Oriented Programming Category: JavaScript Post : August 17th 2010 Read: 10,436

advertisements


blog comments powered by Disqus