2 Replies Latest reply: Sep 5, 2013 10:09 AM by Kim Ming Yap RSS

    JSF - Missing source code using templating and composition

    Kim Ming Yap
      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 view 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%;">
           &#060;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 above.

      ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

      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.

            <tr style = "height:780px;">
                  <td style = "width:8%;"> </td>
                  <td style = "width:8%;">
                    &#060;br /> <==== Missing source code?
                  </td>
                  <td style = "width:8%;"> </td>
            </tr>

               </div>
               <div>

      <input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="-2088890247043631074:-2632132869735171398"
      autocomplete="off" />

      </form>

      </body>

      </html>
      </ui:composition>

      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.