CODEWITHSUNDEEP
templatesjsf-2insertincludefacelets
Bill Rosmus
Bill Rosmus

Reputation: 3011

ui:include not being included by Facelets template

I can't get facelets file to load into a template.

I have a content facelet called frontpage.xhtml that is set as the welcome page in web.xml. This loads the template. The template then is to include a number of other files. When they wouldn't load I pared it down to one (header.xhtml) to try to troubleshoot. It wouldn't even load when I put the header xhtml file in the same directory as the template and frontpage file.

When the app is run the frontpage.xhtml is run inside the template. I can see this because I can see the effects of the css loaded in the template. And I can see the "Hello World" in the title bar and "Hello World!" displayed in the page. But the header is not loaded at the top.

I tried removing all div and class info from the template body as well. There are none in the facelets. It didn't help.

Can someone provide some insight here? Maybe I'm off base, but I thought I could define the template this way so that I could call different facelets that load into the template's content area.

This app does run correctly without the templating. i.e. when everything is lumped into one page, which I am trying get away from for modularity.

Directory Structure (starting at the root for web pages)

/frontpage.xhtml
/soulard_base_template.xhtml
/sections/base/header.xhtml

web.xml (what I think are the relevant sections)

<context-param>
    <param-name>javax.faces.PROJECT_STAGE</param-name>
    <param-value>Development</param-value>
</context-param>
<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
    <!--<welcome-file>faces/welcome.xhtml</welcome-file>-->
    <welcome-file>faces/frontpage.xhtml</welcome-file>
</welcome-file-list>

frontpage.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">
  <body>
    <ui:composition template="soulard_base_template.xhtml">
      <ui:define name="windowTitle">
        Hello World
      </ui:define>
      <ui:define name="content">
        <h2>Hello World!</h2> 
      </ui:define>
    </ui:composition>
  </body>
</html>

soulard_base_template.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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

  <h:head>
    <title><ui:insert name="windowTitle" /></title>
    <link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <!--[if lt IE 8]>
    <link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <![endif]-->
    <link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />

  </h:head>
  <h:body>
    <div class="container showgrid" title="Container">
      <div class="span-24" title="Banner">
        <ui:insert name="header">
          <ui:include src="sections/base/header.xhtml"/>
        </ui:insert>
      </div><!-- End of Banner -->

      <div class="span-16" title="Content Column">
        <ui:insert name="content" />
      </div><!-- End of Centre Column -->
    </div><!-- End of Container -->
  </h:body>

</html>

header.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:h="http://java.sun.com/jsf/html">
  <body>
    <ui:composition>
      <ui:define name="header">
        <h2>Header</h2>
        <h:graphicImage url="/images/header.png" 
                        width="950"
                        height="175"/>
      </ui:define>
    </ui:composition>
  </body>
</html>

Upvotes: 0

Views: 7159

Answers (2)

lu4242
lu4242

Reputation: 2318

The problem is the additional "define" entry in header.xhtml <ui:define name="header">. You use ui:define usually to replace some content from a template, but note the outer <ui:composition> does not have a reference to a template. So, if there is no template, facelets doesn't know where to apply it, and finally the inner content is never used.

Upvotes: 2

Bill Rosmus
Bill Rosmus

Reputation: 3011

OK, it figures. After hours of screwing around and frustration I ask the question on stackoverflow. Then I walk away for a few hours. Go to the gym, relax, come back and figure it out in 10 minutes.

Unlike the text book (Core JSF 2.0) I removed a bunch of inserts and defines and it worked.

e.g. the header.xhtml looks like this now:

<?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:h="http://java.sun.com/jsf/html">
  <body>
    <ui:composition>

      <h2>Header</h2>
      <h:graphicImage url="/images/williamrosmusdotcomHeader.png" 
                      width="950"
                      height="175"/>

    </ui:composition>
  </body>
</html>

and the template looks like this:

<?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:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

  <h:head>
    <title><ui:insert name="windowTitle" /></title>
    <link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <!--[if lt IE 8]>
    <link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <![endif]-->
    <link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
    <link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />

  </h:head>
  <h:body>
    <div class="container showgrid" title="Container">
      <div class="span-24" title="Banner">
          <ui:include src="sections/base/header.xhtml"/>
      </div><!-- End of Banner -->

      <div class="span-24" title="Menu">
        <ui:include src="sections/base/menu.xhtml"/>
      </div><!-- End of Menu -->

      <div class="span-4" title="Left Column">
        <ui:include src="sections/base/leftsidebar.xhtml"/>
      </div><!-- End of Left Column -->

      <div class="span-16" title="Content Column">
        <ui:insert name="content" />
      </div><!-- End of Centre Column -->

      <div class="span-4 last" title="Right Column">
        <ui:include src="sections/base/rightsidebar.xhtml"/>
      </div><!-- End of Right Column -->


      <div title="Footer" class ="span-24">
        <ui:include src="sections/base/footer.xhtml"/>
      </div><!-- End of Footer -->


    </div><!-- End of Container -->
  </h:body>

</html>

So now the question is, what is the point of the "insert" and "define" since all they seemed to do is to make things not work. That is for another day.

Upvotes: 1

Related Questions