how: Partial Rage Rendering with jsp2/facelets/templating with menu driving main content refresh only?

Question

I found some posts by BalusC (big fan of urs) and others here on stack overflow and haven't found the solution, which would seem like something many would want to be able to do.

If I have a facelets/templating structure like this, a left navigation with links that drive what gets shown in main content area, but without doing a complete page refresh, I just want the main area to update, how do I do this?

-------------------------------------
| link1  |  show content for link1   |
| link2  |  when link1 is clicked    |
| link2  |  in left navigation area  |
|        |                           |
-------------------------------------

I see the primefaces showcase does a whole page refresh when clicking menu items on left, and oddly enough, the richfaces4 showcase does not, although I am looking at the code can't understand just yet. is there a example out there that can show me how to do this?

here is my code

uiTemplate.xhtml (main template)

<div>
        <div id="left">
            <ui:include src="navigationMenu.xhtml"/> 
        </div>

        <div id="center_content" class="center_content">
            <ui:insert name="center_content" />
        </div>
</div>

then my navigationMenu.xhtml looks like

<ui:composition>
        <rich:collapsiblePanel header="ClickMe" switchType="client">                   
            <h:link outcome="page1" value="goto page1" /><br />
            <h:link outcome="page2" value="goto page2" /><br />
            <h:link outcome="page3" value="goto page3" /><br />
        </rich:collapsiblePanel>
</ui:composition>

and one of the pages which will appear in center content area, hopefully loaded without a complete refresh of all sections.

I would think I am going to need some f:ajax tag or use h:commandLink for these links above but just haven't found a good example. I see a bunch posts about Mojarra 2.1.x fixing dynamic includes but not sure that is related to this, unless that's is the only way to accomplish this.

page1.xhtml

<ui:composition template="./uiTemplate.xhtml">
        <ui:define name="center_content">
             page 1 content
        </ui:define>
</ui:composition>

Answer 1

I figured out how to get something working, however, I have not done much testing, like adding more components into the navigation form other than a4j:commandLink elements. my current navigation section merely updates the center content with new content in a ajx request thereby not doing a complete page refresh, nothing elaborate, here is my navigationMenu.xhtml file

<ui:composition>
     <h:form>             
        <rich:collapsiblePanel header="Carriers" switchType="client">                   
            <a4j:commandLink  action="page1" value="goto page1.xhtml" render=":centerContentDiv"/><br />
            <a4j:commandLink  action="page2" value="goto page2.xhtml" render=":centerContentDiv"/><br />
        </rich:collapsiblePanel>
     </h:form>

and then my uiTemplate.xhtml which is my master template has a snippet in it like this

<div>
        <div id="left">
            <ui:include src="navigationMenu.xhtml"/> 
        </div>

            <h:panelGroup id="centerContentDiv" layout="block"> 
                <ui:insert name="center_content" />
            </h:panelGroup>

    </div>

I do notice there seems to be a bit of a oddity, even in my really small test app. I have to be real deliberate when clicking the links or it seems to ignore me

I guess i need to add facestraces from primefaces to see if it tells me anything about whats happening

I hope this helps someone out there

*** followup *****

As a followup, after some testing, if the included center content subsequently contains form(s), submitting those form(s) seems to only happen on second click of a commandLink or commandButton. The forms are not nested which is a common reason a form don't submit correctly BalusC comments here. I added facestraces and it does hit the server but jumps from restore view to render response, 2nd click it goes through all phases.

The fact that the navigation uiComposition has a h:form and the center content uiComposition has a h:form is causing issues. I know this because if I remove the navigation uiComposition, and just load the center content directly via typed in URL, then it's form submits correctly on first click. I think BalusC was referring to something about this in post on partial page rendering but without a complete example in that post, it was a bit hard for me to follow. This would be a common task I would assume many would want to implement, so I'll keep digging.