Dynamic templating in JSF

Question

Background - I am working on a legacy JSF application which uses JSP as view technology. Now since we have decided to move to JSF 2.2/2.3, we are also changing the JSP pages to facelets.

Issue - We have following template - Layout.xhtml - contains the layout as follows -

<ui:insert name="header"></ui:insert>
<ui:insert name="body"></ui:insert>
<ui:insert name="footer"></ui:insert>

Following is a sample file (say,index.xhtml) -

<ui:composition template="/layout.xhtml">
   <ui:define name="header"><h1>Sample Header</h1></ui:define>
   <ui:define name="body"><ui:include src="/searchRecord.xhtml"></ui:define>
   <ui:define name="footer"><h3>Sample foorter</h3></ui:define>
</ui:compositio>

The issue is - Header and footer will be same for all the pages but body will be different. i.e. first when application launches, searchRecord page will be displayed. Once user enters the information, the data needs to be displayed. On this page, if user presses exit, the body should include exit page. If previous is pressed, again the searchRecord page will be displayed.

In short, I am looking for ways to include dynamic <ui:include>. Otherwise I have to create 3-4 xhtml pages one for each operation.

Research -

I have gone through couple of questions -

<ui:include> with dynamic src ... complete madness

Dynamic ui:include

But nothing seems to solve my problem. When I use as follows -

<ui:fragment rendered="#{bean.searchRecord}>
  <ui:include src="/searchRecord.xhtml">
</ui:fragment>
<ui:fragment rendered="#{bean.showDetails}>
  <ui:include src="/showdetails.xhtml">
</ui:fragment>
<ui:fragment rendered="#{bean.exit}">
  <ui:include src="/exit.xhtml">
</ui:fragment>

First of all I had difficulties in launching the first page as bean is not initialized. I tried to solve this problem by using <f:event type="preRenderComponent"> which initializes the bean and set the flag. It solved the launch issue and I am getting the searchRecord page correctly. But When I click on show details button now, either it remains on same page or if it goes to showDetails page (using postback() method), the details are not displayed (i.e. showDetails bean is not invoked).

Can someone please guide me how to implement dynamic layout as mentioned above?