Time for action – creating ContextMenu for the Tree component

In this section, we will take a look at how we can integrate ContextMenu with Tree, so that we will see a custom menu instead of the browser menu, when you right-click on any Tree node, by performing the following steps:

1. Create a Tree component with single selection mode having different node types such as document, picture, and video:

   <p:tree id="docTree" value="#{treeController.rootx}" var="node" animate="true" style="width: 350px;"
       selectionMode="single"  selection="#{treeController.selectedNode}">  
       <p:ajax event="select" update=":form:docNode,:form:picNode" />
       <p:treeNode expandedIcon="ui-icon-folder-open" collapsedIcon="ui-icon-folder-collapsed">  
           <h:outputText value="#{node}"/>  
       </p:treeNode>  
       <p:treeNode type="document" icon...