First let me apologize for posting it here (after i have posted in stackoverflow and not getting much response).
This is really strange or maybe i just don't understand JSF.
To make the whole story short, supposedly i have the following:
a. File masterLayout.xhtml - main template
b. File myPractice.xhtml - compositions which uses file masterLayout.xhtml templating
------------------------------------------------------------------------------------------------------------------------------------------------
masterLayout.xhtml page will go to myPractice.xhtml (using ajax). The myPractice.xhtml rendered correctly - displaying all components from the template and from its own page. But when i click the 'view page source code', i only see the source code of masterLayout.xhtml.
Here's the source code:
IMPORTANT NOTE: masterLayout.xhtml HAS A RICHFACES COMMANDBUTTON (a4j:commandButton) WHICH RENDER THE PANEL ID "myPractice" FOUND IN myPractice.xhtml. This commandButton render the page through ajax means. It also means ajax is called from masterLayout page to render the panel id on another page myPractice page. Not sure if this is the cause of the issue
------------------------------------------------------------------------------------------------------------------------------------------------
masterLayout.xhtml (template)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<h:head>
<title>MView Analytics Reporting</title>
<h:outputStylesheet library="css" name="styles.css" />
<h:outputScript library="javascript" name="realTimeClock.js"/>
</h:head>
<h:body onload="updateClock(); setInterval('updateClock()', 1000 );">
<h:form>
<a4j:poll id="poll" interval="5000" enabled="true" actionListener="#{marketSumm.marketSummAction}" render="marketSummary"/>
</h:form>
<h:form>
<rich:panel>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:8%;"> </td>
<td style="width:84%;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr style="height:66px">
<td style="width:90px"><img src="resources/images/lg_cgi_header.gif" height="50px"/></td>
<td style="width:24%; padding-top:18px; font-size:20px;">Advisor Portal</td>
<td style="width:66%">
<table width="100%" align="right" border="0" cellpadding="0" cellspacing="0" >
<tr><td colspan="5" style="height:35px; font-size:15px; text-align:right;">Welcome: <b>Jack Black</b></td></tr>
<tr>
<td width="60%"> </td>
<td width="15%" align="right"><h:commandLink style="color:black;" value="My Profile"/></td>
<td width="15%" align="center"><h:commandLink style="color:black;" value="Add New Client"/></td>
<td width="5%" align="center"><h:commandLink style="color:black;" value="Help"/></td>
<td width="5%" align="right"><h:commandButton style="color:black;" value="Logout"/></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td style="width:8%;"> </td>
</tr>
<tr style="background-color:gray; height:30px;">
<td style="width:8%;"> </td>
<td>
<h:panelGrid style="width:100%; background-color:gray;" cellpadding="0" cellspacing="0">
<f:facet name="header">
<h:panelGrid style="width:100%;"
cellpadding="0" cellspacing="0" columns="7"
columnClasses="practiceTabColumn,
planningTabColumn,
tradingTabColumn,
reportsTabColumn,
searchColumn,
clientTabColumn,
goBox">
<a4j:commandButton styleClass="#{control.myPracticeStyle}" value="MY PRACTICE" action="myPractice" actionListener="#{control.myPracticeAction}" render="myPractice"/>
<a4j:commandButton styleClass="#{control.planningStyle}" value="PLANNING" action="planning" actionListener="#{control.planningAction}" render="planning"/>
<a4j:commandButton styleClass="#{control.tradingStyle}" value="TRADING" action="trading" actionListener="#{control.tradingAction}" render="trading"/>
<a4j:commandButton styleClass="#{control.reportsStyle}" value="REPORTS" action="reports" actionListener="#{control.reportsAction}" render="reports"/>
<h:inputText style="width:52%" value="Search" size="22"/>
<h:selectOneMenu>
<f:selectItem itemValue="1" itemLabel="Client"/>
<f:selectItem itemValue="2" itemLabel="James Bunday"/>
<f:selectItem itemValue="3" itemLabel="Andy R. Murray"/>
<f:selectItem itemValue="4" itemLabel="John Bastilano"/>
<f:selectItem itemValue="5" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="6" itemLabel="Tony Clement"/>
<f:selectItem itemValue="7" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="8" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="9" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="10" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="11" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="12" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="13" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="14" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="15" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="16" itemLabel="Emma W. Sterling Morrison"/>
<f:selectItem itemValue="17" itemLabel="Client"/>
<f:selectItem itemValue="18" itemLabel="James Bunday"/>
<f:selectItem itemValue="19" itemLabel="Andy R. Murray"/>
<f:selectItem itemValue="20" itemLabel="John Bastilano"/>
<f:selectItem itemValue="21" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="22" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="23" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="24" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="25" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="2" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="27" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="28" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="29" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="30" itemLabel="Emma W. Sterling"/>
<f:selectItem itemValue="31" itemLabel="Emma W. Sterling"/>
</h:selectOneMenu>
<h:commandButton style="color:black;" value="GO"/>
</h:panelGrid>
</f:facet>
</h:panelGrid>
</td>
<td style="width:8%;"> </td>
</tr>
<tr style="height:780px;">
<td style="width:8%;"> </td>
<td style="width:8%;">
<br/>
<ui:insert name="content">
</ui:insert>
</td>
<td style="width:8%;"> </td>
</tr>
</table>
</rich:panel>
</h:form>
</h:body>
You can see the ui:insert here.
------------------------------------------------------------------------------------------------------------------------------------------------
myPractice.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:rich="http://richfaces.org/rich"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition template="/templates/masterLayout.xhtml">
<ui:define name="content">
<rich:panel id="myPractice" style="height:764px; border:0px; padding:0px;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;">
<h:panelGrid style="width:100%;" cellpadding="0" cellspacing="0">
<f:facet name="header">
<h:panelGrid style="width:100%;" cellpadding="0" cellspacing="0" columns="5"
columnClasses="overviewTabColumn,
aumTabColumn,
feesTabColumn,
cashFlowTabColumn,
emptyTabColumn">
<a4j:commandButton styleClass="#{control.overviewStyle}" value="OVERVIEW" action="overview" actionListener="#{control.overviewAction}" render="overview"/>
<a4j:commandButton styleClass="#{control.aumStyle}" value="AUM" action="aum" actionListener="#{control.aumAction}" render="aum"/>
<a4j:commandButton styleClass="#{control.feesStyle}" value="FEES" action="fees" actionListener="#{control.feesAction}" render="fees"/>
<a4j:commandButton styleClass="#{control.cashFlowStyle}" value="CASH FLOW" action="cashFlow" actionListener="#{control.cashFlowAction}" render="cashFlow"/>
<h:outputText value="" style="width:100%;"/>
</h:panelGrid>
</f:facet>
</h:panelGrid>
</td>
</tr>
<tr><td> </td></tr>
<tr>
<td>
<ui:insert name="subContent">
</ui:insert>
</td>
</tr>
</table>
</rich:panel>
</ui:define>
</ui:composition>
</html>
This whole define supposed to go into masterLayout.xhtml ui:insert section.
------------------------------------------------------------------------------------------------------------------------------------------------
Actual 'View Page source' from FireFox or IE when myPractice.xhtml is rendered and displayed.
</td>
<td style="width:8%;"> </td>
</tr>
<tr style="height:780px;">
<td style="width:8%;"> </td>
<td style="width:8%;">
<br />
</td>
<td style="width:8%;"> </td>
</tr>
</table></div></div><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-8616720734293216541:-1864513498741194775" autocomplete="off" />
If you look at this 'View Page source code' carefully comparing to masterLayout.xhtml, starting from height:780px, you will notice that the section ui:insert name="content" .. is empty.
