Why Event.Mock?

One frequent MooTools occurrence is assigning an event to a given element, then firing an event on the given element. The problem that occurs is that fireEvent doesn’t provide an Event object to the event listener’s function because a real event didn’t occur. Thus, if you reference the event within the listener function, you’ll get an error:

/* assign an event to myElement */
$('myElement').addEvent('click',function(e) {
	var target = e.target;  /* ERROR! -- e is null */
})

/* fire an event */
$('myElement').fireEvent('click');

Event.Mock serves as a fake event to provide to the listener function.

The Event.Mock MooTools JavaScript

/**
 * creates a Mock event to be used with fire event
 * @param Element target an element to set as the target of the event - not required
 *  @param string type the type of the event to be fired. Will not be used by IE - not required.
 *
 */
Event.Mock = function(target,type){
var e = window.event;
type = type || 'click';

if (document.createEvent){
    e = document.createEvent('HTMLEvents');
    e.initEvent(
        type, //event type
        false, //bubbles - set to false because the event should like normal fireEvent
        true //cancelable
    );
}
e = new Event(e);
e.target = target;
return e;
}

Event.Mock accepts two arguments: the first being the fake event’s target element, the second being the type of event (i.e. “click”, “mouseenter”, etc.) That means I can use Event.Mock as such:

/* listen! */
$('myElement').addEvent('click',function(e){
	/* log the event to the console */
	console.log(e);
});

/* fire! */
$('myElement').fireEvent('click',new Event.Mock($('myElement'),'mousedown'));

Boom. No worries about event errors AND useful information, in the form of a fake event target and type, is event listener function.

Big ups to Arieh for his simple but useful MooTools plugin!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools Plugin: Event.Mock

Related posts:

1. MooTools Tip: Event.stop
2. Implement MooTools’ Elements.addEvent in jQuery
3. dojo.connect: A Powerful Object and Event Listener
4. Event Delegation with MooTools
5. Simple MooTools Event / Class Binding

There’s nothing like a subtle, slick website widget that effectively uses CSS and JavaScript to enhance the user experience.  Of course widgets like that take many hours to perfect, but it doesn’t take long for that effort to be rewarded with above-average user retention and buzz.  One of the widgets I love is Twitter’s “Follow” button.  Let me show you how you can implement this functionality with three popular JavaScript toolkits:  MooTools, jQuery, and Dojo.

Note:  This tutorial will only display the client side handling of the form submission — NOT any PHP/MySQL/server-side handling of the request.

The HTML Structure

	
	
		follow
	

The HTML for the button is very simple.  The structure revolves around a BUTTON element which contains an I element and SPAN element.  You’re probably thinking “An I element?  WTF.”  I know I did.  The truth of the matter is that the I element is deprecated and, as far as I’m concerned, and be used for any purpose the developer would like.  I’m also sure that Twitter doesn’t mind saving bytes here or there.

The CSS Styles

