- Reading readonly properties

- Added system for readonlys: Readonly is passed in constructor as third parameter. If a widget class is registerd with "[type]_ro" (see et2_textbox for example) this one is created
- Added new 'valueWidget' base class which introduces the 'value' attribute and implements auto loading from the content array
- Implemented readonly attribute for buttons and textboxes

etemplate/js/et2_arrayMgr.js

@@ -10,233 +10,277 @@
  * @version $Id$
  */
 
+/*egw:uses
+	et2_inheritance;
+*/
+
 "use strict";
 
-function et2_arrayMgr(_data, _parentMgr)
+var et2_arrayMgr = Class.extend({
-{
-	if (typeof _parentMgr == "undefined")
-	{
-		_parentMgr = null;
-	}
 
-	// Copy the parent manager which is needed to access relative data when
+	splitIds: true,
-	// being in a relative perspective of the manager
-	this.parentMgr = _parentMgr;
 
-	// Hold a reference to the data
+	init: function(_data, _parentMgr) {
-	if (typeof _data == "undefined" || !_data)
+		if (typeof _parentMgr == "undefined")
-	{
-		et2_debug("error", "Invalid data passed to content array manager!");
-		_data = {};
-	}
-
-	this.data = _data;
-
-	// Holds information about the current perspective
-	this.perspectiveData = {
-		"owner": null,
-		"key": null,
-		"col": 0,
-		"row": 0
-	}
-}
-
-/**
- * Returns the root content array manager object
- */
-et2_arrayMgr.prototype.getRoot = function()
-{
-	if (this.parentMgr != null)
-	{
-		return this.parentMgr.getRoot();
-	}
-
-	return this;
-}
-
-et2_arrayMgr.prototype.getValueForID = function(_id)
-{
-	if (typeof this.data[_id] != "undefined")
-	{
-		return this.data[_id];
-	}
-
-	return null;
-}
-
-/**
- * Returns the path to this content array manager perspective as an array
- * containing the key values
- * 
- * @param _path is used internally, do not supply it manually.
- */
-et2_arrayMgr.prototype.getPath = function(_path)
-{
-	if (typeof _path == "undefined")
-	{
-		_path = [];
-	}
-
-	if (this.perspectiveData.key != null)
-	{
-		_path.push(this.perspectiveData.key);
-	}
-
-	if (this.parentMgr != null)
-	{
-		this.parentMgr.getPath(_path);
-	}
-
-	return _path;
-}
-
-/**
- * Get array entry is the equivalent to the boetemplate get_array function.
- * It returns a reference to the (sub) array with the given key. This also works
- * for keys using the ETemplate referencing scheme like a[b][c]
- *
- * @param _key is the string index, may contain sub-indices like a[b]
- * @param _referenceInto if true none-existing sub-arrays/-indices get created
- * 	to be returned as reference, else false is returned. Defaults to false
- * @param _skipEmpty returns false if _key is not present in this content array.
- * 	Defaults to false.
- */
-et2_arrayMgr.prototype.getEntry = function(_key, _referenceInto,
-	_skipEmpty)
-{
-	if (typeof _referenceInto == "undefined")
-	{
-		_referenceInto = false;
-	}
-
-	if (typeof _skipEmpty == "undefined")
-	{
-		_skipEmpty = false;
-	}
-
-	// Parse the given key by removing the "]"-chars and splitting at "["
-	var indexes = _key.replace(/]/g,'').split('[');
-
-	var entry = this.data;
-	for (var i = 0; i < indexes.length; i++)
-	{
-		// Abort if the current entry is not an object (associative array) and
-		// we should descend further into it.
-		var isObject = entry instanceof Object;
-		if (!isObject && !_referenceInto)
 		{
-			return false;
+			_parentMgr = null;
 		}
 
-		// Check whether the entry actually exists
+		// Copy the parent manager which is needed to access relative data when
-		var idx = indexes[i];
+		// being in a relative perspective of the manager
-		if (_skipEmpty && (!isObject || typeof entry[idx] == "undefined"))
+		this.parentMgr = _parentMgr;
+
+		// Hold a reference to the data
+		if (typeof _data == "undefined" || !_data)
 		{
-			return false;
+			et2_debug("error", "Invalid data passed to content array manager!");
+			_data = {};
 		}
 
-		entry = entry[idx];
+		this.data = _data;
-	}
 
-	return entry;
+		// Holds information about the current perspective
-}
+		this.perspectiveData = {
-
+			"owner": null,
-/**
+			"key": null,
- * Equivaltent to the boetemplate::expand_name function.
+			"col": 0,
- *
+			"row": 0
- * Expands variables inside the given identifier to their values inside the
- * content array.
- */
-et2_arrayMgr.prototype.expandName = function(_ident)
-{
-	// Check whether the identifier refers to an index in the content array
-	var is_index_in_content = _ident.charAt(0) == '@';
-
-	// Check whether "$" occurs in the given identifier
-	var pos_var = _ident.indexOf('$');
-	if (pos_var >= 0)
-	{
-		// TODO
-	}
-
-	if (is_index_in_content)
-	{
-		// If an additional "@" is specified, this means that we have to return
-		// the entry from the root element
-		if (_ident.charAt(1) == '@')
-		{
-			_ident = this.getRoot().getEntry(_ident.substr(2));
 		}
-		else
+	},
+
+	/**
+	 * Returns the root content array manager object
+	 */
+	getRoot : function() {
+		if (this.parentMgr != null)
 		{
-			_ident = this.getEntry(_ident.substr(1));
+			return this.parentMgr.getRoot();
-		}
-	}
-
-	return _ident;
-}
-
-et2_arrayMgr.prototype.parseBoolExpression = function(_expression)
-{
-	// If the first char of the expression is a '!' this means, that the value
-	// is to be negated.
-	if (_expression.charAt(0) == '!')
-	{
-		return !this.parseBoolExpression(_expression.substr(1));
-	}
-
-	// Split the expression at a possible "="
-	var parts = _expression.split('=');
-
-	// Expand the first value
-	var val = this.expandName(parts[0]);
-
-	// If a second expression existed, test that one
-	if (typeof parts[1] != "undefined")
-	{
-		// Expand the second value
-		var checkVal = this.expandName(parts[1]);
-
-		// Values starting with / are treated as regular expression. It is
-		// checked whether the first value matches the regular expression
-		if (checkVal.charAt(0) == '/')
-		{
-			return (new RegExp(checkVal.substr(1, checkVal.length - 2)))
-				.match(val) ? true : false;
 		}
 
-		// Otherwise check for simple equality
+		return this;
-		return val == checkVal;
+	},
-	}
 
-	return val != '' && (typeof val != "string" || val.toLowerCase() != "false");
+	getValueForID : function(_id) {
-}
+		if (typeof this.data[_id] != "undefined")
+		{
+			return this.data[_id];
+		}
 
-et2_arrayMgr.prototype.openPerspective = function(_owner, _root, _col, _row)
+		return null;
-{
+	},
-	// Get the root node
-	var root = typeof _root == "string" ? this.data[_root] :
-		(_root == null ? this.data : _root);
 
-	// Create a new content array manager with the given root
+	/**
-	var mgr = new et2_arrayMgr(root, this);
+	 * Returns the path to this content array manager perspective as an array
+	 * containing the key values
+	 * 
+	 * @param _path is used internally, do not supply it manually.
+	 */
+	getPath : function(_path) {
+		if (typeof _path == "undefined")
+		{
+			_path = [];
+		}
 
-	// Set the owner
+		if (this.perspectiveData.key != null)
-	mgr.perspectiveData.owner = _owner;
+		{
+			_path.push(this.perspectiveData.key);
+		}
 
-	// Set the root key
+		if (this.parentMgr != null)
-	if (typeof _root == "string")
+		{
+			this.parentMgr.getPath(_path);
+		}
+
+		return _path;
+	},
+
+	/**
+	 * Get array entry is the equivalent to the boetemplate get_array function.
+	 * It returns a reference to the (sub) array with the given key. This also works
+	 * for keys using the ETemplate referencing scheme like a[b][c]
+	 *
+	 * @param _key is the string index, may contain sub-indices like a[b]
+	 * @param _referenceInto if true none-existing sub-arrays/-indices get created
+	 * 	to be returned as reference, else false is returned. Defaults to false
+	 * @param _skipEmpty returns false if _key is not present in this content array.
+	 * 	Defaults to false.
+	 */
+	getEntry : function(_key, _referenceInto, _skipEmpty) {
+		if (typeof _referenceInto == "undefined")
+		{
+			_referenceInto = false;
+		}
+
+		if (typeof _skipEmpty == "undefined")
+		{
+			_skipEmpty = false;
+		}
+
+		// Parse the given key by removing the "]"-chars and splitting at "["
+		var indexes = [_key];
+
+		if (this.splitIds)
+		{
+			indexes = _key.replace(/]/g,'').split('[');
+		}
+
+		var entry = this.data;
+		for (var i = 0; i < indexes.length; i++)
+		{
+			// Abort if the current entry is not an object (associative array) and
+			// we should descend further into it.
+			var isObject = entry instanceof Object;
+			if (!isObject && !_referenceInto)
+			{
+				return null;
+			}
+
+			// Check whether the entry actually exists
+			var idx = indexes[i];
+			if (_skipEmpty && (!isObject || typeof entry[idx] == "undefined"))
+			{
+				return null;
+			}
+
+			entry = entry[idx];
+		}
+
+		return entry;
+	},
+
+	/**
+	 * Equivaltent to the boetemplate::expand_name function.
+	 *
+	 * Expands variables inside the given identifier to their values inside the
+	 * content array.
+	 */
+	expandName : function(_ident) {
+		// Check whether the identifier refers to an index in the content array
+		var is_index_in_content = _ident.charAt(0) == '@';
+
+		// Check whether "$" occurs in the given identifier
+		var pos_var = _ident.indexOf('$');
+		if (pos_var >= 0)
+		{
+			// TODO
+		}
+
+		if (is_index_in_content)
+		{
+			// If an additional "@" is specified, this means that we have to return
+			// the entry from the root element
+			if (_ident.charAt(1) == '@')
+			{
+				_ident = this.getRoot().getEntry(_ident.substr(2));
+			}
+			else
+			{
+				_ident = this.getEntry(_ident.substr(1));
+			}
+		}
+
+		return _ident;
+	},
+
+	parseBoolExpression: function(_expression) {
+		// If the first char of the expression is a '!' this means, that the value
+		// is to be negated.
+		if (_expression.charAt(0) == '!')
+		{
+			return !this.parseBoolExpression(_expression.substr(1));
+		}
+
+		// Split the expression at a possible "="
+		var parts = _expression.split('=');
+
+		// Expand the first value
+		var val = this.expandName(parts[0]);
+
+		// If a second expression existed, test that one
+		if (typeof parts[1] != "undefined")
+		{
+			// Expand the second value
+			var checkVal = this.expandName(parts[1]);
+
+			// Values starting with / are treated as regular expression. It is
+			// checked whether the first value matches the regular expression
+			if (checkVal.charAt(0) == '/')
+			{
+				return (new RegExp(checkVal.substr(1, checkVal.length - 2)))
+					.match(val) ? true : false;
+			}
+
+			// Otherwise check for simple equality
+			return val == checkVal;
+		}
+
+		return val != '' && (typeof val != "string" || val.toLowerCase() != "false");
+	},
+
+	openPerspective: function(_owner, _root, _col, _row)
 	{
-		mgr.perspectiveData.key = _root;
+		// Get the root node
+		var root = typeof _root == "string" ? this.data[_root] :
+			(_root == null ? this.data : _root);
+
+		// Create a new content array manager with the given root
+		var mgr = new et2_arrayMgr(root, this);
+
+		// Set the owner
+		mgr.perspectiveData.owner = _owner;
+
+		// Set the root key
+		if (typeof _root == "string")
+		{
+			mgr.perspectiveData.key = _root;
+		}
+
+		// Set the _col and _row parameter
+		if (typeof _col != "undefined" && typeof _row != "undefined")
+		{
+			mgr.perspectiveData.col = _col;
+			mgr.perspectiveData.row = _row;
+		}
+
+		return mgr;
 	}
 
-	// Set the _col and _row parameter
+});
-	if (typeof _col != "undefined" && typeof _row != "undefined")
+
-	{
+var et2_readonlysArrayMgr = et2_arrayMgr.extend({
-		mgr.perspectiveData.col = _col;
+
-		mgr.perspectiveData.row = _row;
+	splitIds: false,
+
+	isReadOnly: function(_id, _attr, _parent) {
+		var entry = null;
+
+		if (_id != null)
+		{
+			entry = this.getEntry(_id);
+		}
+
+		// Let the array entry override the read only attribute entry
+		if (typeof entry != "undefined" && !(entry instanceof Object))
+		{
+			return entry;
+		}
+
+		// If the attribute is set, return that
+		if (typeof _attr != "undefined" && _attr !== null)
+		{
+			return et2_evalBool(_attr);
+		}
+
+		// Otherwise take into accounf whether the parent is readonly
+		if (typeof _parent != "undefined" && _parent)
+		{
+			return true;
+		}
+
+		// Otherwise return the default value
+		return (typeof this.getEntry("__ALL__") != "undefined");
 	}
 
-	return mgr;
+});
-}
+
 

