Rendering only a fragment of the page

问题:

I need to implement a web application with a Menu (Tab View) on top where each tab renders the content area without rendering the whole page. How can I do it in a modular way? I want each content area to be a flow.

回答1:

You can try this:

<h:form id="topMenu">
   <f:ajax render="content">
      <h:commandLink actionListener="#{mrBean.openPage('About.xhtml')}" value="About Us" />
      <h:commandLink actionListener="#{mrBean.openPage('Contact.xhtml')}" value="Contact Us" />
   </f:ajax>
</h:form>

<h:panelGroup id="content">
   <ui:include src="#{mrBean.page}" />
</h:panelGroup>

And this is your ManagedBean:

@ManagedBean
@RequestScoped
public class MrBean {
   private String page;

   public void openPage(String page) {
      this.page = page;
   }
}

回答2:

If you don't mind about backend, why not to use regular javascript?

create 4 divs, with 4 different ids and playing with:

onclick="document.getElementById('div1').style.display = "none";
onclick="document.getElementById('div2').style.display = "inline";

you can do the job!

EDITED

If the divs are located in different files you can use it like this:

<div id="div1">
  <ui:include src="#{myBean.myPage}" />
</div>