Features
- New replacement for JSP with UI components and XML formatting.
- Facelets can be used seamlessly with JSF.
- No compile time overhead like JSP; faster.
- Easy for UI designers as they can use existing XML/HTML development tools.
- Easy to build custom components and templates using composite views.
Getting Started
- Download Facelets zip file and copy jsf-facelets.jar into WEB-INF/lib.
- Modify faces-config.xml and set com.sun.facelets.FaceletViewHandler as the view handler. (This will override the default view handler setting which is expecting JSP file formats)
<application>
<view-handler>
com.sun.facelets.FaceletViewHandler
</view-handler>
</application>
- Modify web.xml file to give defaul suffix.
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
Our JSF pages should have the file extension ‘.xhtml’ and you can have a servelet mapping '*.jsf' files for the faces servlet. In that way, the actual page 'mypage.xhtml' can be accessed as 'mypage.jsf'.
How to Use
Templating
One of the main advantages of Facelets is its use as a templating tool for JSF pages. You simply creates a basic layout page, divide it into logical areas as you wish (with ui:insert tags) and implements the basic contents in those logical areas. Then, for any page in your application that you want to use the template just have to put ui:composition tag in the page and override any implementation of the logical areas with ui:define tag. This is a very simple and elegant way of doing page templating; something I was looking for quite a sometime. Let's see this example;
This is my template: layout.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<!--
Author : Lasantha Kularatne
Date : Jan 27, 2009
Version : 1.0
Copy Rights : Lasantha Kularatne
-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<ui:insert name="scriptslinks">
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/myjsfile.js"></script>
</ui:insert>
<title><ui:insert name="title">My Portal</ui:insert></title>
</head>
<body>
<!-- header -->
<ui:insert name="myheader"><ui:include src="header.xhtml"/></ui:insert>
<!-- data -->
<ui:insert name="mydata"></ui:insert>
<!-- footer -->
<ui:insert name="myfooter"><ui:include src="footer.xhtml"/></ui:insert>
</body>
</html>
I have divided my page into three logical areas called myheader, mydata and myfooter. I have basic implementations for header and footer in header.xhtml and footer.xhtml respectively, but not for the data area. Also I have two more logical areas for title and links/scripts.
Let's see how we can use this template: mypage.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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="./layout.xhtml">
<ui:define name="title"><h:outputText value="#{bundle.TESTPAGE_TITLE}" /></ui:define>
<ui:define name="mydata">
<h:form id="MyForm">
...
</h:form>
</ui:define>
</ui:composition>
</html>
As you can see here, I have overridden the title and data areas. I put the title reading from my resource bundle and I have used a JSF form element in m data area. <ui:composition> tag is used to compose the page and notice that template reference (layout.xhtml). You have to give the template file name with the relative path.
Composite Components
It is very easy to build composite components with Facelets. All you have to do is use a ui:component tag and include you code. When ever you want to use that component, you simply have to include that file. Let's look this example: mycomponent.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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<ui:component>
<div id="mylogo">
<a href="http://www.mycompanypage.com">
<span>My Company Pvt Ltd.</span>
</a>
</div>
</ui:component>
</html>
Notice that, although here we have some tags around ui:component tag, those will be discarded by the Facelets engine. Those tags are there only to identify the page by editors.
Commonly Used Tag Libraries
- JSF Core Tag Library (xmlns:f="http://java.sun.com/jsf/core")
- JSF HTML Tag Library (xmlns:h="http://java.sun.com/jsf/html")
- Facelets UI Tag Library (xmlns:ui="http://java.sun.com/jsf/facelets")
- JSTL Standard Tag Library (xmlns:c="http://java.sun.com/jstl/core")
- JSTL Functions Tag Library (xmlns:fn=http://java.sun.com/jsp/jstl/functions)
Facelets UI Tag Library
For further information, read about these tags and get familiar how you can use them in your project.
- ui:component
- ui:composition
- ui:debug
- ui:decorate
- ui:define
- ui:fragment
- ui:include
- ui:insert
- ui:param
- ui:remove
- ui:repeat