JSF - template tags

Advertisements


Templates in a web application defines a common interface layout and style. For example, a same banner, logo in common header and copyright information in footer. JSF provides following facelets tags to provide a standard web interface layout.

S.N.Tag & Description
1ui:insert
Used in template file. It defines contents to be placed in a template. ui:define tag can replaced its contents.
2ui:define
Defines the contents to be inserted in a template.
3ui:include
Includes contents of one xhtml page into another xhtml page.
4ui:composition
Loads a template using template attribute. It can also define a group of components to be inserted in xhtml page.

Creating Template

Creating template for a web application is a step-by-step procedure. Let's follow the following steps to create a sample template.

Step 1: Create Header file: header.xhtml

Use ui:composition tag to define a default content of Header section.

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

Step 2: Create Footer file: footer.xhtml

Use ui:composition tag to define a default content of Footer section.

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

Step 3: Create Content file: contents.xhtml

Use ui:composition tag to define a default content of Content section.

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

Step 4: Create a Template: common.xhtml

Use 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>

Step 5a: Use Template with default contents: home.xhtml

load common.xhtml, a template using ui:composition tag in any xhtml page.

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

Step 5b: Use Template and set own contents: home.xhtml

load common.xhtml, a template using ui:composition tag in any xhtml 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 Application

Let us create a test JSF application to test the template tags in JSF.

StepDescription
1Create a project with a name helloworld under a package com.tutorialspoint.test as explained in the JSF - First Application chapter.
2Create templates folder under src > main > webapp folder.
3Create header.xhtml, footer.xhtml, contents.xhtml and common.xhtml files under src > main > webapp > templates folder. Modify them as explained below.
3Create page1.xhtml and page2.xhtml files under src > main > webapp folder. Modify them as explained below.
4Modify home.xhtml as explained below. Keep rest of the files unchanged.
5Compile and run the application to make sure business logic is working as per the requirements.
6Finally, build the application in the form of war file and deploy it in Apache Tomcat Webserver.
7Launch your web application using appropriate URL as explained below in the last step.

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:ui="http://java.sun.com/jsf/facelets">
   <body>
      <ui:composition> 
         <h1>Default Header</h1>
      </ui:composition>	
   </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:ui="http://java.sun.com/jsf/facelets">
   <body>
      <ui:composition> 
         <h1>Default Footer</h1>
      </ui:composition>	
   </body>
</html>

contents.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>Default Content</h1>
      </ui:composition>	
   </body>
</html>

common.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:head>
   <h:body> 
      <div style="border-width:2px; border-color:green; border-style:solid;">
         <ui:insert name="header" >
            <ui:include src="/templates/header.xhtml" />
         </ui:insert> 
      </div>
      <br/>
      <div style="border-width:2px; border-color:black; border-style:solid;">
         <ui:insert name="content" >
            <ui:include src="/templates/contents.xhtml" />
         </ui:insert>    
      </div>
      <br/>
      <div style="border-width:2px; border-color:red; border-style:solid;">
         <ui:insert name="footer" >
            <ui:include src="/templates/footer.xhtml" />
         </ui:insert>
      </div>
   </h:body>
</html>

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="templates/common.xhtml">
         <ui:define name="header">
            <h2>Page1 header</h2>
         </ui:define>			
         <ui:define name="content">
            <h2>Page1 content</h2>
             <h:link value="Back To Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Page1 Footer</h2>
         </ui:define>			
      </ui:composition> 
   </h:body> 
</html>	

page2.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="templates/common.xhtml">
         <ui:define name="header">
            <h2>Page2 header</h2>
         </ui:define>			
         <ui:define name="content">
            <h2>Page2 content</h2>
             <h:link value="Back To Home" outcome="home" />
         </ui:define> 
         <ui:define name="footer">
            <h2>Page2 Footer</h2>
         </ui:define>			
      </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:ui="http://java.sun.com/jsf/facelets">
   <h:body>
      <ui:composition template="templates/common.xhtml">	
         <ui:define name="content">				
            <br/><br/>
             <h:link value="Page 1" outcome="page1" />
             <h:link value="Page 2" outcome="page2" />			
            <br/><br/>
         </ui:define>
      </ui:composition>
   </h:body>
</html>	

Once you are ready with all the changes done, let us compile and run the application as we did in JSF - First Application chapter. If everything is fine with your application, this will produce following result:

JSF template result

Click Page1 link and you'll see the following result.

JSF template result1

Or Click Page2 link and you'll see the following result.

JSF template result2

Advertisements
Advertisements