RichFaces tree example

User Rating: 4 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Inactive

RichFaces tree example

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.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();

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

    private void loadTree() {
        Properties p = new Properties();
        try {
        } catch (IOException e) { 

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

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

    public TreeNode getTreeNode() {
        if (rootNode == null) {
        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="" prefix="a4j"%>
<%@ taglib uri="" prefix="rich"%>
<%@ taglib uri="" prefix="h"%>
<%@ taglib uri="" prefix="f"%>
        <h:panelGrid columns="2" width="100%" columnClasses="col1,col2">
            <rich:tree style="width:300px" nodeSelectListener="#{simpleTreeBean.processSelection}" 
                value="#{simpleTreeBean.treeNode}" var="item" ajaxKeys="#{null}">
            <h:outputText escape="false" value="Selected Node: #{simpleTreeBean.nodeTitle}" id="selectedNode" />

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

This is a sample 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()
            Reader reader = new InputStreamReader(inputStream,"UTF-8");         
            InputSource is = new InputSource(reader);

            rootNode =; 

         } catch (SAXException e) { 
        } catch (IOException e) {