Web Development

Putting the MooTools JavaScript library to use

Tony Patton has fallen in love with MooTools. He explains where to get this powerful JavaScript library and describes how to use it.

The advance and acceptance of Web standards and the proliferation of JavaScript frameworks/libraries makes building dynamic, standards-based Web interfaces the preferred method as opposed to Flash-based interfaces. One such library, MooTools, appeared on my radar recently, and I've fallen in love with it.

This is the official description of the library: "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."

You may be wondering why the world needs another JavaScript library, or framework as MooTools calls itself. Can't jQuery or something else provide everything you need? MooTools description states it is a coherent API for writing powerful code; this differs from something like jQuery, whose sole purpose is to help you work with the DOM, while the focus of MooTools is the whole language not just the DOM. I don't think you can go wrong with either of these tools, or any of the other many available. These tools make it easier to work with a language that can be frustrating at times.

The basics

The MooTools library is extensive, so a complete review of all features is beyond this finite space, but the vas Web contains plenty of examples and documentation. With that said, let's take a look at basic features and examples. Let's begin with where to get the library and how to use it.

Using it

The MooTools download page provides easy access to the necessary downloads for using the library in your projects. The main download page provides once-click access to the MooTools core features, as well as the server version. If you need features outside of the core, or you want to customize the core, then the core builder page is available. In addition, the more builder page allows you to select and download additional (more) features. This can be confusing, but basically the core is the actual MooTools framework, while more is the supported plug-ins you can build to complement the core.

Once downloaded, the library is used just like any other JavaScript file. In my example, I downloaded MooTools core and renamed the file mootools-core.js and placed it in a folder called MooTools.

<script src="/MooTools/mootools-core.js" type="text/javascript"></script>

Dollar sign

Like its jQuery and Prototype counterparts, a key feature of the MooTools library is the dollar sign ($), which is a shortcut for the document.getElementById. This JavaScript function retrieves a DOM element using its ID attribute. I love this feature because I hate retyping (or copying/pasting) that function call over and over, and I always seem to mess up the case-sensitive syntax, so you can easily access an element using the following syntax:

var jsExample = $(‘id');

MooTools takes it a step further with new methods added to the element referenced using this syntax. The complete list of methods is beyond the scope of this article. The following code shows the get, set, and contain methods in action.

var jsEx1 = $(‘id').get(‘name');

var jsEx2 = $(‘field1').get(‘value');

var jsEx3 = $(‘elementName').set(‘text', ‘sample text');

var jsEx4 = $(‘div1').set(‘styles', {font: ‘14pt Helvetica', color: ‘black'});

if ($(‘field1').contains(‘TechRepublic')) alert(‘You found it!');

The first two lines return the values in the specified attributes. The next two populate attributes with the values passed, and the final line displays a message if the element contains the text specified. You can get a closer look at all methods online. Before moving on, here is the complete page source for accessing an element and working with its attributes:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="MooTools/mootools-core.js" type="text/javascript"></script>

</head>

<body>

<div id="mainBlock">TechRepublic.com MooTools Test</div>

<a href="http://www.cnet.com" id="lnkCNet" alt="CNet Link">CNet</a>

<script type="text/javascript">

alert($('lnkCNet').get('alt'));

$('mainBlock').set('styles', {font: '22pt Helvetica', color: 'red'});

if ($('lnkCNet').get('alt').contains('CNet')) alert('You found it!');

</script></body></html>

In addition to the lone dollar sign, MooTools provides the double dollar sign ($$) to provide shortcut access to a collection of DOM elements. It allows you to get a collection of tags, CSS selectors, and so forth. The following code demonstrates using it to assemble a collection of all anchor elements:

var collection = $$(‘a');

This can also be used to return a mixture of elements. The next snippet returns all anchor, bold and div elements.

var collection = $$(‘a','div','b');

Is the DOM ready?

One of the more interesting features of MooTools is the DomReady custom event. This event is fired when the DOM is ready. This is a departure from the standard onload event, which fires only after everything on the page has loaded, which can be a big delay when a page contains many images. This allows you to work with the page much sooner. The following code snippet shows both approaches in action -- notice which event fires first:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<script src="MooTools/mootools-core.js" type="text/javascript"></script>

<script type="text/javascript">

window.addEvent('domready', domreadyTest);

function domreadyTest() {

alert('DomReady fired!');

}

function onloadTest() {

alert('Body onLoad fired!');

}

</script></head>

<body onload='onloadTest();'>

<div id="mainBlock">

TechRepublic.com MooTools Load Test

</div></body></html>

This example can be altered to add an event to a div block that responds to mouse movement over the element -- it changes to red when the mouse pointer is positioned over its text, and the red disappears when the mouse leaves the area.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
.blue { color: blue; }
.green {color: green; }
.red {color: red; }
</style>
<script src="MooTools/mootools-core.js" type="text/javascript"></script>
<script type="text/javascript">
window.addEvent('domready',function() {
$$('#mainBlock').addEvents({
mouseenter: function() {
this.addClass('red');

},

mouseleave: function() {

this.removeClass('red');

}

});

});

</script></head>

<body>

<div id="mainBlock" class="blue">

TechRepublic.com MooTools Load Test

</div></body></html>

The code adds multiple events to the div element identified by its id value. These events are registered when the DomReady event is triggered.

Simplification and power

Thankfully, the days of building everything from scratch are over. MooTools is just one example of the powerful JavaScript libraries available today. It simplifies working with the DOM and provides additional features to build powerful, dynamic Web interfaces. This article only scratches the surface of what you can do with MooTools; more information, including tutorials, is available on its website. If you haven't already, download MooTools and put it to work in your next project.

Do you currently use MooTools or other JavaScript libraries? If so, share your thoughts and experiences with the community.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

2 comments
gregscales
gregscales

I use both Jquery and MooTools. I find jquery a bit easier to understand and code, but if I am looking for "smooth" and "pretty", I use MooTools. If I had to pick which I use more, I'd have to say MooTools gets a slight edge.

BigPapi22
BigPapi22

MooTools looks like a good tool. I prefer jQuery since I have been using it for so long and I am familiar with it. There are so many options available. I'm not sure MooTools is any better than it.