JSF - Missing source code using templating and composition
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 portion of 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.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
masterLayout.xhtml (template)
:
<a4j:commandButton styleClass="#{control.myPracticeStyle}" value="MY PRACTICE" action="myPractice" actionListener="#{control.myPracticeAction}" render="myPractice"/>
:
<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>
You can see the ui:insert here.
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
myPractice.xhtml
<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>
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.
</th></tr>
</thead>
<tbody>
<tr><td></td></tr></tbody>
</table>
</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="-2088890247043631074:-2632132869735171398" autocomplete="off" />
</form></body>
</html>
If you look at this 'View Page source code' carefully comparing to masterLayout.xhtml, starting from height:780px, you will notice none the section ui:insert name="content" .. is empty.