Friday, July 06, 2012

JSF 2.1 Custom PrimeFaces 3.3 Tree Example

Custom PrimeFaces Tree
I was looking at the default implementation of PrimeFaces <p:tree /> and <p:treeNode />. The default looks nice, but I wanted a different look with different icons.

The icons I picked look more like "nodes" and "documents. The icons are by Yusuke Kamiyamane in his Fugue Icon set. These icons are released under a Creative Commons 3.0 Attribution License.

I also wanted a more flexible tree model with a custom TreeNode implementation that uses node types (node, leaf), and a data component which is represented by an Object.

The result is a nice looking tree that changes icons subtly on selection, or deselection of a node, and leaf nodes are displayed as document icons.

The Apache Maven project was developed using NetBeans 7, GlassFish 3.1.2, and PrimeFaces 3.3.1

The source code can be downloaded here: