The TabularListing blueprint creates a table DOM element under the node of the infotron instance, and creates rows from the provided array on the "collection_in" input terminal. Whenever a row is clicked, the row is posted on the output terminal "clicked_row_out"

Demos that use it

• map.html
• multi_map.html

---

BLUEPRINT(
"~011DB4973313E34549A9FCE7499BBB6F81",
[
 ["collection_in", "onCollection", 10]
],
[
 "clicked_row_out"
],
function (Class)
{
  Class.prototype._onInit = function(props)
  {
    var self = this;

    function _onClick(e)
    {
      var t;
      e = e || __w.event;
      t = e.srcElement || e.target;
      self.postMessage("clicked_row_out", [t.cellIndex + 1, t.parentNode.eform]);
    }
    
    this._tbody = this.dom_node.getElementsByTagName("TBODY")[0];
    this._n_rows = this._tbody.getElementsByTagName("TR").length;
    this._n_cols = this._tbody.getElementsByTagName("TR")[0].getElementsByTagName("TD").length;
    
    this.dom_node.onclick = _onClick;
  };


    Class.prototype.onCollection = function(msg)
    {
        var i, n, row, col, ef;
        var thead = this.dom_node.getElementsByTagName("THEAD")[0];
        var keys = [];

        n = thead.getElementsByTagName("TH").length;

        for (i = 0; i < n; i ++) {
            keys[i] = thead.getElementsByTagName("TH")[i].getAttribute("key");
        }
	
	n = Math.max(msg.length, this._n_rows);
	

        for (i = 0; i < n; i ++) {
            row = this._tbody.getElementsByTagName("TR")[i];
	    if (row) {
	      ef = msg[i];
	      
	      if (ef) {
		if (row.eform) {
		  for (key in ef) {
		    row.eform[key] = ef[key];
		  }
		} else {
		  row.eform = ef;
		}
	      }
	      
	      for (j = 0; j < this._n_cols; j ++) {
                col = row.getElementsByTagName("TD")[j];               
		
                if (ef && keys[j] && ef[keys[j]]) {
		  col.innerHTML = ef[keys[j]];
                } else { // clone
		  col.innerHTML = "";
                }
	      }
	    }
       }
    }

}, "Tabular View");