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


    <context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
    </context-param>
    <context-param>
<param-name>facelets.REFRESH_PERIOD</param-name>
<param-value>2</param-value>
    </context-param>
    <context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
    </context-param>

2. Create index.html under root and add redirect

<!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="Refresh" content="1;url=body/index.iface"></head>
  <body>Initializing...</body>
</html>

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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ice="http://www.icesoft.com/icefaces/component" >

	<head>
		<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" />
	</head>

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

			<caption>
				<!-- START of banner -->
				<ui:include src="header.xhtml" />
				<!-- END of banner -->
			</caption>
<tr valign="top" align="left">
				<!-- START of side-bar -->
<td>
					<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">
<td>
								<ui:insert name="body">Body</ui:insert></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

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"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xmlns:ui="http://java.sun.com/jsf/facelets">

    Header Include

</ui:composition>

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"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xmlns:ui="http://java.sun.com/jsf/facelets">

 Left Menu

</ui:composition>

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

<ui:composition xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:ice="http://www.icesoft.com/icefaces/component"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        template="/WEB-INF/templates/template.xhtml">

	<ui:define name="body">

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

        <ice:form>

        </ice:form >

	</ui:define>
</ui:composition>

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

   <application>
        <view-handler>
            com.sun.facelets.FaceletViewHandler
        </view-handler>
    </application>

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:

Facelets

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?
http://www.jsfcentral.com/articles/facelets_1.html
– Facelets isn’t dependent on a Web Container

https://facelets.dev.java.net/
– 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

2 Comments »

  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 comment

« Previous | Next »