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

}

References: http://docs.jboss.org/richfaces/latest_3_3_X/en/devguide/html/

http://livedemo.exadel.com/richfaces-demo/richfaces/tree.jsf?tab=model


Advertisement