Partial rendering JSF components

Question

dwelling over how to partial render (divs), by including different source files (with panels and components). Depending on menu actions. If understood the JSF phases correctly, the View is rebuilt during the Render Response , the last phase. And if I have events and actions, they will be invoked during the Invoke Application phase, the phase before.

All I want to do is to set the including xhtml page for a specific menu command via ajax, before the View is re-rendered. But the ui:include always get invoked before the menu action. I've tried with richfaces 4 (a4j:param, rich:panel, etc) and standard JSF 2.0 (f:param, h:panelGroup) components, but the the ui:include always get invoked before the action.

What should I do to process the menu action (to set the including page), before the ui:include gets invoked?

PS. This must be the standard patter, instead of including static content. But I find very few examples on this on the net?!

Menu.xhtml

<rich:toolbar itemSeparator="line">
...
<rich:dropDownMenu mode="ajax">

    <f:facet name="label">
                <h:panelGroup>
                    <h:outputText value="Menu 1" />
                </h:panelGroup>
            </f:facet>
            <rich:menuItem id="newActivityMenu" action="#{navigationBean.menuAction}" render="content" label="New">
                <a4j:param id="newActivityParam" name="includeContentPage" value="/user/Create.xhtml" />
            </rich:menuItem>
...

NavigationBean.Java

    @ManagedBean
@RequestScoped
public class NavigationBean {

    public String menuAction() {
    String param = JsfUtil.getRequestParameter("includeContentPage");
    this.includedContentPage = param;
    JsfUtil.log(this, "Including Content Page : " +param);

    FacesContext.getCurrentInstance().renderResponse();
    return "";
}

public String getIncludedContentPage() {
    if(includedContentPage == null)
        return "";
    else if(!includedContentPage.endsWith(".xhtml"))
        includedContentPage += ".xhtml";
    JsfUtil.log(this, "Get Content Page : " +includedContentPage);
    return includedContentPage;
    }

layoutClient.xhtml

...
<ui:define name="top">
        <ui:include src="/resources/viewComponents/menuTop.xhtml"/>
    </ui:define>
    <ui:define name="content">                
        <ui:include src="#{navigationBean.includedContentPage}"/>
    </ui:define>
...

masterLayout.xhtml (added)

...
<h:body>
    <div id="top" >
        <ui:insert name="top">Top Default</ui:insert>
    </div>
    <div id="left">
        <ui:insert name="left">Left Default</ui:insert>
    </div>
         <ui:insert name="content">Content Default</ui:insert>
    </h:body>
..

Answer 1

You must have a template page as well since you are defining top and content in layoutClient.xhtml so I think you are trying to be too general with the layoutClient.xhtml page as it appears to be functioning as a template as well. Lets assume your template page is called template.xhtml . The standard pattern you eluded to is to make your template page something like this:

template.xhtml

...
<ui:insert name="top">
    <ui:include src="/resources/viewComponents/menuTop.xhtml"/>
</ui:insert>
...
<ui:insert name="content" />
...

This means that all your pages contain the menu at the 'top' (by default, they can override this) and that they must specify their own content, which makes sense.

Now, instead of trying to make a page like layoutClient.xhtml that does tricky stuff to determine which content is inserted, create each page seperately like this:

page1.xhtml

<ui:composition template="template.xhtml">
    ...
    <ui:define name="content">
        <p>This is a page that defines some content and also includes my menu that it inherits from template.xhtml</p>
    </ui:define>
    ...
</ui:composition>

page2.xhtml

<ui:composition template="template.xhtml">
    ...
    <ui:define name="content">
        <p>This is another page that defines some content and also includes my menu that it inherits from template.xhtml</p>
    </ui:define>
    ...
</ui:composition>

Both of these pages inherit your menu and put the content in the appropriate place.

With that kind of configuration, all your menuAction() method needs to do is return a link to page1.xhtml or page2.xhtml . Also, you don't need any complex use of parameters or manual calls to renderResponse() or a4j:param tags!