Author: nbelaevski Date: 2010-11-18 11:10:17 -0500 (Thu, 18 Nov 2010) New Revision: 20091 Modified: trunk/examples/iteration-demo/src/main/java/org/richfaces/demo/TreeBean.java trunk/examples/iteration-demo/src/main/webapp/tree.xhtml trunk/ui/iteration/ui/src/main/java/org/richfaces/component/AbstractTreeNode.java trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeRendererBase.java trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeState.java trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.ecss trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.js trunk/ui/iteration/ui/src/main/templates/treeNode.template.xml Log: https://jira.jboss.org/browse/RF-9715 Modified: trunk/examples/iteration-demo/src/main/java/org/richfaces/demo/TreeBean.java =================================================================== --- trunk/examples/iteration-demo/src/main/java/org/richfaces/demo/TreeBean.java 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/examples/iteration-demo/src/main/java/org/richfaces/demo/TreeBean.java 2010-11-18 16:10:17 UTC (rev 20091) @@ -56,6 +56,8 @@ private Object nodeData; + private boolean showCustomClasses = true; + private Collection<Object> selection = new TracingSet<Object>(); @PostConstruct @@ -113,4 +115,12 @@ FacesContext facesContext = FacesContext.getCurrentInstance(); facesContext.addMessage(null, new FacesMessage("Clicked node: " + getNodeData())); } + + public boolean isShowCustomClasses() { + return showCustomClasses; + } + + public void setShowCustomClasses(boolean showCustomClasses) { + this.showCustomClasses = showCustomClasses; + } } Modified: trunk/examples/iteration-demo/src/main/webapp/tree.xhtml =================================================================== --- trunk/examples/iteration-demo/src/main/webapp/tree.xhtml 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/examples/iteration-demo/src/main/webapp/tree.xhtml 2010-11-18 16:10:17 UTC (rev 20091) @@ -8,6 +8,25 @@ <h:head> <title>Richfaces Tree</title> + + <h:outputStylesheet>/*<![CDATA[*/ + .customClass .customNodeClass { + border: 1px solid navy; + } + + .customClass .customHandleClass { + border: 1px solid red; + } + + .customClass .customIconClass { + border: 1px solid yellow; + } + + .customClass .customLabelClass { + border: 1px solid green; + } + + /*]]>*/</h:outputStylesheet> </h:head> <h:body> @@ -21,6 +40,8 @@ Selection mode: <h:selectOneRadio value="#{treeBean.selectionType}" onclick="submit()"> <f:selectItems value="#{treeBean.types}" itemDisabled="#{item == 'server'}" var="item" itemValue="#{item}" /> </h:selectOneRadio> + + Show custom classes: <h:selectBooleanCheckbox value="#{treeBean.showCustomClasses}" onclick="submit()" /> </h:form> <h:form id="form"> @@ -53,9 +74,11 @@ </h:commandLink> <it:tree id="customizedTree" var="node" value="#{treeBean.rootNodes}" - selectionType="#{treeBean.selectionType}" toggleType="#{treeBean.toggleType}"> + selectionType="#{treeBean.selectionType}" toggleType="#{treeBean.toggleType}" + styleClass="#{treeBean.showCustomClasses ? 'customClass' : ''}"> - <it:treeNode iconLeaf="/images/leaf.png" iconExpanded="/images/minus.png" iconCollapsed="/images/plus.png"> + <it:treeNode iconLeaf="/images/leaf.png" iconExpanded="/images/minus.png" iconCollapsed="/images/plus.png" + styleClass="customNodeClass" handleClass="customHandleClass" iconClass="customIconClass" labelClass="customLabelClass"> #{node.data} </it:treeNode> </it:tree> Modified: trunk/ui/iteration/ui/src/main/java/org/richfaces/component/AbstractTreeNode.java =================================================================== --- trunk/ui/iteration/ui/src/main/java/org/richfaces/component/AbstractTreeNode.java 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/java/org/richfaces/component/AbstractTreeNode.java 2010-11-18 16:10:17 UTC (rev 20091) @@ -99,7 +99,13 @@ public abstract String getIconExpanded(); public abstract String getIconCollapsed(); + + public abstract String getHandleClass(); + public abstract String getIconClass(); + + public abstract String getLabelClass(); + protected Boolean getLocalExpandedValue(FacesContext facesContext) { return (Boolean) getStateHelper().get(PropertyKeys.expanded); } Modified: trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeRendererBase.java =================================================================== --- trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeRendererBase.java 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeRendererBase.java 2010-11-18 16:10:17 UTC (rev 20091) @@ -87,19 +87,21 @@ return (TreeNodeState) context.getAttributes().get(TreeEncoderBase.TREE_NODE_STATE_ATTRIBUTE); } - protected void encodeDefaultHandle(FacesContext context, UIComponent component, String styleClass) throws IOException { + protected void encodeDefaultIcon(FacesContext context, UIComponent component, String styleClass) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement(HtmlConstants.SPAN_ELEM, component); - writer.writeAttribute(HtmlConstants.CLASS_ATTRIBUTE, styleClass, null); + writer.writeAttribute(HtmlConstants.CLASS_ATTRIBUTE, + concatClasses(styleClass, component.getAttributes().get("iconClass")), null); writer.endElement(HtmlConstants.SPAN_ELEM); } - protected void encodeCustomHandle(FacesContext context, UIComponent component, String styleClass, String iconSource) throws IOException { + protected void encodeCustomIcon(FacesContext context, UIComponent component, String styleClass, String iconSource) throws IOException { ResponseWriter writer = context.getResponseWriter(); writer.startElement(HtmlConstants.IMG_ELEMENT, component); - writer.writeAttribute(HtmlConstants.CLASS_ATTRIBUTE, styleClass, null); + writer.writeAttribute(HtmlConstants.CLASS_ATTRIBUTE, + concatClasses(styleClass, component.getAttributes().get("iconClass")), null); writer.writeAttribute(HtmlConstants.ALT_ATTRIBUTE, "", null); writer.writeURIAttribute(HtmlConstants.SRC_ATTRIBUTE, RenderKitUtils.getResourceURL(iconSource, context), null); writer.endElement(HtmlConstants.IMG_ELEMENT); @@ -107,39 +109,39 @@ - protected void encodeHandle(FacesContext context, UIComponent component) throws IOException { + protected void encodeIcon(FacesContext context, UIComponent component) throws IOException { TreeNodeState nodeState = getNodeState(context); AbstractTreeNode treeNode = (AbstractTreeNode) component; if (nodeState.isLeaf()) { String iconLeaf = (String) treeNode.getAttributes().get("iconLeaf"); - encodeHandleForNodeState(context, treeNode, nodeState, iconLeaf); + encodeIconForNodeState(context, treeNode, nodeState, iconLeaf); } else { String iconExpanded = (String) treeNode.getAttributes().get("iconExpanded"); String iconCollapsed = (String) treeNode.getAttributes().get("iconCollapsed"); if (Strings.isNullOrEmpty(iconCollapsed) && Strings.isNullOrEmpty(iconExpanded)) { - encodeDefaultHandle(context, component, nodeState.getDefaultHandleClass()); + encodeDefaultIcon(context, component, nodeState.getIconClass()); } else { SwitchType toggleType = treeNode.findTreeComponent().getToggleType(); if (toggleType == SwitchType.client || nodeState == TreeNodeState.collapsed) { - encodeHandleForNodeState(context, treeNode, TreeNodeState.collapsed, iconCollapsed); + encodeIconForNodeState(context, treeNode, TreeNodeState.collapsed, iconCollapsed); } if (toggleType == SwitchType.client || nodeState == TreeNodeState.expanded) { - encodeHandleForNodeState(context, treeNode, TreeNodeState.expanded, iconExpanded); + encodeIconForNodeState(context, treeNode, TreeNodeState.expanded, iconExpanded); } } } } - protected void encodeHandleForNodeState(FacesContext context, AbstractTreeNode treeNode, TreeNodeState nodeState, String cutomIcon) throws IOException { - if (Strings.isNullOrEmpty(cutomIcon)) { - encodeDefaultHandle(context, treeNode, nodeState.getDefaultHandleClass()); + protected void encodeIconForNodeState(FacesContext context, AbstractTreeNode treeNode, TreeNodeState nodeState, String customIcon) throws IOException { + if (Strings.isNullOrEmpty(customIcon)) { + encodeDefaultIcon(context, treeNode, nodeState.getIconClass()); } else { - encodeCustomHandle(context, treeNode, nodeState.getCustomHandleClass(), cutomIcon); + encodeCustomIcon(context, treeNode, nodeState.getCustomIconClass(), customIcon); } } } Modified: trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeState.java =================================================================== --- trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeState.java 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/java/org/richfaces/renderkit/TreeNodeState.java 2010-11-18 16:10:17 UTC (rev 20091) @@ -24,19 +24,19 @@ import org.richfaces.component.util.HtmlUtil; public enum TreeNodeState { - expanded("rf-tr-nd-exp", "rf-trn-hnd-exp", "rf-trn-hnd-exp rf-trn-hnd-cst", "rf-trn-ico-nd") { + expanded("rf-tr-nd-exp", "rf-trn-hnd-exp", "rf-trn-ico-exp") { @Override public boolean isLeaf() { return false; } }, - collapsed("rf-tr-nd-colps", "rf-trn-hnd-colps", "rf-trn-hnd-colps rf-trn-hnd-cst", "rf-trn-ico-nd") { + collapsed("rf-tr-nd-colps", "rf-trn-hnd-colps", "rf-trn-ico-colps") { @Override public boolean isLeaf() { return false; } }, - leaf("rf-tr-nd-lf", "rf-trn-hnd-lf", "rf-trn-hnd-lf rf-trn-hnd-cst", "rf-trn-ico-lf") { + leaf("rf-tr-nd-lf", "rf-trn-hnd-lf", "rf-trn-ico-lf") { @Override public boolean isLeaf() { return true; @@ -45,17 +45,17 @@ private String nodeClass; - private String defaultHandleClass; + private String handleClass; - private String customHandleClass; + private String iconClass; - private String iconClass; + private String customIconClass; - private TreeNodeState(String nodeClass, String defaultHandleClass, String customHandleClass, String iconClass) { + private TreeNodeState(String nodeClass, String defaultHandleClass, String iconClass) { this.nodeClass = nodeClass; - this.defaultHandleClass = HtmlUtil.concatClasses(defaultHandleClass, "rf-trn-hnd"); - this.customHandleClass = HtmlUtil.concatClasses(customHandleClass, "rf-trn-hnd"); - this.iconClass = iconClass; + this.handleClass = HtmlUtil.concatClasses(defaultHandleClass, "rf-trn-hnd"); + this.iconClass = HtmlUtil.concatClasses(iconClass, "rf-trn-ico"); + this.customIconClass = HtmlUtil.concatClasses(this.iconClass, "rf-trn-ico-cst"); } public abstract boolean isLeaf(); @@ -64,15 +64,15 @@ return nodeClass; } - public String getDefaultHandleClass() { - return defaultHandleClass; + public String getHandleClass() { + return handleClass; } public String getIconClass() { return iconClass; } - public String getCustomHandleClass() { - return customHandleClass; + public String getCustomIconClass() { + return customIconClass; } } \ No newline at end of file Modified: trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.ecss =================================================================== --- trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.ecss 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.ecss 2010-11-18 16:10:17 UTC (rev 20091) @@ -58,7 +58,7 @@ background: "url(#{resource['org.richfaces.images:minus.png']}) no-repeat center"; } -.rf-trn-ico-nd { +.rf-trn-ico-exp, .rf-trn-ico-colps { background: "url(#{resource['org.richfaces.images:node_icon.gif']}) no-repeat center"; } @@ -66,12 +66,12 @@ background: "url(#{resource['org.richfaces.images:leaf_icon.gif']}) no-repeat center"; } -.rf-trn-hnd-cst { - background: none; +.rf-trn-ico-cst { + background-image: none; + background-position: 0% 0%; } -.rf-tr-nd-colps > .rf-trn > .rf-trn-hnd-exp, -.rf-tr-nd-exp > .rf-trn > .rf-trn-hnd-colps { +.rf-tr-nd-exp > .rf-trn > .rf-trn-cnt > .rf-trn-ico-colps, .rf-tr-nd-colps > .rf-trn > .rf-trn-cnt > .rf-trn-ico-exp { display: none; } Modified: trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.js =================================================================== --- trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.js 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/resources/META-INF/resources/org.richfaces/tree.js 2010-11-18 16:10:17 UTC (rev 20091) @@ -31,6 +31,8 @@ var TREE_HANDLE_CLASSES = ["rf-trn-hnd-colps", "rf-trn-hnd-exp"]; + var TREE_ICON_CLASSES = ["rf-trn-ico-colps", "rf-trn-ico-exp"]; + richfaces.ui = richfaces.ui || {}; richfaces.ui.TreeNode = richfaces.BaseComponent.extendClass({ @@ -65,14 +67,18 @@ }); }, - __getHandles: function() { - return this.__rootElt.find(" > .rf-trn:first > .rf-trn-hnd"); + __getHandle: function() { + return this.__rootElt.find(" > .rf-trn:first > .rf-trn-hnd:first"); }, __getContent: function() { return this.__rootElt.find(" > .rf-trn:first > .rf-trn-cnt:first"); }, + __getIcons: function() { + return this.__getContent().find(" > .rf-trn-ico"); + }, + getParent: function() { return this.__parent; }, @@ -157,11 +163,11 @@ switch (tree.getToggleType()) { case 'client': this.__rootElt.addClass(TREE_CLASSES[newState ? 1 : 0]).removeClass(TREE_CLASSES[!newState ? 1 : 0]); - - var handles = this.__getHandles(); - - if (handles.length == 1) { - handles.addClass(TREE_HANDLE_CLASSES[newState ? 1 : 0]).removeClass(TREE_HANDLE_CLASSES[!newState ? 1 : 0]); + this.__getHandle().addClass(TREE_HANDLE_CLASSES[newState ? 1 : 0]).removeClass(TREE_HANDLE_CLASSES[!newState ? 1 : 0]); + + var icons = this.__getIcons(); + if (icons.length == 1) { + icons.addClass(TREE_ICON_CLASSES[newState ? 1 : 0]).removeClass(TREE_ICON_CLASSES[!newState ? 1 : 0]); } this.__updateClientToggleStateInput(newState); Modified: trunk/ui/iteration/ui/src/main/templates/treeNode.template.xml =================================================================== --- trunk/ui/iteration/ui/src/main/templates/treeNode.template.xml 2010-11-18 16:05:30 UTC (rev 20090) +++ trunk/ui/iteration/ui/src/main/templates/treeNode.template.xml 2010-11-18 16:10:17 UTC (rev 20091) @@ -19,11 +19,11 @@ <cdk:object name="nodeState" value="#{getNodeState(facesContext)}" type="org.richfaces.renderkit.TreeNodeState" /> <div class="#{concatClasses('rf-trn', component.attributes['styleClass'])}"> - <cdk:call expression="encodeHandle(facesContext, component)" /> + <span class="#{concatClasses(nodeState.handleClass, component.attributes['handleClass'])}"></span> <span class="rf-trn-cnt"> - <span class="rf-trn-ico #{nodeState.iconClass}" /> - <span class="rf-trn-lbl"> + <cdk:call expression="encodeIcon(facesContext, component)" /> + <span class="#{concatClasses('rf-trn-lbl', component.attributes['labelClass'])}"> <cdk:body /> </span> </span>