I have the following template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<ui:insert name="title" />
</title>
</h:head>
<h:body>
<div id="header">Some header</div>
<div id="content">
<ui:insert name="content" />
</div>
<div id="footer">Some Footer</div>
</h:body>
</html>
and the following client template:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="templates/template.xhtml">
<ui:define name="title">
English Online
</ui:define>
<ui:define name="content">
<h1>Кириллический шрифт</h1>
</ui:define>
</ui:composition>
Now the problem is:
When I invoke the master template from the composite with the Cyrillic font in "h1"-tag, the browswer gives out:
com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException: Invalid byte 2 of 2-byte UTF-8 sequence.
Even though I use the Cyrillic font in the master-client template it is ok. And when the client template h1-tag contains English it also works.
How can I fight this problem?
That can happen if those files are not saved as UTF-8. The answer depends on the editor used to save the files. If it's for example Eclipse (your question history hints that you're using it or are at least familiar with it), then you need to change Window > Preferences > General > Workspace > Text file encoding to UTF-8.
After making this change, edit and re-save the file(s).
See also:
Unicode - How to get the characters right?
Related
I'm having a problem using template that has another nested template within it.
I get
java.io.FileNotFoundException
at org.apache.naming.resources.DirContextURLConnection.getInputStream(DirContextURLConnection.java:403)
I have this basic template :
(./resources/css/template.xhtml)
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet library="css" name="stylesheet.css"/>
<title><ui:insert name="title"> Facelets template </ui:insert></title>
</h:head>
<h:body>
<div id="top" class="top_content">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
</h:body>
and templateLogin which "inherits" template :
(./resources/css/templateLogin.xhtml)
<ui:composition 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"
template="./resources/css/template.xhtml">
<ui:define name="title">
Some title
</ui:define>
<ui:define name="top">
<div id="top">
...code here
</div>
</ui:define>
</ui:composition>
and I have welcome file which is welcome file of the web application which uses templateLogin:
<ui:composition 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"
template="./resources/css/templateLogin.xhtml">
<ui:define name="title">
Welcome title
</ui:define>
As I said, I get file not found exception. When I define as template template.xhtml for the welcome file , there's no error. It's as it doesn't see templateLogin.xhtml in the specified path, but it's definetely there.
Any ideas? Thanks.
Get rid of the leading period in your template paths. The leading period makes it relative to the current folder of the template client. If the template path starts with / then it becomes absolute to the web content root.
Thus, so:
template="/resources/css/template.xhtml"
and
template="/resources/css/templateLogin.xhtml"
Unrelated to the concrete problem, there are 2 problems with those paths:
Template files are not CSS files.
Template files are not supposed to be publicly accessible.
Put them in /WEB-INF folder. E.g.
template="/WEB-INF/templates/layout.xhtml"
and
template="/WEB-INF/templates/login.xhtml"
See also:
Which XHTML files do I need to put in /WEB-INF and which not?
Well if i look to your code then i see some strange things. Your main template is located in
resources/css Thats fine. But then your other template is also located in /resources/css
In your include you say:
template="./resources/css/template.xhtml"
So you suggest that it is in /resources/resources/css and yes the file is not there.
So trie in your include this:
template="template.xhtml"
I don't know where your templateLogin.xhtml is but also here pay attention to your include
Use:
#{request.contextPath}/resources/css/default.css
This question already has answers here:
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
(3 answers)
Closed 5 years ago.
I have the following JSF 2 template Page with primefaces menu, I want to partially update the cenral centent of the page onclick of links from left Menu, I don't want to update the entire page.I have gone throu the posts in stackoverflow, they are suggetign that I should have a form name in the central_body_div, but I don't want to sepcify a form in the central_body_div, as the dynamically loaded page will have form with it's own name, I should be able to submit the form in the page appearing dynamically in central_body_div div.
First of all the Layout page itself not loading , giving the below exception.
Cannot find component with identifier "central_body_div" referenced from "leftMenuFormId:menuItem1".
Experts can you give a solution for this problem. would apprecite your replies.
<?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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
<ui:insert name="top">
<ui:include src="/secure/home/header.xhtml" />
</ui:insert>
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="/secure/home/leftMenu.xhtml" />
</ui:insert>
</div>
<div id="central_body_div" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="/secure/home/footer.xhtml" />
</ui:insert>
</div>
</h:body>
</f:view>
</html>
My leftMenu.xhtml content is below
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<p:menu id="lMenuId">
<p:menuitem id="menuItem1" value="page1" action="page1" update="central_body_div" partialSubmit="true"/>
<p:menuitem id="menuItem2" value="page2" action="page2" update="central_body_div" partialSubmit="true" />
</p:menu>
</h:form>
</ui:composition>
</h:body>
</html>
Change your code with following and try again,
leftMenu.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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<p:menu id="lMenuId">
<p:menuitem id="menuItem1" value="page1" action="page1" update=":form1:central_body_div" partialSubmit="true"/>
<p:menuitem id="menuItem2" value="page2" action="page2" update=":form1:central_body_div" partialSubmit="true" />
</p:menu>
</h:form>
</ui:composition>
</h:body>
and your template xhtml with,
<?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"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="leftMenu.xhtml" />
</ui:insert>
</div>
<h:form id="form1" >
<h:panelGroup id="central_body_div">
<script type="text/javascript">alert('Content Updated')</script>
<ui:insert name="content">Content</ui:insert>
</h:panelGroup>
</h:form>
</div>
<div id="bottom">
</div>
</h:body>
</f:view>
It's checked and working.
Warning! View build time vs view render time problem ahead!
The usual mistake here is performing navigation, or as you say, refreshing a central holder with <ui:insert>/<ui:define>, which is a view build tag, not a view render UI component. So it simply won't be recalculated on AJAX requests, as your component tree will be restored from view state, and will not be built afresh.
So, just don't do that mistake, by making AJAX navigation, which is defective in many ways (SEO, non-bookmarkability, not user friendliness, etc.) and perform navigation by the components designed for that, like <h:link>, or <p:menuItem> that's generating plain get as.
As per your comment you don't fully distinguish between navigation links and command links. The former are used to perform navigation only and generate bookmarkable a elements, while the latter are used to (partially) submit the form, do business job, and (partially) update the view, or perform navigation.
What you need to do is simply to distinguish between those cases. For navigation use <h:link>/<p:menuitem outcome="/your-view-id">, for POST actions, use <p:commandButton>/<p:menuitem action(listener)="#{bean.action(listener)}" instead.
In this case the templating structure doesn't matter as long as you don't expect tag handlers to be refreshed on AJAX requests.
I have placed the solution I arrived from the discussion in this post and reference from other posts. the page we are including can have different form names.
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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="leftMenu.xhtml" />
</ui:insert>
</div>
<div id="center" class="left_content">
<h:panelGroup id="central_body_div">
<ui:include src="#{templateBean.page}.xhtml" />
</h:panelGroup>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</f:view>
</html>
leftMenu.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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<f:ajax render=":central_body_div">
<h:commandLink value="page1" action="#{templateBean.setPage('page1')}" /><br></br>
<h:commandLink value="page2" action="#{templateBean.setPage('page2')}" />
</f:ajax>
</h:form>
</ui:composition>
</h:body>
</html>
Page 1
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition>
<h1>Page One</h1>
</ui:composition>
</h:body>
</html>
Page 2
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition >
<h:form id="form1" >
<h1>Page Two</h1>
</h:form>
</ui:composition>
</h:body>
</html>
package ae.co.gui.beans;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.event.ActionEvent;
#Named(value = "templateBean")
#SessionScoped
public class TemplateBean implements Serializable {
private String page;
public TemplateBean() {
}
#PostConstruct
public void init() {
this.page = "page1"; // Ensure that default is been set.
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
Late to the party... fixing an application for a client currently and face this issue. Didn't like the idea of adding a form. They use primefaces, not sure if this is only unique to them but
<p:commandButton ... update="#(:central_body_div)"/>
fixed the problem in my case.
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>
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.
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.
I have been playing with JSF and have a project working that has a header/footer/navigation/content
panels. The project, however, goes from page 1 to page 2, etc., with each page having a different layout. How can I create a reusable template that keeps the same look and feel from page to page, i.e., header/footer/navigation stay the same, but content is updated?
This sounds like a classic case of a master template. In such a template you put everything that's common to all pages and then your actual pages reference this template and "fill in the blanks". In a way it's the reverse of the also classic include.
E.g.
/WEB-INF/templates/masterTemplate.xhtml:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<h:head>
<title>
<ui:insert name="title">Some title</ui:insert>
</title>
</h:head>
<ui:include src="header.xhtml"/>
<h:body>
<ui:insert name="content" />
</h:body>
<ui:include src="footer.xhtml"/>
</html>
A page uses this as follows, e.g.
/hello.xhtml
<ui:composition template="/WEB-INF/templates/masterTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
>
<ui:define name="title">hello</ui:define>
<ui:define name="content">
Hi, this is the page
</ui:define>
</ui:composition>
I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!
In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.xhtml
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:define name="title">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>