a:4:{s:5:"child";a:1:{s:0:"";a:1:{s:3:"rss";a:1:{i:0;a:6:{s:4:"data";s:3:"


";s:7:"attribs";a:1:{s:0:"";a:1:{s:7:"version";s:3:"2.0";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:1:{s:0:"";a:1:{s:7:"channel";a:1:{i:0;a:6:{s:4:"data";s:66:"
	
	
	
	
	
	
	
	
	
			
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:4:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:8:"MooTools";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:24:"http://mootools.net/blog";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:8:"The Blog";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:13:"lastBuildDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Tue, 18 May 2010 17:26:09 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:9:"generator";a:1:{i:0;a:5:{s:4:"data";s:29:"http://wordpress.org/?v=2.9.2";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"language";a:1:{i:0;a:5:{s:4:"data";s:2:"en";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"item";a:15:{i:0;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:40:"A Magical Journey into the Base Fx Class";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/yqYRrbraFpg/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:86:"http://mootools.net/blog/2010/05/18/a-magical-journey-into-the-base-fx-class/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Tue, 18 May 2010 16:46:10 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=928";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:330:"Fx is not just for animating elements

In a recent project I worked on with Thomas Aylott the page did some calculations and displayed the result after the user pulled some sliders around.  Rather than just change the text from one number to another, the element would increment the number before the user&#8217;s very eyes. [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:13:"Ryan Florence";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:7282:"<h3>Fx is not just for animating elements</h3>

<p>In a <a href="http://www.capitaloneventure.com">recent project</a> I worked on with Thomas Aylott the page did some calculations and displayed the result after the user pulled some sliders around.  Rather than just change the text from one number to another, the element would increment the number before the user&#8217;s very eyes.  With a fun interface like that, they had no choice but to apply for a new credit card right then.</p>

<p>Admittedly, I may not have thought to extend Fx to do something like that.  After all, the first line of the docs for Fx is: &#8220;This Class will rarely be used on its own, &#8230;&#8221;  My first thought would be to use a periodical with a counter and then set the text until the counter was done.  But Thomas extended Fx instead.  Though it&#8217;s the base class for all animations (tween, morph, scroller, etc.) its methods can be used for all sorts of abstract &#8220;animations.&#8221;</p>

<p>For this article I&#8217;ve just come up with a few potentially useful extensions of Fx to get the idea across that you can use it for more than just element animations.</p>

<h3>How Fx Works</h3>

<p>Essentially Fx just calculates a sequence of values between two numbers.  The options kick in to make those values more interesting.  This class, Fx.Log, simply updates the text of an element every step of the effect.  Notice that this class is essentially the base Fx class except for the tiny set method.</p>

<iframe style="width: 100%; height: 340px" src="http://jsfiddle.net/rpflorence/xkBSW/embedded/"></iframe>

<p>Here&#8217;s another demo that visualizes all the visible options of Fx.  After you draw the effect, hover the dots to see the exact value calculated (or view source and see them all together.)  Playing around with this demo might tell you more about how Fx works than anything else out there.</p>

<iframe style="width: 100%; height: 550px" src="http://jsfiddle.net/rpflorence/xjJu8/3/embedded/"></iframe>

<h3>Fx.Diff</h3>

<p>By default, Fx uses 50 fps.  So every second it&#8217;ll kick out 50 different values and fire the set method 50 different times.  For the next few demos I only wanted to do something if the rounded value is different than the last rounded value, so I came up with <code>Fx.Diff</code>.  If the value is different, it&#8217;ll call the render method.</p>

<pre><code>Fx.Diff = new Class({

    Extends: Fx,
    count: 0,
    render: $empty,

    set: function(now){
        now = now.round();
        var diff = now - this.count;
        if (diff) {
            this.render(diff, now);
            this.count += diff;
        }
        return this;
    }

});
</code></pre>

<h3>Fx.Count</h3>

<p>Since this appears to be no different than the very first demo, we&#8217;ll just look at the code.  Note, the difference is that the first counting demo would change the text in the element every single frame (50 times a second), but this code would only change it if the new rounded value is different from the last.</p>

<pre><code>Fx.Count = new Class({

    Extends: Fx.Diff,

    initialize: function(element, options){
        this.element = document.id(element);
        this.parent(options);
    },

    render: function(){
        this.element.set('text', this.count);
        return this;
    }

});
</code></pre>

<h3>Fx.Typewriter</h3>

<p>I can actually see myself using this one somewhere:</p>

<iframe style="width: 100%; height: 500px" src="http://jsfiddle.net/rpflorence/2xcUu/1/embedded/"></iframe>

<p>Notice that Fx.Typewriter overwrites the <code>start</code> method of Fx.  The Fx start method takes two arguments, <code>from</code> and <code>to</code>.  The usage for Fx.Typewriter is to simply pass in a string of text like so: <code>myFx.start('A whole bunch of text')</code>.  This new method knows the <code>from</code> argument is always 0, splits up the text into an array (one item per character) and then uses that length as the <code>to</code> argument.  After that logic is done, it simply calls the parent start method.  Then  the <code>render</code> method takes over by figuring out how many characters to display, filtering out the tail end of the array, joining what matters, and finally setting the text of our element.</p>

<h3>Fx.Text</h3>

<p>There&#8217;s a very creative effect called <a href="http://mootools.net/forge/p/fx_text">Fx.Text on the forge</a>.  It&#8217;s an animated text replacement effect.  I think it&#8217;s really cool and does a great job of extending Fx.</p>

<h3>Fx.Cornify</h3>

<p>This next script is far too magical to simply show you the code.  You&#8217;ll need to view the source for this beauty.</p>

<form id="cornifyOptions">
    <p>
        How many? (caution, start with low numbers) <input id="amount" type="text" value="10">
    </p>
    <p>
        Duration: <input type="text" id="duration" value="10000">
    </p>
    <p>
    <input type="submit" value="Cornify!"> <span id="bePatient"></span>
    </p>
</form>

<script type="text/javascript"><!--
Fx.Diff = new Class({
    
    Extends: Fx,
    
    count: 0,
    render: $empty,
    
    set: function(now){
        now = now.round();
        var diff = now - this.count;
        if (diff) {
            this.render(diff, now);
            this.count += diff;
        }
        return this;
    }

});

Fx.Cornify = new Class({
    
    Extends: Fx.Diff,

    initialize: function(options){
        this.loaded = false;
        new Element('script', { 
            src: 'http://www.cornify.com/js/cornify.js'
        }).inject($(document.body));

        this.addEvent('start',function(){
            if (!this.iFrame) {
                this.iFrame = new Element('iframe', {
                    src: 'http://www.soundclick.com/player/single_player.cfm?songid=721192&#038;cache=3&#038;q=hi&#038;shuffle=false',
                    width: 1,
                    height: 1,
                    frameborder: 0,
                    styles: {
                        width: 0,
                        height: 0
                    }
                }).inject($(document.body)) 
            }
        }.bind(this));

        this.parent(options);
    },
    
    start: function(amount){
        this.parent(0, amount);
        return this;
    },
    
    render: function(){
        cornify_add();
    }

});

var myCornify;
window.addEvent('domready',function(){
    
    myCornify = new Fx.Cornify();

    $('cornifyOptions').addEvent('submit', function(event){
        event.stop();
        window.scrollTo(0,0);
        myCornify.options.duration = $('duration').value.toInt();
        myCornify.start($('amount').value.toInt());
        $('bePatient').set('text', 'Be patient!');
    });

});
// --></script>

<p><em>Ryan Florence is a MooTools enthusiast and contributor.  He maintains his JavaScript focused <a href="http://ryanflorence.com">blog</a>, <a href="http://moodocs.net">MooDocs.net</a>, and <a href="http://moo4q.com">moo4q</a>.  Follow him on <a href="http://twitter.com/ryanflorence">twitter</a> or checkout his plugins on the <a href="http://mootools.net/forge/profile/rpflo">Forge</a>.</em></p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/yqYRrbraFpg" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:82:"http://mootools.net/blog/2010/05/18/a-magical-journey-into-the-base-fx-class/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"7";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:77:"http://mootools.net/blog/2010/05/18/a-magical-journey-into-the-base-fx-class/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:1;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:33:"Announcing: MooTools in Real Life";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/RTvQeT68o_M/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:67:"http://mootools.net/blog/2010/05/05/mootools-in-real-life/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Wed, 05 May 2010 17:52:49 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:4:"News";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=850";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:372:"If you&#8217;ve been paying attention for the past few years, you&#8217;ve probably noticed the growth of MooTools, both as a project and as a thriving community.  Unfortunately, it has come to light that many so called &#8220;members&#8221; of the JavaScript community may, in fact, be automata.

To protect ourselves and the MooTools community, we&#8217;ve started [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:8:"yuffster";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:1929:"<p>If you&#8217;ve been paying attention for the past few years, you&#8217;ve probably noticed the growth of MooTools, both as a project and as a thriving community.  Unfortunately, it has come to light that many so called &#8220;members&#8221; of the JavaScript community may, in fact, be automata.</p>

<p>To protect ourselves and the MooTools community, we&#8217;ve started two physical screening programs (or &#8220;meetups&#8221;), one in London and the other in the heart of Silicon Valley.</p>

<p>In a surprising turn of events, both groups have had very informative meetings in which <em>actual people</em> have shown up, allowing us to conclusively state that at least some of the members of the MooTools community are, in fact, human.  Insightful discussions were had by all, new users and advanced developers alike.</p>

<p>If you&#8217;re in the Bay Area or London, it is imperative that you attend at least one of our screening sessions, to verify yourself as human.  To be notified about future meetups, as well as voice your opinion on when/where they should be, you can join the Meetup.com group for your area:</p>

<ul>
<li><a href="http://www.meetup.com/MooToolsLondon/">MooTools London</a></li>
<li><a href="http://www.meetup.com/MooToolsBayArea/">MooTools Bay Area</a></li>
</ul>

<h3>Anything Interesting to Share?</h3>

<p>If you have something insightful and MooTools-related to share, and think you can spin it into a fifteen minute presentation, please let us know.</p>

<p>Right now, we don&#8217;t have any formal communication set up, but it shouldn&#8217;t be to hard to get in touch with either Darren (London) or myself (Bay Area).  Contact information can be found on <a href="http://mootools.net/developers">the developers page</a>.</p>

<p>Thanks for using MooTools, and we hope to see you there!</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/RTvQeT68o_M" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:63:"http://mootools.net/blog/2010/05/05/mootools-in-real-life/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:2:"16";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:58:"http://mootools.net/blog/2010/05/05/mootools-in-real-life/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:2;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:39:"More than Meets the Eye: Form Validator";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/ZqO2y-gd4Iw/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:84:"http://mootools.net/blog/2010/04/30/more-than-meets-the-eye-form-validator/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Fri, 30 Apr 2010 20:09:03 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:8:"Features";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:13:"Tips & Tricks";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=880";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:353:"Continuing with my &#8220;More than Meets the Eye&#8221; series, today I want to talk to you about the MooTools More Form.Validator. There was a comment left on my last post in this series (about Form.Request) specifically requesting that I cover this relatively complex plugin that&#8217;s useful for telling users about the validity of data they [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:5:"aaron";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:11943:"<p>Continuing with my &#8220;More than Meets the Eye&#8221; series, today I want to talk to you about the <a href="http://mootools.net/docs/more/Forms/Form.Validator">MooTools More <code>Form.Validator</code></a>. There was a comment left on my <a href="http://mootools.net/blog/2010/03/04/more-than-meets-the-eye/">last post in this series (about <code>Form.Request</code>)</a> specifically requesting that I cover this relatively complex plugin that&#8217;s useful for telling users about the validity of data they enter into forms before they send them.</p>

<h3>Getting Started with Validators</h3>

<p>The main class you need to concern yourself with is the <code>Form.Valdiator</code> class itself which provides methods that apply specific rules to inputs to see if they are valid. You can then choose how you want to inform your users that they need to address these problems, but that&#8217;s not the job to <code>Form.Validator</code> (though it is the job of <code>Form.Validator.Inline</code>, which we&#8217;ll cover in a bit).</p>

<p>Let&#8217;s talk little bit about the rules that are applied. Form.Validator allows you to define rules that test the state of an input and return <code>true</code> or <code>false</code> - <code>true</code> if the input passes the validation rule, and <code>false</code> if it doesn&#8217;t. Here&#8217;s a simple example:</p>

<pre><code>Form.Validator.add('doesNotContainTheLetterQ', {
        errorMsg: 'This field cannot contain the letter Q!',
        test: function(field){
                return !field.get('value').test(/q/,'i');
        }
});
</code></pre>

<p>The above code adds a global validator that allows you to assert that the input doesn&#8217;t use the letter Q. The arguments are the validators&#8217; key and then an object that contains an error message to show the user should they encounter the error, and a function that is passed the input as an argument. This function inspects the value or, really, anything you like, and then returns <code>true</code> or <code>false</code>.</p>

<p>The key you give your validator is important. At any time you can validate a field against any validator by using this key as a reference by doing:</p>

<pre><code>myFormValidator.test(key, input[, warnOnly]);
</code></pre>

<p>The first two arguments are the important ones here; the key of your validator and the input to test. Where things get interesting are when <code>Form.Validator</code> does this for you. By giving your input that key as a css class name, you tell <code>Form.Validator</code> to validate that field with this validator. In this manner you can quickly and unobtrusively decorate your inputs with the requirements and validate the form. If something goes wrong with your JavaScript, your form will submit as normal. Here&#8217;s a really simple example:</p>

<iframe style="width: 100%; height: 300px" src="http://mootools.net/shell/rHcmJ/embedded/"></iframe>

<p>The alerts aren&#8217;t pretty, but you can see how our validator is now applied when you submit the form.</p>

<p>Form.Validator ships with <a href="http://mootools.net/docs/more/Forms/Form.Validator#Validators">several validators listed in the documentation</a>. These include simple stuff like <code>required</code> that just validates that the user put something - anything - in the input. But there are also validators for email addresses, only letters, dates, urls, etc. The key is you can write your own - you don&#8217;t need to wait for us to release something for you to make use of it. There are an extended list of validators in <a href="http://mootools.net/docs/more/Forms/Form.Validator.Extras"><code>Form.Validator.Extras</code></a> that include some edge cases. Things like validating that two inputs have the same value (like an email verification for example).</p>

<h3>Using Validators with Arguments</h3>

<p>It&#8217;s also possible to configure validators with data unique to the input. For example, let&#8217;s say you want to have an input with a minimum length validator - the user must type in at least 5 characters. You could write a validator called <code>minimum5</code> or whatever, but then you&#8217;d have to duplicate it for any other character length. For this purpose, Form.Validator allows you to assign values to the input, like so:</p>

<pre><code>&lt;input type="text" name="username" class="minLength:10" id="username"/&gt;
</code></pre>

<p>These values - the 10 and 100 values in the example above - get passed along as JSON decoded values to the validator. Here&#8217;s what that looks like:</p>

<pre><code>Form.Validator.add('minLength', {
    errorMsg: function(element, props){
        return 'Please enter at least {minLength} characters (you entered {length} characters).'.substitute({minLength:props.minLength,length:element.get('value').length });
    },
    test: function(element, props){
        if (props.minLength != null) return (element.get('value').length &gt;= props.minLength;
        else return true;
    }
});
</code></pre>

<p>As you can see, the error message (which in our previous validator was just a string - the message) can also be a function which is passed the input and then any properties defined in the HTML. The fact that the message can be a function allows you to include information not only about how the validator is configured but also other information, like some aspect of the value the user actually entered. The test is also passed along these p roperties of course which allows you to make the properties a condition of the test. We could, in theory, rewrite our <code>doesNotContainTheLetterQ</code> validator to accept an argument about the character (or, better yet, characters) that we want to disallow:</p>

<pre><code>Form.Validator.add('doesNotContain', {
    errorMsg: function(field, props){
        return 'The value you input cannot contain any of the following letters: ' + props.doesNotContain;
    },
    test: function(field, props){
        if (props.doesNotContain)
            return !field.get('value').match(new RegExp('[' + props.doesNotContain + ']', 'i'));
        else return true;
    }
});
</code></pre>

<p>Note that the properties defined have to be JSON decodable, so you can&#8217;t have your input like this:</p>

<pre><code>&lt;input type="text" class="doesNotContain:qz"/&gt;
</code></pre>

<p>Instead you&#8217;d have to quote the string:</p>

<pre><code>&lt;input type="text" class="doesNotContain:'qz'"/&gt;
</code></pre>

<p>Here&#8217;s our example:</p>

<iframe style="width: 100%; height: 300px" src="http://mootools.net/shell/A5Wgg/embedded/"></iframe>

<p>The base <code>Form.Validator</code> class comes with a plethora of options and events. You can configure it to validate inputs whenever they change (on blur), or to only show one error at a time (serial). You can tell it to ignore hidden fields (those that are not visible, there&#8217;s no point in validating inputs with type=&#8221;hidden&#8221;) and disabled inputs. There are numerous useful methods that let you run the entire validation routine on the form (<code>.validate()</code>), reset all the errors (<code>.reset()</code>) or validate / reset a specific field (<code>.validateField()</code> and <code>.resetField()</code>). You can pause the validator and resume it (<code>.stop()</code> and <code>.start()</code>) as well as ignore / un-ignore a specific field (<code>.ignoreField()</code> and <code>.enforceField()</code>) and more. There&#8217;s even an element method that lets you validate a form (<code>Element.prototype.validate</code>).</p>

<h3>Form.Validator.Inline - the &#8220;Pretty&#8221; One</h3>

<p>Now that we&#8217;ve covered the basics of how <code>Form.Validator</code> works, let&#8217;s consider the fact that our examples so far have been rather ugly (who wants alert messages?). MooTools More ships with a default implementation that smoothly displays messages inline, right after the input: <a href="http://mootools.net/docs/more/Forms/Form.Validator.Inline"><code>Form.Validator.Inline</code></a>. This class is the &#8220;pretty&#8221; version of <code>Form.Validator</code> but don&#8217;t think of it as the only game in town. You can easily implement your own &#8220;pretty&#8221; version without a lot of effort. If you want to put errors in a popup or fade them in over the entire screen or play a sound it doesn&#8217;t matter. The base <code>Form.Validator</code> class is there for you.</p>

<p>Looking at the <code>Form.Validator.Inline</code> implementation, you&#8217;ll find all the same options and methods from <code>Form.Validator</code> along with a few extras that control how your messages appear. For instance, by default, the validation rules show up immediately after the input. This requires a bit of forethought in how you structure your HTML. If your input is inline with something else (like a submit button), validation errors are going to change that when they appear (because they are divs, which by default are block level elements).</p>

<p>The only real option that <code>Form.Validator.Inline</code> has to offer is whether or not to scroll to errors (useful if your form is long and will likely cause the user to scroll to the submit button). Here&#8217;s a simple example, building on our previous one:</p>

<iframe style="width: 100%; height: 300px" src="http://mootools.net/shell/YfTwL/embedded/"></iframe>

<p>As you can see, the error message slides in, but it breaks our layout a bit. Let&#8217;s do some CSS work to make this look a little nicer.</p>

<iframe style="width: 100%; height: 300px" src="http://mootools.net/shell/YfTwL/2/embedded/"></iframe>

<p>It&#8217;s not The Sistine Chapel but it does look nicer. Our error doesn&#8217;t appear to break our layout anymore either.</p>

<p>As a final example, I&#8217;ll show you a version that extends <code>Form.Validator.Inline</code> to put the validation messages in tips that popup pointing at the input. Here&#8217;s a demo:</p>

<iframe style="width: 100%; height: 300px" src="http://mootools.net/shell/S4uXn/embedded/"></iframe>

<p>If you want you can <a href="http://github.com/anutron/clientcide/blob/master/Source/Forms/Form.Validator.Tips.js">check out the source on github</a> and <a href="http://clientcide.com/js">download it with its dependencies on Clientcide</a>.</p>

<h3>Go Forth and Validate</h3>

<p>Overall the purpose of <code>Form.Validator</code> is not to be the only solution for displaying validation messages to your users, but rather a flexible solution for client side form validation on which to build. You can extend it and manipulate it to display messages in any way you choose - and you should!. The default &#8220;pretty&#8221; implementation - <code>Form.Validator.Inline</code> - is just one way to use the class. In my opinion <code>Form.Validator</code> is one of the classes in MooTools More that shows off the power of MooTools&#8217; object oriented design, allowing for a great deal of flexibility and reuse.</p>

<p>Thanks to <a href="http://mootools.net/blog/2010/03/04/more-than-meets-the-eye/#comment-908">Lloyd for suggesting this edition&#8217;s topic</a>. If there&#8217;s a plugin in MooTools More you&#8217;d like me to focus on next time, by all means, make a suggestion in the comments.</p>

<p><em>Aaron Newton is a contributor to MooTools and the principal developer of MooTools More. He is the author of the book <strong>MooTools Essentials</strong> as well as the <a href="http://mootorial.com">Mootorial</a> online MooTools tutorial. He posts (rarely these days) at his blog <a href="http://clientcide.com">Clientcide.com</a> and (much more often) on Twitter as <a href="http://twitter.com/anutron">anutron</a>. He works for <a href="http://www.cloudera.com">Cloudera</a>, (which is hiring, by the way).</em></p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/ZqO2y-gd4Iw" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:80:"http://mootools.net/blog/2010/04/30/more-than-meets-the-eye-form-validator/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"5";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:75:"http://mootools.net/blog/2010/04/30/more-than-meets-the-eye-form-validator/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:3;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:20:"MooTools 1.3 ßeta 1";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/2uOv4XUrCFI/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:65:"http://mootools.net/blog/2010/04/27/mootools-1-3-beta-1/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Tue, 27 Apr 2010 23:25:06 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=856";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:369:"MooTools 1.3 beta 1 launches today. Lots of bug fixes and improvements, and all that jazz. Before presenting you with a random rundown of features, let me be clear about something: MooTools 1.3 is (or will be) 100% compatible with every public documented API of MooTools 1.2. So chill already.

Anyways, here&#8217;s what&#8217;s new:

Globals

MooTools 1.3 moves [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:8:"kamicane";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:8182:"<p>MooTools 1.3 beta 1 launches today. Lots of bug fixes and improvements, and all that jazz. Before presenting you with a random rundown of features, let me be clear about something: MooTools 1.3 is (or will be) 100% compatible with every public documented API of MooTools 1.2. So chill already.</p>

<p>Anyways, here&#8217;s what&#8217;s new:</p>

<h3>Globals</h3>

<p>MooTools 1.3 moves away from the <code>$name</code> functions. Most of the useless ones, such as <code>$chk</code> (god knows why I thought it was a good idea to have <code>$chk</code>), were completely nixed. Some of them moved to the proper object&#8217;s namespace (<code>$merge</code>&#160;» <code>Object.merge</code>, <code>$pick</code>&#160;» <code>Array.prototype.pick</code>). Some others were renamed without the stupid <code>$</code> in front (<code>$type</code>&#160;» <code>typeOf</code>, <code>$defined</code>&#160;» <code>nil</code>). In the end, there are a lot less global variables now. You can refer to the 1.3 documentation to have a proper list of what&#8217;s changed. Keep in mind that the old version of the methods will still work, by default. There will be a way in the future to &#8220;compile&#8221; MooTools without the compatibility stuff, but the feature is not ready yet.</p>

<h3>From types with love</h3>

<p>Every native type has now a <code>from</code> method that will try to convert every object passed to that type. <code>Array.from</code>, for instance, replaces both <code>$A</code> and <code>$splat</code>. <code>Function.from</code> will return a function that returns the passed in value, if it wasn&#8217;t a function itself. <code>String.from</code>&#8230; well you know that at this point, don&#8217;t you? We also changed how we internally handle Native types, but that should be none of your concerns, since they were handled with private apis anyways.</p>

<h3>Generating your own MooTools, from your own computer</h3>

<p>It is now possible, easy, and even perhaps recommended to generate MooTools (and its plugins) yourself. Last few months I&#8217;ve been working, on and off, on a pretty advanced projects-builder. It&#8217;s called Packager, it supports multiple project dependancies and has a very similar syntax of what&#8217;s used in the Forge right now. It&#8217;s written in php and you can use it from your php webpages to dynamically include JavaScripts for development, or you can build a single .js for production from the command line.</p>

<p>If you care to build MooTools and MooTools projects for yourself, you should take these steps:</p>

<ol>
<li>Clone <a href="http://github.com/mootools/mootools-core/tree/1.3b1.1">MooTools 1.3b1.1</a> from github.</li>
<li>Clone whatever other Packager-ready MooTools project from github (<a href="http://github.com/kamicane/mootools-color">color</a>, <a href="http://github.com/kamicane/mootools-table">table</a> and <a href="http://github.com/kamicane/mootools-touch">touch</a>, for instance, are my Packager-ready plugins).</li>
<li>Clone <a href="http://github.com/kamicane/packager">Packager</a> itself from github.</li>
<li>Read Packager&#8217;s <a href="http://github.com/kamicane/packager/blob/master/README.md">README</a>. Pretty much everything you need to know is in there.</li>
</ol>

<p>Ofcourse, Packager itself is not limited to MooTools, MooTools plugins or just javascript projects. A tutorial post on how to use Packager for development is coming soon (few years tops).</p>

<p>If you dislike php, worry not! There is also a Django builder, called Depender, written by our <a href="http://www.clientcide.com/">Aaron Newton</a>, on github as well. I really don&#8217;t know how it works, as I don&#8217;t do python, but I do know it&#8217;s scope is way greater than that of Packager. Depender can, for instance, dynamically build your MooTools for production use, like that. But don&#8217;t take my word for it, go <a href="http://github.com/anutron/mootools-depender">check it out on github</a>.</p>

<h3>Slick</h3>

<p>The most notable new feature in 1.3 is <em>Slick</em>. <em>Slick</em> is our new, shiny, super fast, exhaustively tested, pure-javascript selector engine. There will probably be a dedicated <em>Slick</em> post in the following days (or months, given our relaxed release cycles), but here&#8217;s a few Slick-facts for those who haven&#8217;t checked it out already:</p>

<ul>
<li><em>Slick</em> is a MooTools-family project by MooTools developers <a href="http://subtlegradient.com/">Thomas Aylott</a>, <a href="http://www.meiocodigo.com/">Fabio Costa</a> and <a href="http://mad4milk.net">yours truly</a>. It can be <a href="http://github.com/mootools/slick">forked from github</a>, free of charge!</li>
<li><em>Slick</em> is an incredibly advanced evolution of our previous selector engine.</li>
<li><em>Slick</em> is written using only pure-javascript, none of the MooTools apis are required. It can be used in any project or framework, and it does not require MooTools to function (though the MooTools DOM components do require <em>Slick</em>).</li>
<li><em>Slick</em> is speedy, blows away the 1.2 selector engine by 50%, at least. We will give you detailed data in the post dedicated to <em>Slick</em>.</li>
<li><em>Slick</em> supports every selector you can think of. Seriously, every one of them. I promise you.</li>
<li><em>Slick</em> is customizable, you can make your own pseudo-selectors, your own attribute-selectors, and many more your-own kinds of things.</li>
<li><em>Slick</em> supports reversed combinators. You might not know what they are, but they are pretty darn cool.</li>
<li><em>Slick</em> has a <a href="http://github.com/mootools/slick/blob/master/Slick.Parser.js">detached parser</a>. You can parse a css-style-selector string and get back a property-filled object.</li>
<li><em>Slick</em> perfectly supports XML documents.</li>
<li><em>Slick</em> is slick!</li>
</ul>

<p>On another note, thanks to the <em>Slick</em>&#8217;s parser, you will be able to build an element using a css selector. Let me give you an example of this cool new feature (courtesy of our amazing <a href="http://cpojer.net">Christoph Pojer</a>):</p>

<h4>Creating an element using an object (the 1.2 way):</h4>

<pre><code>new Element("input", {"id": "someID", "class": "someClass1 someClass2", "disabled": true});
</code></pre>

<h4>Creating an element using a selector string (the coolest way):</h4>

<pre><code>new Element("input#someID.someClass1.someClass2[disabled=true]");
</code></pre>

<h3>In conclusion</h3>

<p>As I get back to work on an exciting number of totally amazing upcoming MooTools projects that you know nothing about because <a href="http://github.com/kamicane">you don&#8217;t follow me on github</a>, I&#8217;ll leave you with a few useful 1.3 links:</p>

<ul>
<li>Download the <a href="http://mootools.net/download/get/mootools-core-1.3b1.1.js">built 1.3 beta 1 release</a>.</li>
<li><a href="http://github.com/mootools/mootools-core/tree/1.3b1.1">Fork / clone MooTools 1.3</a> from github, and build it yourself with <a href="http://github.com/kamicane/packager">Packager</a>, or <a href="http://github.com/anutron/mootools-depender">Depender</a>.</li>
<li>If you want a full changelog, go <a href="http://github.com/mootools/mootools-core/commits/1.3b1.1">read the git history</a>, you lazy bastard. Changelogs are so 2001.</li>
<li>Wondering how those amazing new methods are called? You can <a href="http://github.com/mootools/mootools-core/tree/1.3b1.1/Docs/">browse our markdown documentation</a> right on github.</li>
<li>And don&#8217;t forget to <a href="https://mootools.lighthouseapp.com/projects/2706-mootools/tickets">report any issue</a> you find with the beta, compatibility or not! The more reports we get, the fastest we&#8217;ll have a final release.</li>
</ul>

<p><strong>UPDATE</strong>: There was a &#8220;merge&#8221; problem with beta1, so we quickly fixed it and re-tagged <a href="http://github.com/mootools/mootools-core/tree/1.3b1.1">beta 1.1</a>.</p>

<p>Have fun with 1.3! I know I will.</p>

<p>Valerio</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/2uOv4XUrCFI" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:61:"http://mootools.net/blog/2010/04/27/mootools-1-3-beta-1/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:2:"26";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:56:"http://mootools.net/blog/2010/04/27/mootools-1-3-beta-1/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:4;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:56:"Object Oriented jQuery with MooTools @ jQuery Conference";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/Hak6UkrhDD0/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:100:"http://mootools.net/blog/2010/04/27/object-oriented-jquery-with-mootools-jquery-conference/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Tue, 27 Apr 2010 13:12:36 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:4:"News";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=859";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:336:"Hey there MooToolers.  I just returned from speaking at jQuery Conference 2010 in San Francisco on &#8220;Object Oriented jQuery with MooTools&#8221; and thought I&#8217;d share some notes on the experience.

My Talk

If you ask me how I did I&#8217;d say I missed a few connecting ideas but got the concept out there and got some [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:13:"Ryan Florence";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:2838:"<p>Hey there MooToolers.  I just returned from speaking at jQuery Conference 2010 in San Francisco on &#8220;Object Oriented jQuery with MooTools&#8221; and thought I&#8217;d share some notes on the experience.</p>

<h3>My Talk</h3>

<p>If you ask me how I did I&#8217;d say I missed a few connecting ideas but got the concept out there and got some people thinking. Several people came up to me afterward asking how to actually give this a shot on their web apps.  Also, if you are reading this on a Mac, do this: command + option + control + 8 (⌃⌥⌘8).  I think for the first time in the history of OSX this keyboard shortcut was useful.  The projector had a hard time with my bright colored code on a black background so I inverted the the whole presentation!</p>

<p>Some of you have read my post <a href="http://ryanflorence.com/object-oriented-jquery-with-mootools-pigs-take-flight/"><em>Pigs take flight</em></a> about using the <code>Class</code> module from MooTools to write modular code in a way we all love but use jQuery for DOM manipulation, effects, AJAX, etc.  That was the basis of my talk.  You can find the slides and a demo at my blog <a href="http://ryanflorence.com/jquery-conference-slides-and-demo/">here</a>.</p>

<p>The Demo is especially awesome.</p>

<h3>Thoughts</h3>

<p>It was very well attended, said to be the largest JavaScript conference ever.  There were a lot of really talented people there and all of the speakers did great.  I am humbled by the ability of the jQuery team to put together great events and market their library, I&#8217;d even say a bit jealous!</p>

<p>It seems at the user level people see frameworks as rivals or something, but at the framework developer level they generally feel like we&#8217;re on the same team, working to make the web better.</p>

<p>There was a lot of talk about organizing code, which is a problem that jQuery doesn&#8217;t try to solve.  I don&#8217;t think any other framework can step in quite like MooTools to do it and yet keep the jQuery API in tact when writing an application&#8217;s code (thanks to mutators). Another testament that -core is rock solid and ridiculously versatile for JavaScript generally, not just the DOM.  I also found that a lot of people didn&#8217;t know that you can create custom builds of MooTools to solve all sorts of JavaScript problems.</p>

<p>So, thanks jQuery for a great weekend!</p>

<ul>
<li><a href="http://ryanflorence.com/jquery-conference-slides-and-demo/">Slides and Demo</a></li>
<li><a href="http://ryanflorence.com/object-oriented-jquery-with-mootools-pigs-take-flight/">Pigs Take Flight Blog Post</a></li>
<li><a href="http://events.jquery.org/2010/sf-bay-area/">jQuery Conference 2010 SFO</a></li>
</ul>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/Hak6UkrhDD0" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:96:"http://mootools.net/blog/2010/04/27/object-oriented-jquery-with-mootools-jquery-conference/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"1";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:91:"http://mootools.net/blog/2010/04/27/object-oriented-jquery-with-mootools-jquery-conference/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:5;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:17:"Dojo and MooTools";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/mCQIVZtp9QM/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:63:"http://mootools.net/blog/2010/04/01/dojo-and-mootools/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Thu, 01 Apr 2010 16:02:54 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=841";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:314:"Over the past several months we here at MooTools have been contemplating how much of what we do is duplicated effort. When we started this whole project years ago it was because we wanted to do things our own way, but as MooTools and JavaScript in general have progressed, we find ourselves facing the tedium [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:5:"aaron";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:5373:"<p>Over the past several months we here at MooTools have been contemplating how much of what we do is duplicated effort. When we started this whole project years ago it was because we wanted to do things our own way, but as MooTools and JavaScript in general have progressed, we find ourselves facing the tedium of all the low lying code that has to be written to get Browsers to play nice, not to mention the richer things like our inheritance system and other utilities like effects, DomReady, etc. etc.</p>

<p>At FOSDEM we ended up hanging out with the Dojo crew. We like them; they are always doing interesting things and their framework is one that we&#8217;ve always looked at and said to ourselves, &#8220;If we ever needed feature X we&#8217;d probably just port it from them.&#8221; Anyway, at FOSDEM a group of their developers and ours got together and started brainstorming about closer ways to work together. Since then the discussion has gotten closer and closer to where we are now.</p>

<h3>MooJo</h3>

<p><img src="/uploads/moojo.png" width="179" height="79" style="float: left; margin: 10px"/>
Starting today the Dojo and MooTools projects will begin merging and joining forces. Part of this is to share resources - more hands coding makes more code, right? But part of it is, well, we&#8217;ll be frank, we&#8217;re kind of tired of reinventing the wheel. We love the solutions in MooTools, but at the end of the day, the API is all that matters. It doesn&#8217;t matter how you detect that the DOM is ready, so long as when it is your code runs. The same could be said for selector engines, XMLHttpRequest, and a whole host of other things. What this means in practical terms is that we just don&#8217;t have to do as much work and, to be frank, after 4 years of working on MooTools, we&#8217;re happy to cede some of the more tedious tasks to Dojo. Sure, their architecture isn&#8217;t quite the same (or maybe even as good) as ours, but it works. This will free our development team&#8217;s time to work on their own projects and maybe start getting paid for it, which brings us to the second point.</p>

<h3>Making MooJo Profitable</h3>

<p>For the past four years we&#8217;ve been writing code and releasing it for free. In our talks with the Dojo team we all agreed that all this free time donated to anyone who happened to want our work just wasn&#8217;t quite worth the hassle. Don&#8217;t get us wrong, writing the code is fun, but it&#8217;s all the other stuff. The bug reports, the hand-holding in the forums and on IRC, the constant demand to &#8220;compete&#8221; with other frameworks (whatever that means). It just sucks the pleasure right out of it. We find ourselves burning nights and weekends to write code for strangers to use and it gets old.</p>

<p>Going forward, the code base will continue to be free, but access to the documentation will require a small &#8220;donation&#8221; (we&#8217;ll probably set a really small minimum, like, say $.25) - frankly, the documentation has gotten too good to be free (we contemplated printing it and just selling it as a book, but micropayments is much more &#8220;Web 2.0&#8221;). Filing bugs will still be free of course. But we&#8217;re working on a system that lets our users put money towards the bugs they care about the most. The bug with the most money donated gets our time and gets in the next release. We think this will cut down on both the number of bugs we get but also help manage expectations. If you have a bug that you think is important, you either need a lot of people to agree with you (which they will if the bug is really broad) or you need to pay a lot (in which case it&#8217;s like you&#8217;re hiring us as freelancers).</p>

<p>What will we do with the money raised? We&#8217;ll probably start sponsoring more meet-ups and sending more people to conferences, but we&#8217;ll also be able to compensate the developers who bring you all this great stuff. Certainly no one can argue with that.</p>

<h3>Compatiblity</h3>

<p>As we begin merging functionality we&#8217;ll likely retire large portions of both frameworks. MooTools has a great effects library while Dojo has a lot of solid widgets. MooTools ART will likely get shelved in favor of <code>dojo.gfx</code>, Dojo will likely drop it&#8217;s effects libraries in favor of MooTools&#8217; effects which are really nice, much of MooTools More will either be retired (in favor of existing Dojo widgets) or turned into Dojo widgets themselves, etc.</p>

<p>For backwards compatibility we&#8217;ll be implementing the &#8220;donation&#8221; system as well. For the portions of the MooTools and Dojo cores that are deprecated we&#8217;ll allow the users to prioritize which parts we offer compatibility for. Same goes for effects, plugins, etc. We hope this new model will encourage businesses that use our awesome frameworks to recognize the value we bring and to compensate us for our time.</p>

<p>If you have any questions, post them in the comments below. Comments are still free - we haven&#8217;t implemented the &#8220;donation&#8221; system for them yet, either.</p>

<p><strong>Update</strong>: Yes, this was an April Fool&#8217;s joke. We love Dojo and that whole team&#8230; but not <em>that</em> much.</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/mCQIVZtp9QM" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:59:"http://mootools.net/blog/2010/04/01/dojo-and-mootools/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:2:"42";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:54:"http://mootools.net/blog/2010/04/01/dojo-and-mootools/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:6;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:29:"Get friendly with the Natives";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/5zoQ8vNb2LY/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:75:"http://mootools.net/blog/2010/03/23/get-friendly-with-the-natives/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Wed, 24 Mar 2010 02:48:56 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:13:"Tips & Tricks";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=739";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:367:"Have you extended a Native lately? It&#8217;s an incredibly helpful thing. Often people write ugly functions that take a string or whatever as an argument and return some manipulation of the string. Extending natives is a great way to do the same thing, but it is much prettier (aka: explicit, readable, easier-to-debug.)

The Difference:

I&#8217;ve seen stuff [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:13:"Ryan Florence";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:4274:"<p>Have you extended a Native lately? It&#8217;s an incredibly helpful thing. Often people write ugly functions that take a string or whatever as an argument and return some manipulation of the string. Extending natives is a great way to do the same thing, but it is much prettier (aka: explicit, readable, easier-to-debug.)</p>

<h3>The Difference:</h3>

<p>I&#8217;ve seen stuff like this:</p>

<pre><code>fn1(fn2(10, fn3('house')));
</code></pre>

<p>Hard to figure out what&#8217;s happening.  Instead you can write code like:</p>

<pre><code>fn3('house').fn2(10).fn1();    
</code></pre>

<h3>A Useful, Real Example, zeroPad</h3>

<p>I&#8217;ve used this in a couple scripts, it takes a number and returns a string with zeros padded in front: 123 becomes &#8216;000123&#8217;.  Really handy for filenames and the like.  Here&#8217;s the ugly version:</p>

<h3>Functionally Based Example</h3>

<pre><code>function zeroPad(num, zeros){
  zeros = zeros || 3;
  var str = '' + num;
  zeros.times(function(){ str = '0'+str; });
  return str;
};

// usage
doSomething(zeroPad(document.getElementById('myInput').value, 3));
</code></pre>

<h3>Native Extentions Based Example</h3>

<pre><code>Number.implement({
  zeroPad: function(zeros){
    var str = '' + this;
    zeros.times(function(){ str = '0'+str; });
    return str;
  }
});

// so that it works on both numbers and strings
String.implement({
  zeroPad: function(zeros){
    return this.toInt().zeroPad(zeros);
  }
});

// usage
$('myInput').get('value').zeroPad(3).doSomething();
</code></pre>

<h3>Side by Side:</h3>

<pre><code>doSomething(zeroPad(document.getElementById('myInput').value, 3));
// vs
$('myInput').get('value').zeroPad(3).doSomething();
</code></pre>

<p>Awesome? Yes. You can do the same thing to:</p>

<ul>
<li><a href="http://mootools.net/docs/core/Native/Array">Array</a></li>
<li><a href="http://mootools.net/docs/core/Native/Function">Function</a></li>
<li><a href="http://mootools.net/docs/core/Native/Number">Number</a></li>
<li><a href="http://mootools.net/docs/core/Native/String">String</a></li>
<li><a href="http://mootools.net/docs/core/Native/Hash">Hash</a></li>
</ul>

<p>Some say extending natives is a bad idea.  Personally, I think it&#8217;s awesome&#8212;but this topic is a sore spot for some.  Extending natives is a feature of javascript itself that any general application framework like MooTools is entitled to use.  There could be an entire article dedicated to this topic but this article isn&#8217;t it.  This article is simply here to show how to use this handy feature.</p>

<h3>Flippin&#8217; Sweet Array methods</h3>

<p>Arian Stolwijk created this amazing gem: <a href="http://mootools.net/forge/p/array_math">Array.Math</a>.  Code samples often tell the story faster:</p>

<pre><code>[2,5,1,6].sum(); // 14
[2,5,6,2].product(3); // [6,15,18,6]
[9,12,15].quotient(3) // [3,4,5]
</code></pre>

<p>This is all made possible by extending the <code>Array</code> native, see?</p>

<pre><code>    Array.implement({

        sum: function(start,length){
            var sum = 0, 
                start = start ? start : 0,
                length = length ? length : this.count()-start;
            length = start ? length + 2 : length;
            for(var i=start;i&amp;lt;length;i++) sum += this[i];
            return sum;
        },

        product: function(p){
            var arr = $type(p) == 'array';
            return this.map(function(entity,i){
                return arr ? (entity * p[i]) : (entity * p);
            });
        },

        quotient: function(q){
            var arr = $type(q) == 'array';
            return this.map(function(entity,i){
                return arr ? (entity / q[i]) : (entity / q);
            });
        },

        // and a whole lot more awesome ...

    });
</code></pre>

<h3>Quick Tips</h3>

<ul>
<li><code>this</code> is the number or string, or whatever, when inside the method.</li>
<li>Return something that makes sense (usually <code>this</code>).</li>
<li>You can implement several methods all in the same code block.</li>
</ul>

<p>This is just one more great tool to help keep your code organized and readable.</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/5zoQ8vNb2LY" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:71:"http://mootools.net/blog/2010/03/23/get-friendly-with-the-natives/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"4";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:66:"http://mootools.net/blog/2010/03/23/get-friendly-with-the-natives/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:7;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:28:"A Better Way to use Elements";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/kqYEcHBtrSk/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:74:"http://mootools.net/blog/2010/03/19/a-better-way-to-use-elements/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Fri, 19 Mar 2010 22:41:41 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=783";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:361:"Javascript development in the browser is all about the Elements. Manipulating the DOM happens every few lines of code. It’s important enough that some libraries provide little more than DOM enhancements. Not to worry though, MooTools provides greatly in this area as well.

$ and $$

Most of you probably know the two document methods getElementById and [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:13:"Sean McArthur";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:8822:"<p>Javascript development in the browser is all about the Elements. Manipulating the DOM happens every few lines of code. It’s important enough that some libraries provide little more than DOM enhancements. Not to worry though, MooTools provides greatly in this area as well.</p>

<h3>$ and $$</h3>

<p>Most of you probably know the two document methods <code>getElementById</code> and  <code>querySelectorAll</code>; because if you do, you understand how we select elements with MooTools methods. For those of you that don’t, you provide an ID string of an element in to <code>getElementById</code>, and a CSS selector string to <code>querySelectorAll</code>.  The functions <code>$</code> (which is an alias to  <code>document.id</code>, see this post on <a href="http://mootools.net/blog/2009/06/22/the-dollar-safe-mode/">Dollar Safe Mode</a> for details) and <code>$$</code> are basically equivalent to <code>getElementById</code> and <code>querySelectorAll</code>, respectively. Of course, since it’s MooTools,  <em>they’re more than that</em>.</p>

<p>The dollar function, if given a string, will basically call <code>getElementById</code> on the document. If passed an element, it will just return the element, and  if you pass an object with a toElement method, it will try to convert it to an  element (we’ll explore that more a couple sections down). A key difference you’ll find between MooTools’ dollar function and jQuery’s is this: MooTools’ <code>$()</code>  will only ever return 1 Element, and it will return <code>null</code> if no matching element is found.  This means unless you’re absolutely 110% certain the element will exist,  <strong>you’ll need to check the returned value before starting to call Element methods on it</strong>.</p>

<pre><code>    var loginEl = $('Login');
    if (loginEl) {
            loginEl.fade('in');
    }  
</code></pre>

<p>The MooTools Team prefers two separate methods for the selecting elements; to  remove any doubt about what a certain function call may be returning, we have one method for individual elements and another for multiple elements. In this case, <em>it’s preferable to be explicit, instead of relying to ambiguous auto-magic</em>. When we see <code>$</code>, we expect an element if it exists. When we see  <code>$$</code>, we expect an array of elements (which, as you know, an array can always be  empty). The double dollar function has some neat tricks that are explained in  its own section below.</p>

<p>All this talk about Elements, but only about how to select them. MooTools  also provides an excellent Element construction API.</p>

<h3>new Element()</h3>

<p>With vanilla JS (mmm, vanilla…), you’d use <code>document.createElement</code> whenever you wanted to create and add a new element to the DOM. MooTools tries to make the JavaScript API more pleasant to use; part of that is a more consistent and easy to use syntax and part of it is using more Object-Oriented programming practices. It feels a lot more OO when creating objects using  the <code>new</code> keyword, whereas the standard way is more procedural.</p>

<p>It turns out that every element you could create inherits from the <code>Element</code> prototype. Specifically, the elements you create through <code>document.createElement</code> would be <code>HTMLDivElement</code>, or <code>HTMLParagraphElement</code>, or whichever element you create. Like I said, they all inherit from the base Element prototype, and then HTMLElement, and so on. MooTools extends the base Element class, so that all elements receive some MooTools love.</p>

<p>MooTools augments the Element <a href="http://keetology.com/blog/2009/07/20/up-the-herd-ii-native-flora-and-fauna">native</a>, providing a super-duper sweet constructor. You can provide the tag name, and then an  object of properties to set on the new element. The returned object is of the  same type as the $ method mentioned above. The properties you can set are fairly  extensive, so <a href="http://mootools.net/docs/core/Element/Element#Element:constructor">check out the documentation</a>  to learn more about them, but here’s a demonstration.</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/BM9FH/embedded/"></iframe>

<h3>toElement</h3>

<p>The dollar method provides another function: converting the instance of class into an element(-al?) form. This is similar to a <code>toString</code> function, which  converts objects into strings when needed. You can define a method  in a class called <code>toElement</code>, and return an element to “represent” the instance. Let’s take a look at a snippet from a Person Class:</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/Fv5Sr/1/embedded/"></iframe>

<p>Several extensions in MooTools More take advantage of this, like  Form.Request, Form.Validator, HtmlTable, and others. And many plugins in the Forge use this approach as well. This means that after creating an instance of  one of these classes, you can just hold on to the instance in your code.  Whenever you want to affect the element that the instance is controlling, you  just use <code>$(instance)</code> to retrieve it.</p>

<p>Aaron even cooked up a ToElement mixin, and <a href="http://www.clientcide.com/best-practices/5-advanced-techniques-for-mootools-development/">wrote a bit more about this over here</a>.</p>

<h3>Elements</h3>

<p>I pointed out earlier that <code>$$</code> returns an array-like object containing Elements. It actually returns an object called exactly that: <code>Elements</code>. Behind  the scenes, MooTools gets an array of all the elements that meet the selector (so it&#8217;s still an array), and then extends the array with all the Elements  methods. Why would we want that?</p>

<p>All the methods that MooTools adds to the Element native are added to the Elements class as well. You can do some pretty nifty chaining because of this. First of all, you don’t have to check that it didn’t return <code>null</code>. This is because any method you call on Elements, will loop through the array and try to call the method on each individual element. Even with an empty array, the loop won’t cause an error. And any method you call that would normally return a value,  will return an array of the values from each element. An example should make this clearer:</p>

<pre><code>    //assigns a click event to all A tags
    $$('a').addEvent('click',  function(e) {
            e.preventDefault();
            alert(this.href);
    });  

    //gets all divs with an id set, and then returns
    //an array of the IDs  sorted alphabetically
    var ids = $$('div[id]').get('id').sort();  

    //gets all divs with a UL immediately inside
    //and assigns a class name to  the divs
    $$('div &amp;gt; ul').getParent().addClass('has-list');
</code></pre>

<p>While you could put together long chains acting on all the elements you’ve selected, I’d advise against this. It certainly looks cool, and will work fine one or 2 methods out on the chain. <strong>But every method call will cause another loop  through all the elements</strong>. If you’re doing a lot of things to every element, you might as well do it all in a single pass. I’ll show you what I mean.</p>

<pre><code>    //this would loop through each time at addEvent, addClass, and fade
    $$('li  a').addEvent('click', function(e) {}).addClass('alertable').fade('in');  

    //whereas this will only cause 1 loop
    $$('li a').each(function(link)  {
            link.addEvent('click', function(e) {
                     alert(this.title);
            });
            link.addClass('alertable');
            link.fade('in');
    }); 
</code></pre>

<p>Still, when doing something simple, you can skip the each call, since Elements will handle that for you.</p>

<h3>Concluding</h3>

<p>MooTools provides a lot of expressive power when working with the DOM. It&#8217;s consistent API makes it a snap to add events, change styles, create elements and more. The object oriented nature of its implementation makes it so that you can extend Elements for your own purposes. Look forward to my next post where I&#8217;ll talk about extending Elements in various ways and cover best practices for when you decide to bend Elements to your own will.</p>

<p><em>Sean McArthur is a software developer at Blazonco.com who is madly in love with MooTools. Most of his contributions involve sharing tips and information about MooTools (and programming in general) at his <a href="http://mcarthurgfx.com">blog</a> and on <a href="http://twitter.com/seanmonstar">Twitter</a>.</em></p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/kqYEcHBtrSk" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:70:"http://mootools.net/blog/2010/03/19/a-better-way-to-use-elements/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"4";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:65:"http://mootools.net/blog/2010/03/19/a-better-way-to-use-elements/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:8;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:30:"MooTools Roundup February 2010";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/runro0b2VD4/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:76:"http://mootools.net/blog/2010/03/11/mootools-roundup-february-2010/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Fri, 12 Mar 2010 02:11:30 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:7:"Roundup";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=743";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:367:"The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it’s all of you that take the framework and build outstanding plugins. These are just some of the new developments floating around the MooTools community.

12 Steps to MooTools Mastery

Jacob Thornton&#8217;s NetTuts article, 12 Steps to [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:10:"davidwalsh";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:3861:"<p>The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it’s all of you that take the framework and build outstanding plugins. These are just some of the new developments floating around the MooTools community.</p>

<h3>12 Steps to MooTools Mastery</h3>

<p>Jacob Thornton&#8217;s NetTuts article, 12 Steps to MooTools Master, is a high-level introduction to the MooTools JavaScript framework.  The informative article touches on such MooTools topics as Mutators, Prototypal Inheritance, custom events, binding, and more.  This tutorial probably isn&#8217;t for the complete beginner, but is a good place to start for people still relatively new to MooTools and those considering it for the first time.</p>

<p><a href="http://net.tutsplus.com/tutorials/javascript-ajax/12-steps-to-mootools-mastery/">http://net.tutsplus.com/tutorials/javascript-ajax/12-steps-to-mootools-mastery/</a></p>

<p><a href="http://mootools.net/forge/p/meio_autocomplete"><img src="http://mootools.net/forge/uploads/screenshots/220/1003/thumbs/536d222807f5d114bfa0300bf3ff87e5.png" alt="Meio.Autocomplete" style="float:right;margin:0 0 15px 15px" /></a></p>

<h3>Meio.Autocomplete</h3>

<p>Meio.Autocomplete is the latest plugin from MooTools Contributor Fábio M. Costa.  Fábio&#8217;s class is packed full of options and events, making it one of the most flexible MooTools Autocomplete plugin available.  Great work Fábio!</p>

<p><a href="http://mootools.net/forge/p/meio_autocomplete">http://mootools.net/forge/p/meio_autocomplete</a></p>

<p><a href="http://mootools.net/forge/p/dynamictextarea"><img src="http://mootools.net/forge/uploads/screenshots/225/1058/thumbs/04f4bcc6966d727ea13800811653bdec.png" alt="DynamicTextarea" style="float:right;margin:0 0 15px 15px" /></a></p>

<h3>DynamicTextarea</h3>

<p>
DynamicTextarea is a MooTools class that resizes TEXTAREA elements as the user types.  DynamicTextarea boasts numerous options and events for maximum control over chosen TEXTAREAs.
</p>

<p><a href="http://mootools.net/forge/p/dynamictextarea">http://mootools.net/forge/p/dynamictextarea</a></p>

<h3>Array.Math</h3>

<p>
Array.Math is an outstanding set of Math methods you can add to JavaScript&#8217;s native Array object.  Need to find the sum of numbers in an array?  Need to normalize elements in an array?  Need to get the vector length of an array of numbers?  Be sure to download Array.Math!  Kudos to Arian Stolwijk for his excellent work!
</p>

<p><a href="http://mootools.net/forge/p/array_math">http://mootools.net/forge/p/array_math</a></p>

<h3>LazyLoader</h3>

<p>
LazyLoader is a unique MooTools plugin created by David Chan which allows you to defer loading of MooTools classes until they are needed.  This is especially helpful when building large web applications.  LazyLoader is very easy to use and implement.
</p>

<p><a href="http://mootools.net/forge/p/lazyloader">http://mootools.net/forge/p/lazyloader</a></p>

<p><a href="http://mootools.net/forge/p/locate"><img src="http://mootools.net/plugins/uploads/screenshots/214/943/thumbs/22c24a2b0bb82f6cea8a5ae35a40b38a.png" alt="Locate" style="float:right;margin:0 0 15px 15px" /></a></p>

<h3>Locate</h3>

<p>
Locate is a Geolocation plugin authored by Christopher Beloch.  Christopher&#8217;s plugin taps into the power of HTML5 and offers a few useful options and events to control the Locate instance.
</p>

<p><a href="http://mootools.net/forge/p/locate">http://mootools.net/forge/p/locate</a></p>

<h3>Keep Up the Good Work!</h3>

<p>These are just a few of the great MooTools plugins floating around the MooTools community recently. Keep up the good work and we look forward to featuring your plugins in future posts!</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/runro0b2VD4" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:72:"http://mootools.net/blog/2010/03/11/mootools-roundup-february-2010/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"2";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:67:"http://mootools.net/blog/2010/03/11/mootools-roundup-february-2010/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:9;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:37:"More Than Meets the Eye: Form.Request";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/qe75yJJQtz4/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:69:"http://mootools.net/blog/2010/03/04/more-than-meets-the-eye/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Thu, 04 Mar 2010 22:06:11 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=718";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:320:"MooTools More features a diverse, powerful collection of Classes (60 plugins!!) and some are my favorite tools that I use over and over again. I thought I&#8217;d take some time to dig into some of the plugins in MooTools More that I think are interesting and really useful that maybe you haven&#8217;t had time to [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:5:"aaron";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:9796:"<p><a href="http://mootools.net/more">MooTools More</a> features a diverse, powerful collection of Classes (60 plugins!!) and some are my favorite tools that I use over and over again. I thought I&#8217;d take some time to dig into some of the plugins in MooTools More that I think are interesting and really useful that maybe you haven&#8217;t had time to really sink your teeth into (or, perhaps, you haven&#8217;t found a reason to). So I&#8217;m going to take some time to talk about some of the plugins in More each month, sharing not only how they work, but how they work together and maybe even why you&#8217;d use them. Today I&#8217;m going to talk about the <code><a href="http://mootools.net/docs/more/Forms/Form.Request">Form.Request</a></code> plugin.</p>

<h3>Request and Request.HTML</h3>

<p>MooTools Core ships with three AJAX modules, two of which include element methods (<code>Request.JSON</code>, the third module, doesn&#8217;t alter the Element prototype). <em><a href="http://mootools.net/docs/core/Request/Request">Request.js</a></em> provides the Element prototype with a <code><a href="http://mootools.net/docs/core/Request/Request#Element:send">send</a></code> method that lets you post a form (as in, <code>$('myFormElement').send([request options go here])</code>), and <em><a href="http://mootools.net/docs/core/Request/Request.HTML">Request.HTML.js</a></em> provides the Element prototype with a <code><a href="http://mootools.net/docs/core/Request/Request.HTML#Element:load">load</a></code> method that lets you replace the contents of any DOM element with text returned from a server request (as in <code>$('myElement').load([request options go here])</code>). I use these fairly often, though I probably use the <code>Request</code> and <code>Request.HTML</code> constructors just as much if not more. But in my own work I found myself needing the combination of these two things; I want to submit the form <em>and</em> load the response into a DOM element. Turns out, I do this all the time.</p>

<p>Part of writing idiomatic MooTools code is encapsulating functionality into Classes. As I&#8217;ve <a href="http://www.clientcide.com/best-practices/jquery-and-the-ajax-experience-programming-to-the-pattern-and-what-really-makes-one-framework-different-from-another/">posted</a> <a href="http://clientcide.com/best-practices/thoughts-on-coding-and-new-classes-as-a-result/">before</a>, I do this with almost all the code that I write. The only code that I author that isn&#8217;t a class (or a static object) is a DomReady statement that instantiates classes. So when I have a pattern as clear as this - submitting a form and updating the DOM with the response - it&#8217;s time to write a class.</p>

<h3>Form.Request</h3>

<p><code>Form.Request</code>, unlike <code>Request.HTML</code>, is not an extension of the <code>Request</code> class (that&#8217;s why it&#8217;s not <code>Request.Form</code>). Because it is not a <code>Request.HTML</code> instance, it has a reference to an instance of <code>Request</code> in it. <code>Form.Request</code>&#8217;s options include a <code>requestOptions</code> object that gets passed along to this instance so you can configure it however you like. By default, <code>Form.Request</code> derives as much as it can from the form element itself. It gets its URL from the action property and the method from the method property. The user submits the form and it cancels the submit event. <code>Form.Request</code> inspects that event to see if the user clicked a button and, if so, sends the name/value of that button along with the data like a regular form submission. Finally, it provides an <code>extraData</code> option so you an send along key/values with the form in addition to those in the inputs that the user fills out.</p>

<p>When the form returns a response, it handles it pretty much how <code>Request.HTML</code> handles any other response. It injects the HTML and evaluates any scripts in the response (this is an option, too).</p>

<p>And what about what we set out to do? To provide a method for Element that is the combo of <code>load</code> and <code>send</code>? The plugin provides the Element prototype with a <code>formUpdate</code> method that works just like those two methods combined (as in <code>$('myForm').formUpdate({ update: $('myTarget') })</code>, which sends the form and updates <code>$('myTarget')</code>).</p>

<h3>Demo Time!</h3>

<p>Here&#8217;s a simple demo to play with. Note how our html is plain old vanilla web 1.0 form stuff. Nothing fancy. And our JavaScript is dead simple (to get the default behavior).</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/DCr9w/11/embedded/"></iframe>

<h3>Getting Fancy</h3>

<p>Hmmm. Well, our behavior here leaves a little to be desired. The main thing that seems to be missing is any indication that something is changing - that the form has been submitted and we&#8217;re waiting for a response from the server (MooShell provides a 2 second delay on the response to simulate normal web latency). We could add an event to our instance to tell the user that something is going on, like so:</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/DCr9w/6/embedded/"></iframe>

<h3>Getting Fancier</h3>

<p>Here&#8217;s where the fact that this plugin is part of MooTools More comes into play. MooTools More includes a plugin called <code><a href="http://mootools.net/docs/more/Interface/Spinner">Spinner</a></code>. I&#8217;ll talk about it in depth some other time, but in a nutshell, it puts an Ajax indicator over an element that&#8217;s being updated. It integrates with <code>Request.HTML</code> and <code>Form.Request</code> configures it for us. This happens automatically (unless you disable it in the options) and all we have to do is skin it. In this example, I&#8217;ve moved our message (that we&#8217;re sending the submission) into the <code>Spinner</code> options.</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/DCr9w/12/embedded/"></iframe>

<p>This magic happens without much effort for us so long as we have <em>Spinner.js</em> in our page. This is the default behavior. We don&#8217;t even have to specify the message text if we&#8217;re content with just the spinner image.</p>

<h3>Even More Integration</h3>

<p>One other thing <code>Form.Request</code> integrates with (also in the MooTools More library, naturally) is <code><a href="http://mootools.net/docs/more/Forms/Form.Validator">Form.Validator</a></code>. That&#8217;s another plugin I&#8217;m not going to spend a ton of time describing in today&#8217;s post - we&#8217;ll save it for a later post as it has lots of nifty things in it. But, basically, <code>Form.Validator</code> (and its subclasses) provide instructions for users who are filling out a form on the fly. <code>Form.Request</code> integrates with it so that you don&#8217;t have to do anything to make them play nice together. Both intercept the submit event and both prevent its default behavior (i.e. sending the form), except that the <code>Form.Validator</code> class only stops it if the form is invalid. If <code>Form.Request</code> didn&#8217;t respect this privilege, it would send our form even if the <code>Form.Validator</code> stopped the default submission event. To get them to cooperate, all you have to do is create an instance of <code>Form.Validator</code> on the form. Example:</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/DCr9w/8/embedded/"></iframe>

<p>In this example, we set a minLength value for our form (50 characters). The default html in the textarea is only about 45 characters, so if you just hit submit you&#8217;ll see a red error message show up. Add some more text to our example, hit submit, and the error winks out and our form sends just as before.</p>

<h3>Appending Results</h3>

<p>One last trick up our sleeves here; you can append results instead of overwriting the contents of our target. Think of a to-do list kind of interface, where adding a value adds a new item to a list. To get this behavior, we just substitute <code><a href="http://mootools.net/docs/more/Forms/Form.Request.Append">Form.Request.Append</a></code> into our example. There are some additional options; by default it uses another MooTools More plugin, <code><a href="http://mootools.net/docs/more/Fx/Fx.Reveal">Fx.Reveal</a></code>, to smoothly transition elements into view. You can also specify if the item is appended to the top or the bottom of the container. Example:</p>

<iframe style="width: 100%; height: 300px; margin-bottom: 10px;" src="http://mootools.net/shell/DCr9w/10/embedded"></iframe>

<h3>THEND</h3>

<p>So that pretty much covers <code>Form.Request</code>. I hope you find it as useful as I do. If you find it useful and fun, post a link in the comments showing off what you&#8217;ve done with it. In my next post I&#8217;ll pick another plugin (or plugins) to dig into and show off their capabilities. If there&#8217;s one you&#8217;d like to learn more about, post a suggestion for my next post in the comments.</p>

<p><em>Aaron Newton is a contributor to MooTools and the principal developer of MooTools More. He is the author of the book <strong>MooTools Essentials</strong> as well as the <a href="http://mootorial.com">Mootorial</a> online MooTools tutorial. He posts (rarely these days) at his blog <a href="http://clientcide.com">Clientcide.com</a> and (much more often) on Twitter as <a href="http://twitter.com/anutron">anutron</a>.</em></p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/qe75yJJQtz4" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:65:"http://mootools.net/blog/2010/03/04/more-than-meets-the-eye/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:2:"11";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:60:"http://mootools.net/blog/2010/03/04/more-than-meets-the-eye/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:10;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:25:"MooTools at FOSDEM: Video";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/zDMDreepYWM/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:70:"http://mootools.net/blog/2010/02/15/mootools-at-fosdem-video/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Mon, 15 Feb 2010 15:59:28 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:4:"News";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=684";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:368:"Hello everyone,

I&#8217;m really excited and pleased to announce that my presentation &#8220;MooTools as a General Purpose Application Framework&#8221; which I delivered at the FOSDEM is now available on YouTube.




If you are not able to watch the HD-Version you can download the slides here.

Thanks again to the FOSDEM team for inviting me and for giving us [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:6:"cpojer";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:1521:"<p>Hello everyone,</p>

<p>I&#8217;m really excited and pleased to announce that my presentation &#8220;MooTools as a General Purpose Application Framework&#8221; which I delivered at the <a href="http://fosdem.org">FOSDEM</a> is now available on YouTube.</p>

<p><object width="730" height="470"><param name="movie" value="http://www.youtube.com/v/6nOVQDMOvvE&#038;hl=en_US&#038;fs=1&#038;hd=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/6nOVQDMOvvE&#038;hl=en_US&#038;fs=1&#038;hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="730" height="470"></embed></object></p>

<p><img src="/uploads/BrusselsWaffles.jpg" alt="" style="float: right; width: 300px; margin:0 0 15px 15px" />
If you are not able to watch the HD-Version you can download the slides <a href="http://cpojer.net/Talks/MooToolsFOSDEM.pdf">here</a>.</p>

<p>Thanks again to the FOSDEM team for inviting me and for giving us such a big platform to present the MooTools project. If I could name one thing that I miss already about Brussels I would certainly say the waffles&#8230;</p>

<p>If you enjoyed this presentation and you want me or another developer from the MooTools Core Team to present at your conference feel free to <a href="/developers">contact us</a>.</p>

<div style="clear: both;"></div>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/zDMDreepYWM" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:66:"http://mootools.net/blog/2010/02/15/mootools-at-fosdem-video/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"5";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:61:"http://mootools.net/blog/2010/02/15/mootools-at-fosdem-video/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:11;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:29:"MooTools Roundup January 2010";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/tTcglvcJoC4/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:75:"http://mootools.net/blog/2010/02/15/mootools-roundup-january-2010/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Mon, 15 Feb 2010 15:56:14 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:7:"Roundup";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=651";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:354:"The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it’s all of you that take the framework and build outstanding plugins. Here are some great plugins and tutorials that have been released recently.

MooTools Driver for Rails 3 Helpers

Rails 3 has been recently been released [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:10:"davidwalsh";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:3286:"<p>The foundation of every great open source project is its community. The MooTools Team creates the base framework code but it’s all of you that take the framework and build outstanding plugins. Here are some great plugins and tutorials that have been released recently.</p>

<h3>MooTools Driver for Rails 3 Helpers</h3>

<p>Rails 3 has been recently been released with the new capability to create your own javascript helpers;  no longer will you need to use PrototypeJS.  Kevin Valdek has created a MooTools helper so that you can use your favorite javascript framework with your chosen Ruby application.  Kevin mentioned that his release isn&#8217;t complete at this point so feel free to contribute!  Great work Kevin!</p>

<p><a href="http://kevinvaldek.com/mootools-driver-for-rails-3-helpers">http://kevinvaldek.com/mootools-driver-for-rails-3-helpers</a></p>

<h3>Moodit</h3>

<p>MooTools now has its own Reddit topic.  Be sure to share your favorite MooTools posts with all of your friends via Reddit!</p>

<p><a href="http://www.reddit.com/r/mootools/">http://www.reddit.com/r/mootools/</a></p>

<h3>Moodoco</h3>

<p>Moodoco is a purely web-based client-side MooTools documentation generator with HTML5 offline capabilities created by <a href="http://www.cheeaun.com">Lim Chee Aun</a>. It uses the GitHub API to fetch all the Markdown documentation files from the repository and stores them offline in localStorage.</p>

<p><a href="http://github.com/cheeaun/moodoco">http://github.com/cheeaun/moodoco</a></p>

<h3>MultiSelect</h3>

<p><a href="http://mootools.net/forge/p/mutiselect"><img src="http://mootools.net/forge/uploads/screenshots/185/811/thumbs/48e9e228eacde2e88c4e18c36f3f3d1e.png" alt="MultiSelect" style="float:right;margin:0 0 15px 15px" /></a></p>

<p>MultiSelect is a MooTools plugin from Blaž Maležič that turns your checkbox set into one single multi-select dropdown menu.  This highly inventive plugin is a great way to make your select boxes much more appealing.</p>

<p><a href="http://mootools.net/forge/p/mutiselect">http://mootools.net/forge/p/mutiselect</a></p>

<h3>Mif.Tree</h3>

<p><a href="http://mootools.net/forge/p/mif_tree"><img src="http://mootools.net/forge/uploads/screenshots/179/809/thumbs/94a5b7d94b1dd39f740213b5a413792b.png" alt="Mif.Tree" style="float:right;margin:0 0 15px 15px" /></a></p>

<p>Mif.Tree is a flexible tree-generation plugin that loads trees of information from javascript objects.  You could, for example, output a JSON representation of a directory and view your server via HTML/javascript trees.</p>

<p><a href="http://mootools.net/forge/p/mif_tree">http://mootools.net/forge/p/mif_tree</a></p>

<h3>Featured Blog:  Ryan Florence</h3>

<p><a href="http://ryanflorence.com/">Ryan Florence&#8217;s blog</a> has been doing an outstanding job of explaining complex MooTools concepts.  Be sure to check out his blog!</p>

<p><a href="http://ryanflorence.com/">http://ryanflorence.com/</a></p>

<h3>Keep Up the Good Work!</h3>

<p>These are just a few of the great MooTools plugins floating around the MooTools community recently. Keep up the good work and we look forward to featuring your plugins in future posts!</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/tTcglvcJoC4" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:71:"http://mootools.net/blog/2010/02/15/mootools-roundup-january-2010/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"1";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:66:"http://mootools.net/blog/2010/02/15/mootools-roundup-january-2010/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:12;a:6:{s:4:"data";s:41:"
		
		
		
		
		
				

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:30:"MooTools More 1.2.4.3, 1.2.4.4";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/W04EFx06I9Y/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:67:"http://mootools.net/blog/2010/02/09/mootools-more-1-2-4-3/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Wed, 10 Feb 2010 02:10:29 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:1:{i:0;a:5:{s:4:"data";s:8:"Releases";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=665";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:451:"UPDATE: 1.2.4.4 is also released; there was a new bug in Tips introduced in 1.2.4.3 that was immediately patched.

This is mostly a bug fix release.


Nearly 50 bug fixes (see the milestone for 1.2.4.3 in Lighthouse).
Keyboard:


Added some support for just pressing &#8216;shift&#8217;, &#8216;control&#8217;, or &#8216;alt&#8217;
Added a bunch of keycodes for Mac compatibility

Keyboard.Extras:


Support for &#8220;shortcuts&#8221; which are [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:5:"aaron";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:2939:"<p><strong>UPDATE</strong>: 1.2.4.4 is also released; there was a new bug in Tips introduced in 1.2.4.3 that was immediately patched.</p>

<p>This is mostly a bug fix release.</p>

<ul>
<li>Nearly 50 bug fixes (<a href="https://mootools.lighthouseapp.com/projects/24057/milestones/54424-1243">see the milestone for 1.2.4.3 in Lighthouse</a>).</li>
<li>Keyboard:

<ul>
<li>Added some support for just pressing &#8216;shift&#8217;, &#8216;control&#8217;, or &#8216;alt&#8217;</li>
<li>Added a bunch of keycodes for Mac compatibility</li>
</ul></li>
<li>Keyboard.Extras:

<ul>
<li>Support for &#8220;shortcuts&#8221; which are keyboard entries that have names and descriptions.</li>
<li>Also provides methods for listing all the active shortcuts as well as allowing a shortcut to be rebound (for instance, if you were to allow the user to choose a key for a shortcut).</li>
<li>Added a change event to Keyboard.manager whenever any keyboard is activated.</li>
</ul></li>
<li>Tips:

<ul>
<li>NEW Tips option &#8220;windowPadding&#8221; allows you to reduce or expand the virtual size of the window for tip positioning. Defaults to <code>{x:0, y:0}</code>. You can use that is a workaround for the scrollbars not being considered when calculating tip positions.</li>
</ul></li>
<li>HtmlTable:

<ul>
<li>fixed numerous bugs filed in Lighthouse</li>
<li>HtmlTable can no longer apply it&#8217;s click behavior more than once.</li>
<li>HtmlTable now pushes headers defined in the options.</li>
<li>Reworked HtmlTable&#8217;s DOM a bit to allow for positioning of the sort icon</li>
<li>Added new set method for headers and footers.</li>
<li>Fixed error in HtmlTable.Parsers when sorting by date. format(&#8216;db&#8217;) was being applied to the text and not the date object.</li>
</ul></li>
<li>Array: 

<ul>
<li>Added Array.shuffle</li>
</ul></li>
<li>Request.JSONP:

<ul>
<li>Made JSONP pass all arguments, not just the first, to its complete/success methods; <a href="http://groups.google.com/group/mootools-users/browse_thread/thread/9cfa52bf0cf05bac">see this discussion on the google group</a>.</li>
</ul></li>
<li>Fx.Slide:

<ul>
<li>Added an option to specify the wrapper element for Fx.Slide. Was already present in the docs but could not be passed as an option.</li>
</ul></li>
<li>Mask:

<ul>
<li>Added options for the IframeShim for Mask</li>
</ul></li>
</ul>

<p><a href="http://mootools.net/more">Download it with the MooTools More builder</a>.</p>

<p>As usual, if you find any issues, <a href="https://mootools.lighthouseapp.com/projects/24057/">file a ticket at lighthouse</a>. There are already <a href="https://mootools.lighthouseapp.com/projects/24057-mootoolsmore/milestones/60506-1244">tickets open for 1.2.4.4</a> that we are not including fixes for in this release. Look for a release for these things in the next few weeks.</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/W04EFx06I9Y" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:63:"http://mootools.net/blog/2010/02/09/mootools-more-1-2-4-3/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"6";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:58:"http://mootools.net/blog/2010/02/09/mootools-more-1-2-4-3/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:13;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:30:"MooTools Roundup December 2009";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/IVd44s6DbwQ/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:76:"http://mootools.net/blog/2010/01/06/mootools-roundup-december-2009/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Wed, 06 Jan 2010 14:21:23 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:3:"All";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:7:"Roundup";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=607";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:356:"With the release of the Forge in December the way people contribute to MooTools has changed. The quality, amount, and the variety of plugins has amazed all of us. There are already more than 100 plugins available. 
In addition to that, Jacob Gube (SixRevisions) and MooTools contributor Garrick Cheung (@garrickcheung) have co-authored a new MooTools [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:6:"cpojer";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:4857:"<p>With the release of the Forge in December the way people contribute to MooTools has changed. The quality, amount, and the variety of plugins has amazed all of us. There are already more than 100 plugins available. 
In addition to that, Jacob Gube (<a href="http://sixrevisions.com/">SixRevisions</a>) and MooTools contributor Garrick Cheung (<a href="http://twitter.com/garrickcheung">@garrickcheung</a>) have co-authored a new <a href="http://www.amazon.com/MooTools-Beginners-Guide-Jacob-Gube/dp/1847194583/">MooTools book</a> aimed at JavaScript beginners.</p>

<p>Aaron has written an <a href="http://www.clientcide.com/deep-thoughts/mootools-in-2009-in-retrospect-thoughts-on-2010-and-beyond/">extensive review about MooTools in 2009</a>. I expect 2010 to be an even better year for our Framework. As a first step we would like to invite you to meet part of the MooTools Team at the <a href="http://fosdem.org">FOSDEM</a> in February in Brussels where I will do an interesting talk about <a href="http://fosdem.org/2010/schedule/events/mootools">MooTools as a General Purpose Application Framework</a>.</p>

<p>
The real strength of MooTools, however, is you &#8212; the community.  Here are a few of the many great MooTools plugins that were released during the month of December.
</p>

<h3 style="clear: both;">PassShark</h3>

<p>
<a href="http://mootools.net/forge/p/passshark"><img src="/uploads/RoundupDecemberPassShark.png" alt="PassShark" style="float:right;margin:0 0 15px 15px" /></a>
Created by MooTools contributors Luis Merino <code>(<a href="http://twitter.com/rendez">@Rendez</a>)</code> and Nathan Querido <code>(<a href="http://twitter.com/nfq">@nfq</a>)</code>,  PassShark duplicates the iPhone&#8217;s method of password masking.  A great method for making your passworld fields a bit easier to use.
<ul>
<li><a href="http://mootools.net/forge/p/passshark">PassShark on the Forge</a></li>
<li><a href="http://www.queridodesign.net/blog/passshark">Blog-Entry</a></li>
</ul></p>

<h3>MooPix</h3>

<p>
<a href="http://www.moopix.org/"><img src="/uploads/RoundupDecemberMooPix.png" alt="MooPix" style="float:right;margin:0 0 15px 15px" /></a>
MooPix is not only a MooTools slideshow function but a method for accessing your public Flickr photos.  Though no server side scripting is required, MooPix remains very small.
<ul><li>
<a href="http://www.moopix.org/">MooPix Website</a>
</li></ul>
</p>

<h3>Notimoo</h3>

<p>
<a href="http://www.paquitosoft.com/notimoo/"><img src="/uploads/RoundupDecemberNotiMoo.png" alt="NotiMoo" style="float:right;margin:0 0 15px 15px" /></a>
Notimoo is a simple Mac Growl clone made with MooTools.  At only 4KB Notimoo is a lightweight but still provides the right amount of customization.
<ul>
<li><a href="http://www.paquitosoft.com/notimoo/">http://www.paquitosoft.com/notimoo/</a>
</li></ul></p>

<h3>MGFX.Tabs 1.1</h3>

<p>
<a href="http://mcarthurgfx.com/blog/article/mgfx-tabs-1-1-on-github"><img src="/uploads/RoundupDecemberTabs.png" alt="MGFX.Tabs 1.1" style="float:right;margin:0 0 15px 15px" /></a>
Sean McArthur has recently updated his popular Tabs class by making it more efficient and more flexible.
<ul>
<li><a href="http://mootools.net/forge/p/mgfx_tabs">MGFX.Tabs 1.1 on the Forge</a></li>
<li><a href="http://mcarthurgfx.com/blog/article/mgfx-tabs-1-1-on-github">Blog Post and Demo</a></li>
</ul>
</p>

<h3 style="clear: both;">Fx.TransMorph</h3>

<p>
<a href="http://mootools.net/forge/p/fx_transmorph"><img src="/uploads/RoundupDecemberFxTransMorph.png" alt="Fx.TransMorph" style="float:right;margin:0 0 15px 15px" /></a>
This Plugin by Lim Chee Aun (<a href="http://twitter.com/cheeaun">@cheeaun</a>) allows a different transition for every property that is being animated.
<ul><li>
<a href="http://mootools.net/forge/p/fx_transmorph">Fx.TransMorph on the Forge</a>
</li></ul>
</p>

<h3>Other Stuff Worth Mentioning</h3>

<ul>
<li><a href="http://schlaeps.com/mootools/gradient-creator/">Webkit Gradient Creator</a> (double click to create new pins!)</li>
<li><a href="http://toki-woki.net/p/scroll-clock/">Scroll Clock</a></li>
<li><a href="http://www.chipwreck.de/blog/2009/12/14/mootools-formvalidator-how-to-use-part-1/">MooTools FormValidator Tutorial</a></li>
<li><a href="http://sourceforge.net/projects/mootoolsdocgen/">Offline MooTools Docs Generator</a></li>
<li><a href="http://mtap.simulacre.org/">HTML5 Audio Player with MooTools</a></li>
<li><a href="http://nouincolor.com/wtframework/2.0/">WTFramework? 2.0</a> (must-have bookmarklet)</li>
</ul>

<h3>Keep Up the Good Work!</h3>

<p>These are just a few of the great MooTools plugins floating around the MooTools community recently. Keep up the good work and we look forward to featuring your plugins in future posts!</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/IVd44s6DbwQ" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:72:"http://mootools.net/blog/2010/01/06/mootools-roundup-december-2009/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"2";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:67:"http://mootools.net/blog/2010/01/06/mootools-roundup-december-2009/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}i:14;a:6:{s:4:"data";s:44:"
		
		
		
		
		
				
		

		
		
			
			
		
		";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";s:5:"child";a:6:{s:0:"";a:7:{s:5:"title";a:1:{i:0;a:5:{s:4:"data";s:34:"MooTools 1.1 Upgrade Helper (beta)";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"link";a:1:{i:0;a:5:{s:4:"data";s:60:"http://feedproxy.google.com/~r/mootools-blog/~3/3o7Yc9BqufQ/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:77:"http://mootools.net/blog/2009/12/31/mootools-1-1-upgrade-layer-beta/#comments";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:7:"pubDate";a:1:{i:0;a:5:{s:4:"data";s:31:"Thu, 31 Dec 2009 20:03:50 +0000";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:8:"category";a:2:{i:0;a:5:{s:4:"data";s:8:"Releases";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:13:"Tips & Tricks";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:4:"guid";a:1:{i:0;a:5:{s:4:"data";s:31:"http://mootools.net/blog/?p=549";s:7:"attribs";a:1:{s:0:"";a:1:{s:11:"isPermaLink";s:5:"false";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:11:"description";a:1:{i:0;a:5:{s:4:"data";s:311:"Users wishing to upgrade any large site from MooTools 1.1 to 1.2 can sometimes find it difficult. The API for 1.2 changed quite a bit, so without help upgrading your code can be fraught with danger.

Our solution is an upgrade helper that will allow you to replace your old MooTools 1.1 code with 1.2 code [...]";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:32:"http://purl.org/dc/elements/1.1/";a:1:{s:7:"creator";a:1:{i:0;a:5:{s:4:"data";s:8:"mootools";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:40:"http://purl.org/rss/1.0/modules/content/";a:1:{s:7:"encoded";a:1:{i:0;a:5:{s:4:"data";s:4150:"<p>Users wishing to upgrade any large site from MooTools 1.1 to 1.2 can sometimes find it difficult. The API for 1.2 changed quite a bit, so without help upgrading your code can be fraught with danger.</p>

<p>Our solution is an upgrade helper that will allow you to replace your old MooTools 1.1 code with 1.2 code by logging deprecated methods to the console and telling you what needs to be changed.</p>

<p>The upgrade helper also attempts to automatically convert 1.1 calls to 1.2 calls. However, this helper is not really meant to be a compatibility script so much as a script designed to help you migrate your code. In almost all cases methods that have been deprecated or have had their API altered will provide feedback to the console when they are called. Ideally, developers will put this script into their environment with MooTools 1.2, use their application and change all the calls that throw warnings, then remove the upgrade helper from their environment.</p>

<h3>Using the Upgrade Helper</h3>

<p>You can download the upgrade helper on the <a href="http://mootools.net/download#upgrade-helper">MooTools Download Page</a> along with current build of MooTools built for it. This companion library has all the functionality found in MooTools 1.1 (Drag, Accordion, etc. - some of these plugins moved out of MooTools Core and into MooTools More in 1.2).</p>

<p>Simply replace MooTools 1.1 with MooTools 1.2, include the upgrade helper, then include your site&#8217;s code. Browse your site with a browser that provides a console API (we recommend <a href="http://firefox.com">Firefox</a> with <a href="http://getfirebug.com">Firebug</a>) and take note of the warnings thrown (note, you can adjust the logging; see the <a href="http://github.com/mootools/mootools-upgrade-helper#readme">readme</a>). Address these in your code base until you cannot find any more, then remove the upgrade helper. You have now an upgraded website, and you can use the plugins in the <a href="http://mootools.net/forge">Forge</a>!</p>

<p>If you still have warnings after you have finished converting your code, have a look at the <a href="http://docs111.mootools.net/">documentation for 1.1</a> and <a href="http://mootools.net/docs/core/">1.2</a> and also the source code in the <a href="http://github.com/mootools/mootools-upgrade-helper">upgrade helper</a>. Most changes are simple, but may require a change of arguments. There are a few breaking changes but in the vast majority of cases these should not affect you. A complete list of the changes between 1.1 and 1.2 can be found in the readme of the github <a href="http://github.com/mootools/mootools-upgrade-helper#readme">upgrade-helper repository</a>.</p>

<h3>Feedback, Help, and Resources</h3>

<p>The upgrade helper is being released as a beta for now. We&#8217;ve written and run tests against the browsers we support but the real world usage of MooTools will be the real test. As such, we hope that you, the MooTools community, will help us polish this script, by letting us know what features on your sites don&#8217;t work. Bugs can be filed using the <a href="http://github.com/mootools/mootools-upgrade-helper/issues">github issues for the repository</a>.</p>

<p>Arguably, this is something we should have provided long ago. Going forward, we&#8217;ve pledged to make all releases 100% backwards compatible for all documented methods and features.</p>

<p>Should you require any guidance or assistance, you can, as always, find us in the <a href="irc://irc.freenode.net/#mootools">#mootools IRC channel</a>  or post in the <a href="http://groups.google.com/group/mootools-users/">MooTools Google Group</a>.</p>

<p>Last of all, massive thanks to <a href="http://www.nwhite.net">Nathan White</a> and <a href="http://www.siafoo.net/snippet/137">David Isaacson</a>, for their early work on this. In the last few weeks the MooTools Dev team has spent a lot of time making and testing this upgrade helper, but these guys kicked this off with their contributions and they are most appreciated.</p>
<img src="http://feeds.feedburner.com/~r/mootools-blog/~4/3o7Yc9BqufQ" height="1" width="1"/>";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:36:"http://wellformedweb.org/CommentAPI/";a:1:{s:10:"commentRss";a:1:{i:0;a:5:{s:4:"data";s:73:"http://mootools.net/blog/2009/12/31/mootools-1-1-upgrade-layer-beta/feed/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:38:"http://purl.org/rss/1.0/modules/slash/";a:1:{s:8:"comments";a:1:{i:0;a:5:{s:4:"data";s:1:"3";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:8:"origLink";a:1:{i:0;a:5:{s:4:"data";s:68:"http://mootools.net/blog/2009/12/31/mootools-1-1-upgrade-layer-beta/";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}}}s:44:"http://purl.org/rss/1.0/modules/syndication/";a:2:{s:12:"updatePeriod";a:1:{i:0;a:5:{s:4:"data";s:6:"hourly";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}s:15:"updateFrequency";a:1:{i:0;a:5:{s:4:"data";s:1:"1";s:7:"attribs";a:0:{}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:27:"http://www.w3.org/2005/Atom";a:1:{s:4:"link";a:2:{i:0;a:5:{s:4:"data";s:0:"";s:7:"attribs";a:1:{s:0:"";a:3:{s:3:"rel";s:4:"self";s:4:"type";s:19:"application/rss+xml";s:4:"href";s:41:"http://feeds.feedburner.com/mootools-blog";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}i:1;a:5:{s:4:"data";s:0:"";s:7:"attribs";a:1:{s:0:"";a:2:{s:3:"rel";s:3:"hub";s:4:"href";s:32:"http://pubsubhubbub.appspot.com/";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}s:42:"http://rssnamespace.org/feedburner/ext/1.0";a:1:{s:4:"info";a:1:{i:0;a:5:{s:4:"data";s:0:"";s:7:"attribs";a:1:{s:0:"";a:1:{s:3:"uri";s:13:"mootools-blog";}}s:8:"xml_base";s:0:"";s:17:"xml_base_explicit";b:0;s:8:"xml_lang";s:0:"";}}}}}}}}}}}}s:4:"type";i:128;s:7:"headers";a:10:{s:12:"content-type";s:23:"text/xml; charset=UTF-8";s:4:"etag";s:27:"nYYjZICeDApA7e82dzCo0GOlwcQ";s:13:"last-modified";s:29:"Tue, 01 Jun 2010 17:04:38 GMT";s:4:"date";s:29:"Tue, 01 Jun 2010 17:51:08 GMT";s:7:"expires";s:29:"Tue, 01 Jun 2010 17:51:08 GMT";s:13:"cache-control";s:18:"private, max-age=0";s:22:"x-content-type-options";s:7:"nosniff";s:16:"x-xss-protection";s:13:"1; mode=block";s:6:"server";s:3:"GSE";s:17:"transfer-encoding";s:7:"chunked";}s:5:"build";s:14:"20090627192103";}