2

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.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Muky
  • 3,584
  • 3
  • 19
  • 20
  • What do you mean by rendering? is there information that you need to retrieve from the backend, or you just want a different content that is ALREADY there? – Dejell Jan 04 '12 at 09:06
  • Think of a page with an header (of menus or tab or butons etc..) where each option render the area below. one way of doing it is writing everything in one xhtml page, which is not a good approach. I want each option to redirect me to another sub flow which render the area below the header – Muky Jan 04 '12 at 09:23

2 Answers2

0

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;
   }
}
Mr.J4mes
  • 9,168
  • 9
  • 48
  • 90
  • This is not exactly what I was looking for, but it is good enough. I wanted the flow to be managed by the Spring web flow – Muky Jan 10 '12 at 11:55
0

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>
Dejell
  • 13,947
  • 40
  • 146
  • 229
  • There is a lot of way of doing that, but I want to use the Spring web flow mechanism on top of JSF which will help keeping the project easy extendable and modular. your suggestion is to keep all the ui in one page and this will be hard to maintain in the future. – Muky Jan 04 '12 at 12:26
  • you can use the div content in different pages and use – Dejell Jan 04 '12 at 15:18