JSF 2 Templating with Facelets example

In web application, most pages are follow a similar web interface layout and styling, for example, same header and footer. In JSF 2.0, you can use Facelets tags to provide a standard web interface layout easily, in fact, it’s look similar with Apache Tiles framework.

In this example, it shows the use of 4 Facelets tags to build page from a template :

  1. ui:insert – Used in template file, it defines content that is going to replace by the file that load the template. The content can be replace with “ui:define” tag.
  2. ui:define – Defines content that is inserted into template with a matching “ui:insert” tag.
  3. ui:include – Similar to JSP’s “jsp:include”, includes content from another XHTML page.
  4. ui:composition – If used with “template” attribute, the specified template is loaded, and the children of this tag defines the template layout; Otherwise, it’s a group of elements, that can be inserted somewhere. In addition, JSF removes all tags “outside” of “ui:composition” tag.

1. Template Layout

In JSF 2.0, a template file is just a normal XHTML file, with few JSF facelets tags to define the template layout.

File : commonLayout.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"
      >
 
    <h:head>
	<h:outputStylesheet name="common-style.css" library="css" />
    </h:head>
 
    <h:body>
 
	<div id="page">
 
	    <div id="header">
		<ui:insert name="header" >
		  <ui:include src="/template/common/commonHeader.xhtml" />
		</ui:insert>
	    </div>
 
	    <div id="content">
	  	<ui:insert name="content" >
	 	  <ui:include src="/template/common/commonContent.xhtml" />
	   	</ui:insert>
	    </div>
 
	    <div id="footer">
	    	<ui:insert name="footer" >
	    	  <ui:include src="/template/common/commonFooter.xhtml" />
	    	</ui:insert>
    	    </div>
 
        </div>
 
    </h:body>
</html>

In this template, it defines a standard web layout :

  1. Uses “h:outputStylesheet” tag to include a CSS file in head to styling the whole page layout.
  2. Uses “ui:insert” tag to define three replaceable sections : header, content and footer.
  3. Uses “ui:include” tag to provide a default content if no replacement is specified when the template is used.

2. Header, Content and Footer

Three default page content.

File : commonHeader.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>
 
		<h1>This is default header</h1>
 
	    </ui:composition>
    </body>
</html>

File : commonContent.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>
 
		<h1>This is default content</h1>
 
	    </ui:composition>
    </body>
</html>

File : commonFooter.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>
 
		<h1>This is default footer</h1>
 
	    </ui:composition>
    </body>
</html>

When these pages are insert into the template file, all the tags outside of the “ui:composition” will be removed. For example,

File : commonHeader.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>
	    ALL TAGS ABOVE THIS LINE WILL BE REMOVED BY JSF
	    <ui:composition>
 
		<h1>This is default header</h1>
 
	    </ui:composition>
	    ALL TAGS BELOW THIS LINE WILL BE REMOVED BY JSF
    </body>
</html>

JSF only takes following elements and insert into the template file

<ui:composition>
 
	<h1>This is default header</h1>
 
</ui:composition>

When insert into the “commonLayout” template , it became…

File : commonLayout.xhtml

	...
    <h:body>
 
	<div id="page">
 
	    <div id="header">
		<h1>This is default header</h1>
	    </div>
	...

3. Using Template

To make use of an existing template, eg. “commonLayout.xhtml“, you use “ui:composition” tag with a “template” attribute. See following two examples :

File : default.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"
      >
    <h:body>
 
    	<ui:composition template="template/common/commonLayout.xhtml">
 
    	</ui:composition>
 
    </h:body>
 
</html>

This JSF page load “commonLayout.xhtml” template and display all the default page content.

jsf2-facelets-template-example-1

File : page1.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"
      >
    <h:body>
 
    	<ui:composition template="/template/common/commonLayout.xhtml">
 
    		<ui:define name="content">
    			<h2>This is page1 content</h2>
    		</ui:define>
 
		<ui:define name="footer">
    			<h2>This is page1 Footer</h2>
    		</ui:define>
 
    	</ui:composition>
 
    </h:body>
 
</html>

This JSF page load a “commonLayout.xhtml” template and use “ui:define” tag to override the the “ui:insert” tag, which defined in the template file.

jsf2-facelets-template-example-2
Note
As long as the name of the “ui:define” tag is matched to the name of the “ui:insert” tag, which defined in template, the “ui:insert” content is replaced.

Download Source Code

Download It – JSF-2-Facelets-Template-Example.zip (12KB)

References

  1. Apache Tiles Framework
  2. JSF “ui:include” JavaDoc
  3. JSF “ui:insert” JavaDoc
  4. JSF “ui:define” JavaDoc
  5. JSF “ui:composition” JavaDoc
