MooTools 1.2 Beta 2

January 16th, 2008, posted by Valerio

Its been almost 2 months since the first 1.2 beta. Bugs were fixed, features were improved, and here it comes: the second beta.

The first big feature we've been working on for 1.2 is Documentation.

1.2 Documentation is in fact almost 5 times more detailed than it was in version 1. Every class option has now its description, every method has a complete list of arguments along with description, type, and now every functionality comes with a code example -- sometimes more than one. If you want to see it for yourself, here is the temporary link for the 1.2 beta documentation.

A lot of the new 1.2 features have now been refined. An example that I'd like to share with you now is the Element Accessors feature. This is completely new for 1.2, aimed at making it easier working with elements and their attributes, properties or "special attributes". Continue reading for 1.2 code examples.

Let's see a basic example of an accessor. I want to work with the href attribute of an element:

$(element).set('href', 'http://mad4milk.net'); //setter
$(element).get('href'); //getter

Pretty easy, and pretty basic too. Now, Let's do something slightly more complex: I want to set the default morph options for an element:

$(element).set('morph', {duration: 100, transition: 'quart:out'});

After I set the morph "special attribute", every time I call the morph method on the element it will respect my defined options:

$(element).morph({height: 200, width: 200});

In addition, the set method now accepts any Object containing any of the settable properties: lets have an example:

$(element).set({
    href: 'http://mad4milk.net',
    text: 'mad4milk website',
    morph: {duration: 200, transition: 'quad:out'},
    events: {
        click: function(){
            document.location.href = this.href;
            return false;
        }
    }
});

Pretty cool huh? We can now basically set anything without chaining. While choosing this style over chaining could be a matter of personal taste, this technique is preferable when using multiple Element methods on a collection of Elements: you will loop through them only once. It will definitely make the code run faster.

Take note that every default element attribute can be managed with the set and get accessors. Other than that you can work with the inner text, the inner html, events and styles, and default effects options.

Last at but not least, we have a complete and public API for those accessors: if you want, say, change a number of things of an element with a single "special attribute" you can define it, and this "special attribute" can then be used like the examples above. For more information about accessors, and more examples, you can go see the new shiny documentation.

Other notable changes since 1.2 beta1 include a fully redesigned dimension system: its now much easier to get window or element dimensions, scrolling offsets, visible height or the full scroll height. Again, for more info, documentation.

If you're not familiar with the changes in 1.2 beta1, you can read more about it in the previous article.

I think this pretty much sums it up: have fun with the 1.2 beta 2 release.

P.S. This is very likely to be the last beta for 1.2.

18 Responses to “MooTools 1.2 Beta 2”

  1. Ryan Rampersad Says:

    Thanks for your hard work. Those docs are wonderful. I'll try to get into the IRC Channel more often.

  2. procyon Says:

    Wow,wow,wow!I was way for a while and one month later I see this...Great,great job Valerio and all the MooTools team!I am so excited about this...gonna play with beta 2 right now! Cheers :)

  3. Joga Luce Says:

    Beautiful. I can't wait to be done with the current flash project I'm working on so I can free up time to work with mootools 1.2b2.

  4. Chris G Says:

    Great work again guys and girls of course, I have been waiting for the docs and the bug fixes. Now I don't have to look at the change log every morning and curse any one for going drinking when there arn't any changes made :P I think the set/get methods are great and intuitive and we all really really appreciate all the effort you put in. I'll definetly buy you guys some beers when I come down to Italy this year :) Cheers from down under!

  5. Joel Lindau (Nevyn) Says:

    Great! I've stayed pretty current with SVN, and am looking forward to the RC and release. 1.2 is a joy to use, and the codequality is absolutely amazing! Also, thankyou for the new improved documentation!

    Great work guys and girls!

  6. tofu Says:

    respect!

  7. jkeks Says:

    Wait for release and maybe some projects remake from jQuery to MooTools Prototype - dancing.

  8. crysfel Says:

    Yeah! i was waiting for this!

  9. tyler Says:

    Thanks for the update! I can't wait for the final release.

  10. Valerio and the Mootools team,

    Thanks for all the time you put into developing this fantastic framework. I've done extensive research into many of the other frameworks, and Mootools is by far my favorite.

    Did you know that www.netvibes.com is using Mootools? I didn't see that on your homepage, and since netvibes.com is a really popular and respected Web 2.0 site, I think it'd be great to see added to the list of Mootools users on the homepage.

    Keep up the great work! Erik

  11. Maximus Says:

    Wow! That's cool! ;)

  12. The best framework got even better! Thanks for the hard work pulling out this beta.

  13. Sam Goody Says:

    With such great work done on the getter and setters, why do you maintain the property setters?

    Is there any difference between: element.set('id','div1') and element.setProperty('id','div1')? Or between element.get({'id','href') and element.getProperties({'id','href'})

    Based on the above article I would guess that we need them for properties that are custom (ie. if i make a rel="house", I would need getProperty('rel'), but for all else get() is enough). Is that correct?

    Great Job, and keep up the great work!!

  14. The get and set functions seem a little out of place to me, almost unnecessary really, maybe I'm missing the point of them I guess.

  15. Matt Says:

    @ Sam Goody: It's actually the opposite. Element.get has a scope of all standard attributes and custom properties. It calls Element.getProperty in the case of standard attributes.

  16. rloaderro Says:

    Wow - I was having some problems with the first beta and discovered this new shiny beta today! Absolutely brilliant work - I can't wait to see what I can do with this new version - to see what I can do smaller and faster! Kudos!

  17. Dicart Says:

    Thanks alot ,, I love that codes alot and I'll start my frist design using them now .. thanks again

  18. Grant Eagon Says:

    I think the next version should define some basic gui elements. The YUI is a neat idea but I <3 mootools. Thanks for all your work and keep it up!

Sorry, comments are closed for this article.