Author: konstantin.mishin
Date: 2010-01-25 14:44:06 -0500 (Mon, 25 Jan 2010)
New Revision: 16357
Modified:
root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js
Log:
RF-7869
Modified:
root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java
===================================================================
---
root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java 2010-01-25
17:51:25 UTC (rev 16356)
+++
root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ExtendedDataTableRenderer.java 2010-01-25
19:44:06 UTC (rev 16357)
@@ -21,9 +21,14 @@
*/
package org.richfaces.renderkit;
+import static org.ajax4jsf.renderkit.AjaxRendererUtils.AJAX_FUNCTION_NAME;
+import static org.ajax4jsf.renderkit.AjaxRendererUtils.buildAjaxFunction;
+import static org.ajax4jsf.renderkit.AjaxRendererUtils.buildEventOptions;
+
import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
+import java.util.LinkedHashMap;
import java.util.List;
import java.util.Map;
@@ -33,6 +38,9 @@
import javax.faces.context.FacesContext;
import javax.faces.context.ResponseWriter;
+import org.ajax4jsf.javascript.JSFunction;
+import org.ajax4jsf.javascript.JSReference;
+import org.ajax4jsf.renderkit.AjaxEventOptions;
import org.ajax4jsf.renderkit.RendererUtils.HTML;
import org.richfaces.component.UIDataTableBase;
import org.richfaces.component.util.HtmlUtil;
@@ -52,22 +60,29 @@
public RendererState(FacesContext context, UIDataTableBase table) {
super(context);
this.table = table;
- int count = getFrozenColumnsCount();
- frozenColumns = new ArrayList<UIComponent>();
columns = new ArrayList<UIComponent>();
Iterator<UIComponent> iterator = table.columns();
- for (; iterator.hasNext() && count > 0; count--) {
+ Map<String, UIComponent> columnsMap = new LinkedHashMap<String,
UIComponent>();
+ for (; iterator.hasNext();) {
UIComponent component = iterator.next();
if (component.isRendered()) {
- frozenColumns.add(component);
+ columnsMap.put(component.getId(), component);
}
+ }
+ String[] columnsOrder = (String[])
table.getAttributes().get("columnsOrder");
+ if (columnsOrder != null && columnsOrder.length > 0) {
+ int i = 0;
+ for (; i < columnsOrder.length && !columnsMap.isEmpty(); i++)
{
+ columns.add(columnsMap.remove(columnsOrder[i]));
+ }
}
+ iterator = columnsMap.values().iterator();
for (; iterator.hasNext();) {
- UIComponent component = iterator.next();
- if (component.isRendered()) {
- columns.add(component);
- }
+ columns.add(iterator.next());
}
+ int count = getFrozenColumnsCount();
+ frozenColumns = columns.subList(0, count);
+ columns = columns.subList(count, columns.size());
}
private int getFrozenColumnsCount() {
@@ -139,6 +154,28 @@
writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) +
":d", null);
writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-drag",
null);
writer.endElement(HTML.DIV_ELEM);
+ writer.startElement(HTML.TABLE_ELEMENT, component);
+ writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) +
":r", null);
+ writer.writeAttribute(HTML.CLASS_ATTRIBUTE, "rich-extable-reorder",
null);
+ writer.writeAttribute(HTML.CELLPADDING_ATTRIBUTE, "0", null);
+ writer.writeAttribute(HTML.CELLSPACING_ATTRIBUTE, "0", null);
+ writer.startElement(HTML.TBOBY_ELEMENT, component);
+ writer.startElement(HTML.TR_ELEMENT, component);
+ writer.startElement(HTML.TD_ELEM, component);
+ writer.write(" ");
+ writer.endElement(HTML.TD_ELEM);
+ writer.endElement(HTML.TR_ELEMENT);
+ writer.startElement(HTML.TR_ELEMENT, component);
+ writer.startElement(HTML.TD_ELEM, component);
+ writer.write(" ");
+ writer.endElement(HTML.TD_ELEM);
+ writer.endElement(HTML.TR_ELEMENT);
+ writer.startElement(HTML.TR_ELEMENT, component);
+ writer.startElement(HTML.TD_ELEM, component);
+ writer.write(" ");
+ writer.endElement(HTML.TD_ELEM);
+ writer.endElement(HTML.TR_ELEMENT);
+ writer.endElement(HTML.TABLE_ELEMENT);
writer.startElement(HTML.INPUT_ELEM, component);
writer.writeAttribute(HTML.ID_ATTRIBUTE, component.getClientId(context) +
":wi", null);
writer.writeAttribute(HTML.NAME_ATTRIBUTE, component.getClientId(context) +
":wi", null);
@@ -146,7 +183,16 @@
writer.endElement(HTML.INPUT_ELEM);
writer.startElement(HTML.SCRIPT_ELEM, component);
writer.writeAttribute(HTML.TYPE_ATTR, "text/javascript", null);
- writer.write("new RichFaces.ExtendedDataTable('" +
component.getClientId(context) + "');");
+
+ JSFunction ajaxFunction = buildAjaxFunction(context, component,
AJAX_FUNCTION_NAME);
+ AjaxEventOptions eventOptions = buildEventOptions(context, component);
+ eventOptions.getParameters().put("rich:columnsOrder", new
JSReference("columnsOrder"));
+ if (!eventOptions.isEmpty()) {
+ ajaxFunction.addParameter(eventOptions);
+ }
+
+ writer.write("new RichFaces.ExtendedDataTable('" +
component.getClientId(context)
+ + "', function(event, columnsOrder) {" +
ajaxFunction.toScript() + ";});");
writer.endElement(HTML.SCRIPT_ELEM);
writer.endElement(HTML.DIV_ELEM);
}
@@ -284,7 +330,6 @@
writer.writeAttribute(HTML.CLASS_ATTRIBUTE,
"rich-extable-resizer-holder rich-extable-cell-width-"
+ column.getId(), null);
writer.startElement(HTML.DIV_ELEM, column);
- writer.writeAttribute(HTML.ID_ATTRIBUTE, column.getClientId(context) +
":r", null);
writer.writeAttribute(HTML.CLASS_ATTRIBUTE,
"rich-extable-resizer", null);
writer.endElement(HTML.DIV_ELEM);
writer.endElement(HTML.DIV_ELEM);
@@ -337,6 +382,9 @@
super.doDecode(context, component);
Map<String, String> map =
context.getExternalContext().getRequestParameterMap();
updateWidthOfColumns(component, map.get(component.getClientId(context) +
":wi"));
+ if (map.get(component.getClientId(context)) != null) {
+ updateColumnsOrder(context, component,
map.get("rich:columnsOrder"));
+ }
}
/**
@@ -357,6 +405,14 @@
}
}
+ private void updateColumnsOrder(FacesContext context, UIComponent component, String
columnsOrderString) {
+ if (columnsOrderString != null && columnsOrderString.length() > 0) {
+ String[] columnsOrder = columnsOrderString.split(",");
+ component.getAttributes().put("columnsOrder", columnsOrder);
+
context.getPartialViewContext().getRenderIds().add(component.getClientId(context));
+ }
+ }
+
private String getColumnWidth(UIComponent column) {
String width = (String) column.getAttributes().get("width");
if (width == null || width.length() == 0 || width.indexOf("%") != -1)
{
Modified:
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css
===================================================================
---
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css 2010-01-25
17:51:25 UTC (rev 16356)
+++
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.css 2010-01-25
19:44:06 UTC (rev 16357)
@@ -77,6 +77,19 @@
display: none;
}
+.rich-extable-reorder{
+ position:absolute;
+ border-collapse: collapse;
+ display: none;
+}
+
+.rich-extable-reorder td{
+ width: 30px;
+ height: 10px;
+ font-size: 5px;
+ border: 1px solid #C4C0C9;
+}
+
.rich-extable-cell, .rich-extable-header-cell, .rich-extable-footer-cell{
height: 20px;
overflow: hidden;
Modified:
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js
===================================================================
---
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js 2010-01-25
17:51:25 UTC (rev 16356)
+++
root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/extendedDataTable.js 2010-01-25
19:44:06 UTC (rev 16357)
@@ -34,8 +34,8 @@
return rule;
};
- richfaces.ExtendedDataTable = function(id) {
- var WIDTH_CLASS_NAME_BASE = ".rich-extable-cell-width-";
+ richfaces.ExtendedDataTable = function(id, ajaxFunction) {
+ var WIDTH_CLASS_NAME_BASE = "rich-extable-cell-width-";
var MIN_WIDTH = 20;
var element = document.getElementById(id);
@@ -45,6 +45,7 @@
var dataTableElement = contentElement.lastChild;//TODO this.dataTableElement =
Richfaces.lastDescendant(this.contentElement);
var frozenHeaderPartElement = document.getElementById(id + ":frozenHeader");
var dragElement = document.getElementById(id + ":d");
+ var reorderElement = document.getElementById(id + ":r");
var widthInput = document.getElementById(id + ":wi");
var normalPartStyle =
richfaces.getCSSRule(".rich-extable-part-width").style;
@@ -58,6 +59,7 @@
var scrollElement = document.getElementById(id + idSuffixs[2]);
var resizeData = {};
+ var idOfReorderingColumn = "";
var newWidths = {};
var updateLayout = function() {
@@ -140,10 +142,10 @@
return false;
};
var beginResize = function(event) {
- var parts = this.id.split(":");
+ var className = this.parentNode.className.match(new RegExp(WIDTH_CLASS_NAME_BASE +
"[^\w]*"))[0];
var thisElement = jQuery(this);
resizeData = {
- id : parts[parts.length - 2],
+ className : className,
left : thisElement.parent().offset().left
};
dragElement.style.height = element.clientHeight + "px";
@@ -159,8 +161,8 @@
jQuery(document).unbind("mousemove", drag);
dragElement.style.display = "none";
var width = Math.max(MIN_WIDTH, event.pageX - resizeData.left) + "px";
- richfaces.getCSSRule(WIDTH_CLASS_NAME_BASE + resizeData.id).style.width = width;
- newWidths[resizeData.id] = width;
+ richfaces.getCSSRule("." + resizeData.className).style.width = width;
+ newWidths[resizeData.className.substr(WIDTH_CLASS_NAME_BASE.length)] = width;
var widthsArray = new Array();
for (var id in newWidths) {
widthsArray.push(id + ":" + newWidths[id]);
@@ -168,13 +170,59 @@
widthInput.value = widthsArray.toString();
updateLayout();
adjustResizers();
- richfaces.ajax(element, event); // Maybe, event model should be used here.
+ ajaxFunction(event, ""); // Maybe, event model should be used here.
};
+ var reorder = function(event) {
+ reorderElement.style.display = "block";
+ reorderElement.style.top = (event.pageY -
jQuery(reorderElement).offsetParent().offset().top) + "px";
+ reorderElement.style.left = (event.pageX -
jQuery(reorderElement).offsetParent().offset().left + 20) + "px";
+ return false;
+ };
+
+ var beginReorder = function(event) {
+ idOfReorderingColumn = this.className.match(new RegExp(WIDTH_CLASS_NAME_BASE +
"[^\w]*"))[0].substr(WIDTH_CLASS_NAME_BASE.length); //To try to do this without
substr.
+ jQuery(document).bind("mousemove", reorder);
+ jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").one("mouseup",
endReorder);
+ jQuery(document).one("mouseup", cancelReorder);
+ return false;
+ };
+
+ var endReorder = function(event) {
+ var id = this.className.match(new RegExp(WIDTH_CLASS_NAME_BASE +
"[^\w]*"))[0].substr(WIDTH_CLASS_NAME_BASE.length); //To try to do this without
substr.
+ var colunmsOrder = "";
+ jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").each(function()
{
+ var i = this.className.match(new RegExp(WIDTH_CLASS_NAME_BASE +
"[^\w]*"))[0].substr(WIDTH_CLASS_NAME_BASE.length); //To try to do this without
substr.
+ if (i == id) {
+ colunmsOrder += idOfReorderingColumn + "," + id + ",";
+ } else if (i != idOfReorderingColumn) {
+ colunmsOrder += i + ",";
+ }
+ });
+ ajaxFunction(event, colunmsOrder);
+// bodyElement.style.display = "none";
+// jQuery("#" + escapedId + "\\:" + classNameOfReorderingColumn +
"\\:h").insertBefore("#" + escapedId + "\\:" + className +
"\\:h");
+// jQuery(bodyElement).find("table div tr").each(function(){
+// var div = jQuery(this).find("." + WIDTH_CLASS_NAME_BASE +
classNameOfReorderingColumn);
+// if (div.length) {
+// div.parent().insertBefore(jQuery(this).find("." + WIDTH_CLASS_NAME_BASE
+ className).parent());
+// }
+// });
+// jQuery("#" + escapedId + "\\:" + classNameOfReorderingColumn +
"\\:f").insertBefore("#" + escapedId + "\\:" + className +
"\\:f");
+// bodyElement.style.display = "";
+ };
+
+ var cancelReorder = function(event) {
+ jQuery(document).unbind("mousemove", reorder);
+ jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").unbind("mouseup",
endReorder);
+ reorderElement.style.display = "none";
+ };
+
jQuery(document).ready(initializeLayout);
jQuery(window).bind("resize", updateLayout);
jQuery(scrollElement).bind("scroll", updateScrollPosition);
jQuery(element).children(".rich-extable-header").find(".rich-extable-resizer").bind("mousedown",
beginResize);
+ jQuery(element).children(".rich-extable-header").find(".rich-extable-header-cell").bind("mousedown",
beginReorder);
};
}(window.RichFaces, jQuery));