JSF Mini Book – Tips, concepts and good practices

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:

18 thoughts on “JSF Mini Book – Tips, concepts and good practices

  1. 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!

  2. I’m not able to see this library applied in my program.
    Output is: Real Madrid, Champion!!! (No image and style)

    Please let me know what I’m missing.

  3. I was trying to learn Spring MVC for last 2 months, Every time i try to start, i get stuck somewhere. 2 Months passed, and i did not learn anything. I purchased two books for spring. Finally i quit Java web programming. One day I thought to give a try to JSF. and found some tutorials online, worked on them and I loved it. Your tutorials are going to help me a lot.
    Thank you so much.
    I would like to tell people here, don’t go near spring, It’s a piece of crap.

    • Arslan,

      Thanks for the feedback.

      My next post will be a full web application with Spring MVC.

      Maybe this application will help you understanding better the Spring, it is a good tool! =D

      See you later.

  4. With your code lines

    and

    eclipse was giving error that:

    Multiple annotations found at this line:
    – Invalid location of text (“) in tag ().
    – Invalid location of text (=”) in tag ().
    – Element type “h:outputStylesheetlibrary” must be followed by either attribute specifications, “>”
    or “/>”.

    So I’ve corrected it by changing lines to

    But I think as you mentioned in case of versions of resources, it will automatically picks up latest version. but the code I’m using will not control the version. It looks like hard-coded.

    What you say about it?

    Moreover, You wrote:
    “To use a mapped library by the ResourceHandler let us create a folder named “index.xhtml” inside the folder “/WebContent”.”

    I think you have not created a folder name “index.xhtml” but you have created a file named “index.xhtml”. If I’m right then you need to correct it. :)

    • Hello Arslan, how are you?

      Unfortunately the xml are not displayed here. =/

      Could you send me an email with the code and the texts that you wrote?

      Thanks for your support and passing by.

      My email is contato (at] uaihebert (d0T) com

      Thanks

Leave a Comment