- Add labels to input widgets

- Add row & col properties to textarea

etemplate/js/et2_checkbox.js

@@ -61,7 +61,7 @@ var et2_checkbox = et2_inputWidget.extend({
 	set_value: function(_value) {
 		if(_value != this.value) {
 			if(_value == this.set_value) {
-				this.input.attr("checked", true);
+				this.input.attr("checked", "checked");
 			} else {
 				this.input.removeAttr("checked");
 			}

etemplate/js/et2_inputWidget.js

@@ -51,6 +51,12 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			"default": false,
 			"type": "boolean",
 			"description": "If required, the user must enter a value before the form can be submitted"
+		},
+		"label": {
+			"name": "Label",
+			"default": "",
+			"type": "string",
+			"description": "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables)."
 		}
 	},
 	init: function() {
@@ -102,6 +108,16 @@ var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
 			}
 		}
 	},
+
+	set_label: function(_label) {
+		if(_label != this.label)
+		{
+			label = et2_csvSplit(_label, 2, '%s');
+			if(label[0]) this.input.before("<span class='et2_label'>"+label[0]+"</span>");
+			if(label[1]) this.input.after("<span class='et2_label'>"+label[1]+"</span>");
+		}
+	},
+
 	set_required: function(_value) {
 		var node = this.getInputNode();
 		if (node)

etemplate/js/et2_textbox.js

@@ -35,7 +35,21 @@ var et2_textbox = et2_inputWidget.extend({
 			"type": "integer",
 			"default": et2_no_init,
 			"description": "Field width"
-		}
+		},
+
+		// These for multi-line
+		"rows": {
+			"name": "Rows",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Multiline field height - better to use CSS"
+		},
+		"cols": {
+			"name": "Size",
+			"type": "integer",
+			"default": et2_no_init,
+			"description": "Multiline field width - better to use CSS"
+		},
 	},
 
 	init: function(_parent) {
@@ -61,7 +75,6 @@ var et2_textbox = et2_inputWidget.extend({
 		if(this.size) {
 			this.set_size(this.size);
 		}
-
 		this.input.addClass("et2_textbox");
 
 		this.setDOMNode(this.input[0]);
@@ -79,6 +92,33 @@ var et2_textbox = et2_inputWidget.extend({
 		}
 	},
 
+	set_rows: function(_value) {
+		if (_value != this.rows)
+		{
+			this.rows = _value;
+			if(this.rows > 1)
+			{
+				this.set_multiline(true);
+				this.input.attr("rows", this.rows);
+			} else {
+				this.set_multiline(false);
+			}
+		}
+	},
+	set_cols: function(_value) {
+		if (_value != this.cols)
+		{
+			this.cols = _value;
+			if(this.cols > 1)
+			{
+				this.set_multiline(true);
+				this.input.attr("cols", this.cols);
+			} else {
+				this.set_multiline(false);
+			}
+		}
+	},
+
 	/**
 	 * Set input widget size
 	 * @param _size Rather arbitrary size units, approximately characters

etemplate/js/test/et2_test_basic_widgets.xet

@@ -6,8 +6,8 @@
 	<textbox label="This is required text" id="text_value" required="true"/>
 	<int label="This is an integer" id="integer_value" min="5"/>
 	<textbox type="float" label="This is a float" id="float_value"/>
-	<textbox multiline="true" label="This is a text area" id="text_area_value"/>
-	<checkbox label="Checkbox" id="checkbox_value"/>
+	<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
+	<checkbox label="Checkbox %s here" id="checkbox_value"/>
 	<radio label="Radio" id="radio_value"/>
 	<buttononly label="Button" id="button_value"/>
 	<hrule label="HR"/>
@@ -22,10 +22,11 @@
 	<template id="test.basic_widget_test">
 		<description value="This is a label" id="label_value"/>
 		<textbox label="This is a text" id="text_value"/>
+		<textbox label="This is required text" id="text_value" required="true"/>
 		<int label="This is an integer" id="integer_value" min="5"/>
 		<textbox type="float" label="This is a float" id="float_value"/>
-		<textbox multiline="true" label="This is a text area" id="text_area_value"/>
-		<checkbox label="Checkbox" id="checkbox_value"/>
+		<textbox multiline="true" label="This is a text area" id="text_area_value" rows="3" cols="3"/>
+		<checkbox label="Checkbox %s here" id="checkbox_value"/>
 		<radio label="Radio" id="radio_value"/>
 		<buttononly label="Button" id="button_value"/>
 		<hrule label="HR"/>

etemplate/js/test/test_xml.html

@@ -21,6 +21,7 @@
 		<script src="../et2_textbox.js"></script>
 		<script src="../et2_number.js"></script>
 		<script src="../et2_selectbox.js"></script>
+		<script src="../et2_checkbox.js"></script>
 		<script src="../et2_styles.js"></script>
 		<script src="../et2_html.js"></script>