Fork me on GitHub
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
Tag controls
  • default Childs will rendered with default template as nodes.
  • custom Use custom template for nodes rendering. See facet in showcase.
Change it and see JSF example.
component
-
 
                            <!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 org.butterfaces.tree.demo;

import import org.butterfaces.event.TreeNodeSelectionEvent;
import import org.butterfaces.event.TreeNodeSelectionListener;
import import org.butterfaces.model.tree.Node;
import import org.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>