MooTools

A relative newcomer on the scene, MooTools is one of the most compact
of all the Frameworks. One of the ways that it keeps its size down is by letting
you select the individual components you want to download and the compression
you want, giving you a file that suits your personal needs. It takes a class-oriented
approach similar to Prototype's structure and is easy-to-use.
In terms of functionality, MooTools offers a little bit of everything.

Basics

Extending Natives

Like Prototype, MooTools offers some convenience functions for
dealing with native data types, such as strings, numbers and arrays. For instance,
the Array.invoke('fn', args) function applies a function to all the elements
in an array and returns the function results in another array. There are also
a number of highly useful string functions such as string.trim(), string.contains() and string.clean(), which removes all extraneous whitespace from a string and trims
it, string.camelCase(), string.hyphenate(), and string.capitalize(). Unlike
many similar string utilities, these functions act on all the words in a string,
as opposed to just one:

Events

With MooTools, you can add multiple events to an element, create
your own custom events, or use one of the custom MooTools ones, such as the
scrollwheel event. This is nice to have because every browser handles the scrollwheel
differently. There are also mouseenter and mouseleave events that improve the
standard mouseover/mouseout ones. While the latter sometimes just doesn't
work as expected, mouseenter only fires once you enter the element and doesn't fire again if your mouse crosses over children of the element. The following
code adds a morph effect to both the mouseenter and mouseleave events:

Effects

One of the things that makes MooTools a well rounded Framework
is the inclusion of some nice effects. Included in its arsenal are fade, tween and morph effects. The latter is especially neat in that you can assign
a CSS class as the target. There are also effects to manipulate
page elements' height, border, size and other properties.

Ajax Requests

In MooTools the basic Ajax request object class is called Request.
It has two methods called Request.HTML() and Request.JSON(). The former is handy
for displaying simple Web content directly in the page, while the JSON() method is meant
for more complex data.

The Request.HTML() method requires one argument, which is
a hash object. Unless you are explicitly performing a GET or POST operation,
you'll need provide the URL of the server-side component, at a bare minimum. The HTML
operation ( GET of POST ) is not part of the options. It's assigned by chaining
a second method. In the following example an HTML get request is made, passing
in the data from the 'user-form.'

The following, more complex example, uses a POST to send some
data to the server and displays the person class's attributes in alert boxes.
Notice how there's no processing required to convert the object from the JSON
return string. Since we're using the Request.JSON() function, MooTools knows
exactly what to do with the Ajax response string:

Plug-Ins

As the name suggests, plug-ins are ready-made widgets that you
can insert directly into your page to provide advanced functionality. They include
the Accordion, Slider, Sortables and Dynamic Sortables. The accordion is like
an expanding DOM document section except that it preserves screen real estate
by simultaneously collapsing other document sections to make room. The slider
is a control that can be used for selecting a value within an allowable range.
Sortables are for applying advanced sorting options to lists, while dynamic
sortables do the same for lists where the items are added dynamically.

The first example below creates a new Sortable instance over the
list with ID 'list-1' with some extra options for the revert effect, which is
used to slide the element into its final location after sorting. The second
one creates a new Sortable instance allowing the sorting of the lists with IDs
'list-1' and 'list-2,' with extra options. Since constrain was set to true,
the items will not be able to be dragged from one list to the other. The third
example creates a new Sortable instance which does allow sorting between the
'list-1,' 'list-2' and 'list-3' lists:

At this early stage of Framework comparisons, I'm still partial
to Prototype. I found that the Ajax calls in MooTools a little cumbersome with
the get() and post() function chaining. While a well rounded
Framework, the combination of Prototype with script.aculo.us is hard to beat!
Next week, we'll continue our overview of popular JavaScript Frameworks with
JQuery, MochiKit, and the Yahoo! UI Library (YUI).