JSF 2 Prime Faces Navigation Using Menu and Panels

17,717

Something like this JSF dynamic include using Ajax request.

In your p:menuItem use action attribute instead of url, to make ajaxcal and in the center panel you can use h:include and change the value of the src attribute in h:include in the method in your backing bean. It can also be actionListener instead of action.

Managed bean -

@ManagedBean
@SessionScoped
public class NavBean {

    private String page = "default";

    //getter/setter for page

View -

<p:menuItem actionListener="#{navBean.setPage('pageName')}" update="centerPanel" />

//center panel with id="centerPanel"
<h:include src="#{navBean.page}.xhtml" />

You don't wan't to refresh page but make an ajaxcal, change the value page and update the center panel.

Share:
17,717
royjavelosa
Author by

royjavelosa

Task level = Hard A walk in the park Task level = Difficult Consider It done Task level = Impossible Just give me more time

Updated on June 04, 2022

Comments

  • royjavelosa
    royjavelosa over 1 year

    Hi there Im just learning JSF 2 using Primefaces.
    I have a question regarding their Panel example. I would like to use the left panel as a placeholder for my Navigation Menu and the center panel for the contents/pages. Each time I click the menu the whole page gets refreshed, what I would like to accomplish is that when I click the menu only the center panel will load the corresponding page. Is this possible using primefaces or other techniques for jsf 2?
    Below is the code I am using. Thanks in advance.

    Thanks for your quick reply. I tried your suggestion but got some errors. Sorry Im really new to jsf2 and primefaces. Thanks in advance.

    ERROR MESSAGE: /homepage.xhtml @26,84 Tag Library supports namespace: http://primefaces.prime.com.tr/ui, but no tag was defined for name: menuItem

    Below is my code for my view (homepage.xhtml)

    <p:layout fullPage="true">
    <p:layoutUnit position="top" height="75" header="Top" resizable="true" closable="true" collapsible="true">  
            <h:outputText value="North unit content." />  
    </p:layoutUnit>  
    <p:layoutUnit position="bottom" height="75" header="Bottom" resizable="true" closable="true" collapsible="true">  
            <h:outputText value="South unit content." />  
    </p:layoutUnit>        
    <p:layoutUnit position="left" width="250" header="Left" resizable="true" closable="true" collapsible="true">  
            <h:outputText value="West unit content." />        
    <p:menu type="plain">
    <p:submenu label="Mail">
    
    <p:menuItem actionListener="#{navBean.setPage('pageName')}" update="centerPanel" />
    
    <p:menuitem value="Gmail" url="http://www.google.com" />
    <p:menuitem value="Hotmail" url="http://www.hotmail.com" />
    <p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
    </p:submenu>
    <p:submenu label="Videos">
    <p:menuitem value="Youtube" url="http://www.youtube.com" />
    <p:menuitem value="Break" url="http://www.break.com" />
    <p:menuitem value="Metacafe" url="http://www.metacafe.com" />
    </p:submenu>
    <p:submenu label="Social Networks">
    <p:menuitem value="Facebook" url="http://www.facebook.com" />
    <p:menuitem value="MySpace" url="http://www.myspace.com" />
    </p:submenu>
    </p:menu></p:layoutUnit>
        <p:layoutUnit position="center" id="centerPanel"> 
    
        <h:include src="#{navBean.page}.xhtml" />
    
            This is the center panel
        </p:layoutUnit>        
    </p:layout>
    

    This is my code for my bean NavBean.java

    package somePackage;
    
    import javax.faces.bean.*;
    
    @ManagedBean
    @SessionScoped
    public class NavBean {
          private String page = "login";
    }