Tags :

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

  • Pingback: house blue()

  • Pingback: super fast reply()

  • Pingback: how to install plumbing yourself()

  • Pingback: directory()

  • Pingback: locksmith fredericksburg va()

  • Pingback: complete electrician tool kit()

  • Pingback: pay per day loan plans()

  • Pingback: bottled alkaline water()

  • Pingback: water ionizer()

  • Pingback: paypal loans()

  • Pingback: water ionizer machine()

  • Pingback: 3gp mobile porn()

  • Pingback: parking()

  • Pingback: parking()

  • Pingback: Gorgeous model zoe voss blows fuck-stick and gulps()

  • Pingback: watch movies online free()

  • Pingback: stream movies()

  • Pingback: Blue Coaster33()

  • NKS

    how does the web.xml file appear in this program? can you please explain every line?

  • selva

    Thanks a lot. you saved my day..

  • ganesh

    Hi
    I am new in jsf,have to work on new project .Need page rendering features like tiles so want to know should i go for tiles or jsf has same functionality like tiles has.

  • Baskar

    how we can avoid the page refresh for header and footer area

  • Andrea Franceschini

    The clearest example I found till now about templates. It definitely make me understand the use of them. Thanks.

  • Michael R

    This tutorial is great! Thank you so much.

  • Reda

    Thanks, very helpful tutorial :)

  • Mortoza

    very helpful tutorial. Thanks MKYong.

  • Sam

    Nice article. page1.xhtml content part is replaced by right?

    • Sam

      page1 content is replaced by ui:define content but not ui:define header ?

  • Mazaher Namjofar

    Thank u very much!very good tutorial from mkyong.

  • arthur grohe

    Thanks for this very simple and easy to understand tutorial!
    Never seen such a clear article!
    Keep up the good work ;)

  • http://diegotrujillor.jobrary.com/resume Diego Fernando Trujillo

    The most simplest and easiest post to understand the concept. Thanks.

  • Pingback: JSF Quickstart with Richfaces/ Primefaces « Recipes for Geeks()

  • Mohit Saluja

    I am having a JavaScript in commonHeader, Now will it render/work in default.xhtml and page1.xhtml. Or i need to include it in commonLayout.xhtml

  • Mohit Saluja

    Mkyong Sir, I am having a JavaScript in commonHeader, now will it render/work in default.xhtml, page1.xhtml. Or i need to keep that in these two pages or somewhere else like commonLayout.xhtml

  • murat

    Your examples are so clear and so instructive,thanks..

  • Prasanth

    Great Tutorials

  • noboundaries

    Couldn’t stop to say “thanks” for the easy writeup.

  • Mabruk

    Nice and clean code. Good examples, easy to follow.

  • http://www.pinecompany.net vahid

    you explained it very easy and clear

    thank you

  • mn

    Thanks…

    You explain this concept in a good and easy way.

  • somasekhar

    Hi mkyong, Is a templates concept replaces tiles concept?

  • David

    Hi.

    Great tutorial,

    I have been using facelets but there is something I couldn’t do it.

    If you take a composition like you use in your tutorial, and add a button like you have in your page for “print” in “header section” in commonHeader.xhtml.

    Is there a way to indicate you want to print the content, just the content, in the “content section”????. In my case I show in that section different contents, so I don’t want to print the hole page (or composition).

    Thanks
    David.

  • agungdmt

    this is nice great go damn tutorial Mkyong
    thx bro…

  • http://royjavelosa.wordpress.com royjavelosa

    Hi Mkyong nice tutorial. I have a question is it possible to update the content part asynchronously (ajax)? I tried the example it does preserve the parts of your template but the whole page gets refreshed. Is it possible that only parts of the templates are refreshed? Thanks in advance.

  • Russ Bateman

    This is a nice, basic article. However, for a real beginner who wants to do this hands-on, there’s not a list of JARs and other details to accomplish it in, say, Eclipse or NetBeans. Obviously, you know how to do that. Could you list the JARs and their origins?

    • http://www.mkyong.com mkyong

      Sorry for the missing information, you can download this project (Maven + Eclipse project), all the JARs are listed in the pom.xml file. Alternatively, you can find all the JARs in this article – http://www.mkyong.com/jsf2/jsf-2-0-hello-world-example/

      • vinod bhavihal

        Hi… can we use tiles with JSF2.0? If so how?

  • java_dev

    like yr demo..cool

  • Alex

    Hi, i have a question. You wrote that in page2.xhtml we can override template’s CONTENT with
    and put some xhtml code there. but if i have, for example, content2.xhtml, and i want to include it – i must write

    Can i solve my question in such way?

    • Alex

      write code
      ui:define name=”content”
      ui:insert name=”content”
      ui:include src=”/template/common/content2.xhtml”
      ui:insert
      ui:define

  • Svilen Velikov

    What about getting the browsers in quirks mode with that xml prolog before the doctype?!

  • Flavio Furlanetto

    Hi, great article here!

    This is something essential to a well structured web app and it’s very well explained! I just like to include as a note that to have the “h:outputStylesheet” to work, the css file must be inside the “resources” folder, otherwise it won’t pick it up (at least here on my tests / researches that’s what I could conclude). It would be cool if you can add this as a note to the article!

    Thank you very much!

    • Paras Jain

      Thanks Flavio