Author: abelevich Date: 2010-04-09 12:27:37 -0400 (Fri, 09 Apr 2010) New Revision: 16753 Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/component/UISubTable.java root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/SubTableRenderer.java root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ToggleControlRendererBase.java root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/subtable.js root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/toggler.js Log: implement expanded subTables Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/component/UISubTable.java =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/component/UISubTable.java 2010-04-09 16:09:13 UTC (rev 16752) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/component/UISubTable.java 2010-04-09 16:27:37 UTC (rev 16753) @@ -21,9 +21,15 @@ package org.richfaces.component; +import javax.el.ELContext; import javax.el.MethodExpression; +import javax.el.ValueExpression; import javax.faces.application.ResourceDependency; +import javax.faces.context.FacesContext; +import javax.faces.event.AbortProcessingException; +import javax.faces.event.FacesEvent; +import org.richfaces.event.ToggleEvent; import org.richfaces.event.ToggleListener; /** @@ -38,13 +44,40 @@ expandMode, expanded, toggleExpression } - public static final String EXPANDMODE_AJAX = "ajax"; + public static final String MODE_AJAX = "ajax"; - public static final String EXPANDMODE_SERVER = "server"; + public static final String MODE_SERVER = "server"; - public static final String EXPANDMODE_CLIENT = "client"; + public static final String MODE_CLIENT = "client"; + + @Override + public void broadcast(FacesEvent event) throws AbortProcessingException { + super.broadcast(event); + if(event instanceof ToggleEvent) { + ToggleEvent toggleEvent = (ToggleEvent)event; + boolean newValue = toggleEvent.isExpanded(); + + FacesContext facesContext = getFacesContext(); + ELContext elContext = facesContext.getELContext(); + + MethodExpression methodExpression = getToggleListener(); + if(methodExpression != null) { + methodExpression.invoke(elContext, new Object[]{newValue}); + } + + getStateHelper().put(PropertyKeys.expanded, newValue); + + ValueExpression valueExpression = getValueExpression(PropertyKeys.expanded.toString()); + if(valueExpression != null && !valueExpression.isReadOnly(elContext)) { + valueExpression.setValue(elContext, newValue); + } + + + facesContext.getPartialViewContext().getRenderIds().add(getClientId(facesContext)); + } + } public boolean isExpanded() { return (Boolean)getStateHelper().eval(PropertyKeys.expanded, true); } @@ -92,12 +125,32 @@ } public String getExpandMode() { - return (String)getStateHelper().eval(PropertyKeys.expandMode,EXPANDMODE_AJAX); + return (String)getStateHelper().eval(PropertyKeys.expandMode,MODE_SERVER); } public void setExpandMode(String expandMode) { getStateHelper().put(PropertyKeys.expandMode, expandMode); } + + @Override + public void setIterationState(FacesContext context, Object stateObject) { + Object[] state = (Object[])stateObject; + if(state != null) { + super.setIterationState(context, state[0]); + getStateHelper().put(PropertyKeys.expanded, state[1]); + } else { + super.setIterationState(context, null); + getStateHelper().put(PropertyKeys.expanded, null); + } + } + + @Override + public Object getIterationState(FacesContext context) { + Object [] state = new Object[2]; + state[0] = super.getIterationState(context); + state[1] = getStateHelper().get(PropertyKeys.expanded); + return state; + } } Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/SubTableRenderer.java =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/SubTableRenderer.java 2010-04-09 16:09:13 UTC (rev 16752) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/SubTableRenderer.java 2010-04-09 16:27:37 UTC (rev 16753) @@ -1,7 +1,6 @@ package org.richfaces.renderkit; import java.io.IOException; -import java.text.MessageFormat; import java.util.HashMap; import java.util.Iterator; import java.util.Map; @@ -11,18 +10,45 @@ import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; +import org.ajax4jsf.javascript.JSFunction; +import org.ajax4jsf.renderkit.AjaxRendererUtils; import org.ajax4jsf.renderkit.RendererUtils.HTML; import org.richfaces.component.Row; import org.richfaces.component.UIDataTableBase; import org.richfaces.component.UISubTable; +import org.richfaces.event.ToggleEvent; public class SubTableRenderer extends AbstractTableRenderer { - private static final String SUBTABLE_SCRIPT = "new RichFaces.ui.SubTable(''{0}'', {1});"; - + private static final String STATE = ":state"; + + @Override - public void encodeTableFacets(ResponseWriter writer, FacesContext context, UIDataTableBase dataTable) - throws IOException { + protected void doDecode(FacesContext facesContext, UIComponent component) { + UISubTable subTable = (UISubTable)component; + + String clientId = subTable.getClientId(facesContext) + STATE; + Map<String, String> requestMap = facesContext.getExternalContext().getRequestParameterMap(); + + String state = (String)requestMap.get(clientId); + + boolean isExpand = true; + if(state != null) { + int newValue = Integer.parseInt(state); + + if(newValue < 1) { + isExpand = false; + } + + if(subTable.isExpanded() != isExpand) { + new ToggleEvent(subTable, isExpand).queue(); + } + } + + } + + @Override + public void encodeTableFacets(ResponseWriter writer, FacesContext context, UIDataTableBase dataTable) throws IOException { UISubTable subTable = (UISubTable)dataTable; encodeHeaderFacet(writer, context, subTable); @@ -68,12 +94,26 @@ @Override protected void doEncodeEnd(ResponseWriter writer, FacesContext facesContext, UIComponent component) throws IOException { UISubTable subTable = (UISubTable)component; + encodeFooterFacet(writer, facesContext, subTable); + encodeStateInput(writer, facesContext, subTable); encodeClientScript(writer, facesContext, subTable); encodeTableBodyEnd(writer, facesContext, subTable); } + public void encodeStateInput(ResponseWriter writer, FacesContext facesContext, UISubTable subTable) throws IOException { + String clientId = subTable.getClientId(facesContext) + STATE; + + writer.startElement(HTML.INPUT_ELEM, subTable); + writer.writeAttribute(HTML.ID_ATTRIBUTE, clientId , null); + writer.writeAttribute(HTML.NAME_ATTRIBUTE, clientId , null); + writer.writeAttribute(HTML.TYPE_ATTR, HTML.INPUT_TYPE_HIDDEN, null); + int state = subTable.isExpanded() ? 1 : 0; + writer.writeAttribute(HTML.VALUE_ATTRIBUTE, state, null); + writer.endElement(HTML.INPUT_ELEM); + } + @Override public boolean containsThead() { return false; @@ -83,18 +123,30 @@ public HeaderEncodeStrategy getHeaderEncodeStrategy(UIComponent column, String tableFacetName) { // TODO implement column header facet return null; + } @Override public void encodeClientScript(ResponseWriter writer, FacesContext facesContext, UIDataTableBase component) throws IOException { UISubTable subTable = (UISubTable)component; String id = subTable.getClientId(facesContext); + + UIComponent nestingForm = getUtils().getNestingForm(facesContext, subTable); + String formId = nestingForm != null ? nestingForm.getClientId(facesContext) : ""; + Map<String, Object> options = new HashMap<String, Object>(); + options.put("stateInput", subTable.getClientId(facesContext) +":state"); + options.put("expandMode", subTable.getExpandMode()); + options.put("eventOptions", AjaxRendererUtils.buildEventOptions(facesContext, subTable)); - String script = MessageFormat.format(SUBTABLE_SCRIPT, id, options); + JSFunction jsFunction = new JSFunction("new RichFaces.ui.SubTable"); + jsFunction.addParameter(id); + jsFunction.addParameter(formId); + jsFunction.addParameter(options); writer.startElement(HTML.SCRIPT_ELEM, subTable); - writer.writeText(script, null); + writer.writeAttribute(HTML.TYPE_ATTR, "text/javascript",null); + writer.writeText(jsFunction.toScript(), null); writer.endElement(HTML.SCRIPT_ELEM); } @@ -157,10 +209,6 @@ return null; } - public String getTableHeadSkinClass() { - return null; - } - @Override public String getColumnFooterFirstSkinClass() { return "rich-subtable-subfooter-first"; } Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ToggleControlRendererBase.java =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ToggleControlRendererBase.java 2010-04-09 16:09:13 UTC (rev 16752) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/java/org/richfaces/renderkit/ToggleControlRendererBase.java 2010-04-09 16:27:37 UTC (rev 16753) @@ -1,7 +1,6 @@ package org.richfaces.renderkit; import java.io.IOException; -import java.text.MessageFormat; import java.util.HashMap; import java.util.Map; @@ -11,7 +10,7 @@ import javax.faces.context.FacesContext; import javax.faces.context.ResponseWriter; -import org.ajax4jsf.javascript.ScriptUtils; +import org.ajax4jsf.javascript.JSFunction; import org.ajax4jsf.renderkit.RendererBase; import org.ajax4jsf.renderkit.RendererUtils.HTML; import org.richfaces.component.Expandable; @@ -28,10 +27,6 @@ public abstract class ToggleControlRendererBase extends RendererBase { - - private static final String DATATABLE_TOGGLER_SCRIPT = "new RichFaces.ui.DataTableToggler(''{0}'', {1});"; - - private static final String DISPLAY_NONE = "display: none;"; private static final String EXPAND_STATE = "expand"; @@ -39,8 +34,8 @@ private static final String COLLAPSE_STATE = "collapse"; private static final String HIDDEN = ":hidden"; - +/* @Override protected void doDecode(FacesContext context, UIComponent component) { UIToggleControl toggle = (UIToggleControl) component; @@ -65,7 +60,7 @@ } } } - +*/ protected void encodeControl(FacesContext context, UIComponent component) throws IOException { UIToggleControl toggleControl = (UIToggleControl) component; @@ -74,7 +69,7 @@ ResponseWriter writer = context.getResponseWriter(); String toggleId = toggleControl.getClientId(context); - String options = encodeOptions(context, toggleControl, subTable); + Map<String, Object> options = encodeOptions(context, toggleControl, subTable); String switchType = subTable.getExpandMode(); boolean expanded = subTable.isExpanded(); @@ -82,11 +77,12 @@ encodeControl(context, writer, toggleControl, switchType, expanded, false); encodeControl(context, writer, toggleControl, switchType, !expanded, true); -// encodeHiddenInput(context, writer, toggleControl); - - String registerScript = MessageFormat.format(DATATABLE_TOGGLER_SCRIPT, toggleId, options); + JSFunction jsFunction = new JSFunction("new RichFaces.ui.DataTableToggler"); + jsFunction.addParameter(toggleId); + jsFunction.addParameter(options); + writer.startElement(HTML.SCRIPT_ELEM, subTable); - writer.writeText(registerScript, null); + writer.writeText(jsFunction.toScript(), null); writer.endElement(HTML.SCRIPT_ELEM); } @@ -133,7 +129,7 @@ writer.endElement(HTML.SPAN_ELEM); } - public String encodeOptions(FacesContext context, UIToggleControl toggleControl, UISubTable subTable) { + public HashMap<String, Object> encodeOptions(FacesContext context, UIToggleControl toggleControl, UISubTable subTable) { String forId = subTable.getClientId(context); String toggleControlId = toggleControl.getClientId(context); @@ -145,9 +141,9 @@ String eventName = toggleControl.getEvent(); eventName = eventName.trim().startsWith("on") ? eventName.substring(2) : eventName; options.put("eventName", eventName); - return ScriptUtils.toScript(options); + return options; } - +/* public void encodeHiddenInput(FacesContext context, ResponseWriter writer, UIComponent component) throws IOException { String hiddenId = component.getClientId(context) + HIDDEN; @@ -159,7 +155,7 @@ writer.endElement(HTML.INPUT_ELEM); } - +*/ public String getStyleClass(FacesContext context, UIToggleControl control) { return null; } Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/subtable.js =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/subtable.js 2010-04-09 16:09:13 UTC (rev 16752) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/subtable.js 2010-04-09 16:27:37 UTC (rev 16753) @@ -2,28 +2,95 @@ richfaces.ui = richfaces.ui || {}; - richfaces.ui.SubTable = function(id, options) { + richfaces.ui.SubTable = function(id, f, options) { this.id = id; - var subTable = document.getElementById(this.id); - subTable.component = this; + this.stateInput = options.stateInput; + this.expandMode = options.expandMode; + this.eventOptions = options.eventOptions; + this.formId = f; + + this.element = document.getElementById(this.id); + this.element.component = this; + this.element = jQuery(this.element); }; - - - jQuery.extend(richfaces.ui.SubTable, { - EXPAND :'expand', - COLLAPSE : 'collapse' - }); - + + jQuery.extend(richfaces.ui.SubTable, { + MODE_AJAX: "ajax", + MODE_SRV: "server", + MODE_CLNT: "client" + }) + + jQuery.extend(richfaces.ui.SubTable.prototype, (function () { - + + getElementById = function(id) { + return jQuery(document.getElementById(id)); + } + + getState = function() { + return getElementById(this.stateInput).val(); + } + + setState = function(state) { + getElementById(this.stateInput).val(state); + } + + ajax = function(e) { + if(this.element && this.element[0]) { + jsf.ajax.request(this.element[0], e, this.eventOptions); + } + } + + server = function(e) { + var f = document.getElementById(this.formId); + if(f) { + f.submit(); + } + } + + client = function(e) { + if(this.isExpand()) { + this.element.show(); + } else { + this.element.hide(); + } + } + return { - toggle: function() { + + toggle: function(e) { + if(this.isExpand()) { + this.collapse(e); + } else { + this.expand(e); + } + }, + collapse: function(e) { + this.toggleToState(0, e); }, - getState: function() { - - } + expand: function(e) { + this.toggleToState(1, e); + }, + + isExpand: function() { + var currentState = getState.call(this); + return (currentState > 0); + }, + + toggleToState: function(toState, e) { + + setState.call(this, toState); + + if(this.expandMode == richfaces.ui.SubTable.MODE_AJAX) { + ajax.call(this, e); + }else if(this.expandMode == richfaces.ui.SubTable.MODE_SRV) { + server.call(this, e); + }else if(this.expandMode == richfaces.ui.SubTable.MODE_CLNT) { + client.call(this ,e); + } + } }; })()); Modified: root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/toggler.js =================================================================== --- root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/toggler.js 2010-04-09 16:09:13 UTC (rev 16752) +++ root/ui-sandbox/trunk/components/tables/ui/src/main/resources/META-INF/resources/toggler.js 2010-04-09 16:27:37 UTC (rev 16753) @@ -3,9 +3,7 @@ richfaces.ui = richfaces.ui || {}; richfaces.ui.DataTableToggler = function(id, options) { - this.id = id; - this.eventName = options.eventName; this.expandControl = options.expandControl; this.collapseControl = options.collapseControl; @@ -14,42 +12,35 @@ richfaces.Event.bindById(this.id, this.eventName, this.toggle, this); }; - - jQuery.extend(richfaces.ui.DataTableToggler, { - EXPAND :'expand', - COLLAPSE : 'collapse' - }); - - jQuery.extend(richfaces.ui.DataTableToggler.prototype, (function () { - return { - - toggle: function(elem) { - var element = jQuery(document.getElementById(this.forId)); - var subtable = element.attr('component'); - - var state = subtable.getState(); - this.toggleControl(this.state); - subtable.toggle(); - }, - - toggleControl: function(state) { - var expandControl = jQuery(document.getElementById(this.expandControl)); - var collapseControl = jQuery(document.getElementById(this.collapseControl)); - - if(state == richfaces.ui.DataTableToggler.EXPAND) { - expandControl.hide(); - collapseControl.show(); - this.state = "collapse"; - } else if(state == richfaces.ui.DataTableToggler.COLLAPSE) { - collapseControl.hide(); - expandControl.show(); - this.state = "expand"; - } - } - - }; + getElementById= function(id) { + jQuery(document.getElementById(id)) + } + + return { + + toggle: function(event) { + var element = getElementById(this.forId); + var subtable = element.attr('component'); + this.toggleControl(subtable.isExpand()); + subtable.toggle(event); + }, + + toggleControl: function(expanded) { + var expandControl = getElementById(this.expandControl); + var collapseControl = getElementById(this.collapseControl); + + if(expanded) { + collapseControl.hide(); + expandControl.show(); + } else { + expandControl.hide(); + collapseControl.show(); + } + } + + }; })());