Object Oriented Javascript with Mootools

Mootools is a fairly new, and increasingly popular Javascript framework that allows you to do complex effects, event handling, and Ajax all in one easy to understand structure. The piece that I’m going to touch on today involves using Mootools together with Javascript OOP to create reusable objects and methods.

Your first task will be to obtain the newest Mootools library. At this writing, it is version 1.11, which is what I use in production for E29 and federal contracts through Citizant.

Including Mootools in your pages is as easy as the following snippet of code:

Now you need to create your class Javascript file. I usually abide by exporting Javascript to files outside of the HTML, just to keep everything neat. In this case, let’s include the following file:

Inside the Javascript file, you’ll want to create your class and member methods. If you’re familiar with Object Oriented Programming, the concept won’t be much different, only the syntax.

My example class looks like the following:

This is a snippet from a product that I’m producing with E29, thus the Rhapsody namespace, however you can name the class namespace anything that you want, and tailor it to your own project.

Now, to break down, the class above defines the Rhapsody namespace, creates an initialization routine function that will be called automagically by Mootools, defines an addToggle() method, and a close() method, and then implements two classes from Mootools itself. The Rhapsody.implement() call basically puts the Options and Events namespace inside of the Rhapsody class, so they can be accessed via .addEvent(), etc.

The addToggle() method allows the developer to pass in the element ID of a hidden target, and the ID of an element that will cause the .setStyle() to be executed. Mootools allows you to access HTML elements by $( id_name_of_element ), rather than using document.getElementById() that we are all used to by now. This allows you to set events, styles, and much more in a much, much easier syntax than regular Jscript.

The close() method allows the developer to hide, or close, an element by passing in the element ID.

To access these methods, you’ll need to add the following Javascript snippet into your HTML, below the script includes:

The domready window event is necessary because the mootools library won’t load the Dom ID’s until the entire DOM has been loaded. If you don’t use the domready event, your code will throw an error when it tries to access a Mootools method, or if you try to use the shorthand $(element) calls. The Rhapsody.addToggle() line adds the toggle method from the class file to your HTML elements, which are defined in the next example.

Now, down to business. What we’re going to do is pop a div when you hover your mouse over a certain link on the page. The HTML will look like the following:

That about wraps up my first example. This article should be geared more towards a beginner Mootools dev, but a moderate Jscript developer. In the next articles, I’ll go more indepth with Javascript class syntax, and how to really use the full power of Mootools in your application.

For more information, we of course have the working TehDevs demo, and the very detailed Mootools demos.