Richfaces Tree - simple case

RichFaces Tree basics

RichFaces framework is providing a convenient approach for rendering trees in a browser. Information on the RichFaces tree component are found here.

There are few steps to be taken, when implementing a tree. These are:

1. Creating your tree model class, which will hold the data that should be rendered by the tree.
2. You have to include the RichFaces tree tag in your form, weather JSP or XHTML.
3. Bind your tree model class with the tree tag using the JSF Expression language.

This tree steps are not that unfamiliar to any JSF developer. So let's look closely to them.

Let us start with step one and discuss the model class. Good way to start coding your model class is to extend the org.richfaces.model.TreeNode Interface provided by RichFaces. This interface is implementing all important methods needed by the tree to render your data. Another convinient way of providing your model for a tree is to use the RichFaces implementation org.richfaces.model.TreeNodeImpl of the above mentioned interface.

This is really the basic and most likely all that one need for a simple RichFaces tree.

Let us examine how a tree can be implemented as a set of objects!?

As a entry point we need a root node. Each root node have this attributes:

1. Root node has no parent.
2. Root node has one or many children.
3. Root node has a name and id.
4. Root node must not have a name.
5. Root node is also a folder.
   

So for construction our tree model , we need a root node. This can be done by instantiating the TreeNodeImpl class this way:

public class TreeModel {
private  org.richfaces.model.TreeNodeImpl root;

// GETTER and SETTER

//Constructor
public TreeModel(){
root = new org.richfaces.model.TreeNodeImpl();
 root.setParent(null);
 root.setData("Name of my Root Node");
}

}

That ain't that hard, don't you think?
Now that we have the root node, we can fill it with it's content or children nodes this way:

public class TreeModel{

public List treeContent;
public void propagateTree(){

for(Iterator it = treeContent.iterator(); it.hasNext();){
  TreeNodeImpl node = new TreeNodeImpl();
  NameIdPair pair = (NameIdPair) it.next();
  node.setData(pair.getName());
  node.setParent(root);
  root.addChild(pair.getId(),node);
}
}
}

The class NameIdPair is only a data object contain two fields, name and id and it's getter and setter methods. The data in the list can be retrieved from a data base or any content management system.

In this case, the root node will become will become one level nodes, dependent on how many entries were saved in the list.

Now that we have our simple model, we need a tree that will render it.

The following is convenient way how to use the tree tag:

rerender="selectedNode"
ajaxsubmitselection="true" switchtype="ajax" 
treenodevar="TreeNodeVar"
value="#{treeDataProvider.rootNode}" 
var="treeItem" ajaxkeys="#{null}" 
nodeface="node">

 iconleaf="/icons/folder.png" icon="/icons/folder.png">
  
 

As you can see, the tag is very simple. The following points are worth mentioning:

1. The root node we propagated and filled with other nodes is bound to the value property of the tree. The tree tag will dynamically load the root node and will render it and it's content.
2. RichFaces tree tag provides three operating modes of rendering: server, ajax, client. The most convenient way is the ajax mode, which will update the tree with ajax and let you select a node with the help of ajax. The client mode is only good for small trees as the one in our example. It will render the whole content with java script to your brower. If you choice is the server mode, you will have to find a way how to pos a request to the server, so that your selection or model update take place.