incubator-xap-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From jmarga...@apache.org
Subject svn commit: r449851 - in /incubator/xap/trunk/src/xap: bridges/dojo/TableBridge.js widgets/dojo/TreeTable.js
Date Mon, 25 Sep 2006 23:05:57 GMT
Author: jmargaris
Date: Mon Sep 25 16:05:56 2006
New Revision: 449851

URL: http://svn.apache.org/viewvc?view=rev&rev=449851
Log:
alternate row coloring, selection events, borders, etc

Modified:
    incubator/xap/trunk/src/xap/bridges/dojo/TableBridge.js
    incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js

Modified: incubator/xap/trunk/src/xap/bridges/dojo/TableBridge.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/bridges/dojo/TableBridge.js?view=diff&rev=449851&r1=449850&r2=449851
==============================================================================
--- incubator/xap/trunk/src/xap/bridges/dojo/TableBridge.js (original)
+++ incubator/xap/trunk/src/xap/bridges/dojo/TableBridge.js Mon Sep 25 16:05:56 2006
@@ -46,23 +46,52 @@
 
 
 
+xap.bridges.dojo.TableBridge.prototype.init = function() {
+	this.superclass.init.call(this);
+	//add listener last so we don't fire for the initial set
+	dojo.event.connect(this.getPeer(), "onActivateRow",this,"onActivateRow");	
+	dojo.event.connect(this.getPeer(), "onSelectRow",this,"onSelectRow");	
+	dojo.event.connect(this.getPeer(), "onDeselectRow",this,"onDeselectRow");	
+}
+
 xap.bridges.dojo.TableBridge.prototype.getPeerString = function(){
     return "TreeTable" ;
 }
 
+xap.bridges.dojo.TableBridge.prototype.onActivateRow = function( a ){
+	var clientEvent = new xap.session.ClientEvent(this.getElement(), this.getSession());
+	clientEvent.rowId = this.getSelectedRowIds();
+   this.fireEvent("onSelect", null, null, clientEvent);
+}
 
-/** XML attribute set method for "width" */
-xap.bridges.dojo.TableBridge.prototype.setWidthAttribute = function(value){
-	this.getRootDomNode().style.width = value ;
-	this.getPeer().onResized();
+xap.bridges.dojo.TableBridge.prototype.onDeselectRow = function( row ){
+	var handler = this.getUiContentHandler().getHandlerForPeer(row);
+	handler.writeBackRemoveAttribute("selected");
 }
 
-/** XML attribute set method for "height" */
-xap.bridges.dojo.TableBridge.prototype.setHeightAttribute = function(value){
-	this.getRootDomNode().style.height = value ;
-	this.getPeer().onResized();
+xap.bridges.dojo.TableBridge.prototype.onSelectRow = function( row ){
+	var handler = this.getUiContentHandler().getHandlerForPeer(row);
+	handler.writeBackAttribute("selected","true");
+	var clientEvent = new xap.session.ClientEvent(this.getElement(), this.getSession());
+	clientEvent.rowId = this.getSelectedRowIds();
+   this.fireEvent("onStateChange", null, null, clientEvent);
 }
 
+xap.bridges.dojo.TableBridge.prototype.getSelectedRowIds = function(){
+		var s = "";
+		var selectedItems = this.getPeer()._selectedItems;
+		for (var i=0; i<selectedItems.length; i++){
+			var row = selectedItems[i];
+			var handler = this.getUiContentHandler().getHandlerForPeer(row);
+			if (handler!=null){
+				if (s.length!=0){
+					s+=(',');
+				}
+				s+= handler.getElement().getAttribute("id");
+			}
+		}
+		return s;
+	}
 
 
  

Modified: incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js?view=diff&rev=449851&r1=449850&r2=449851
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js Mon Sep 25 16:05:56 2006
@@ -26,6 +26,9 @@
 	//top level rows only
 	this._rows = [];
 	
+	this._selectedItems = [];
+	this._selectionMode = "singleRow";
+	
 	this._rebuildTableTask = null;
 	this._resizeTableTask = null;
 	this._rebuildRowsTask = null;
@@ -101,6 +104,7 @@
 		}
 	},
 	
