rich:tree with JQuery.UI Layout failure
shadowcreeper Sep 3, 2009 7:50 PMWhen using rich:tree in a left (west) pane of a JQuery.UI layout, the root tree nodes all get screwed up whenever I collapse/uncollapse the left pane.
Trying the included code, just collapse the left pane (by clicking on the center of the border bar), then uncollapse it and mouse-over the stuff in the tree. You will see that the root nodes get the hover class applied but will never remove it. If they had child nodes, you would also see that you cannot toggle them (show/hide children). This messed up behavior remains in effect until you refresh the page.
Please help me. I cannot figure out what is causing this. Only root tree nodes are affected.
I got the JQuery.UI layout JS files from: http://layout.jquery-dev.net/downloads.html.
I am using v1.2.0 of the layout, and RichFaces 3.3.1.GA under Tomcat 6.
Here is a simplified version of the page I use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %> <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %> <%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %> <%@ taglib uri="https://ajax4jsf.dev.java.net/ajax" prefix="a4j" %> <%@ taglib uri="http://richfaces.ajax4jsf.org/rich" prefix="rich" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <f:view> <t:document> <t:documentHead> <a4j:loadScript src="resource://jquery.js"/> <a4j:loadScript src="/js/layout/jquery.ui.all.js"/> <a4j:loadScript src="/js/layout/jquery.layout.min.js"/> <script type="text/javascript"> var m_outerLayout; jQuery(document).ready(function () { m_outerLayout = jQuery('body').layout( { slideTrigger_open: "mouseover", west__resizable: true, west__slidable: true, west__closable: true }); }); </script> </t:documentHead> <t:documentBody> <h:form id="myForm"> <%-- The UserList tree on the left side of the page --%> <a4j:region id="myRegion"> <t:div styleClass="ui-layout-west" style="overflow: auto;"> <rich:tree id="textSelector" switchType="client"> <rich:treeNodesAdaptor var="text" nodes="#{BeanName.listOfStrings}"> <rich:treeNode onselected="alert('#{text} selected');"> <h:outputText value="#{text}"/> </rich:treeNode> </rich:treeNodesAdaptor> </rich:tree> </t:div> </a4j:region> <t:div styleClass="ui-layout-center" style="overflow: auto; margin: 10px;"> <h:outputText value="Center Panel"/> </t:div> </h:form> </t:documentBody> </t:document> </f:view>
Also, this CSS will help you see the borders:
/* css styles for the jQuery ui layout classes */ .ui-layout-pane { background-color: #FFFFFF; } .ui-layout-resizer { background-color: #DDDDDD; }
Thanks.