Last week I released (prematurely) a MooTools plugin called Event.Delegate that added a new method to elements that allowed you to delegate a method to a parent. Read the rest of this entry »

Posted today in the MooTools user group:

Hi!

after a lot of mootools programming and docs studies, I still have a
little question:

when should I use get/set and when store/retrieve? Or, in other words,
what’s the best use for get/set and what’s the best for store/
retrieve?

Element.get/set are used for element properties (img src, element class, input value, etc) as well as custom values that include special properties (like ‘html’ and ‘text’ as well as ’styles’ and ‘events’) and default properties for built-in classes (el.set(‘tween’, options)). Element.set/get almost always accepts and returns strings and objects including the built-in instances of classes (which are also objects) – el.get(‘tween’) returns the built-in instance of Fx.Tween.

Examples:

//setting properties of elements
input.set('value', 'foo');
checkbox.set('checked', true);
myDiv.set('html', '<b>bold!</b>');
myImg.set('src', url);
//set can also take an object
myDiv.set({
  styles: { width: 100, height: 100}
  events: {
    click: function(){ alert('you clicked me!'); }
  }
});

//using custom setters/getters
element.set('tween', {duration: 500});
element.get('tween').cancel();

Storage is for storing arbitrary values for an element. These values may be any object type – boolean, array, object, function, class, etc. You can store any data and retrieve any data and not worry about memory leaks (if you stored these things as properties of the elements you would risk creating circular references, which are the main causes of such leaks.

Examples:

//storing misc. data
myImg.store('mouseOverImg', alternateSrcUrl);
myGalleryDiv.store('galleryImgs', $$('img.slide'));
//storing pointers to instances of classes
var myValidator = new FormValidator(myForm);
myForm.store('myFormValidator', myValidator);

You can define custom setters and getters for ‘default’ instances of classes or for other logic as you like. The benefit here is that when you call el.get(‘tween’) until that moment the element doesn’t have a default instance of Fx.Tween. It’s only when you use the getter or setter that it is created.

Example from Fx.Tween:

Element.Properties.tween = {
	set: function(options){
		//get the instance of tween if there is one already
		var tween = this.retrieve('tween');
		//cancel it's operation if it's running
		if (tween) tween.cancel();
		//store the new options and return the element
		//note that element.set always returns the element
		return this.eliminate('tween').store('tween:options', $extend({link: 'cancel'}, options));
	},
	get: function(options){
		//if options were defined with the get instruction, store them
		if (options || !this.retrieve('tween')){
			//store the options
			if (options || !this.retrieve('tween:options')) this.set('tween', options);
			//create a new instance with those options
			this.store('tween', new Fx.Tween(this, this.retrieve('tween:options')));
		}
		//return the instance
		return this.retrieve('tween');
	}
};

Finally, you can implement methods into the Element prototype to reference these default values (element.tween(‘opacity’, 0) and element.fade(‘out’) both call element.get(‘tween’) to execute their logic).

Again, from Fx.Tween:

Element.implement({
	tween: function(property, from, to){
		//get the instance of tween and start it
		this.get('tween').start(arguments);
		//return the element
		return this;
	}
});

Yesterday I released a bit of code that allowed you to delegate events to their parents. This pattern isn’t a new one in JavaScript, but it wasn’t something natively supported in MooTools in any sort of easy interface. You could do it, but you had to write a lot of it yourself.

My version worked like this:

myElement.delegate(test, event, fn);

Read the rest of this entry »

I just posted a long post about a bunch of new plugins I released today. Lots of good stuff in there – pointy tips, a form validator extension, a tips extension, but I want to take a minute to talk about Event.Delegate.js.

Event delegation is a common practice where by you attach an event listener to a parent object to monitor its children rather than attach events to all the children. It’s far more efficient when you have numerous items on a page that you want to interact with. For instance, let’s say you want to monitor all the links on a page. Using MooTool’s addEvent method you could loop through all the link as and attach an event to each:
Read the rest of this entry »

For those of you unfamiliar with JsonP, it’s the process of using script injection to fetch data across domains (where Ajax requests prevent this access). You inject a script tag into your document with the url of a web service and instruct that web service to send JSON data back wrapped in a function name you specify in the url. Then you have the function defined in your document waiting for that script to load and call your function, passing the response.

You can see it in action here using my JsonP class for MooTools.

Today I got an email from a fellow by the name of Alan who has released jsonptunnel – CGI and FastCGI scripts that receive JSONP requests (which, do to their script call methodology are always GET requests) and turn them into POST requests. Tres cool.

In order to POST to an off site web service, a GET URL is formatted and fetched that looks like this:
?extURL=http://dipert.org/alan/calc.php&extMethod=POST&num1=10….

This tells the CGI to fetch the specified URL using the specified HTTP verb and pass the specified variables.