2 Replies Latest reply on Jun 10, 2011 10:10 AM by Doug Costa

    <rich:tree> how to keep state

    Doug Costa Newbie

      For my application I am using <rich:tree> as a navigation menu.  When a user clicks on a node in the tree the appropriate page is loaded.  Currently when the user clicks on the nodes they navigate to the correct page but the tree is rendered collapsed.  I want it to work such that the tree will be rendered exactly as it was before the navigation to the next page. 

      The tree is part of a common template for all the pages which includes a top menu, the side menu with the tree for navigation, and a content area.  The tree itself is in its own xhtml file which is included in the template using a <ui:include>. 

       

      I have done a lot of searching looking for a solution to this problem but so far almost everything I have found is for earlier versions of richfaces.  I am using 4.0.0.Final and have not found much of anything relating to it.  I tried binding the tree to a UITree component in my bean but that gave me duplicate Id exceptions.  And when I did manage to get around the duplicate Id exceptions it rendered completely wrong after navigating to a second page after the welcome page. Instead of rendering as a tree it rendered all the nodes without any toggling ability, rendered all of the icons, both expanded and closed along with the leaf icons.

      I saw information about componentState and adviseNodeOpened for previous versions of richfaces but I have not seen anything that would replace them in 4.0.0.Final. 

       

      here is my tree:

      <r:tree  id="richTreeBar" value="#{richTree.rootNode}"  var="node" toggleType="client" selectionType="ajax" nodeType="#{node.type}"
               iconExpanded="/resources/images/FolderOpen_web.png" iconCollapsed="/resources/images/FolderClosed_web.png"
               iconLeaf="/resources/images/Worksheet_web_mini.png" rowKeyConverter="org.richfaces.IntegerSequenceRowKeyConverter" >
          <r:treeNode id="rootNode" type="folder" iconExpanded="/resources/images/FolderOpen_web.png" iconCollapsed="/resources/images/FolderClosed_web.png"
                      style="#{node.style}">
              <h:commandButton id="rootNodeOutput" action="#{richTree.nodeRowClick}" value="#{node}"
                               style="border: 0px; background-color: transparent; background-image: none; font-size: 9pt; color: inherit">
                  <f:setPropertyActionListener target="#{richTree.selectedNode}" value="#{node}" />
              </h:commandButton>
          </r:treeNode>
          <r:treeNode id="leafNode" type="leaf" iconLeaf="/resources/images/Worksheet_web_mini.png" style="#{node.style}">
              <h:commandButton id="leafNodeOutput" action="#{richTree.nodeRowClick}" value="#{node}"
                               style="border: 0px; background-color: transparent; background-image: none; font-size: 9pt; color: inherit">
                  <f:setPropertyActionListener target="#{richTree.selectedNode}" value="#{node}" />
              </h:commandButton>
          </r:treeNode>
          <r:treeNode id="locationNode" type="location" iconExpanded="/resources/images/HOME_webHI.png" iconCollapsed="/resources/images/HOME_webHI.png"
                      style="#{node.style}">
              <h:commandButton id="locationNodeOutput" action="#{richTree.nodeRowClick}" value="#{node}"
                               style="border: 0px; background-color: transparent; background-image: none; font-size: 9pt; color: inherit">
                  <f:setPropertyActionListener target="#{richTree.selectedNode}" value="#{node}" />
              </h:commandButton>
          </r:treeNode>
      </r:tree>
      

       

      and here is my backingbean which is session scoped:

      package com.agois.wcpps.jsf.tree;
      
      import java.io.Serializable;
      import java.util.ArrayList;
      import java.util.List;
      import javax.faces.context.FacesContext;
      import javax.faces.event.AbortProcessingException;
      import org.richfaces.component.UITree;
      import org.richfaces.event.TreeSelectionChangeEvent;
      import org.richfaces.event.TreeSelectionChangeListener;
      import org.richfaces.model.TreeNode;
      
      /**
       *
       * @author DCosta
       */
      public class RichTree implements  TreeSelectionChangeListener{ 
      
          //private ArrayList<CTClaim> claimList;
          private TreeNode rootNode;
          private UITree treeBinding;
          private AGOTreeNode selectedNode;
          private static final String unselectedStyle = "color: white;";
          private static final String selectedStyle = "background-color: white; color: black;";
      
          public RichTree() {
              rootNode = new AGOTreeNode();
              selectedNode = new AGOTreeNode();
              loadTree();
          }
      
          /**
           * @return the rootNode
           */
          public TreeNode getRootNode() {
              return rootNode;
          }
      
          public void setRootNode(TreeNode rootNode) {
              this.rootNode = rootNode;
          }
      
          private void loadTree() {
              . . .   
          }
      
          /**
           * @return the treeBinding
           */
          public UITree getTreeBinding() {
              return treeBinding;
          }
      
          /**
           * @param treeBinding the treeBinding to set
           */
          public void setTreeBinding(UITree treeBinding) {
              this.treeBinding = treeBinding;
          }
          public Boolean adviseNodeOpened(UITree tree) {
              return Boolean.TRUE;
          } 
      
          public String nodeRowClick(){
              return selectedNode.getNavigationString();
          }
      
          /**
           * @return the selectedNode
           */
          public AGOTreeNode getSelectedNode() {
              return selectedNode;
          } 
          /**
           * @param selectedNode the selectedNode to set
           */
          public void setSelectedNode(AGOTreeNode selectedNode) {
              this.selectedNode.setStyle(unselectedStyle);
              this.selectedNode = selectedNode;
              this.selectedNode.setStyle(selectedStyle);
          }    
      }