Tree with context menu using JSF 2.0 and Hibernate

Question

I need to implement a content tree with context menu (add, delete, edit) in JSF 2.0. Please suggest me some components. The tree node should be an object like (Data, ID). When I click on tree node I need to get the id to backend bean.

Example:

index.xhtml

Prime Tree

        <p:growl id="messages" showDetail="true" />


        <p:tree value="#{treeBean.root}" var="node" id="pTree"
                selectionMode="single" selection="#{treeBean.selectedNode}">

            <p:treeNode>
                <h:outputText value="#{node}" />
            </p:treeNode>
        </p:tree>
        <p:contextMenu for="pTree" id="cmenu">
            <p:menuitem value="Add topic as child" update="pTree, cmenu"
                        actionListener="#{treeBean.addChildNode}" />
             <p:menuitem value="Add topic Below" update="pTree, cmenu"
                        actionListener="#{treeBean.addTopicBelow}" />
             <p:menuitem value="Delete Topic" update="pTree, cmenu"
                        actionListener="#{treeBean.deleteNode}" />
        </p:contextMenu>

    </h:form>
</h:body>

TreeBean.java

/* * To change this template, choose Tools | Templates * and open the template in the editor. */

package com.prime.tree;

import java.io.Serializable; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; import javax.faces.event.ActionEvent; import org.primefaces.model.DefaultTreeNode; import org.primefaces.model.TreeNode;

/** * * @author Veerendra */ @ManagedBean @SessionScoped public class TreeBean implements Serializable {

private TreeNode root;

private TreeNode selectedNode;

public TreeBean() {
    root = new DefaultTreeNode("Root", null);
    List rootNodes<Employee> = SearchDao.getRootNodes();

    Iterator it = rootNodes.iterator();
    while (it.hasNext()) {

        TreeNode node1 = new DefaultTreeNode(**it.next()**, root);
        **/* in place of it.next() I need to display empName. When I click on empName, I need to get the Id(Pkey). */**

    }

}

public TreeNode getRoot() {
    return root;
}

public TreeNode getSelectedNode() {
    return selectedNode;
}

public void setSelectedNode(TreeNode selectedNode) {
    this.selectedNode = selectedNode;
}



public void addChildNode(ActionEvent actionEvent) {
    System.out.println("Selected Node: "+getSelectedNode().toString());
    TreeNode newNode = new DefaultTreeNode("Node New", getSelectedNode());
    getSelectedNode().setExpanded(true);
}
public void addTopicBelow(ActionEvent actionEvent){
    TreeNode newNode = new DefaultTreeNode("Node New", getSelectedNode().getParent());
}
public void deleteNode(ActionEvent actionEvent){
     System.out.println("Node to be deleted: "+getSelectedNode().toString());
     //getSelectedNode().
}

}

Employee.java

public class Employee{

private String empID;
private String empName;

/**
 * @return the empName
 */
public String getEmpName() {
    return empName;
}

/**
 * @param empName the empName to set
 */
public void setEmpName(String empName) {
    this.empName = empName;
}

/**
 * @return the empID
 */
public String getEmpID() {
    return empID;
}

/**
 * @param empID the empID to set
 */
public void setEmpID(String empID) {
    this.empID = empID;
}

}

Answer 1

You could take a look at the Primefaces Tree component in combination with the ContextMenu.

You can build your tree in the backing bean and get the selected node as described in the examples of the Primefaces showcase.