A simple JSF facelet template example

Joined:
08/13/2009: Posts:
164

October 28, 2011 13:49:40 Last update: October 30, 2011 19:23:25

This is a simple example to demonstrate the templating power of JSF facelets. If you've used struts tiles before, you'll recognize the simplicity of templating with facelets. I've stripped out everything else except the pages themselves, just to put our focus on facelets.

This is a Maven based project, and you need Tomcat (or any servlet container) to run the resulting webapp.

To begin with this is the list of files:

./pom.xml
./src/main/webapp/home.xhtml
./src/main/webapp/index.jsp
./src/main/webapp/WEB-INF/web.xml
./src/main/webapp/WEB-INF/faces-config.xml
./src/main/webapp/WEB-INF/templates/default.xhtml

I left faces-config.xml in there for completeness sake, it may not be needed.

The Maven POM (pom.xml):

<?xml version="1.0" encoding="UTF-8"?>
<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">
   <modelVersion>4.0.0</modelVersion>
   <groupId>demo</groupId>
   <artifactId>facelet-demo</artifactId>
   <packaging>war</packaging>
   <name>facelet-demo</name>
   <version>1.0.0-SNAPSHOT</version>

   <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
   </properties>

   <repositories>
       <!-- Several key Java EE APIs and RIs are missing from the Maven Central Repository -->
       <!-- The goal is to eventually eliminate the reliance on the JBoss repository -->
       <repository>
          <id>repository.jboss.org</id>
          <name>JBoss Repository</name>
          <url>https://repository.jboss.org/nexus/content/groups/public</url>
       </repository>
   </repositories>

   <dependencies>
      <!-- JSF 2.0 API -->
      <dependency>
         <groupId>javax.faces</groupId>
         <artifactId>jsf-api</artifactId>
	 <version>2.0.0-RC</version>
      </dependency>

      <!-- JSF 2.0 Impl -->
      <dependency>
         <groupId>javax.faces</groupId>
         <artifactId>jsf-impl</artifactId>
         <scope>runtime</scope>
	 <version>2.0.0-RC</version>
      </dependency>
   </dependencies>

   <build>
      <finalName>facelet-demo</finalName>
   </build>
</project>

Web app configuration (WEB-INF/web.xml):

<?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">
   <!-- Activate the JSF 2.0 servlet -->
   <servlet>
      <servlet-name>Faces Servlet</servlet-name>
      <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
   </servlet>
   
   <!-- Tell the context which URLs to send through JSF -->
   <servlet-mapping>
      <servlet-name>Faces Servlet</servlet-name>
      <url-pattern>*.jsf</url-pattern>
   </servlet-mapping>
   
   <!-- This is an optional parameter, but it makes troubleshooting errors much easier -->
   <!-- You are advised to remove this context parameter before a production deployment -->
   <context-param>
      <param-name>javax.faces.PROJECT_STAGE</param-name>
      <param-value>Development</param-value>
   </context-param>
</web-app>

Empty WEB-INF/faces-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<!-- This file is not required if you don't need any extra configuration. -->
<faces-config version="2.0"
   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_2_0.xsd">

   <!-- Write your navigation rules here. -->

</faces-config>

index.jsp is simply a redirect to home.jsf:

<% response.sendRedirect("home.jsf"); %>

The default template (WEB-INF/templates/default.xml):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
    <title>Facelets Template Demo</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    </h:head>

    <h:body>
    <div id="header"><h2>Facelets Template Demo</h2></div>
    <div id="content">
	<ui:insert name="content">
               [Template content will be inserted here]
        </ui:insert>
    </div>
   <div id="footer"><p>This is the footer</p></div>
   </h:body>
</html>

Three sections are defined: a header, a footer and the area where content should be placed. Only the content section holds replaceable content (defined with the facelet tag <ui:insert>). The <ui:insert> tag specifies placeholders where content will be provided by overriding page definitions.

Finally, the home page (home.xhtml):

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition 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"
   template="/WEB-INF/templates/default.xhtml">
   <ui:define name="content">
   This is the home page!
   </ui:define>
</ui:composition>

where it is declared that the default template should be used, and the real content is provided by using the facelet tag <ui:define>.

To build:
```
mvn package
```
The WAR file is created as target/facelet-demo.war.

Share |

| Comment | Tags

Ξ Notes

A simple JSF facelet template example