Introduction to Facelets

September 26, 2010

Templates in Facelets

In this section, we will extend the hello application to develop a simple web-site’s home page that will display the header, footer and other areas. We will see the real power of Facelets template in this section.

Download Example Code for Facelets

Facelets Example Code

Footer Page

First, we will define the footer for the web-page. Note that usually the footer area will be common across all the pages within the web-site. So it would be wise to define the contents of the footer in page and reuse it wherever necessary.

footer.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	</head>
	<body>
		<div style="background-color: #82CAFA; color: #FFFFFF; width: 100%;">@<pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1" (2004-2010),India</div>
	</body>
</html>

Header Page

The code listing for the header page is given below in the file header.xhtml. The header page provides welcome information to the users and it is expected that this page will be getting referenced in multiple pages.

header.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
	<body>
		<div style="background-color: #82CAFA; color: #FFFFFF; width: 100%;">
		Welcome to <pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1"
		</div>
	</body>
</html>

Template Page

In this section, we will see the template page definition for a page. This template will provide the logical view definitions for header, footer, left side navigation menu, right side navigation menu and the contents. Note that it is usually the content area which used to be different across pages.

template.xhtml

<!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">
 
	<head>
		<title>Facelets example</title>
	</head>
 
	<body >
		<div style="border-bottom: grey; border-left: grey; border-right: grey; border-top: grey; height: 100%;text-align: center; width: 100%;">
			<ui:insert name="header">
				<ui:include src="header.xhtml" />
			</ui:insert>
		</div>
 
		<table width="100%" >
			<tr>
				<td width="20%">
 
					<div style="background-color: #82CAFA; color: #FFFFFF;height: 250px; width: 100%;text-align: center;">
					<br/>
					<ui:insert name="leftSideMenu">
					<h:form>
					<h:commandLink value="Home"></h:commandLink>
					<br/><br/>
					<h:commandLink value="News"></h:commandLink>
					<br/><br/>
					<h:commandLink value="Articles"></h:commandLink>
					<br/><br/>
					<h:commandLink value="About Us"></h:commandLink>
					<br/><br/>
					</h:form>
					</ui:insert>
					</div>
				</td>
 
				<td width="60%">
					<div style="background-color: #82CAFA;text-align: center;">
					<ui:insert name="content">Content displayed from Template </ui:insert>
					</div>
					</td>
					<td width="20%">
					<div style="background-color: #82CAFA; color: #FFFFFF;height: 250px; width: 100%;text-align: center;">
					<br/>
					<ui:insert name="righSideMenu">
					<h:form>
					<h:commandLink value="Java"></h:commandLink>
					<br/><br/>
					<h:commandLink value="J2EE"></h:commandLink>
					<br/><br/>
					<h:commandLink value="Spring"></h:commandLink>
					<br/><br/>
					<h:commandLink value="Hibernate"></h:commandLink>
					<br/><br/>
					</h:form>
					</ui:insert>
					</div>
				</td>
			</tr>
		</table>
 
		<div style="border-bottom: grey; border-left: grey; border-right: grey; border-top: grey; height: 100%;text-align: center; width: 100%;">
			<ui:insert name="footer">
			<ui:include src="footer.xhtml" />
			</ui:insert>
		</div>
	</body>
 
</html>

In the above template page, we have defined logical sections through the ‘ui:insert’ tags. The named logical areas that we have defined for the header, footer, left side navigation menu, right side navigation menu, content are ‘header’, ‘footer’, ‘leftSideMenu’, ‘rightSideMenu’, and ‘content’ respectively. Note that we have made use of the ‘ui:insert’ tag for the header and the footer tags which is used a resource. The resources happen to the header.xhtml and footer.xhtml that we had discussed previously.

Home Page

Now that we have looked into the template page that defines the header, footer and others, we will look into the definition of a template-client page. One such page that uses the template page is the homepage.xhtml, the code listing for which is given below.

homepage.xhtml

<!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">
 
	<ui:composition template="templates/template.xhtml">
 
		<ui:define name="content">
			Welcome to <pre lang="LANGUAGE" line="1" lang="LANGUAGE" line="1"... Here you can see references <br/>
			to Articles, Tips and Mock Questions for Java, J2EE,<br/>
			Spring, Hibernate and other platform.<br/>
		</ui:define>
 
	</ui:composition>
 
</html>

In the above page, we have defined the ui:composition tag whose template attribute points to the template.xhtml page that we created just before. Note that we want to keep the original definition of the header, footer, left navigation menu and the right navigation menu. However, we want to override the definition of the content area. To achieve that, we have used the ui:define tag which overrides the default content with the one relevant to the home page.