How to create a component for Javeline Platform – Part 3
You’ll find answers on following questions:
- How to add events to elements, and how to call component’s methods by its
At begining i would like to remind You about that we base on files from previous part of this article.
Events should be added in $draw function. We can do this in very simple way, by setting attribute to button node. Javeline Platform assing a unique id to each of components instances. In that way we can call component’s methods using that id’s to identify component object.
oButton.setAttribute("onmouseover", "jpf.lookup(" + this.uniqueId + ").$setStyleClass(this, 'hover');");
oButton.setAttribute("onmouseout", "jpf.lookup(" + this.uniqueId + ").$setStyleClass(this, '', ['hover']);");
oButton.setAttribute("onmousedown", "jpf.lookup(" + this.uniqueId + ").selectButton(this.innerHTML);");In next step we’ll set captions to each of buttons. Why we didn’t do that when we was setting attributes ? Answer is simple, because we worked with xmlNodes.
So now we need to get htmlNodes (we will use this.oStatus in next steps) and define array with captions:
this.oStatus = this.$getLayoutNode("main", "status", this.oExt);
this.oButtons = this.$getLayoutNode("main", "buttons", this.oExt);
var captions = [
1, 2, 3, 0, "/", "+",
4, 5, 6, ".", "*", "-",
7, 8, 9, "+/-", "%", "=",
];We are looking for row and button elements among child nodes of oButtons element and we are setting captions to buttons:
var nodes1 = this.oButtons.childNodes;
for (var i = 0, l1 = nodes1.length, counter = 0; i < l1; i++) {
if ((nodes1[i].className || "").indexOf("calcrow") != -1) {
var nodes2 = nodes1[i].childNodes;
for(var j = 0, l2 = nodes2.length; j < l2; j++) {
if ((nodes2[j].className || "").indexOf("calcbtn") != -1) {
nodes2[j].innerHTML = captions[counter++];
}
}
}
}We can’t forget about selectButton function. In that way You can communicate with component. Of course You don’t need use innerHTML, it can be something else.
this.selectButton = function(sChar) {
this.oStatus.innerHTML += sChar;
};