Attention: This component is still under progress and experimental.
b:tree The tree tag renders an HTML element of the type "div" using Trivial Components Tree.
Tag attributes
rendered
hideRootNode
placeholder
spinnerText
noEntriesText
searchBarMode
Tag controls
template
ajax selection
icons
nodes expanded
Rendered output

Selected value:
-
                            <!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://xmlns.jcp.org/jsf/html" 
      xmlns:f="http://xmlns.jcp.org/jsf/core" 
      xmlns:b="http://butterfaces.org/components"> 
<h:head /> 
<body>
    <h:form id="formId">
        <b:tree id="input"
                value="#{myBean.treeModel}"
                nodeSelectionListener="#{myBean}"
                hideRootNode="false"
                searchBarMode="always-visible"
                placeholder="Search..."
                rendered="true">
            <!-- use toggle to activate selection listener -->
            <f:ajax event="click" render="nodeTitle"/>
            <!-- use toggle to activate expansion listener -->
            <f:ajax event="toggle" render="nodeTitle"/>
        </b:tree>

    <h:panelGroup id="nodeTitle">
            <h:output value="#{myBean.selectedNode.title}"
                      rendered="#{not empty myBean.selectedNode}"/>
    <h:panelGroup/>

    </h:form> 
</body> 
</html>
                        
                            package de.larmic.tree.demo;

import import de.larmic.butterfaces.event.TreeNodeSelectionEvent;
import import de.larmic.butterfaces.event.TreeNodeSelectionListener;
import import de.larmic.butterfaces.model.tree.Node;
import import de.larmic.butterfaces.model.tree.DefaultNodeImpl;
import import javax.faces.view.ViewScoped;
import import javax.inject.Named;

@ViewScoped
@Named
public class MyBean implements Serializable, TreeNodeSelectionListener {

    private Node selectedNode;

    private Node rootNode;

    public Node getTreeModel() {
        if (rootNode == null) {
            final Node firstChild = new DefaultNodeImpl("firstChild");
            firstChild.setDescription("23 unread");
            firstChild.setImageIcon("some/path/16.png");
            final Node secondChild = new DefaultNodeImpl("second");
            secondChild.setCollapsed(true);
            secondChild.setImageIcon("some/path/16.png");
            secondChild.getSubNodes().add(new DefaultNodeImpl("..."))
            ...
            rootNode = new DefaultNodeImpl("rootNode");
            rootNode.setImageIcon("some/path/16.png");
            rootNode.getSubNodes().add(firstChild);
            rootNode.getSubNodes().add(secondChild);
        }
        return rootNode;
    }

    @Override
    public void processTableSelection(final TreeNodeSelectionEvent event) {
        selectedNode = event.getNewValue();
    }

    public Node getSelectedNode() {
        return selectedNode;
    }

}
                        
                            <?xml version="1.0" encoding="UTF-8"?> 
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
                             http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
         version="3.0"> 

  <!-- Text showing if no entry is found -->
  <!-- Could be overridden by noEnttriesText component attribute -->
  <!-- default is 'No matching entries...' -->
  <context-param>
     <param-name>org.butterfaces.noEntriesText</param-name>
     <param-value>No matching entries...</param-value>
  </context-param>

  <!-- Text showing if entries are loading -->
  <!-- Could be overridden by spinnerText component attribute -->
  <!-- default is 'Fetching data...' -->
  <context-param>
     <param-name>org.butterfaces.spinnerText</param-name>
     <param-value>Fetching data...</param-value>
  </context-param>

  <!-- If true, it shows 'x'-button to delete the selected entry. -->
  <!-- Could be overridden by showClearButton component attribute -->
  <!-- default is true -->
  <context-param>
     <param-name>org.butterfaces.treebox.showClearButton</param-name>
     <param-value>true</param-value>
  </context-param>

</web-app>