Jsf facelets template tutorial

JSF Template:

JSF provides the following tags for building and using a template layout.

Tag	Description
ui:insert	It defines content in a template which have to be replaced by the file that use the template. The ui:define tag can be used to replace its contents.
ui:define	It is used to define the contents which is Inserts into template with a matching “ui:insert” tag.
ui:include	It is used to include contents of one xhtml page into another xhtml page.
ui:composition	It is used to load the specific template using template attribute. It can be used to define a group of components that can be inserted in xhtml page.

Example:

main.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
 <div style="border-width: 2px; 
   border-color: blue; border-style: solid;">
  <ui:insert name="header">
  <ui:include src="header.xhtml" />
  </ui:insert>
 </div>
 <br/>
 <div style="border-width: 2px; 
   border-color: green; border-style: solid;">
  <ui:insert name="content">
  <ui:include src="body.xhtml" />
  </ui:insert>
 </div>
 <br/>
 <div style="border-width: 2px; 
   border-color: red; border-style: solid;">
  <ui:insert name="footer">
  <ui:include src="footer.xhtml" />
  </ui:insert>
 </div>
</h:body>
</html>

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">
 
<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">
    <h:body>
     <ui:composition> 
          <h1>Header</h1>
        </ui:composition>
    </h:body>    
</html>

footer.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
     <ui:composition> 
          <h1>Footer</h1>
        </ui:composition>
    </h:body>    
</html>

body.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
     <ui:composition> 
          <h1>Body</h1>
        </ui:composition>
    </h:body>    
</html>

home.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
 <ui:composition template="main.xhtml"> 
        <ui:define name="content">    
            <br/>
            <h:link value="Test Page" outcome="test" />
            <br/><br/>
            <h:link value="Welcome Page" outcome="welcome" />   
            <br/>
        </ui:define>
     </ui:composition>
</h:body>
</html>

test.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
 <ui:composition template="main.xhtml">
         <ui:define name="header">
            <h2>Test Page header</h2>
         </ui:define>   
         <ui:define name="content">
            <h2>Test Page content</h2>
             <h:link value="Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Test Page Footer</h2>
         </ui:define>   
      </ui:composition> 
</h:body>
</html>

welcome.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:f="http://java.sun.com/jsf/core"
 xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
 <ui:composition template="main.xhtml">
         <ui:define name="header">
            <h2>Welcome Page header</h2>
         </ui:define>   
         <ui:define name="content">
            <h2>Welcome Page content</h2>
             <h:link value="Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Welcome Page Footer</h2>
         </ui:define>   
      </ui:composition> 
</h:body>
</html>

faces-config.xml

<?xml version="1.0" encoding="windows-1252"?>
<faces-config version="2.0" 
xmlns="http://java.sun.com/xml/ns/javaee" 
xmlns:xi="http://www.w3.org/2001/XInclude" 
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">
 
</faces-config>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.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-app_3_0.xsd">
 
    <servlet>
        <servlet-name>faces</servlet-name>
        <servlet-class>
         javax.faces.webapp.FacesServlet
 <servlet-mapping>
        <servlet-name>faces</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>
 
</web-app>