[richfaces-svn-commits] JBoss Rich Faces SVN: r16357 - in root/ui-sandbox/trunk/components/tables/ui/src/main: resources/META-INF/resources and 1 other directory.

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("&nbsp;"); + writer.endElement(HTML.TD_ELEM); + writer.endElement(HTML.TR_ELEMENT); + writer.startElement(HTML.TR_ELEMENT, component); + writer.startElement(HTML.TD_ELEM, component); + writer.write("&nbsp;"); + writer.endElement(HTML.TD_ELEM); + writer.endElement(HTML.TR_ELEMENT); + writer.startElement(HTML.TR_ELEMENT, component); + writer.startElement(HTML.TD_ELEM, component); + writer.write("&nbsp;"); + 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));