JSF 2 Prime Faces Navigation Using Menu and Panels - jsf-2

Question

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";
}

Answer 1

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.