CODEWITHSUNDEEP
primefaces
denis
denis

Reputation: 11

use primefaces tree component as a navigation menu

I am building a store website for my school and I am trying to add a tree as a category menu, but I cannot navigate to another page. I receive all the necessary data in the controller but I do not know how to navigate to the browseByCategory page.

I have to mention I am a noooobie in Java JSF. any code will be appreciated.

thank you, Denis

Upvotes: 1

Views: 6461

Answers (2)

waheed
waheed

Reputation: 164

Problem: The suggestions shared by r.piesnikowski are not correct. i.e. following code does not work:

DefaultTreeNode node0 = new DefaultTreeNode("<a href=\"http://www.google.pl\">http://www.google.pl</a>", null);

Also, the "nodeSelectListener" property does not exist in latest version of p:tree.

Solution: Correct way to use links in Primefaces TreeNode using h:outputLink is as following: 

<h:form>
  <p:tree value="#{treeView.root}" var="node">
       <p:treeNode>
           <h:outputLink value="#{node.url}">#{node.label}</h:outputLink>
       </p:treeNode>
  </p:tree>
</h:form>

Create another class (let's call it LinkNode) with two properties String url and String label. When you are creating a new node, pass the new object of LinkNode class with required url & label to new DefaultTreeNode(Object data, TreeNode parent) i.e. new DefaultTreeNode(new LinkNode("http://example.com","Go to example.com"), root). 

@Named
@ViewScoped
public class TreeView implements Serializable{
    private TreeNode root;

    @PostConstruct
    public void init() {
        root = new DefaultTreeNode("Root", null);
        TreeNode parent1 = new DefaultTreeNode(new LinkNode("http://example.com","Go to example.com"), root);
        TreeNode parent2 = new DefaultTreeNode(new LinkNode("http://example.org","Go to example.org"), root);
   }
}

and a LinkNode class like this:

public class LinkNode implements Serializable{
    private String label; // add setter & getter as needed
    private String link; // add setter & getter as needed

    LinkNode(String label, String link){
        this.label = label;
        this.link = link;
    }
}

Hope it helps. I have tested this method myself.

Upvotes: 2

r.piesnikowski
r.piesnikowski

Reputation: 2951

There are two ways of doing that: 1) You can navigate to another page with:

DefaultTreeNode node0 = new DefaultTreeNode("<a href=\"http://www.google.pl\">http://www.google.pl</a>", null);

2) or in your nodeSelectEvent something like this:

 <p:tree dynamic="true" value="#{TreeBean.root}" var="node" expandAnim="FADE_IN" collapseAnim="FADE_OUT" nodeSelectListener="#{TreeBean.onNodeSelect}">
            <p:treeNode>
                <h:outputText value="#{node}" /> 
            </p:treeNode>
        </p:tree>



public void onNodeSelect(NodeSelectEvent event){
        String url = event.getTreeNode().getData().toString();
        System.out.println(event.getTreeNode().getData().toString());
        try {
            //redirection
            FacesContext.getCurrentInstance().getExternalContext().redirect(url);
        } catch (IOException ex) {
            //Logger.getLogger(TreeBean.class.getName()).log(Level.SEVERE, null, ex);
        } 
    }

Upvotes: 2

Related Questions