Fill a treeview programmatically

You must build a collection of TreeNode objects and add this collection to the TreeView control. Each TreeNode object has several properties to set up the visual appearance and functionality.

Important TreeNode properties

expanded - Shows this node expaned with children
ext - Title text of the node
target - Target browser window
toolTip - Tooltip text to display
url - Hyperlink to navigate to
action - Name of method to call if user selects this node
actionListenerExpression - Expression for action listener method.

Adding icon to TreeNode

To add a icon to the TreeNode you must first create a ImageComponent. Now you can set the theme specific icon with the setIcon method. Use a constant of class ThemeImages for the icon name. Add the created ImageComponent as facet to the TreeNode.


  1. ImageComponent image = new ImageComponent();
  2. image.setIcon( TreeImages.TREE_FOLDER );
  3. treeNode.getFacets().put( treeNode.IMAGE_FACET_KEY, image );

Setting Action Expression for TreeNode

To set the Action Expression of a TreeNode you must use the method setActionExpression of the TreeNode object. This method needs a MethodExpression object as parameter.

Sample code:

  1. ExpressionFactory ef = FacesContext.
  2. getCurrentInstance().
  3. getApplication().
  4. getExpressionFactory();
  5. ELContext elContext = FacesContext.
  6. getCurrentInstance().
  7. getELContext();
  8. MethodExpression me = ef.createMethodExpression(
  9. elContext,
  10. "#{Page1.treeNode_action}",
  11. String.class, new Class[]{} );
  12. treeNode.setActionExpression( me );

Leave a comment