How to achieve partial navigation in JSF2 and Primefaces 2

Question

I have left panel that contains the link to different pages. The right panel is the one that should be updated with the new page based on the link clicked in the left panel. I want it to be an ajax update so that the left panel, header and footer do not refresh. I tried with ui:include but the page only gets refreshed on the second click. The reference to that thread is

ui:include in richfaces 4 only gets updated on second click

Is there any alternative way to achieve the same in JSF2 and Primefaces 2.2.1. Thanks

Updates

<ui:define name="content">
    <h:form id="form_01">

    <div style="margin:0; padding:0; float:right; width:740px;background:#FFF; ">
        <p:outputPanel id="pagePanel">
            <ui:include src="#{panelMenu.currentPage}.xhtml"></ui:include>
        </p:outputPanel>
    </div>

    <div style="padding:0; float:left;">
        <p:panel  style="width:205px;" header="User Menu">
            <h:panelGrid columns="1">
                <p:commandLink update="pagePanel" action="#{panelMenu.setCurrentPage('/pages/group_message')}">
                    <h:outputText value="Compose"/>
                </p:commandLink>
                <p:separator/>
                <p:commandLink update="pagePanel" action="#{panelMenu.setCurrentPage('/pages/group_detail')}">
                    <h:outputText value="Groups"/>
                </p:commandLink>
                <p:separator/>

                </h:panelGrid>
        </p:panel>
    </div>
    </h:form>
</ui:define>

Backing Bean

@ManagedBean(name="panelMenu")
@SessionScoped

public class PanelMenu {
private String currentPage = "/pages/group_detail";

public String getCurrentPage() {
    System.out.println(Thread.currentThread().getStackTrace()[1]);
    System.out.println(FacesContext.getCurrentInstance().getCurrentPhaseId());
    return currentPage;
}

public void setCurrentPage(String currentPage) {
    System.out.println(Thread.currentThread().getStackTrace()[1]);
    System.out.println(FacesContext.getCurrentInstance().getCurrentPhaseId());
    this.currentPage = currentPage;
}

}

Answer 1

Here is an example:

Managed-bean:

@ManagedBean
@ViewScoped
public class PartialNavBean {
    private String pageName = "/pages/group_member";

    public String getPageName() {
        return pageName;
    }

    public void setPageName(String pageName) {
        this.pageName = pageName;
    }
}

View:

<p:panel id="leftPanel">
    <h:form>
        <p:commandLink value="Group member"
                       action="#{partialNavBean.setPageName('/pages/group_member')}"
                       update="rightPanel"/>
        <br/>
        <p:commandLink value="Group detail"
                       action="#{partialNavBean.setPageName('/pages/group_detail')}"
                       update="rightPanel"/>
    </h:form>
</p:panel>

<p:panel id="rightPanel">
    <ui:include src="#{partialNavBean.pageName}.xhtml"/>
</p:panel>

Update:

I tried with the following:

public String getPageName() {
    System.out.println(Thread.currentThread().getStackTrace()[1]);
    System.out.println(FacesContext.getCurrentInstance().getCurrentPhaseId());
    return pageName;
}

public void setPageName(String pageName) {
    System.out.println(Thread.currentThread().getStackTrace()[1]);
    System.out.println(FacesContext.getCurrentInstance().getCurrentPhaseId());
    this.pageName = pageName;
}

And the output is as follows:

INFO: pkg.PartialNavBean.getPageName(PartialNavBean.java:14)
INFO: RESTORE_VIEW 1
INFO: pkg.PartialNavBean.setPageName(PartialNavBean.java:20)
INFO: INVOKE_APPLICATION 5
INFO: pkg.PartialNavBean.getPageName(PartialNavBean.java:14)
INFO: RENDER_RESPONSE 6
INFO: pkg.PartialNavBean.getPageName(PartialNavBean.java:14)
INFO: RESTORE_VIEW 1
INFO: pkg.PartialNavBean.setPageName(PartialNavBean.java:20)
INFO: INVOKE_APPLICATION 5
INFO: pkg.PartialNavBean.getPageName(PartialNavBean.java:14)
INFO: RENDER_RESPONSE 6