After working with JSF for quite sometimes, what should I learn next? Naturally, it would be Facelets. It is a templating language which is suitable for JSF. Although, Facelets was build with JSF in mind but it is said that, Facelets is flexible enough to be use with other UI language besides JSF.
So, what are needed for Facelets to work? Glad you asked. Below are the libraries needed for running JSF with Facelets. As you can see, MyFaces have made into my top choice. But don’t fret about it, just swap MyFaces libraries with Sun-RI if you prefer the latter.
<project
xmlns = "http://maven.apache.org/POM/4.0.0"
xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation = "http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
...
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>com.sun.facelets</groupId>
<artifactId>jsf-facelets</artifactId>
<version>1.1.13</version>
</dependency>
<dependency>
<groupId>myfaces</groupId>
<artifactId>myfaces-api</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>myfaces</groupId>
<artifactId>myfaces-impl</artifactId>
<version>1.2.3</version>
</dependency>
<dependency>
<groupId>commons-logging</groupId>
<artifactId>commons-logging</artifactId>
<version>1.1.1</version>
</dependency>
<dependency>
<groupId>commons-beanutils</groupId>
<artifactId>commons-beanutils</artifactId>
<version>1.6</version>
</dependency>
<dependency>
<groupId>commons-codec</groupId>
<artifactId>commons-codec</artifactId>
<version>1.2</version>
</dependency>
<dependency>
<groupId>commons-digester</groupId>
<artifactId>commons-digester</artifactId>
<version>1.8</version>
</dependency>
<dependency>
<groupId>commons-el</groupId>
<artifactId>commons-el</artifactId>
<version>1.0</version>
</dependency>
</dependencies>
</project>
Then, I need to amend the web deployment descriptor to include the JSF servlet. Facelets has a standard file suffix which is ‘xhtml’. Hence, context-param named javax.faces.DEFAULT_SUFFIX and JSF Servlet’s URL Pattern are set to .xhtml.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Next stop is the faces-config.xml file. Minimally, what I need to add is just the Facelets’ view handler as below.
<faces-config version="1.2"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd">
<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>
</faces-config>
After configuring the XMLs, then I can start working on the UI. Ideally, we will start by creating a template for all our pages. Facelets has a strict requirement which the page must be a fully XHTML-compliant. Working with IDE sure helps a lot in weeding out those pesky errors. Below is a simple template named template.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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<head>
<title>Dhydrated's Well</title>
</head>
<body>
<h:form>
<ui:insert name="body-content">
Body to be replaced.
</ui:insert>
</h:form>
</body>
</html>
As you could have guessed, Facelets tag has ui prefix. Above, I’ve created a hook on the template named body-content by using the ui:insert tag, which could be replaced by my JSF view. Now, lets create a JSF view that uses above template.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML1.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">
<body>
<ui:composition template="template.xhtml">
<ui:define name="body-content">
<t:outputText value="Value from JSF View" />
</ui:define>
</ui:composition>
</body>
</html>
Above JSF view, uses ui:composition tag to state which template it referring to. Then, it uses ui:define to position it content in the template by matching it’s name with template’s ui:insert tag’s name. So when you run this view on the browser, Facelets will help to decorate the page based on the choosen template.
What I had shown above is just one of the benefits from Facelets. There are other great goodies from Facelets which are component composition (which is my favourite), customizable tag libs, extendable components and etc. It also helps to nicely interweave JSTL and JSP expression language (EL) together. Although, there are others templating utilities such as Tiles, FreeMarker, Velocity and SiteMesh, Facelets does has a good edge when applied with JSF.
