Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools / Page 3 | WebReference

Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools / Page 3


Popular JavaScript Framework Libraries: Prototype, script.aculo.us, and MooTools [con't]


URL: http://www.mootools.net/
Blog: http://blog.mootools.net/
Docs: http://docs.mootools.net/
Demos : http://demos.mootools.net/

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.


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:

Here's a demo of Extending Native Objects.


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:

Here's some demos of the mouseenter and mouseleave events.


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.

View the effects demos.

Demo of Fx.Slide().

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:

Here are the Request.HTML and Request.JSON demos.


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:

Here are the Accordion, Slider, Sortables and Dynamic Sortables demos.

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).

Original: October 2, 2008