JSF Facelet Template Tag

Facelets:

Facelets is a powerful but lightweight page declaration language that is used to build JavaServer Faces views using HTML style templates.Jsf is provided with facelets and to use them we need to add below namespace:

<!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"
xmlns:h="http://java.sun.com/jsf/html">

Facelets Templating Tags:

ui:composition

<ui:composition template="optionalTemp">

It defines a page. template attribute is optional. Content outside template will be ignored.

ui:decorate

<ui:decorate template="requiredTemplate">

It is similar to ui:composition. With this content outside this tag is considered and template attribute is mandatory.

ui:define

<ui:define name="requiredName">

It is used in files acting as a template client, inside a tag, to define a region that will be inserted into the composition at the location given by the tag with the corresponding name for the tag.

ui:insert

<ui:insert name="optionalName">

It is used in files acting as a template to indicate where the corresponding in the template client is to be inserted. If no name is specified, the body content of the tag is added to the view.

Example to understand above tags:

Suppose we have a three different section of a page:

Top Section- topSec.xhtml

Main Content- mainSec.xhtml

Bottom Content- bottomSec.xhtml

Side Content- sideSec.xhtml

topSec.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>Top Section of a Page</h1>
 
	    </ui:composition>
    </body>
</html>

mainSec.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>Main Section of a Page</h1>
 
	    </ui:composition>
    </body>
</html>

bottomSec.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>Bottom Section of a Page</h1>
 
	    </ui:composition>
    </body>
</html>

sideSec.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>Side Section of a Page</h1>
 
	    </ui:composition>
    </body>
</html>

Now we are creating a common template page:

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:body>
 
	<div id="page">
 
	    <div id="top">
		<ui:insert name="top" >
		  <ui:include src="./topSec.xhtml" />
		</ui:insert>
	    </div>
 
	    <div id="main">
	  	<ui:insert name="main" >
	 	  <ui:include src="./mainSec.xhtml" />
	   	</ui:insert>
	    </div>
	    <ui:insert name=body>
	    <!-- Its content will get replaced with ui:define
	of the page created next-useoftemapltes.xhtml-->
	    <div id="side">
	    	  <ui:decorate template="./sideSec.xhtml" />
    	    </div> 
	    <div id="bottom">
	    	<ui:insert name="bottom" >
	    	  <ui:include src="./bottomSec.xhtml" />
	    	</ui:insert>
    	    </div>
 
        </div>
 
    </h:body>
</html>

Here in this common template page we have used ui:insert,ui:include(explained below) and ui:decorate tags.

Now we are creating page-useoftemplates.xhtml to see the usage of ui:composition and ui:define tag:

<?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="./common.xhtml">
    		<ui:define name="body">
    			<h2>Body Part</h2>
    		</ui:define>
		<ui:define name="bottom">
    			<h2>New Bottom Section</h2>
    		</ui:define>
    	</ui:composition>
    </h:body>
</html>

Now when we run this page then content of common.xhtml will get used to create the output and will have the following:

->topSec.xhtml content
->mainSec.xhtml content
->body- Body Part
->sideSec.xhtml content
->bottom- New Bottom Section (bottomSec.xhtml content will get
             overriden with ui:define tag content)

ui:include

<ui:include src="requiredFilename">

It encapsulates and resuse content of included page. With param tag we can pass data to the page to be included.

ui:param

<ui:param name="requiredName" value="requiredValue">

The tag is used exclusively inside tags to define name/ value pairs that are available via the EL in the included page. Both the name and value attributes may be literal strings or EL expressions.

Example to understand ui:param and ui:include:

user.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:include src="welcome.xhtml">
<ui:param name="user" value="#{userDetails}"/>
</ui:include>
</body>
</html>

welcome.xhtml:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">

Welcome, #{user.name}
</html>

Here we are including page- welcome.xhtml in user.xhtml by passing the user data to welcome.xhtml.