JSF 2 Prime Faces Navigation Using Menu and Panels

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开发者_JAVA百科 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";
}

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.