A JSF tree using ui:include

Posted on by

I’m in the process of converting Oddjob’s Web App from Struts 1 to JSF 2.1. The left panel is a job tree that consists of nested unordered lists. In Struts this was achieved using Nested Taglib functionality but how should I do the same in JSF? Googling didn’t find an example so here’s mine.

First a tree,

@ManagedBean
public class MyTree {

	MyTreeNode root = new MyTreeNode("Root", 
			new MyTreeNode("A", 
					new MyTreeNode("1"), new MyTreeNode("2")),
			new MyTreeNode("B", 
							new MyTreeNode("x"), new MyTreeNode("y"))
			);
	
	public MyTreeNode getRoot() {
		return root;
	}
}

Of tree nodes.

public class MyTreeNode {

    final List<MyTreeNode> children;

    final String name;
        
    public MyTreeNode(String name, MyTreeNode... children) {
    	this.name = name;
    	this.children = Arrays.asList(children);
	}
    
    public List<MyTreeNode>getChildren() {
        return children;
    }
    
    public boolean isHasChildren() {
    	return children.size() > 0;
    }
    
    public String getName() {
		return name;
	}
}

Then two facelet pages. tree.xhtml,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <body>
		<ul>
	    	<ui:include src="node.xhtml">
	    		<ui:param name="node" value="#{myTree.root}" />
	    	</ui:include>
    	</ul>
    </body>
</html>

and node.xhtml that calls itself recursively

<ui:composition lang="en" xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

	<li>#{node.name} 
		<c:if test="#{node.hasChildren}">
			<ul>
				<c:forEach items="#{node.children}" var="node">
					<ui:include src="node.xhtml" />
				</c:forEach>
			</ul>
		</c:if>
	</li>
</ui:composition>

Which gives:

JSF Tree with ui:includeNow if everything else in JSF is as easy as that I should have this new front end up in no time!