+	
 	/**
 	 * After a table has been built to the screen go through and make sure
 	 * the widths of columns and headers match up.
@@ -188,17 +192,18 @@
 		this.scrollDiv = document.createElement("div");
 		this.domNode.appendChild(this.scrollDiv);
 		
-		this.scrollDiv.style.position="relative";
-		this.scrollDiv.style.width="100%";
-		this.scrollDiv.style.height="100%";
-		this.scrollDiv.style.overflow="auto";
+		dojo.lang.mixin(this.scrollDiv.style,{
+			position:"relative",
+			width:"100%",
+			height:"100%",
+			overflow:"auto"});
+
 		dojo.event.connect(this.scrollDiv, "onscroll", this, "onscroll");
 		
 		this.table = document.createElement("table");
 		this.scrollDiv.appendChild(this.table);
 		this.table.cellPadding = "0px";
 		this.table.cellSpacing= "0px";
-		this.table.rules = "all";
 		
 		//populate cols under both tables
 		for (var i = 0; i<this._columns.length; i++){
@@ -214,6 +219,7 @@
 	 * with the same sizes. Useful for sorting.
 	 */
 	_rebuildRows: function(){
+		var alternateRow = false;
 		if (this.tbody){
 			this.table.removeChild(this.tbody);
 		}
@@ -223,7 +229,7 @@
 		
 		//now populate the body rows
 		for (var i =0; i<this._rows.length; i++){
-			this._rebuildRow(this._rows[i], 0);
+			alternateRow = this._rebuildRow(this._rows[i], 0,alternateRow);
 		}
 		window.clearTimeout(this._rebuildRowsTask);
 		this._rebuildRowsTask = null;
@@ -248,7 +254,6 @@
 
 		this.headerTable.cellPadding = "0px";
 		this.headerTable.cellSpacing= "0px";
-		this.headerTable.rules = "all";
 		
 		//populate cols under both tables
 		for (var i = 0; i<this._columns.length; i++){
@@ -266,6 +271,7 @@
 		for (var i = 0; i<this._columns.length; i++){
 			var cell = document.createElement("td");
 			this.headerRow.appendChild(cell);
+			cell.style.whiteSpace = "nowrap";
 			if (this._columns[i]._header){	
 				cell.appendChild(this._columns[i]._header);
 			}
@@ -283,12 +289,24 @@
 		this._resizeTableLater();
 	},
 	
-	_rebuildRow: function( row, depth ){
+	_rebuildRow: function( row, depth, alternateRow ){
 		this.tbody.appendChild(row.domNode);
 		row.setDepth(depth);
+		
+		//IMPORTANT this is not going to be right for nested rows that 
+		//aren't visible, if someone expands/contracts we need to 
+		//re-assign the alternateRow status
+		if (alternateRow){
+			dojo.html.addClass(row.domNode,"alternateRow");
+		}
+		else{
+			dojo.html.removeClass(row.domNode,"alternateRow");
+		}
+		alternateRow = !alternateRow;
 		for (var i = 0; i<row._rows.length; i++){
-			this._rebuildRow(row._rows[i], depth+1);
+			alternateRow = this._rebuildRow(row._rows[i], depth+1, alternateRow);
 		}
+		return alternateRow;
 	},
 	
 	
@@ -317,7 +335,6 @@
 	
 	//index here is relative to parent row?
 	insertRow: function(row, index){
-		row.setTable(this);
 		xap.util.ArrayHelper.insertElementAt(this._rows,row,index);		
 		//call _rowAdded because row can have child rows
 		this._rowAdded(row);
@@ -354,6 +371,51 @@
 		//in that case you need to insert relative to a sibling
 		this._rebuildRowsLater();
 	},
+	
+	/**
+	 * Row selection stuff
+	 */
+	 
+	 selectRow: function(row){
+	 	if (this.isSelected(row)){
+	 		return;
+	 	}
+	 	if (this._selectionMode=="singleRow"){
+	 		this.clearSelection();
+	 	}
+	 	dojo.html.addClass(row.domNode,"selectedRow");
+	 	this._selectedItems.push(row);
+	 	this.onSelectRow(row);
+	 },
+	 
+	 onSelectRow : function(row){
+	 	//event hook
+	 },
+	 
+	 clearSelection : function(){
+	 	for (var i =0; i<this._selectedItems.length; i++){
+	 		dojo.html.removeClass(this._selectedItems[i].domNode,"selectedRow");
+	 		this.onDeselectRow(this._selectedItems[i]);
+	 	}
+	 	this._selectedItems = [];
+	 },
+	 
+	 activateRow: function(row){
+	 	this.onActivateRow(row);
+	 },
+	 
+	 onDeselectRow : function(row){
+	 	//event hook
+	 },
+	 
+	 onActivateRow : function(row){
+	 	//event hook
+	 },
+	 
+	 isSelected: function(row){
+	 	return (xap.util.ArrayHelper.indexOf(this._selectedItems,row)>=0);
+	 },
+	 
 
 
 	/**
@@ -417,6 +479,7 @@
 	setHeader: function( domNode ){
 		this._header = domNode;
 		dojo.event.connect(domNode, "onclick", this, "onSort");
+		dojo.html.addClass(domNode,"header");
 	},
 	
 	setTable: function(table){
@@ -458,6 +521,16 @@
 	
 	setTable: function(table){
 		this._table = table;
+		dojo.event.connect(this.domNode, "onclick", this, "onClick");
+		dojo.event.connect(this.domNode, "ondblclick", this, "onDblClick");
+	},
+	
+	onClick : function(){
+		this._table.selectRow(this);
+	},
+	
+	onDblClick : function(){
+		this._table.activateRow(this);
 	},
 	
 	//right now cell is just a DomNode, not any sort of typed
@@ -467,6 +540,8 @@
 	addCell : function( cell ){
 		var td = document.createElement("td");
 		this.domNode.appendChild(td);
+		td.style.whiteSpace = "nowrap";
+		dojo.html.addClass(td,"tableCell");
 		
 		//TODO should we use style.textAlign instead of this
 		//everywhere???



Mime
View raw message