Extensible Version of the HTML DOM Node Object
npm install xnodexnode
=====
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);
```