Jsf facelets template tutorial

by

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>

URL:

http://localhost:7001/JSFExample46/faces/test.xhtml

Output:

JSF example46-1
 
If click on “Test Page” link.
JSF example46-2
 
If click on “Welcome Page” link.
JSF example46-3
 
Download this example.