JSF 2 Template – Composition, Insert and Define Example

Most web applications follow a similar pattern, in which all pages have a common layout and styling. It is typical for pages to have the same header, footer and sidebars.

Facelets lets you encapsulate that commonality in a template, so that you can update the look of your site by making changes to the template, not the individual pages. Facelets templates encapsulate functionality that is shared by multiple pages, so you don’t have to specify that functionality individually for each page. The encapsulation concept is the cornerstone of both object-oriented programming, and well-known DRY (Don’t Repeat Yourself) principle.

Achieving such that well-formed organization requires using and understanding of multiple facelets Tags:

  • composition: When used without a template, a composition is a sequence of elements that can be inserted somewhere else. The composition can have variable parts (specified with ui:insert children). When used with template attribute, the template is loaded. The children of this tag determine the variable parts of the template. The template contents replaces this tag.
  • define: Defines content that is inserted into a template with a matching ui:insert.
  • insert: Inserts content into a template. That content is defined inside the tag that loads the template.

Also Read:

1. The Template

TutorialTemplate.xhtml

</pre>
<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">
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="JSF2 Template Example" />
	</h2>
<h:panelGrid columns="3" border="1">
	<h:panelGroup columns="1">
		<ui:insert name="left" />
	</h:panelGroup>
	<h:panelGroup columns="1">
		<ui:insert name="center" />
	</h:panelGroup>
	<h:panelGroup columns="1">
		<ui:insert name="right" />
	</h:panelGroup>
</h:panelGrid>
</html>

2. The View

JSFTemplate.xhml

<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">
	<ui:composition template="/template/TutorialTemplate.xhtml">
		<ui:define name="left">
			This is the left of JSF Tutorial
		</ui:define>
		<ui:define name="center">
			This is the center of JSF Tutorial
		</ui:define>
		<ui:define name="right">
			This is the right of JSF Tutorial
		</ui:define>
	</ui:composition>
</html>

JPATutorial.xhml

<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">
	<ui:composition template="/template/TutorialTemplate.xhtml">
		<ui:define name="left">
			This is the left of JPA Tutorial
		</ui:define>
		<ui:define name="center">
			This is the center of JPA Tutorial
		</ui:define>
		<ui:define name="right">
			This is the right of JPA Tutorial
		</ui:define>
	</ui:composition>
</html>

index.xhml

<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"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head>
	<title><h:outputText value="JavaBeat Template"/></title>
</h:head>
<h:body>
	<h:form id="form">
		<h1>
			<h:outputText value="JavaBeat JSF 2.2 Examples" />
		</h1>
		<h2>
			<h:outputText value="JSF2 Template Example" />
		</h2>
		<h:outputLink value="JPATutorial.xhtml">
			JPA Tutorial
		</h:outputLink>
		<br/>
		<h:outputLink value="JSFTutorial.xhtml">
			JSF Tutorial
		</h:outputLink>
	</h:form>
</h:body>
</html>

3. The Directory Structure

JSF 2 Template Example 1

4. The Deployment Descriptor (web.xml)

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee

http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<servlet>
		<servlet-name>Faces Servlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF 2 Template Demo

The below snapshots will show you the using of template

JSF 2 Template Example 1

JSF 2 Template Example 2

JSF 2 Template Example 3

  • The Template have defined set of ui:insert Tags.
  • The JPATutorial and JSFTutorial have been referring the template via ui:composition by filling the template attribute with the desired value.
  • The JPATutorial and JSFTutorial have been overriding those ui:insert tags that are defined in the template with what the developer want.
  • The common HTML that couldn’t be overridden, it will be displayed as is.
  • To use Facelets tags, add (xmlns:ui=”http://java.sun.com/jsf/facelets”) namespace declaration into your JSF page.
  • The using of ui:composition will be caused the contents around it to be trimmed.

Comments

comments

About Amr Mohammed

Speak Your Mind

*