Using Prototype

With the new release of Prototype 1.6.0 just around the corner I thought it would be a good idea to highlight some of the new features of the upcoming release and go on to overviewing a couple of libraries built on Prototype that I have recently found very useful.

Prototype 1.6.0 final is due to be released in early November 2007 and brings with it some fairly major changes to existing API’s as well as a few new features. Prototype 1.6.0 is not expceted to be compatible with earlier versions.

Prototype 1.6.0

There have been many changes to the Event API, in particular:

  • The event object has been brought more into line with the W3C-standard and so there won’t be as much need to make calls of the form Event.method(eventInstance).
  • Support for custom events. This is good news for building event driven AJAX applications. Custom events such as AJAX requests and responses can be handled in exactly the same way as real DOM Events.
  • Cross-Browser support for the DOMContentLoaded event means that scripts can easily be initiated whilst images are still loading.

The Class API has better support for inheritance and calling superclass methods. Go to the full tutorial on Prototype class inheritance at the Prototype site for detailed information.

There are some great looking enhancements to the DOM API, in particular:

  • Creating new elements using new Element(); – Will this see the end of the Builder.build() function in Scriptaculous? There is more about this in a post on the Prototype blog: Prototype: DOM builder.
  • Support for objects with toHTML() and toElement() methods to make it easy for an object to represent a DOM node without having to directly extend a DOM element.
  • document.viewport allows easy retrival of the viewport size and scroll offsets.

There are many more additions/improvements. Detailed information can be found at Prototype 1.6.0 RC0. Also, make sure to look at Prototype 1.6.0 RC1: Changes.

I am constantly finding new features of Prototype that I never realised existed before and it just goes to show how feature rich the framework has become. Such a rich feature set means that the framework is becoming fairly large and you should take steps to optimise the performance of sites with large javascript payloads. see the post on Combine for performance optimisation tips.

I have come across a couple of fantastic javascript libraries based on Prototype recently. Prototip and LiveValidation are two in particular which I will be using regularly in projects.


This library allows you to create custom tooltips easily and effectively for websites and applications. You have complete control over the tooltip style and a mass of options allow you to customise them to your needs.

Demos, usage and more details can be found at Prototip by Nick Stakenburg.


This is a neat client-side form validation library which is: not intrusive; coded in an object-orientated fashion; and integrates easily with existing frameworks.

The main differences between LiveValidation and most similar libraries are:

  • ‘Validation as you type’ – This gives a unique interactive feel to your forms and can be easily customised.
  • Non-intrusive. This means that you don’t need to assign markers such as class names (e.g. class=”required email”) to the input elements. Setting up the validation of form elements is completely separated from the form markup itself.

There is no built-in support for AJAX-style validation but it is straightforward to implement a new Validate method to deal with this.

Demos, usage and more details can be found at LiveValidation.

  • Pingback: Scripteka, Prototype and Scriptaculous | Daniel Skinner: News and Articles on Web Development()

  • http://www.facebook.com/profile.php?id=100003469723077 Camilita

    This is something which prtopoyte.js does. It modifies native dom classes to make them more handy, but it may cause errors in some cases. Suppose an application overrites DOM methods in according to its need .and if prtopoyte.js is included in the application, it may clash with some of the method bodies and overrite them again causing unexpected results in the application.