You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by jm...@apache.org on 2006/09/25 23:05:57 UTC
svn commit: r449851 - in /incubator/xap/trunk/src/xap:
bridges/dojo/TableBridge.js widgets/dojo/TreeTable.js
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???