Facelets Example

This section contains a complete Facelets example. In this example, you will learn how to create a simple template using Facelets tags.

Facelets Example

This section contains a complete Facelets example. In this example, you will learn how to create a simple template using Facelets tags.

The description of the tags used in this example is given below :

ui : insert

This tag is used in a template file which is used to define the replaceable sections. These sections are replaced by the content defined in the ui : define tag. Each insert tag has a name .

ui : define

The content define by this tag replaces the content of the insert tag having same name as this tag.

ui : include

This tag includes content from another XHTML file.

ui : composition

This is used to insert specified template to a page. Inside this tag, you can also replace the ui: insert content using ui: define tag.

If you are using without template attribute, it can be used to define bunch of component to insert in some other page. When inserted to some other page JSF eliminates all the tags outside ui: composition tag.

EXAMPLE

In this example, you will learn how to create a simple template using Facelets tags.

If you yet not configure your eclipse with JSF2.0 click here to learn.

The hierarchical structure of the project is given below :

CODE

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

<display-name>JavaServerFaces</display-name>

<!-- Welcome page -->
<welcome-file-list>
<welcome-file>faces/index.xhtml</welcome-file>
</welcome-file-list>

<!-- JSF mapping -->
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>

<!-- Map these files with JSF -->
<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>*.jsf</url-pattern>
</servlet-mapping>
<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>

</web-app>

index.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/Layout.xhtml">

<ui:define name="content">
<h2>This is modified content</h2>
</ui:define>

<ui:define name="footer">
<h2>This is modified Footer</h2>
</ui:define>

</ui:composition>

</h:body>

</html>

Layout.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:outputStylesheet name="default.css" library="css" />
</h:head>

<h:body>

<div id="page">

<div id="header">
<ui:insert name="header" >
<ui:include src="/templates/Header.xhtml" />
</ui:insert>
</div>

<div id="content">
<ui:insert name="content" >
<ui:include src="/templates/Content.xhtml" />
</ui:insert>
</div>

<div id="footer">
<ui:insert name="footer" >
<ui:include src="/templates/Footer.xhtml" />
</ui:insert>
</div>

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

<h1>This is 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>This is default footer</h1>

</ui:composition>
</body>
</html>

Content.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>This is default footer</h1>

</ui:composition>
</body>
</html>

OUTPUT

As you can see we didn't modify the content of header using ui: define tag, so it will display the default header content created in the Header.xhtml . Rest of the content and footer is modified using ui : include tag.

Download Source Code

Facelets Example