0 Replies Latest reply on Jul 23, 2011 3:49 PM by Kim Ming Yap

    JSF - Missing source code using templating and composition

    Kim Ming Yap Newbie

      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%;">&nbsp;</td>
                             
      <td style="width:8%;">
                                 
      <br/>
                                 
      <ui:insert name="content">
                                 
      </ui:insert>
                              </
      td>
                             
      <td style="width:8%;">&nbsp;</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.