xnode

xnode
=====

An extendable version of a DOM Node

Background
----------

In traditional UI programming we are used to rely on extending components using object oriented programming. For example,
we can create a window component, and then we extend it into a dialog component that has a number of buttons and an icon,
and then we extend that into a message box that shows a message with an OK button. The HTML DOM has UI objects in a somewhat
similar way, but unfortunatly these are not possible to extend. This is because they do not have constructors. When we
want to create a Div object we do:

```
var element = document.createElement("div");
``

We don't do var element = new Div() or something like that which would be necessary in order to create a subclass that
extends the Div DOM object.

Solution
--------

This xnode hack, where xnode stands for extensible node, makes this possible. Using xnode, we can create elements using
constructors instead of the document.createElement function. A hello world example would look like this:

``
var element = new xnode.Div();
element.innerHTML="Hello World";
document.body.appendChild(element);
``

Another example
---------------

This example create a dialog box and attaches it to the body:

``
function MyDialog(text) {
xnode.Div.call(this);

this.okButton = new xnode.Button();
this.okButton.style.position = "absolute";
this.okButton.style.bottom = "10px";
this.okButton.style.left = "50%";
this.okButton.style.width = "100px";
this.okButton.style.marginLeft = "-50px";
this.okButton.innerHTML = "Ok";
this.appendChild(this.okButton);

this.style.background = "#ff0000";
this.style.width = "300px";
this.style.height = "200px";
this.style.position = "absolute";

this.textElement = new xnode.Div();
this.textElement.innerHTML = text;
this.textElement.style.top = "10px";
this.appendChild(this.textElement);

this.okButton.on("click", function() {
console.log("button click");
});
}

inherits(MyDialog, xnode.Div);

var myDialog = new MyDialog("hello world");
document.body.appendChild(myDialog);
```