SBala

Mootools 1.2

That's right, Mootools 1.2 is out and about. It was released three days ago, but I wanted to have some time to play with it before I really made any comments about it.

One of the new features of Mootools that is receiving a bit of attention lately is Swiff. Swiff lets you combine Flash and JavaScript to do things MooTools can't do itself. The interaction between JavaScript and Flash is a great medium of user interaction with rich media. Variables can be passed onto Flash and then they can receive manipulation through a possible system of user interaction; then, the values can be returned back to the JavaScript and further manipulated. Swiff also allows for JavaScript to select and recognize the loading of Flash files, and base its interactions with the Flash file on the loading status.

Another feature of Mootools 1.2 is Hash. It allows for a sort of translation (hashing) from one string to another, and it supports practically every Array method. Hashes are now used as a data type throughout the Mootools framework. Hash itself resembles Abstract from Mootools 1.1, but it is designed in a more powerful-yet-streamlined fashion.

var hash = new Hash({ 'a': 'one'});
hash.get('a');
//this snippet of code associates the string "one" with "a"; and when "a" is passed as an argument, the function returns "one"

Element Storage was also introduced into Mootools, and allows for the introduction of various properties associated with a specific element. These properties are also recallable after being associated. Element Storage is basically an external Hash that stores all the custom properties and events for every element that is interacted with. Every element that Mootools interacts with or traverse over receives a unique ID. This id is actually attached to the element and then serves as it's key in the Element.Storage Hash. This is a major performance boost because it acts as a sort of caching mechanism.

var element = $('someElement');
element.store('effectInstance', new Fx.Tween(element, 'color'));
//this code example associates and retrieves an effect instance to the element with an id of "someElement"
element.retrieve('effectInstance');

Apart from the changes stated above, some of the functions are being renamed, and the addition of pseudo or CSS3 selectors makes Mootools take advantage of newer browser capabilities. Of course, the CSS3 selectors themselves cannot be used for production - so they are more of an experimental step into the abyss for now.

$$('p:contains("find me")');
//this code shows the magic of CSS selectors by scanning all elements and selects those containing the text "find me"

One of the function renames that I originally groaned upon hearing the news was Fx.Style and Fx.Styles - these two effects were going to be renamed to Fx.Tween and Fx.Morph. This seemed rather pointless, but apart from the rename of the functions, they added some useful features. The chainability of the effects has been simplified and enhanced, and the effects can be spontaneously paused and resumed throughout their duration with the call of a simple function. Another advantage of the new effects is that an element can be Morphed to match the CSS properties of another element or CSS declaration.

var morphMe = new Fx.Morph('someElement', { 'duration': 400 });
//transition someElement to a text color of black and a width of 600
morphMe.start({ 'color': '#000', 'width': 600});
//transition someElement to the properties defined in the .warning rule in a stylesheet
morphMe.start('.content');
//transition someElement to look the same as a paragraph that has the content class inside the element whose id is container
morphMe.start('#container p.content');

MooTools MooTools 1.2: It's Official!

| June 15, 2008 at 12:06pm | 0 Comments

0 Comments so far

  1. There are currently no comments.
Leave a Comment.