Object.registerClass

Intro

This method is used to apply standard ECMA 3 classes (prototype based) to random elements in a web page. It is inspired by the Actionscript's method with the same name.

The goal is that you can create reutilizable OOP based code and use it in a various documents without rewriting any part of it except the instanciation routine.

The major problem with OOP in modern browsers is that is difficult to extend the core classes of DOM in a crossbrowser maner. There are some issues related to this:

• Instanciation: All elements are instanciated when the document is parsed by the browser while is reading it. The browser only understands HTML elements. If you want a especialized element in a web page you can't write your own tag and map it to JS class. Something like <coolinput type="text" /> and behave like a <input> subclass is not possible on client side.
• In a perfect-gecko-world you can extend any of the DOM classes and create custom elements at runtime. But this is a bad idea because you still are generating content at runtime and it has a well-known major issues. Anyway, Internet Explorer don't expose the DOM classes. You simply can't subclass them in the most extended platform.

The idea here is to take any standard HTML/DOM element once it was previously instantiated by the browser engine and make it behave like it is inheriting all of our class functionality, including the constructor inicialization. That is what Object.registerClass does. Something like re-instanciate the elements adding custom functionality.

A simple example of usage. The following code takes all the input elements in a web page and make them behave like they were directly inheriting from the FieldDecorator class at the top of the prototype chain, maintaining his original class below. The FieldDecorator class is declared somewhere else in the code. Finally, Initilizes them passing 2 params to the constructor:

Object.registerClass("input",FieldDecorator,["#FF11AA","#AA3344"]);

Usage

Object.registerClass(element(s),class[,params array]);

Parameters

elements(s)

Required. This can be a string that can take two formats. "tagname" applies the class to all elements with that tagname in the page. And "#id" applies the class to the element with that id. Also it accepts a DOM object to directly apply the class.

class

Required. The function object that represents the standard ECMA3 class.

params

Optional. An array of elements that should be passed to the function constructor. If this is not provided the constructor will be called without any parameters.

Returns:

A boolean indicating if the operation was sucessfull.

Compatibility:

Tested and working on: IE5, IE55, I6, any gecko-based and Opera 7. IE5 has a limitation of 10 parameters for the constructor call.

Remarks

Any object created with document.createElement is automatly mapped to the class if it was applied before to that kind of element.

Examples

• FieldDecorator: A simple testing class to highlight input elements on focus and blur events.
• SuperFieldDecorator: Extends the FieldDecorator class to test the prototype inheritance adding border colors to the highlight.
• ToolTipManager: A OOP aproach to the well-known navigation technique.

Download

• Here is the required script to include in your pages.
• Full package with examples.