Hobione's Weblog

Living & Breathing in Web 2.0 Era

5 steps to add facelets in a JSF application

I bet there are million ways to add Facelets in a JSF project.  Here is my approach that worked for me.

1. Add these to web.xml


2. Create index.html under root and add redirect

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><meta http-equiv="Refresh" content="1;url=body/index.iface"></head>

3. Create facelets directory under WEB-INF/
Create template, header, footer etc.

Here is my template.xhtml under WEB-INF/facelets dir.

<?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:ice="http://www.icesoft.com/icefaces/component" >

		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title><ui:insert name="title">HR Sign up</ui:insert></title>
		<ice:outputStyle href="./xmlhttp/css/xp/xp.css" />

	<body background="" title="">
<table border="0px" cellspacing="0px" cellpadding="0px" width="800px">

				<!-- START of banner -->
				<ui:include src="header.xhtml" />
				<!-- END of banner -->
<tr valign="top" align="left">
				<!-- START of side-bar -->
					<ui:include src="menu.xhtml" /></td>
<!-- END of side-bar -->
<td width="100%">
<table border="0" cellspacing="0" cellpadding="0">
<tr valign="top" align="left">
								<ui:insert name="body">Body</ui:insert></td>

This file is under WEB-INF/facelets/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">

<ui:composition xmlns:f="http://java.sun.com/jsf/core"

    Header Include


This file is under WEB-INF/facelets/menu.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">
<ui:composition xmlns:f="http://java.sun.com/jsf/core"

 Left Menu


This file is under /body/index.xhtml (index.iface)

<ui:composition xmlns:h="http://java.sun.com/jsf/html"

	<ui:define name="body">

        <ice:outputText value="This is home index" />


        </ice:form >


4. Add view handler in the faces-config.xml


5. Add jar files to the class path

el-api-1.0.jar, el-ri.jar, jsf-facelets1.1.13.jar

Here is the MyEclipse project screen shot:


Cations: Be careful about putting any other files under WEB-INF dir because the container is forbidden from serving up any files in WEB-INF, unless you’re using java code to serve it, the browser won’t get it.  I have put a .js file under WEB-INF and tried to load from template.xhmtl, did not work.

Solution: I have created an ‘incl’ directory under web and stuck the .js file and here how I am accessing from template.xhtml: <script type=”text/javascript” src=”../incl/hrTraining.js”> </script> and it worked.

Dynamically look up Web app name (From Marty’s web site):
– And put on the front of URLs after a slash
• Technique
– Use expression language
• ${facesContext.externalContext.requestContextPath}
• Example
– <img src=”${facesContext.externalContext.requestContextPath}/images/pic1.jpg”/>

Facelets Resources:

Jacob Hookom: Why Facelets?

– Facelets isn’t dependent on a Web Container

– Use facelets for layout
– JSF plugable view handler, facelets is an alternate view handler
– No one uses jsfc tags unless your programmer and web designer are in different group.

Richard Hightower: Best intro for Facelets: http://www-128.ibm.com/developerworks/java/library/j-facelets/ (Download j-faceletsjarsandwars.zip, unzip it and deploy .war file in Glash flash)
– facelets is JSF’s view framework
– facelet means no jsp
– JSP and JSF has two different life cycle (overhead)
– JSP is created to generate dynamic output not to create component trees
– Faster render
– With JSP, mixing JSF and JSTL is problematic. Facelets brings limited but faultless support <c:if> <c:forEach> <c:catch> <c:set>
– Saves JSF from the burden of JSP
– Templating and composition plus bonuses like el functions

Marty Hall’s Facelet Tutorial: http://courses.coreservlets.com/Course-Materials/pdf/jsf/15-Facelets-Templating.pdf

Facelets documentation: https://facelets.dev.java.net/nonav/docs/dev/docbook.html#config-webapp

Netbeans Facelets Plugin: https://nbfaceletssupport.dev.java.net/features.html

I think, MyEclipse has the best Facelets support so far. I am using MyEclipse 7.0
Facelets ROCKS!  Thank you to Jacob Hookman, the Facelets god.


March 5, 2008 - Posted by | Facelets


  1. […] Related topics: Five Steps to add Facelets […]

    Pingback by JavaScript in Facelets/XHTML « Hobione’s Weblog | January 22, 2009 | Reply

  2. […] 5 steps to add facelets in a JSF application « Hobione’s Weblog (tags: facelets) […]

    Pingback by links for 2009-03-19 « sySolution | March 19, 2009 | Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: