RichFaces tree example

Important notice: Richfaces framework reached End of Life in 2016. Therefore, you cannot expect fixes or enhancements unless you fork the project and upgrade yourself the framework.
We recommend reading these guidelines, if you want to modernize your Richfaces application: How to migrate Richfaces Web applications to another Web UI

RichFaces tree component is designed for hierarchical data presentation and is applied for building a tree structure with a drag-and-drop capability.

The following example shows how to generate a RichFaces tree from a property file.

(The keys of the Property file will determine the hierarchy of the tree).

package my_tree;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import java.util.Properties;

import org.richfaces.component.html.HtmlTree;
import org.richfaces.event.NodeSelectedEvent;
import org.richfaces.model.TreeNode;
import org.richfaces.model.TreeNodeImpl;

public class SimpleTreeBean {
    protected org.richfaces.component.UITree sampleTreeBinding;
    
    public org.richfaces.component.UITree getSampleTreeBinding() {
        return sampleTreeBinding;
    }

    public void setSampleTreeBinding(
            org.richfaces.component.UITree sampleTreeBinding) {
        this.sampleTreeBinding = sampleTreeBinding;
    }

    private TreeNode rootNode = null;
    private List<String> selectedNodeChildren = new ArrayList<String>();    

    private String nodeTitle;
     
    private void addNodes(String path, TreeNode node, Properties properties) {
        boolean end = false;
        int counter = 1;

        while (!end) {
            String key = path != null ? path + '.' + counter : String.valueOf(counter);

            String value = properties.getProperty(key);
            if (value != null) {
                TreeNodeImpl nodeImpl = new TreeNodeImpl();

                nodeImpl.setData(value);
                node.addChild(new Integer(counter), nodeImpl);
                addNodes(key, nodeImpl, properties);
                counter++;
            } else {
                end = true;
            }
        }
    }

    private void loadTree() {
        Properties p = new Properties();
        try {
            p.load(Thread.currentThread()
                    .getContextClassLoader()
                    .getResourceAsStream("richtree.properties"));
        } catch (IOException e) { 
              e.printStackTrace();
        }


        rootNode = new TreeNodeImpl();
        addNodes(null, rootNode, p); 
    }  

    public void processSelection(NodeSelectedEvent event) {
        HtmlTree tree = (HtmlTree) event.getComponent();
        nodeTitle = (String) tree.getRowData();
        selectedNodeChildren.clear();
        TreeNode currentNode = tree.getModelTreeNode(tree.getRowKey());
        if (currentNode.isLeaf()){
            
            selectedNodeChildren.add((String)currentNode.getData());
        }else
        {
            Iterator<Map.Entry<Object, TreeNode>> it = currentNode.getChildren();
            while (it!=null &&it.hasNext()) {
                Map.Entry<Object, TreeNode> entry = it.next();
                selectedNodeChildren.add(entry.getValue().getData().toString()); 
            }
        }
    }

    public TreeNode getTreeNode() {
        if (rootNode == null) {
            loadTree();
        }
        return rootNode;
    }



    public String getNodeTitle() {
        return nodeTitle;
    }

    public void setNodeTitle(String nodeTitle) {
        this.nodeTitle = nodeTitle;
    }


}

And this is the tree.jsp which displays the Richfaces tree:

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<html>
<head>
<title>tree</title>
</head>
<body>
<f:view>
    <h:form>    
        <h:panelGrid columns="2" width="100%" columnClasses="col1,col2">
        
            <rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}" 
                reRender="selectedNode"  
                 binding="#{simpleTreeBean.sampleTreeBinding}"
                
                value="#{simpleTreeBean.treeNode}" var="item" ajaxKeys="#{null}">
            </rich:tree>
            
            <h:outputText escape="false" value="Selected Node: #{simpleTreeBean.nodeTitle}" id="selectedNode" />
        
        </h:panelGrid>
  
    </h:form>
</f:view>
</body>
</html>

Remember to include in your faces-config.xml the SimpleTreeBean (You may use annotations if running a JSF 2 compliant server).

<managed-bean>             
        <managed-bean-name>simpleTreeBean</managed-bean-name>
        <managed-bean-class>my_tree.SimpleTreeBean</managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
</managed-bean>

This is a sample richtree.properties file:

1=Root Node 1
2=Root Node 2
3=Root Node 3
1.1=Leaf 1.1
1.1.1=Leaf 1.1.1
1.1.2=Leaf 1.1.2
1.1.3=Leaf 1.1.3
1.1.4=Leaf 1.1.4
1.1.5=Leaf 1.1.5
2.1=Leaf 2.1
2.1.1=Leaf 2.1.1
2.1.2=Leaf 2.1.2
2.1.3=Leaf 2.1.3
2.1.4=Leaf 2.1.4
2.1.5=Leaf 2.1.5
3.1=Leaf 3.1
3.1.1=Leaf 3.1.1
3.1.2=Leaf 3.1.2
3.1.3=Leaf 3.1.3
3.1.4=Leaf 3.1.4
3.1.5=Leaf 3.1.5

richfaces tree example

Creating a RichFaces Tree from an XML file:

Implementation of the  <rich:tree>   component provides another way to build a tree. This approach implies using a XmlTreeDataBuilder that allows to transform XML into structures of objects containing “XmlNodeData” instances as data, which could be represented by the  <rich:tree>   component.

All you have to change, is the loadTree method as follows:

private void loadTree() {

        try {
            InputStream inputStream= Thread.currentThread()
                    .getContextClassLoader()
                    .getResourceAsStream("data.xml");
            
            Reader reader = new InputStreamReader(inputStream,"UTF-8");         
            InputSource is = new InputSource(reader);

            rootNode = XmlTreeDataBuilder.build(is); 

         } catch (SAXException e) { 
           e.printStackTrace();
        } catch (IOException e) { 
          e.printStackTrace();
        }

}
Found the article helpful? if so please follow us on Socials