3 Replies Latest reply on Apr 18, 2015 9:15 PM by przemeck

    Richfaces 4 - expand some tree node

    andrei.a

      Hello,

      I want to render tree with some opened node. For node selection i can use 'selection' attribute that binded with collection of SequenceRowKey.

       

      Example:

       

      <rich:tree ... selection="#{treeBean.selected}">

          <rich:treeNode.../>

          <rich:treeNode.../>

          <rich:treeNode.../>

          <rich:treeNode.../>

          <rich:treeNode.../>

          etc.

      </rich:tree>

       

      public Collection<Object> getSelected() {

          Collection<Object> selected = new ArrayList<Object>();

          selected.add(new SequenceRowKey("1", "2", "3"));

          return selected;

      }

       

      It works good.

       

      How can i expand the node with key "2"? I tried to find attribute like 'selection' for node expansion. But unfortunately there is no such attribute.

      RF 3.3 tree contains treeStateAdvisor which we use for node expansion and selection.

       

      Now I can write something like this:

      <rich:tree ... >

          <rich:treeNode type="a" expanded="#{node.expanded}".../>

          <rich:treeNode type="b" expanded="#{node.expanded}".../>

          <rich:treeNode type="c" expanded="#{node.expanded}".../>

          <rich:treeNode type="d" expanded="#{node.expanded}".../>

          <rich:treeNode type="e" expanded="#{node.expanded}".../>

          <rich:treeNode type="f" expanded="#{node.expanded}".../>

          etc.

      </rich:tree>

       

      but out tree has 15 types of node...

       

      You shouldn't broke down tree component.

      Actually Tree and Upload the most unfinished components. Not for production.

        • 1. Re: Richfaces 4 - expand some tree node
          nbelaevski

          Hi Andrei,

           

          Sorry, but not getting your point. Can you please clarify why do you need 15 different types of nodes?

          • 2. Re: Richfaces 4 - expand some tree node
            chris2209

            This example shows how you can collapse/expand the node with all their subnodes with a doubleclick.

             

            In your xhtml page:

             

            <rich:tree id="tree" var="node" toggleType="ajax"

                 value="#{backingTreeBean.rootNodes}" nodeType="#{node.type}"

                 selectionType="ajax" 

                 selectionChangeListener="#{backingTreeBean.selectionChanged()}">

             

                 <rich:treeNode id="treeNode" type="#{node.type}" ondblclick="toggleAllNodes()" expanded="#{node.expanded}">

                 ...

                     

                      <a4j:jsFunction name="toggleAllNodes" actionListener="#{backingTreeBean.expandCollapseNodes}" render="tree" execute="@this" />

                 </rich:treeNode>

            </rich:tree>

             

            public class Project implements TreeNode {

                 private boolean expanded;

                 ...

            }

             

            public class ComponentObject implements TreeNode {

                 private boolean expanded;

                 ...

            }

             

            In BackingBean:

             

            public void selectionChanged(TreeSelectionChangeEvent selectionChangeEvent) {

                // considering only single selection

                List<Object> selection = new ArrayList<Object>(

                        selectionChangeEvent.getNewSelection());

                if (selection == null || selection.isEmpty()) {

                    return;

                }

                Object currentSelectionKey = selection.get(0);

                UITree tree = (UITree) selectionChangeEvent.getSource();

             

                Object storedKey = tree.getRowKey();

                tree.setRowKey(currentSelectionKey);

                currentSelection = (TreeNode) tree.getRowData();

                tree.setRowKey(storedKey);

            }

             

            public void expandCollapseNodes(ActionEvent event) {

                UIFunction uif = (UIFunction) event.getSource();

                UITreeNode treeNode = (UITreeNode) uif.getParent();

                UITree uiTree = (UITree) treeNode.getParent();

                Collection<Object> selection = uiTree.getSelection();

                if (selection != null && !selection.isEmpty()) {

                    Object[] sel = selection.toArray();

                    if (sel == null || sel.length == 0 || sel[0] == null) {

                        return;

                    }

                    SequenceRowKey srKey = (SequenceRowKey) sel[0];

                    uiTree.setRowKey(srKey);

                    TreeNode node = (TreeNode) uiTree.getRowData();

                    if (node == null) {

                        return;

                    }

                    boolean expand = false;

                    if (node instanceof Project) {

                        expand = !((Project)node).isExpanded();

                    }

                    if (node instanceof ComponentObject) {

                        expand = !((ComponentObject)node).isExpanded();

                    }

                    expandCollapse(node, expand);

                }

            }

             

            private void expandCollapse(TreeNode node, boolean expand) {

                if (node instanceof Project) {

                    Project p = (Project) node;

                    p.setExpanded(expand);

                }

                if (node instanceof ComponentObject) {

                    ComponentObject co = (ComponentObject) node;

                    co.setExpanded(expand);

                }

                if (node instanceof Asset) {

                    Asset a = (Asset) node;

                    return;

                }

                if (node.children() != null && node.children().hasMoreElements()) {

                    Enumeration childs = node.children();

                    while (childs.hasMoreElements()) {

                        expandCollapse((TreeNode) childs.nextElement(), expand);

                    }

                }

            }

            • 3. Re: Richfaces 4 - expand some tree node
              przemeck

              For each node type, you can provide relevant node class. Each of these classes can be derived from let's say:

               

                   public class YourNodeA extends BaseTreeNode {}

                   public class YourNodeB extends BaseTreeNode {}

                   (..)

               

              public class BaseTreeNode extends TreeNodeImpl implements Serializable {

                     private boolean expanded;

               

                     public boolean isExpanded() {

                           return expanded;

                     }

               

                     public void setExpanded(boolean expanded) {

                           this.expanded = expanded;

                     }

              }

               

              That's how you bind your

               

                   <rich:tree ... >

                      <rich:treeNode type="a" expanded="#{node.expanded}".../>

                      <rich:treeNode type="b" expanded="#{node.expanded}".../>

                      (..)

                   </rich:tree>

               

              (1) Next, if You want some paths beeing expanded on init, you can just configure when constructing tree nodes (passed later to <rich:tree value="treeBean.rootNodes">) by calling setExpanded(expanded) e.g. in their constructor.

              (2) If you want to expand / collapse some path ( let's say SequenceRowKey["key1", "key2"] ) later, on demand:

               

                   BaseNode parent = (BaseNode) rootNode.getChild("key1");

                   parent.setExpanded(true);

                   BaseNode node = (BaseNode) parent.getChild("key2");

                   node.setExpanded(true);



              If You need working demo example of node's collapsing / expanding and selecting pogramatically please read my post:


                   Web and mobile developer's site: Interactions with RichTree


              There are: description, deployed app and GitHub repo.

              I used RichFaces 4.5.4