Add basic implementation of numeric (int & float) and selectbox widgets

etemplate/js/et2_inputWidget.js

@@ -79,6 +79,17 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			}
 		}
 	},
+	set_required: function(_value) {
+		var node = this.getInputNode();
+		if (node)
+		{
+			if(_value) {
+				$j(node).attr("required", "required");
+			} else {
+				node.removeAttribute("required");
+			}
+		}
+	},
 
 	get_value: function() {
 		return this.getValue();

etemplate/js/et2_number.js

@@ -0,0 +1,66 @@
+/**
+ * eGroupWare eTemplate2 - JS Number object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	et2_textbox;
+*/
+
+/**
+ * Class which implements the "int" and textbox type=float XET-Tags
+ */ 
+var et2_number = et2_textbox.extend({
+
+	attributes: {
+		// Override default width, numbers are usually shorter
+		"size": {
+			"default": 5
+		},
+		"min": {
+			"name": "Minimum",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Minimum allowed value"
+		},
+		"max": {
+			"name": "Maximum",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Maximum allowed value"
+		}
+	},
+
+	init: function(_parent) {
+		this._super.apply(this, arguments);
+	},
+
+	createInputWidget: function() {
+		this.input = $j(document.createElement("input"));
+		this.input.attr("type", "number");
+		this.input.addClass("et2_textbox");
+
+		this.setDOMNode(this.input[0]);
+	},
+
+	set_min: function(_value) {
+		this.min = _value;
+		if(this.min == null) {
+			this.input.removeAttr("min");
+		} else {
+			this.input.attr("min",this.min);
+		}
+	}
+});
+
+et2_register_widget(et2_number, ["int", "float"]);
+

etemplate/js/et2_selectbox.js

@@ -0,0 +1,103 @@
+/**
+ * eGroupWare eTemplate2 - JS Selectbox object
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Nathan Gray
+ * @copyright Nathan Gray 2011
+ * @version $Id$
+ */
+
+"use strict";
+
+/*egw:uses
+	jquery.jquery;
+	et2_inputWidget;
+*/
+
+/**
+ * Class which implements the "menulist" XET-Tag
+ */ 
+var et2_selectbox = et2_inputWidget.extend({
+
+	attributes: {
+		"multiselect": {
+			"name": "multiselect",
+			"type": "boolean",
+			"default": false,
+			"description": "Allow selecting multiple options"
+		},
+		"rows": {
+			"name": "Rows",
+			"type": "any",	// Old options put either rows or empty_label in first space
+			"default": 1,
+			"description": "Number of rows to display"
+		},
+		"empty_label": {
+			"name": "Empty label",
+			"type": "string",
+			"default": "",
+			"description": "Textual label for first row, eg: 'All' or 'None'.  ID will be ''"
+		}
+	},
+
+	legacyOptions: ["rows"],
+
+	init: function(_parent) {
+		this._super.apply(this, arguments);
+
+		this.input = null;
+		this.id = "";
+
+		if(this.rows > 1) this.multiselect=true;
+		this.createInputWidget();
+	},
+
+	/**
+	 * Override load to be able to handle menupopup tag inside of menulist
+	 */
+	loadFromXML: function(_node) {
+		var menupopupElems = et2_directChildrenByTagName(_node, "menupopup");
+		if(menupopupElems.length == 1) {
+			this.loadAttributes(menupopupElems[0].attributes);
+		} else {
+			this._super.apply(this,arguments);
+		}
+	},
+
+	createInputWidget: function() {
+		if(this.type == "menupopup") {
+			return;
+		} else {
+			this.input = $j(document.createElement("select"));
+
+			this.input.addClass("et2_selectbox");
+		}
+
+		this.setDOMNode(this.input[0]);
+	},
+
+	set_multiselect: function(_value) {
+		if (_value != this.multiselect)
+		{
+			this.multiselect = _value;
+			if(this.multiselect) {
+				this.input.attr("multiple","multiple");
+			} else {
+				this.input.removeAttr("multiple");
+			}
+		}
+	},
+	set_rows: function(_rows) {
+		if (_rows != this.rows)
+		{
+			this.rows = _rows;
+			this.input.attr("size",this.rows);
+		}
+	}
+});
+
+et2_register_widget(et2_selectbox, ["menulist","listbox"]);
+

etemplate/js/et2_textbox.js

@@ -29,6 +29,12 @@ var et2_textbox = et2_inputWidget.extend({
 			"type": "boolean",
 			"default": false,
 			"description": "If true, the textbox is a multiline edit field."
+		},
+		"size": {
+			"name": "Size",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Field width"
 		}
 	},
 
@@ -39,6 +45,7 @@ var et2_textbox = et2_inputWidget.extend({
 		this.id = "";
 
 		this.createInputWidget();
+
 	},
 
 	createInputWidget: function() {
@@ -51,6 +58,10 @@ var et2_textbox = et2_inputWidget.extend({
 			this.input = $j(document.createElement("input"));
 		}
 
+		if(this.size) {
+			this.set_size(this.size);
+		}
+
 		this.input.addClass("et2_textbox");
 
 		this.setDOMNode(this.input[0]);
@@ -66,11 +77,22 @@ var et2_textbox = et2_inputWidget.extend({
 			// Write all settings again
 			this.update();
 		}
-	}
+	},
 
+	/**
+	 * Set input widget size
+	 * @param _size Rather arbitrary size units, approximately characters
+	 */
+	set_size: function(_size) {
+		if (typeof _size != 'undefined' && _size != this.input.attr("size"))
+		{
+			this.size = _size;
+			this.input.attr("size", this.size);
+		}
+	}
 });
 
-et2_register_widget(et2_textbox, ["textbox", "int", "float"]);
+et2_register_widget(et2_textbox, ["textbox"]);
 
 /**
  * et2_textbox_ro is the dummy readonly implementation of the textbox.

etemplate/js/etemplate2.js

@@ -19,6 +19,8 @@
 	et2_button;
 	et2_description;
 	et2_textbox;
+	et2_number;
+	et2_selectbox;
 	et2_styles;
 	et2_html;
 

etemplate/js/test/test_xml.html

@@ -19,6 +19,8 @@
 		<script src="../et2_box.js"></script>
 		<script src="../et2_hbox.js"></script>
 		<script src="../et2_textbox.js"></script>
+		<script src="../et2_number.js"></script>
+		<script src="../et2_selectbox.js"></script>
 		<script src="../et2_styles.js"></script>
 		<script src="../et2_html.js"></script>
 
@@ -43,6 +45,7 @@
 			<a href="#" onclick="open_xet('et2_test_tabbox.xet');">Tabs test</a>
 			<a href="#" onclick="open_xet('et2_test_textbox.xet');">Textbox test</a>
 			<a href="#" onclick="open_xet('et2_test_description.xet');">Description test</a>
+			<a href="#" onclick="open_xet('et2_test_basic_widgets.xet');">Basic widgits</a>
 			<a href="#" onclick="open_xet('et2_test_expressions.xet', expression_test_data);">Expression test</a>
 			<a href="#" onclick="open_xet('et2_test_hbox.xet');">HBox test</a>
 		</div>