/* twitter button and its children */
button.btn { 
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	background-attachment:scroll;
	background-color:#ddd;
	background-image:url(http://s.twimg.com/a/1282150308/images/buttons/bg-btn.gif);
	background-position:0 0;
	background-repeat:repeat-x;
	border:1px solid #ddd;
	border-bottom:1px solid #ccc;
	color:#333;
	cursor:pointer;
	font-family:"Lucida Grande",sans-serif;
	font-size:11px;
	line-height:14px;
	padding:4px 8px 5px 8px;
	text-shadow:1px 1px 0 #fff;
	vertical-align:top;
}
button.btn:hover {
	border:1px solid #999;
	border-bottom-color:#888;
	color:#000;
	background-color:#d5d5d5;
	background-position:0 -6px;
}
button.btn:active {
	background-image:none !important;
	text-shadow:none !important;
}
			
button.btn i {
	background-image:url(http://s.twimg.com/a/1282150308/images/sprite-icons.png);
	background-position:-176px -32px;
	background-repeat:no-repeat;
	display:inline-block;
	height:13px;
	margin-right:5px;
	width:15px;
}
button.btn i.active	{ background:url(http://s.twimg.com/a/1282150308/images/spinner.gif); }

/* properties for the element that is generated *after* following */
span.following	{  background:#ffd; padding:5px 10px; }
span.following span { width:10px; height:9px; margin-right:5px; display:inline-block; background:url("http://s.twimg.com/a/1282150308/images/sprite-icons.png") -160px -16px no-repeat; }

Most of the styling for this button goes onto the BUTTON element itself.  You’ll notice directives to round the button;  leaving the button sharp also please the eye.  Through the regular, hover, and active button states, check out how Twitter users the background position and colors to nicely modify the button without the need for additional images.  You’ll also notice Twitter uses sprites…as should you.

The MooTools JavaScript

/* with mootools */
window.addEvent('domready',function() {
	/* fetch elements */
	$$('form.follow-form').each(function(form) {
		/* stop form event */
		form.addEvent('submit',function(e) {
			/* stop event */
			if(e) e.stop();
			/* send ajax request */
			var i = form.getElement('i');
			new Request({
				url: 'twitter-follow.php',
				method: 'post',
				data: {
					followID: form.getElement('input').value
				},
				onRequest: function() {
					i.addClass('active');
				},
				onSuccess: function() {
					var button = form.getElement('button');
					button.setStyle('display','none');
					new Element('span',{
						html: 'Following!',
						'class': 'following'
					}).inject(button,'after');
				},
				onComplete: function() {
					i.removeClass('active');
				}
			}).send();
		});
	});
});

The first step is grabbing all of the FORM elements with the follow-form CSS class.  Upon form submission, the default submission action is stopped.  An AJAX request is fired, using the INPUT element’s ID as the user to follow.  When the request is fired, the I element’s background image is set to the spinner.  When the request is complete, the button is hidden and a new SPAN element is displayed informing the user that they are now following the given user!

The jQuery JavaScript

// Idiomatic jQuery by Doug Neiner
jQuery(function ($) {
	/* fetch elements and stop form event */
	$("form.follow-form").submit(function (e) {
		/* stop event */
		e.preventDefault();
		/* "on request" */
		$(this).find('i').addClass('active');
		/* send ajax request */
		$.post('twitter-follow.php', {
			followID: $(this).find('input').val()
		}, function () {
			/* find and hide button, create element */
			$(e.currentTarget)
			  .find('button').hide()
			  .after('<span class="following"><span></span>Following!</span>');
		});
	});
});

The code above is based off of the MooTools code.  The workflow is exactly the same.

The Dojo JavaScript

/* when the DOM is ready */
dojo.ready(function() {
	/* fetch elements */
	dojo.query('form.follow-form').forEach(function(form) {
		/* stop form event */
		dojo.connect(form,'onsubmit',function(e) {
			/* stop event */
			dojo.stopEvent(e);
			/* active class */
			dojo.query('i',form).addClass('active');
			/* get button */
			var button = dojo.query('button',form)[0];
			/* ajax request */
			dojo.xhrPost({
				form: form,
				load: function() {
					dojo.style(button,'display','none');
					dojo.create('span',{
						innerHTML: 'Following',
						className: 'following'
					},button,'after');
				}
			});
		});
	});
});

The code above is based off of the MooTools code.  The workflow is exactly the same.

This “Follow” button is only one of many details that Twitter has paid attention to, just to make the user experience on the site better.  Take note from the effort put forth by large websites — adding these types of details to your smaller websites can make the user experience much better for YOUR users!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Create a Twitter AJAX Button with MooTools, jQuery, or Dojo

Related posts:

1. Create Twitter-Style Buttons with the Dojo Toolkit
2. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
3. Animated AJAX Record Deletion Using Dojo
4. Create an Animated Sliding Button Using MooTools
5. Create Twitter-Style Dropdowns Using jQuery

Calculate Element Dimensions and Position

Knowing not only the height and width of a dimension but it’s top/left position from an offset parent or document body can be extremely helpful when trying to animate or move a DOM element.

MooTools

var dimensions = document.id('myElement').getDimensions();
/* returns:
{ 
	height: 4684,
	width: 1408,
	x: 1408,
	y: 4684
}
*/

jQuery

var myElement = jQuery('#myElement');
var position = myElement.position();
var dimensions = {
	height: myElement.height(),
	width: myElement.width(),
	top: position.top,
	left: position.left
};

Dojo

var dimension = dojo.coords('myElement');
/* returns:
{
	h: 4684,
	l: 0,
	t: 0,
	w: 1408,
	x: 0,
	y: 0
}
*/

Extend an Object

Extending an object means taking on object and merging a second objects properties into it. This is very helpful in merging default options with instance options.

MooTools

$extend(firstObject,{ anotherProperty:'anothervalue' });
//second arg is added to the first object

jQuery

jQuery.extend(firstObject,{ anotherProperty:'anothervalue' })

Dojo

dojo.mixin(firstObject,{ anotherProperty:'anothervalue' });

Stop an Event

Stopping an event is helpful when looking to execute functionality (usually an XHR request) when a link is clicked.

MooTools

$('myElement').addEvent('click',function(e) {
	e.stop();
});

jQuery

$('#myElement').click(function(e){ 
	event.stopPropagation();
	e.preventDefault();
	// (no internal method that does both)
});

Dojo

dojo.connect(dojo.byId('myElement'),'onclick',function(e) {
	dojo.stopEvent(e);
});

Load Content into an Element

Sure we can create an XHR request manually to load content into an element but why do that when your favorite lirbary can do that work for you?

MooTools

document.id('myElement').load('ajax/script.html');

jQuery

jQuery('#myElement').load('ajax/script.html');

Dojo

//as found on Pete Higgins' website:
//http://higginsforpresident.net/2009/12/140-characters-of-awesome/
dojo.extend(dojo.NodeList, {
	grab: function(url){
		dojo.xhr('GET', { url:url })
			.addCallback(this, function(response){
				this.addContent(response, 'only');
			});
		return this;
	}
});
dojo.query('#myElement').grab('header.html');

Get and Set HTML Content

Getting and setting HTML is a frequent JavaScript operation…yet each library handles it a bit differently.

MooTools

//get
var html = document.id('myElement').get('html');
//set
document.id('myElement').set('html','Hello!');

jQuery

//get
var html = jQuery('#myElement').html();
//set
jQuery('#myElement').html('Hello!');

Dojo

//get 
var html = dojo.byId('myElement').innerHTML
//set
dojo.byId('myElement').innerHTML = 'Hello!';

Use Element Storage

Element data storage is important because it allows you to store settings within the element itself — perfect for defeating scope and context issues.

MooTools

//set
document.id('myElement').store('key','value');
//get
var value = document.id('myElement').retrieve('key');

jQuery

//set
jQuery('#myElement').data('key','value');
//get
var value = jQuery('#myElement').data('key');

Dojo

//set
dojo.attr('myElement','data-key','value');
//get
dojo.attr('myElement','data-key');

There you are — more proof that the toolkits are one in the same, all except the syntax.  Do yourself a favor and learn more than one JavaScript framework — you’ll be better for it!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II
3. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
4. Create a Twitter AJAX Button with MooTools, jQuery, or Dojo
5. dojo.connect: A Powerful Object and Event Listener

Loop Through an Element Collection

MooTools

$$('div').each(function(div) {
	/* do stuff here */
});

jQuery

jQuery('div').each(function(){ 
	/* do stuff;  "this" is the element */
});

Dojo

dojo.query('div').forEach(function(div){ 
	/* do stuff */
});

Get an Element Attribute Value

MooTools

var rel = document.id('myElement').get('rel');

jQuery

var rel = jQuery('#myElement').attr('rel');

Dojo

//var rel = dojo.query('#myElement').attr('rel')[0];
var rel = dojo.attr('myElement','rel');

Create a Plugin / Class – Template

MooTools

var myClass = new Class({
	
	initialize: function(options) {
		/* do initial processing */
	}
	
});

jQuery

jQuery.fn.myClass = function(options) {
	
	return this.each(function() {
		/* do initial processing */
	});
	
};

Dojo

dojo.provide('mynamespace.PluginName');
dojo.declare('mynamespace.PluginName',null,{
	
	constructor: function(options) {
		/* do initial processing */
	}
	
});

Set and Get Cookie Key=>Values

MooTools

/* set */
Cookie.write('key','value',{ duration: 5 }); //5 days
/* get */
var cookieValue = Cookie.read('key');

jQuery

/* 
	requires this plugin:  http://plugins.jquery.com/project/cookie
*/
/* set */
jQuery.cookie('key','value', { expires: 5 });
/* get */
var cookieValue = jQuery.cookie('key');

Dojo

/* get dojo's cookie class */
dojo.require('dojo.cookie');
/* set */
dojo.cookie('key','value', { expires: 5 }); //5 days
/* get */
var cookieValue = dojo.cookie('key');

Retrieve JSON via XHR

MooTools

var jsonRequest = new Request.JSON({
	url: 'info.json', 
	onSuccess: function(json){
    	/* do something with results */
	}
}).get();

jQuery

jQuery.getJSON('info.json',function(json) {
	/* do something with results */
});

Dojo

dojo.xhrGet({
	url: 'info.json',
	handleAs: 'json',
	load: function(json) {
		/* do something with results */
	}
});

There you are — more proof that the toolkits are one in the same, all except the syntax.  Do yourself a favor and learn more than one JavaScript framework — you’ll be better for it!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Accomplishing Common Tasks Using MooTools, jQuery, and Dojo II

Related posts:

1. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo III
2. Accomplishing Common Tasks Using MooTools, jQuery, and Dojo
3. dojo.connect: A Powerful Object and Event Listener
4. Quick Dojo Setup Snippet for MooTools Developers
5. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript

ScrollSpy

ScrollSpy is an invaluable tool which listens to the scroll event on any element within the page, allows you to create “virtual zones” to spy on, and allow you to fire specified functionality when the user’s browser enter or leaves the zone.  I’ve used ScrollSpy on my website for years and will continue to do so.  This compact plugin can have a big impact on your website!

LazyLoad

LazyLoad is another plugin that’s small in size but big in the fight for cutting down load time.  LazyLoad defers the loading of images until the user scrolls within a specified number of pixels of the image.  What make the user download images they might never get to the piece of the page that contains them?

SlideShow

SlideShow is the amazing slideshow widget created by MooTools contributor Ryan Florence.  SlideShow is extendable, flexible, and easy to implement.  SlideShow allows for more than just images too — any number of elements can added to SlideShow.  The masterful plugin also contains built-in transition types so most of the animation is done for you!

Asset

Asset is a MooTools More class that allows you to dynamically request stylesheets, images, and JavaScript files asynchronously after the page has been loaded.  With Asset you can preload images, switch themes via CSS file swapping, and lazy load JavaScript plugins on demand

TextboxList

TextboxList by Guillermo Rauch is an outstanding plugin for beautifying text INPUT elements which contain comma-separated values.  TextboxList was inspired by Facebook and perfected using the MooTools framework.  TextboxList is also available for jQuery.

Zoomer

Zoomer is a refreshing take on image magnification.  Instead of the lightbox which has grown to be tiresome, Zoomer magnifies portions of an image within the original image’s same dimensions.  You can focus on different portions of an image by moving your mouse around.

Mobile

Created by MooTools Core Developer Christoph Pojer, Mobile is a MooTools set of JavaScript files to enhance your website on mobile operating systems by automatically replacing all your click handlers with touch listeners to overcome the click delay on iOS.  A huge step in getting your website mobile-ready!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: 7 MooTools Plugins You Should Use on Every Website II

Related posts:

1. MooTools Zoomer Plugin
2. 7 MooTools Plugins You Should Use on Every Website
3. Create a Quick MooTools Slideshow with Preloading Images
4. Create a Simple Slideshow Using MooTools
5. Introducing MooTools LazyLoad

Let’s be honest…WordPress’ search functionality isn’t great. Let’s be more honest…no search functionality is better than Google’s. Luckily for us, Google provides an awesome method by which we can use their search for our own site: the Google AJAX Search API. Let me show you how to implement this awesome API within your own website!

Sign Up!

Google’s AJAX Search API requires that you sign up for an API key.  Signing up is free and you’ll be done with the process of retrieving a key in a few minutes.

You’ll also need to provide a domain for which they key will work for; one key per domain.

The HTML

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
	<!-- HTML5 SEARCH BOX!  -->
	<input type="search" id="search-box" name="q" results="5" placeholder="Search..." autocomplete="on" />
	<!-- SEARCH davidwalsh.name ONLY! -->
	<input type="hidden" name="sitesearch" value="davidwalsh.name" />
	<!-- SEARCH BUTTON -->
	<input id="search-submit" type="submit" value="Search" />
</form>

<!-- ASYNCHRONOUSLY LOAD THE AJAX SEARCH API;  MOOTOOLS TOO! -->
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_REALLY_REALLY_REALLY_REALLY_REALLY_REALLY_LONG_KEY"></script>
<script type="text/javascript">
	google.load('mootools','1.2.4');
	google.load('search','1');
</script>

You’ll want to use a “real” form so that if the user doesn’t have JavaScript, they’ll get directed to Google for their search.  Beyond that, follow the hidden input line to ensure your search will work.  You may also note that the search box has autocomplete and placeholder attributes — those are HTML5 functionality, nothing to do with Google’s AJAX Search API.

The CSS

/* results positioning */
#search-results		{ position:absolute; z-index:90; top:40px; right:10px; visibility:hidden; }
/* triangle! */
#search-results-pointer { width:0px; height:0px; border-left:20px solid transparent; border-right:20px solid transparent; border-bottom:20px solid #eee; margin-left:80%; }
/* content DIV which holds search results! */
#search-results-content { position:relative; padding:20px; background:#fff; border:3px solid #eee; width:380px; min-height:200px; -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5) }

The CSS above simply position the elements where I want them per my design. I even used a CSS triangle!

The JavaScript

window.addEvent('domready',function(){

	/* search */
	var searchBox = $('search-box'), searchLoaded=false, searchFn = function() {

		/*
			We're lazyloading all of the search stuff.
			After all, why create elements, add listeners, etc. if the user never gets there?
		*/
		if(!searchLoaded) {
			searchLoaded = true; //set searchLoaded to "true"; no more loading!

			//build elements!
			var container = new Element('div',{ id: 'search-results' }).inject($('search-area'),'after');
			var wrapper = new Element('div',{
				styles: {
					position: 'relative'
				}
			}).inject(container);
			new Element('div',{ id: 'search-results-pointer' }).inject(wrapper);
			var contentContainer = new Element('div',{ id: 'search-results-content' }).inject(wrapper);
			var closer = new Element('a', {
				href: 'javascript:;',
				text: 'Close',
				styles: {
					position: 'absolute', //position the "Close" link
					bottom: 35,
					right: 20
				},
				events: {
					click: function() {
						container.fade(0);
					}
				}
			}).inject(wrapper);

			//google interaction
			var search = new google.search.WebSearch(),
				control = new google.search.SearchControl(),
				options = new google.search.DrawOptions();

			//set google options
			options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
			options.setInput(searchBox);

			//set search options
			search.setUserDefinedClassSuffix('siteSearch');
			search.setSiteRestriction('davidwalsh.name');
			search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

			//set search controls
			control.addSearcher(search);
			control.draw(contentContainer,options);
			control.setNoResultsString('No results were found.');

			//add listeners to search box
			searchBox.addEvents({
				keyup: function(e) {
					if(searchBox.value && searchBox.value != searchBox.get('placeholder')) {
						container.fade(0.9);
						control.execute(searchBox.value);
					}
					else {
						container.fade(0);
					}
				}
			});
			searchBox.removeEvent('focus',searchFn);
		}
	};
	searchBox.addEvent('focus',searchFn);
});

There’s a fair amount of JavaScript above so stay with me.  The following are the steps for implementing the Google AJAX API:

• Create an element to house the results of the search.
• Create a “Close” link which will allow the user to close the search results window.
• Create our Google-given class instance:
  • A Web Search (you can also create Local Search if you’d like…). google.search.WebSearch options. I’ve chosen to add tabs and set the input as my search box.
  • A SearchControl instance. google.search.SearchControl options. “siteSearch” is my suffix for results, I’ve restricted my search to the davidwalsh.name domain, and form submission will trigger results to display in the current window (instead of a new window).
  • A DrawOptions instance. google.search.DrawOptions options. With my DrawOptions instance, I’ve set search control, set the draw container with the options we’ve created, and I’ve decided to use Google’s default “no results” message

Once the search controls are created, it’s time to attach events to the search box to show and hide the search results container based on the contents of the search box. That’s all!

As you can see, I’ve chosen to use the MooTools (FTW) JavaScript toolkit to create the element that houses the results, the “Close” link, and to bind events to the search box. You could just as easily use Dojo or jQuery for element creation and even handling.

In all honesty, I couldn’t believe how easy it was to implement Google AJAX search.  It’s an easy want to implement search on your website, especially if you’re currently using WordPress’ search.  I recommend taking the time to implement Google’s AJAX Search API — the day it takes you to get it working will save your users hours of pain!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Implement the Google AJAX Search API

Related posts:

1. Search Type Options with MooTools
2. Create a Dynamic Flickr Image Search with the Dojo Toolkit
3. google.load(): Utilize Google’s AJAX Libraries API
4. AJAX Username Availability Checker Using MooTools 1.2
5. Form Element AJAX Spinner Attachment Using jQuery

The CSS

table.db-table 		{ border-right:1px solid #ccc; border-bottom:1px solid #ccc; }
table.db-table th	{ background:#eee; padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }
table.db-table td	{ padding:5px; border-left:1px solid #ccc; border-top:1px solid #ccc; }

The CSS I’m styling the table with is as basic as it gets — style as you wish!

The PHP / MySQL

/* connect to the db */
$connection = mysql_connect('localhost','username','password');
mysql_select_db('my_db',$connection);

/* show tables */
$result = mysql_query('SHOW TABLES',$connection) or die('cannot show tables');
while($tableName = mysql_fetch_row($result)) {

	$table = $tableName[0];
	
	echo '<h3>',$table,'</h3>';
	$result2 = mysql_query('SHOW COLUMNS FROM '.$table) or die('cannot show columns from '.$table);
	if(mysql_num_rows($result2)) {
		echo '<table cellpadding="0" cellspacing="0" class="db-table">';
		echo '<tr><th>Field</th><th>Type</th><th>Null</th><th>Key</th><th>Default<th>Extra</th></tr>';
		while($row2 = mysql_fetch_row($result2)) {
			echo '<tr>';
			foreach($row2 as $key=>$value) {
				echo '<td>',$value,'</td>';
			}
			echo '</tr>';
		}
		echo '</table><br />';
	}
}

The first step in the process is accessing all of the tables within the database.  Once all tables have been fetched, the next step is to loops through the array of tables we receive and, for each table, build a new HTML table with column information.

Nothing groundbreaking but surely has use.  I’ve also written a blog post about backing up your MySQL database with PHP titled Backup Your MySQL Database Using PHP; check that out if you’d prefer to backup your databse information in SQL format!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: Build HTML Tables From MySQL Tables with PHP

Related posts:

1. PHP / MySQL Database Optimization Function
2. Backup Your MySQL Database Using PHP
3. Build a Calendar Using PHP, XHTML, and CSS
4. PHP, Microsoft SQL Server (MSSQL), and IIS: Connect and Query with ODBC
5. Create a Basic Web Service Using PHP, MySQL, XML, and JSON

This blog post is intended to provide a starting point for ServerSide JavaScript (SSJS) development with MooTools. It is focused on NodeJS (http://nodejs.org) and tries to explain the main concepts and differences from client side development. It is solely based on my current experience, my current work, and the best practices I have defined for myself so far – though most of this has been heavily influenced by people from other people of the MooTools team.

How to Setup NodeJS

• Download from http://nodejs.org/#download
• Build via ./configure && make && sudo make install

It can’t get any easier.

Current State of MooTools and SSJS

Our current releases, MooTools Core 1.2 and 1.3beta2, do not work out of the box with NodeJS. NodeJS, as well as other serverside JavaScript implementations have adopted the CommonJS standard which includes a module system. Every module you create can export objects via the “exports” object. You can include a file by using “require(‘path/to/module’)” which gives you access to the module’s exported variables:

math.js

exports.add = function(a, b){
	return a + b;
};

myApplication.js

var math = require('./math');

var sys = require('sys'); // System module

sys.puts(math.add(13, 37)); // Outputs "50"

You can execute this script via “node myApplication.js” on the command line.

You can find more information about this on the CommonJS Wiki: http://wiki.commonjs.org/wiki/Modules/1.1.

The key difference between the module system as specified in CommonJS and normal client side script-tags is that they do not share the same (global) scope. This means that creating a variable via “var foo” in a module does not automatically make it available on the global object. The global object on the client side is the “window”-object which is usually not available on the serverside. In NodeJS the global object is called GLOBAL, whereas some other implementations simply use the name “global” or just reference it to “this” inside a module. This is not defined by CommonJS so every environment solves it in a different way.

While it is relatively easy to add support for modules in a JavaScript library that revolves around only one object, MooTools provides several global variables such as Class, Events, Type (Native) etc. In addition to that this new standard is very young and if we ever implement support for CommonJS directly into MooTools we want to define the best practices that we can recommend to our whole community.

Note: CommonJS is not actually a standard but more of a set of specifications that a serverside implementation of JavaScript can (or should) follow to unify the various environments and to make it possible to create modules that work on all platforms without any modifications.

Get MooTools Running on NodeJS

Over the past couple of months some members of the MooTools team came up with various ways to make MooTools CommonJS compatible. I have now created a repository on GitHub that helps create a build version of MooTools. This is mostly based on work by @keeto and me. We are going to use the work-in-progress version of MooTools Core, which is a pre 1.3 version. If you don’t have git installed or don’t feel like entering some commands you can skip ahead to the next section and just download a pre-build version of MooTools: MooTools.js (based on this commit).

Get MooTools 1.3wip (command line)

git clone git://github.com/cpojer/mootools-core.git

Get Packager (requires php-cli to be installed)

git clone http://github.com/kamicane/packager.git

Get the MooTools CommonJS Loader

git clone git://github.com/cpojer/mootools-loader.git

Build a Custom MooTools Version

cd packager # Switch into the Packager folder

./packager register /path/to/mootools-core
./packager register /path/to/mootools-loader

./packager build Loader/Prefix Core/Class Core/Class.Extras Loader/Loader -blocks 1.2compat > MooTools.js

You should see some output like this:

Build using: Core, Loader
Included Files/Components:
- Loader/Prefix: [Prefix]
- Core/Core: [Core, MooTools, Type, typeOf, instanceOf]
- Core/Array: [Array]
- Core/String: [String]
- Core/Function: [Function]
- Core/Number: [Number]
- Core/Class: [Class]
- Core/Class.Extras: [Class.Extras, Chain, Events, Options]
- Core/Object: [Object, Hash]
- Loader/Loader: [Loader]

and a file “MooTools.js” should have been created that is ready to be used.

Use MooTools in NodeJS

require.paths.push('path/to/mootoolsjs/');

require('MooTools').apply(GLOBAL);

var sys = require('sys');

var MyClass = new Class({

	initialize: function(){
		sys.puts('It works!');
	}

});

new MyClass;

Run this, again with the “node” command, on the command line and you should see “It works!” as output.

Please note that this is quite experimental, the functionality you will find is subject to change and might contain bugs. The above solution has so far only been tested on NodeJS but it should work on other SSJS implementations too

Difference Between Applications and Modules

One thing that I want to highlight is that I’m convinced that modules should not create global variables. However, the above mentioned solution puts everything MooTools provides on the global scope. While it is reasonable to do this when you are developing an application and you have control over every aspect of it, I do not believe it is a good idea to do this when you create a module (plugin) that uses MooTools. This is why the solution I came up with has another way to work with it, consider the following example.

MyPlugin.js

var Moo = require('MooTools'),
	Class = Moo.Class,
	Options = Moo.Options,
	typeOf = Moo.typeOf;

exports.MyPlugin = new Class({

	Implements: [Options],
	
	options: {
		name: ''
	},
	
	initialize: function(options){
		if (!options) options = {};

		if (typeOf(options.name) != 'string')
			throw new Error("Ohmy!");
		
		this.setOptions(options);
	}

});

MyApplication.js

// Add path to MooTools module so every module can just require "MooTools" without specifying the exact path
require.paths.push('path/to/mootoolsjs/');

var MyPlugin = require('path/to/MyPlugin').MyPlugin;

new MyPlugin({name: 'Kid Rock'});

// We can still add all the MooTools objects to the global scope without breaking anything
require('MooTools').apply(GLOBAL);

new Class(..);

You can now share the MyPlugin-Class with other people and it will work for them even if they do not put the MooTools objects on the global scope.

Note: MooTools still adds extensions to the native types, such as String, Array and Function even if you do not put it on the global scope. Executing “require(‘MooTools’)” once makes all the extensions available in any scope. Note that, at least at the moment, all modules share the exact same datatypes; there are no sandboxed datatypes. If extending the native types in JavaScript does not align with your style of coding you should probably not use MooTools (or JavaScript, as it is a core feature of the language). One of the goals of the MooTools project is to provide a framework that feels natural and does not make a distinction between the core language and functionality of the library.

Why “evented”? Async, huh?

JavaScript, as a language mostly used on the clientside, has strong asynchronous capabilities. This means that most of the time you define certain functionality in your application that gets executed when a user – a real person – interacts with the content of a website. You usually do this by adding listeners to certain events on DOM elements:

myElement.addEvent('click', function(){
	// This function gets executed upon interaction
});

You call the addEvent method and add a function to it, the program flow continues normally and the function is called asynchronously whenever a user clicks on it. In any case, you do not want to wait with the execution of any other code until this event gets executed. You do not want the click event listener to block. This is the main design goal of NodeJS: to be non-blocking for any I/O operations such as reading or writing a file, storing or retrieving data from a database etc. This means that most code you will write on the serverside passes around functions (callbacks, event listeners) that get executed at a later time (e.g. when results of an operation are ready). You can find a simple example right on the NodeJS website: http://nodejs.org/

To give you a better understanding, this is some sample code of what user authentication could look like with MooTools:

var Moo = require('MooTools'),
	Class = Moo.Class,
	Db = require('Database').getDatabase(),
	sha1 = require('Sha1');

exports.User = new Class({

	initialize: function(name){
  		this.name = name;
	},

	authenticate: function(password, callback){
		var user = this;
		Db.open(function(db){
			db.collection('users', function(err, collection){
				if (err) return callback(err);

				collection.findOne({name: user.name, password: sha1.hex(password)}, function(err, data){
					if (err) return callback(err);

					callback(null, data != null);
				});
			});
		});
	}

});

In your application you would now create a new instance of User and call the authenticate method with a callback like this

	var User = require('User');

	var sys = require('sys');

	var instance = new User('david');
	instance.authenticate('kidrock', function(err, result){
		if (err) return; // handle database error

		if (result) sys.puts('User authenticated');
		else sys.puts('User does not exist');
	});
	sys.puts('Authenticating user');

This example will print out two messages “Authenticating user” and the result/success of the authentication. The order relies on the speed of the database and likely “Authenticating user” will be printed out first. You can compare this to a setTimout example

setTimeout(function(){
	log('Bye');
}, 1);
log('Hello');

Note: The callback style with the error as first argument is aligned to the way NodeJS currently works with asynchronous operations. Before that a “Promises” system was used but it has been removed. A high level implementation can abstract away from the current solution. Feel free to implement your own callback/event system with MooTools and share it with the community :)

Note: CommonJS actually specifies module identifiers to be lowercase. However, I like my filenames to start uppercased. You’ll always see me doing “require(‘User’)” instead of ‘user’ in my applications.

Why ServerSide MooTools?

One reason for the existence of JavaScript libraries is the lack of certain functionality especially on the DOM level and the enormous amount of issues between different rendering engines. You do not have any of these problems on the serverside. MooTools, as a library, works on a much lower level than some other libraries and it therefore provides useful utility functionality that we think is missing in JavaScript. In addition to that, even if there are CommonJS specifications, some implementations differ from the others. MooTools Core and an abstraction layer on top of that (like Deck ( http://github.com/keeto/deck )) can greatly benefit you and help you eliminate or reduce low level problems you may encounter at some point during development.

In addition to that the sophisticated and clean class system provided by MooTools makes it possible to write abstract plugins that will work on both the server- and the clientside without any further modifications (ie. a Language/Internalization class, a schema validator, etc.). For more information on this feel free to watch my presentation at FOSDEM 2010 (at 25:00 + Q&A).

Other (non-MooTools Related) Stuff

• Driver for MongoDB which I used to contribute to: http://github.com/christkv/node-mongodb-native
• WebSocket Server for NodeJS by MooTools Developer Guillermo Rauch: http://github.com/LearnBoost/Socket.IO-node
• ORM on top of the node-mongodb-driver by Nathan White and Guillermo Rauch: http://github.com/nw/mongoose
• Other Node Modules: http://wiki.github.com/ry/node/modules

Bonus: Execute a Script in NodeJS from TextMate by Using NodeJS

Add this command as a script:

#!/usr/bin/env node

var sys = require('sys'),
    spawn = require('child_process').spawn;

spawn('node', [process.ENV.TM_FILEPATH]).stdout.addListener('data', function(data) {
  sys.puts(data);
});

Like this:

Click the image above for a larger view.

About Christoph Pojer

Christoph is a student of Software Engineering and Business Administration at the Graz University of Technology in Austria. He is an experienced web developer and a Core Developer of the MooTools JavaScript Framework.

Christoph’s Website • GitHub • Twitter • Forge

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: ServerSide JavaScript with MooTools and NodeJS

Related posts:

1. Create a GitHub Merge Batch File
2. Follow MooTools on GitHub!
3. The Beauty of dojo.require()
4. Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript
5. Replace All Occurrences of a String in JavaScript

The MooTools JavaScript

var Equalizer = new Class({
	initialize: function(elements) {
		this.elements = $$(elements);
	},
	equalize: function(hw) {
		if(!hw) { hw = 'height'; }
		var max = 0,
			prop = (typeof document.body.style.maxHeight != 'undefined' ? 'min-' : '') + hw; //ie6 ftl
			offset = 'offset' + hw.capitalize();
		this.elements.each(function(element,i) {
			var calc = element[offset];
			if(calc > max) { max = calc; }
		},this);
		this.elements.each(function(element,i) {
			element.setStyle(prop,max - (element[offset] - element.getStyle(hw).toInt()));
		});
		return max;
	}
});

The first step is cycle through each element to find which is the tallest (or widest — this plugin accommodates for equal widths as well). Once we know the largest number we can set the min-property for the element to that number while subtracting border and padding. Simple!

The Sample Usage

var columnizer = new Equalizer('.sizeMe').equalize('height'); //call .equalize() as often as you want!

Obviously the class is super small. You create one instance, passing elements initially. From that point forward you can simply call the equalize method as many times as you would like. This is especially useful if the contents of a given column changes frequently.

Let me know if you see any room for improvement. I think this plugin will be quite useful for many developers.

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools Equal Heights Plugin: Equalizer

Related posts:

1. New MooTools Plugin: ElementFilter
2. Highlighter: A MooTools Search & Highlight Plugin
3. MooTools Typewriter Effect Plugin
4. Create a Sexy Persistent Header with Opacity Using MooTools or jQuery
5. dwImageProtector Plugin for jQuery

The MooTools JavaScript

(function() { 
if(window.MooTools == undefined) return false;
var classes = [];
for(obj in window) {
	try {
		var typo = (window.$type != undefined ? $type(window[obj]) : typeOf(window[obj]));
		if(typo == 'class') {
			classes.push(obj);
		}
	} catch(e) { }
}
classes.sort();
console.log('# Classes: ' + classes.length);
classes.each(function(klass) {
	console.log(klass);
}); })();

The key to finding each class is using the $type (< MooTools 1.3) or typeOf (MooTools 1.3) functions. If the result is “class”, we’ve found a class in the given scope. The scope we’re searching for is window scope. You can easily change the code snippet to change scope. Checking every scope would be far too taxing so I’ve stuck to window-level objects.

There you have it. MooTools 1.3 is structured a bit differently than 1.2 so you’ll see far fewer classes with 1.3. Just a part of minimizing globals and tightening up this masterful framework!

Follow Me! Twitter | Facebook | LinkedIn | MooTools Forge.

Full David Walsh Blog Post: MooTools Class Sniffer Bookmarklet

Related posts:

1. Check for Google Analytics Using MooTools 1.2
2. Create Custom Pseudo Class Selectors Using the Slick Selector Engine
3. Limiting Variable Scope Using (function(){})();
4. Highlighter: A MooTools Search & Highlight Plugin
5. Create a Simple Slideshow Using MooTools, Part III: Creating a Class