etemplate/js/et2_button.js

@@ -37,17 +37,21 @@ var et2_button = et2_baseWidget.extend(et2_IInput, {
 		}
 	},
 
-	init: function(_parent) {
+	init: function(_parent, _type, _readonly) {
 		this._super.apply(this, arguments);
 
 		this.label = "";
 		this.clicked = false;
+		this.btn = null;
 
-		this.btn = $j(document.createElement("button"))
+		if (!_readonly)
-			.addClass("et2_button")
+		{
-			.click(this, function(e) {e.data.buttonClick()});
+			this.btn = $j(document.createElement("button"))
+				.addClass("et2_button")
+				.click(this, function(e) {e.data.buttonClick()});
 
-		this.setDOMNode(this.btn[0]);
+			this.setDOMNode(this.btn[0]);
+		}
 	},
 
 	buttonClick: function() {
@@ -65,7 +69,7 @@ var et2_button = et2_baseWidget.extend(et2_IInput, {
 	},
 
 	set_label: function(_value) {
-		if (_value != this.value)
+		if (this.btn)
 		{
 			this.label = _value;
 

etemplate/js/et2_common.js

@@ -87,6 +87,11 @@ var et2_typeDefaults = {
 	"any": null
 };
 
+function et2_evalBool(_val)
+{
+	return _val ? true : false;
+}
+
 /**
  * Checks whether the given value is of the given type. Strings are converted
  * into the corresponding type. The (converted) value is returned. All supported

etemplate/js/et2_description.js

@@ -88,23 +88,17 @@ var et2_description = et2_baseWidget.extend({
 		this.setDOMNode(this.span[0]);
 	},
 
-	set_value: function(_value, _force) {
+	set_value: function(_value) {
-		if (_value != this.value || _force)
+		this.value = _value;
-		{
-			this.value = _value;
 
-			this.span.text(_value);
+		this.span.text(_value);
-		}
 	},
 
 	set_font_style: function(_value) {
-		if (_value != this.font_style)
+		this.font_style = _value;
-		{
-			this.font_style = _value;
 
-			this.span.toggleClass("et2_bold", _value.indexOf("b") >= 0);
+		this.span.toggleClass("et2_bold", _value.indexOf("b") >= 0);
-			this.span.toggleClass("et2_italic", _value.indexOf("i") >= 0);
+		this.span.toggleClass("et2_italic", _value.indexOf("i") >= 0);
-		}
 	}
 
 });

etemplate/js/et2_grid.js

@@ -48,6 +48,8 @@ var et2_grid = et2_DOMWidget.extend({
 		// Delete all references to cells or widgets
 		this.cells = null;
 		this.managementArray = null;
+		this.table = null;
+		this.tbody = null;
 	},
 
 	_initCells: function(_colData, _rowData) {

etemplate/js/et2_inheritance.js

@@ -314,7 +314,7 @@
 		}
 		else
 		{
-			et2_error("error", this, "Attribute '" + _name  + "' does not exist!");
+			et2_debug("error", this, "Attribute '" + _name  + "' does not exist!");
 		}
 	}
 

etemplate/js/et2_inputWidget.js

@@ -14,7 +14,7 @@
 
 /*egw:uses
 	jquery.jquery;
-	et2_baseWidget;
+	et2_valueWidget;
 */
 
 /**
@@ -43,16 +43,7 @@ var et2_IInput = new Interface({
  * interface. When derriving from this class, call setDOMNode with an input
  * DOMNode.
  */
-var et2_inputWidget = et2_baseWidget.extend(et2_IInput, {
+var et2_inputWidget = et2_valueWidget.extend(et2_IInput, {
-
-	attributes: {
-		"value": {
-			"name": "Value",
-			"description": "The value of the widget",
-			"type": "string",
-			"default": et2_no_init
-		}
-	},
 
 	init: function() {
 		this._super.apply(this, arguments);
@@ -60,21 +51,6 @@ var et2_inputWidget = et2_baseWidget.extend(et2_IInput, {
 		this._oldValue = "";
 	},
 
-	loadingFinished: function() {
-		this._super.call(this, arguments);
-
-		if (this.id != "")
-		{
-			// Set the value for this element
-			var contentMgr = this.getArrayMgr("content");
-			var val = contentMgr.getValueForID(this.id);
-			if (val !== null)
-			{
-				this.set_value(val);
-			}
-		}
-	},
-
 	set_value: function(_value) {
 		this._oldValue = _value;
 

etemplate/js/et2_textbox.js

@@ -15,6 +15,7 @@
 /*egw:uses
 	jquery.jquery;
 	et2_inputWidget;
+	et2_valueWidget;
 */
 
 /**
@@ -71,3 +72,37 @@ var et2_textbox = et2_inputWidget.extend({
 
 et2_register_widget(et2_textbox, ["textbox", "int", "float"]);
 
+/**
+ * et2_textbox_ro is the dummy readonly implementation of the textbox.
+ */
+var et2_textbox_ro = et2_valueWidget.extend({
+
+	/**
+	 * Ignore all more advanced attributes.
+	 */
+	attributes: {
+		"multiline": {
+			"ignore": true
+		}
+	},
+
+	init: function() {
+		this._super.apply(this, arguments);
+
+		this.value = "";
+		this.span = $j(document.createElement("span"))
+			.addClass("et2_textbox_ro");
+
+		this.setDOMNode(this.span[0]);
+	},
+
+	set_value: function(_value) {
+		this.value = _value;
+
+		this.span.text(_value);
+	}
+
+});
+
+et2_register_widget(et2_textbox_ro, ["textbox_ro", "int_ro", "float_ro"]);
+

etemplate/js/et2_valueWidget.js

@@ -0,0 +1,50 @@
+/**
+ * eGroupWare eTemplate2 - JS widget class with value attribute and auto loading
+ *
+ * @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
+ * @package etemplate
+ * @subpackage api
+ * @link http://www.egroupware.org
+ * @author Andreas Stöckel
+ * @copyright Stylite 2011
+ * @version $Id$
+ */
+
+/*egw:uses
+	jquery.jquery;
+	et2_baseWidget;
+*/
+
+/**
+ * et2_valueWidget is the base class for et2_inputWidget - valueWidget introduces
+ * the "value" attribute and automatically loads it from the "content" array
+ * after loading from XML.
+ */
+var et2_valueWidget = et2_baseWidget.extend({
+
+	attributes: {
+		"value": {
+			"name": "Value",
+			"description": "The value of the widget",
+			"type": "string",
+			"default": et2_no_init
+		}
+	},
+
+	loadingFinished: function() {
+		this._super.call(this, arguments);
+
+		if (this.id != "")
+		{
+			// Set the value for this element
+			var contentMgr = this.getArrayMgr("content");
+			var val = contentMgr.getValueForID(this.id);
+			if (val !== null)
+			{
+				this.setAttribute("value", val)
+			}
+		}
+	}
+
+});
+

etemplate/js/et2_widget.js

@@ -74,6 +74,14 @@ var et2_widget = Class.extend({
 		 */
 		"type": {
 			"ignore": true
+		},
+
+		/**
+		 * Ignore the readonly tag by default - its also read by the
+		 * "createElementFromNode" function.
+		 */
+		"readonly": {
+			"ignore": true
 		}
 	},
 
@@ -92,7 +100,7 @@ var et2_widget = Class.extend({
 	 * @param _type is the node name with which the widget has been created. This
 	 * 	is usefull if a single widget class implements multiple XET-Node widgets.
 	 */
-	init: function(_parent, _type) {
+	init: function(_parent, _type, _readonly) {
 
 		if (typeof _type == "undefined")
 		{
@@ -115,6 +123,7 @@ var et2_widget = Class.extend({
 
 		this._children = [];
 		this.type = _type;
+		this.readonly = _readonly;
 
 		// The supported widget classes array defines a whitelist for all widget
 		// classes or interfaces child widgets have to support.
@@ -164,7 +173,7 @@ var et2_widget = Class.extend({
 		}
 
 		// Create the copy
-		var copy = new (this.constructor)(_parent, _type);
+		var copy = new (this.constructor)(_parent, _type, this.readonly);
 
 		// Assign this element to the copy
 		copy.assign(this);
@@ -374,13 +383,24 @@ var et2_widget = Class.extend({
 			_nodeName = _node.nodeName.toLowerCase();
 		}
 
-		// Check whether a widget with the given type is registered.
+		// Get the constructor for that widget
 		var constructor = typeof et2_registry[_nodeName] == "undefined" ?
 			et2_placeholder : et2_registry[_nodeName];
 
+		// Check whether the widget is marked as readonly and whether a special
+		// readonly type (suffixed with "_ro") is registered
+		var readonly = this.getArrayMgr("readonlys").isReadOnly(
+			_node.getAttribute("id"), _node.getAttribute("readonly"), this.readonly);
+		et2_debug("log", _node.getAttribute("id"), readonly);
+		if (readonly && typeof et2_registry[_nodeName + "_ro"] != "undefined")
+		{
+			constructor = et2_registry[_nodeName + "_ro"];
+		}
+
 		// Creates the new widget, passes this widget as an instance and
 		// passes the widgetType. Then it goes on loading the XML for it.
-		var widget = new constructor(this, _nodeName)
+		var widget = new constructor(this, _nodeName, readonly);
+
 		widget.loadFromXML(_node);
 
 		// Call the "loadFinished" function of the widget

etemplate/js/etemplate2.js

@@ -86,7 +86,13 @@ etemplate2.prototype._createArrayManagers = function(_data)
 	// Create an array manager object for each part of the _data array.
 	for (var key in _data)
 	{
-		result[key] = new et2_arrayMgr(_data[key]);
+		switch (key) {
+			case "readonlys":
+				result[key] = new et2_readonlysArrayMgr(_data[key]);
+				break;
+			default:
+				result[key] = new et2_arrayMgr(_data[key]);
+		}
 	}
 
 	return result;

etemplate/js/test/et2_test_expressions.json

@@ -6,6 +6,9 @@ var expression_test_data = {
 		},
 		"display_text": "false",
 		"textbox": "This is the outer textbox."
+	},
+	"readonlys": {
+		"__ALL__": true
 	}
 };
 

etemplate/js/test/et2_test_expressions.xet

@@ -3,7 +3,7 @@
 	<template id="test">
 		<vbox>
 			<description disabled="!@@display_text" value="Dies ist nur ein test!" />
-			<textbox id="textbox" />
+			<textbox id="textbox" value="Test"/>
 		</vbox>
 	</template>
 	<textbox id="textbox" />

etemplate/js/test/et2_test_timesheet_edit.json

@@ -3,7 +3,7 @@ var timesheet_data = {
         "ts_id":"1",
         "ts_project":null,
         "ts_title":"Test geschrieben",
-        "ts_description":null,
+        "ts_description":"This is just a test description",
         "ts_start":1307030400,
         "ts_duration":"150",
         "ts_quantity":"2.5",
@@ -69,7 +69,8 @@ var timesheet_data = {
         "ts_owner":true,
         "tabs":{
             "customfields":true
-        }
+        },
+        "ts_description": true
     }
 }
 

etemplate/js/test/test_xml.html

@@ -10,6 +10,7 @@
 		<script src="../et2_widget.js"></script>
 		<script src="../et2_DOMWidget.js"></script>
 		<script src="../et2_baseWidget.js"></script>
+		<script src="../et2_valueWidget.js"></script>
 		<script src="../et2_inputWidget.js"></script>
 		<script src="../et2_template.js"></script>
 		<script src="../et2_description.js"></script>