JSF Mini Book – Tips, concepts and good practices

September 2, 2012 11:31 pm | 12 Comments |

XHTML page reuse with Facelets

A word that is very common to JSF is the word “Facelets”. Facelets is a technique to reuse the xhtml code. Imagine a site where the same HEADER and FOOTER should be displayed in all pages. There is no reason to copy and paste the same code in all pages; it would increase the maintenance complexity.

Facelets allows that the HEADER and the FOOTER to be imported in every page of the site and without the need of repeating the HEADER and FOOTER code importation.

To apply the Facelets in our sample, let us create a folder named “template” inside the “WebContent” folder; inside the template folder let us create the files: “master.xhtml”, “top.xhtml” and “left.xhtml”; check the code bellow:

master.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">
<h:head>
	<title><ui:insert name="pageTitle"/></title>
	<h:outputStylesheet library="css"name="style.css"/>
</h:head>

<h:body>
	<div id="divTop">
		<ui:insert name="divTop">
			<ui:include src="top.xhtml"/>
		</ui:insert>
	</div>

	<div id="divMenu">
		<ui:insert name="leftMenu">
			<ui:include src="left.xhtml" />
		</ui:insert>
	</div>

	<div id="divMain">
		<ui:insert name="mainContent" />
	</div>
	<ui:debug/>
</h:body>
</html>

left.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">

<h:body>
	<ui:composition>
		<h:form>
		Let us Navigate? [left.xhtml] <br/>

			<h:outputLinkvalue="/JSF/page01.xhtml">Page 01</h:outputLink>
			<br/>
			<h:outputLinkvalue="/JSF/page02.xhtml">Page 02</h:outputLink>
		</h:form>
	</ui:composition>
</h:body>
</html>

top.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">
<h:body>
	<ui:composition>
		<div id="topMessage">
			<h1>Welcome [top.xhtml]</h1>
		</div>
	</ui:composition>
</h:body>
</html>

In the file master.xhtml we will find the “ui:insert” tag; with this tag we will create an area in the page that it can be replaced. Notice that we use the “ui:include” tag that is adding a default page. It is a page with a few code but it is the base of this project site.

In the files left.xhtml and top.xhtml we have a default value to each page. Notice the use of the “ui:composition” tag; as general rule according to Core JavaServer Faces book, every code that will be included with the “ui:include” tag should be wrapped by the “ui:composition” tag. The left.xhtml page has links to navigate to other pages (the new pages will be your homework to practice Facelets).

Edit the style.css file to look like below:

h1 {
	color: blue;
	text-align: left;
}

#divTop {
	padding: 20px;
	height: 50px;
	margin-bottom: 10px;
	background: #dddddd;
	border: 1pxsoliddarkGray;
}

#divMenu {
	border: thinsolidlightGray;
	padding: 10px;
	width: 300px;
	background: #eeeeee;
	font-size: 40px;
	height: 680px;
}

#divMain {
	padding: 10px;
	border: thinsolidlightGray;
	background: #fefeef;
	position: absolute;
	right: 8px;
	left: 340px;
	height: 680px;
	top: 110px;
}

Edit the file “index.xhtml” and past the code below inside it:

<!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">
<h:body>
	<ui:composition template="/templates/master.xhtml">
		<ui:define name="pageTitle">
			Welcome [index.xhtml]
		</ui:define>

		<ui:define name="mainContent">
			<h1>Real Madrid, Champion!</h1>
			<h:graphicImage library="images" name="image01.png" />
		</ui:define>
	</ui:composition>
</h:body>
</html>

In the code above it is possible to see how easy is to use the master.xhtml page. With the tag “ui:define” we can choose which area to overwrite. Notice that we are overwriting the “pageTitle” and the “mainContent” present in the master.xhtml page; it is possible to override the “menu” or any other component found in the master.xhtml page.

Save all your files and start the server again; access the URL and you will see a page like below:

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
Posted in: English, Web App [English]

12 Thoughts on “JSF Mini Book – Tips, concepts and good practices”

  1. Tugrul on January 17, 2013 at 11:04 am said:

    Really good material. Thanks very much…

    Reply↓
  2. afibarra on October 19, 2012 at 5:03 pm said:

    Thank you very much !!!

    Reply↓
  3. surajtamang on September 25, 2012 at 3:55 am said:

    This Post is Awesome. Followed every things and applied on my project.

    Reply↓
  4. John on September 4, 2012 at 8:08 pm said:

    very usefull material, Keep up the good work

    Reply↓
  5. Thabita on September 3, 2012 at 12:10 pm said:

    Really cool material! I agree with Tim. If this could be distributed in pdf format, you will become a little more famous. :) Thanks, good job!

    Reply↓
  6. timmoltertim on September 3, 2012 at 4:47 am said:

    This is awesome! Could you post the entire article as a PDF for download??

    Reply↓

Leave a Reply

Post Navigation