JSF Tutorial - JSF Facelets Template Example

The following code shows how to create template using the JSF Facelets Tags

Templates in a JSF application defines a common interface layout and style.

For example, we can create a page template which has banner, logo in header and copyright information in footer.

Then we can reuse the template to create pages.

JSF has the following facelets tags to create a template layout.

Tag	Description
ui:insert	defines contents to be placed in a template. ui:define tag can replaced its contents.
ui:define	Inserts the contents in a template.
ui:include	Includes contents of one xhtml page into another xhtml page.
ui:composition	Loads a template using template attribute. It can define a group of components to be inserted in xhtml page.

The following steps shows how to create a template.

Create Header file: header.xhtml as follows using ui:composition tag.

<ui:composition> 
   <h1>Default Header</h1>  
</ui:composition>

Create Footer file: footer.xhtml as the footer

<ui:composition> 
   <h1>Default Footer</h1>  
</ui:composition>

Create Content file: contents.xhtml to define a default content of Content section.

<ui:composition> 
   <h1>Default Contents</h1>  
</ui:composition>

Create a Template: common.xhtml by using ui:insert and ui:include tag to include header/footer and content file in template file. Name each section in ui:insert tag.

name attribute of ui:insert tag will be used to replace contents of corresponding section.

<h:body> 
   <ui:insert name="header" >
      <ui:include src="header.xhtml" />
   </ui:insert> 
   <ui:insert name="content" >
      <ui:include src="contents.xhtml" />
   </ui:insert>    
   <ui:insert name="footer" >
      <ui:include src="footer.xhtml" />
   </ui:insert>
</h:body>

The following code shows how to use template with default contents to create home.xhtml

<h:body>
   <ui:composition template="common.xhtml">  
</h:body>

We can also combine template and other tags to create a new page. Use ui:define tag to override default values.

<h:body>
   <ui:composition template="templates/common.xhtml">  
      <ui:define name="content">        
         <h:link value="Page 1" outcome="page1" />
         &nbsp;
         <h:link value="Page 2" outcome="page2" />      
      </ui:define>
   </ui:composition>
</h:body>

Example

The following code is from commonLayout.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">
<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>
    <h:outputStylesheet name="common-style.css" library="css" />
  </h:head>
    
    <h:body>

  <div id="page">
    
    <div id="header">
      <ui:insert name="header" >
        <ui:include src="/template/common/commonHeader.xhtml" />
      </ui:insert>
      </div>
      
      <div id="content">
         <ui:insert name="content" >
           <ui:include src="/template/common/commonContent.xhtml" />
         </ui:insert>
      </div>
        
      <div id="footer">
        <ui:insert name="footer" >
          <ui:include src="/template/common/commonFooter.xhtml" />
        </ui:insert>
      </div>
      
    </div>
    
    </h:body>

</html>

The following code is from commonFooter.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">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default footer</h1>
        
      </ui:composition>
    </body>
</html>

The following code is from demo.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">
<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:body>
      
      <ui:composition template="template/common/commonLayout.xhtml">

      
      </ui:composition>
      
    </h:body>

</html>

The following code is from page1.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">
<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:body>
      
      <ui:composition template="/template/common/commonLayout.xhtml">
      
        <ui:define name="content">
          <h2>This is page1 content</h2>
        </ui:define>
        
        <ui:define name="footer">
          <h2>This is page1 Footer</h2>
        </ui:define>
        
      </ui:composition>
      
    </h:body>

</html>

The following code is from UserBean.java.

package com.java2s.common;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
@ManagedBean(name="user")
@SessionScoped
public class UserBean implements Serializable{
  
  private static final long serialVersionUID = 1L;

}

The following code is from common-style.css.

#page{
  width: 800px;
  margin: 0 auto;
}

#header{
  width: 100%;
  height:100px;
  border: 1px solid #000;
  margin-bottom:16px;
}

#content{
  width: 100%;
  height:200px;
  margin-right:16px;
  margin-bottom:16px;
  border: 1px solid #000;
}

#footer{
  width: 100%;
  height:100px;
  border: 1px solid #000;
}

The following code is from commonContent.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">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default content</h1>
        
      </ui:composition>
    </body>
</html>

The following code is from commonHeader.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">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:ui="http://java.sun.com/jsf/facelets"
      >
    <body>
      <ui:composition>
  
      <h1>This is default header</h1>
        
      </ui:composition>
    </body>
</html>

Download Facelets-Template.zip

To RUN

Copy the generated WAR file from the target folder to Tomcat deployment folder and run Tomcat-Install-folder/bin/startup.bat.

After Tomcat finish starting, type the following URL in the browser address bar.

http://localhost:8080/simple-webapp/demo.xhtml