Skip to content

Instantly share code, notes, and snippets.

@d33pcode

d33pcode/JSF: Creating Template.md

Last active October 2, 2015 09:57
Show Gist options
  • Save d33pcode/9398f5bba19a6fc4f396 to your computer and use it in GitHub Desktop.
Save d33pcode/9398f5bba19a6fc4f396 to your computer and use it in GitHub Desktop.
Download ZIP
#devnotes JSF templates
Raw
JSF: Creating Template.md

Templates

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.

Step Tag Description
1 ui:insert Used in template file. It defines contents to be placed in a template. ui:define tag can replaced its contents.
2 ui:define Defines the contents to be inserted in a template.
3 ui:include Includes contents of one xhtml page into another xhtml page.
4 ui: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.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment