Unofficial JDA (Javascript Dataflow Architecture) Wiki

This blueprint takes form elements from an input terminal provided array, and parses the different kinds properly (radio, option, et.c.).

The name of the input fields defined by their "name" attribute will be used as the key for the object literal emitted when the form is submitted.

Note! This blueprint also handles input elements which it wraps, so the easiest way to start using it, is to define it in a form tag, and then happily add inside it whatever input elements you fancy manually.

If the property value allow_direct_submission is set to false, all enclosed submit buttons are disabled, and the input terminal submit_request_in is used to trigger submission to the output terminal.

Sample Declaration

<div id="form1"  
     impl="~01BD0F00025EAA4b53A6E116F739172DCA"
     connections=" 'fields_out' : [['othercomponent', 'input']]"    
     script="http://localhost/Form.js">
<form>
<input type="text" value="keyword" />
<input type="submit" />
&lt/form>
</div>

Input Terminals

• fields_in:

  fields_in:

  • (expectedexpected message type:type
    1. An almostassociative any,Array preferablywith anvalues Array)for each of the currently defined elements within the form.

• submit_request_in

  • :expected message type

    Any, or none; used to trigger a submit event
    

Output Terminals

• fields_out: fields_out
  • An array of fields and values

Properties

• allow_direct_submission: allow_direct_submission

  + controlscan ifbe falseset thatto the formfollowing willvalue waittypes:
        1. untiltrue
        2. submit_request_in for form submission, toherwise as soon as submit is pressed.false
  

Demos that use it

• form.html
• hierarchical_encapsulation.html
• http.html
• yahoosearch.html
• map.html
• multi_map.html

How does it work?

When the form enclosed within the infotron is submitted, the values found in the input fields are encoded as a JavaScript object literal (i.e. similar to a dictionary in Python) and emitted through this output terminal.

BLUEPRINT(
"~01BD0F00025EAA4b53A6E116F739172DCA", 
[
 ["fields_in", "onPopulate", 10],
 ["submit_request_in", "onSubmit", 10]
],
[
 "fields_out"
],
function(Class) {
	
  Class.prototype._onInit = function(props)
  {
    var self = this;

    this._o = this.dom_node;
    this._f = this._o.getElementsByTagName("FORM")[0];

    if (this._f) {
	    if (!props["allows_direct_submission"]) {


	function _onSubmit(e)
	  {	
return self._onSubmit();
	};

		this._f.action = null;
		this._f.onsubmit = _onSubmit;
	    }
	    var elems = this._f.elements;
	    var n = elems.length;
	    var i;
	    
	    for (i = 0; i < n; i ++) {
		if (elems[i].type == "submit" && 
		    elems[i].disabled == true) {
		    elems[i].disabled = false;
		}
	    }
	} else {
	    this.error("Missing <form> element");
	}
  };

  Class.prototype._onSubmit = function()
    {
		var elems = this._f.elements, n = elems.length, d = {};
		var i, name, val;
	
		for (i = 0; i < n; i ++) {
			name = this._f.elements[i].name;

			if (name) {
			  val = this._f.elements[i].value;

			  if (d[name]) {
			    if (typeof(d[name]) != "object" || !d.sort) {
			      d[name] = [d[name], val];
			    } else {
			      d[name].push(val);
			    }
			  } else {
				d[name] = val;
			  }
			}
		}

		this.postMessage("fields_out", d);

		return false;
    };


  Class.prototype.onSubmit = function(msg)
  {
    this._onSubmit();
  };

  Class.prototype.onPopulate = function(msg)
  {
    var key, field, i, n, v, tag, field_type;
    
    for (key in msg) {
      field = this._f[key];
      v = msg[key];
      
      try {
	tag = field.tagName;
	
	if (tag == "SELECT") {
	  
	  field.length=msg[key].length;
	  
	  this._setField(field, tag, v);
	} else if (tag == "TEXTAREA") {
	  this._setField(field, tag, v);
	} else {
	  if (tag == "INPUT") {
	    tag = field.type.toUpperCase();
	    this._setField(field, tag, v);
	  } else {
	    n = field.length;
	    
	    for (i = 0; i < n; i ++) {
	      tag = field[i].type.toUpperCase();
	      this._setField(field[i], tag, v[i]);
	    }
	  }
	}
	
      } catch (ex) {
	this.warning(ex, key + " is not a valid field");
	continue;
      }
    }
  };

	Class.prototype._setField =function(field, field_type, v)
	{
	    var i, n, o;

	    try {
		switch(field_type) {
		case "IMAGE": {
		    field.src = v;
		    break;
		}
		case "RADIO": {
		    if (typeof(v) == "object" && v.constructor == Array) {
			checked = v[1];
			v = v[0];

			if (checked) {
			    field.checked = true;
			} else {
			    field.checked = false;
			}
		    }

		    field.value = v;

		    break;
		}
		case "CHECKBOX": {
		    if (v) {
			field.checked = true;
		    } else {
			field.checked = false;
		    }
		    break;
		}
		case "SELECT": {
		    n = v.length;
		    for (i = 0; i < n; i ++) {
			o = field.options[i];

			if (!o) {
			    o = new Option();
			    field.options[i] = o;
			}

			o.value = v[i][1];
			o.text = v[i][0];

			if (v[i][2]) {
			    field.selectedIndex = i;
			}
		    }
		    
		    break;
		}
		default: {
		    field.value = v;
		    break;
		}
		}
	    } catch (ex) {
		this.error(ex, "invalid value specified for input field of \
type " + field_type);
	    }		    
	};


	
}, "Generic Form");