Home Tutorials Java Jsf Jsf2TagLibrary Ui JSF 2 ui include

JSF 2 ui include

Posted in : Java Posted on : October 9, 2012 at 7:04 PM Comments : [ 0 ]

In this section we will learn about the JSF 2 ui include tag.

JSF 2 ui include

In this section we will learn about the JSF 2 ui include tag.

<ui:include> tag of JSF 2 ui tag library is used to include another multiple xhtml pages into a xhtml page. The included xhtml page can be a plain xhtml page and/or the xhtml page that may contained either ui:composition tag or ui:component tag. JSF ui include tag is like the JSP's jsp:include tag. This tag is useful in reusing of contents in an application.

Attributes of JSF 2 ui include

src : This is a required attribute. This attribute is used to specify the relative path of the file to be included.

Example :

An example is being given below which will demonstrate you about how to use JSF facelet include tag. In this example I have created the header.xhtml, footer.xhtml files which contains the header and footer part of the page. Then created the template files like inputTemplate.xhtml, outputTemplate.xhtml where the header.xhtml, footer.xhtml files will be included as well as in these templates the xhtml files which defines the contents can also be included. So I have created the xhtml files like input.xhtml, output.xhtml, p.xhtml, and q.xhtml which defines the data. When you will execute this example you will see in the output that the rendered page contains the included file's data.

Directory Structure

NameBean.java

package devmanuals;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;

@ManagedBean(name="nameBean")
@RequestScoped
public class NameBean {

String name;
String email;

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}
}

header.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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"
xmlns:f="http://java.sun.com/jsf/core">
<h:head> 
</h:head>
<f:view>
<h:body>
<h:outputStylesheet library="css" name="myCSS.css" target="head" />
<h:panelGrid columns="1" styleClass="t1">
<h:dataTable value="" title="ui:composition tag example">
<h:column>
<h:outputLink value="#home">
<h:outputText value="Home" />
</h:outputLink>
</h:column>

<h:column>
<h:outputLink value="#about">
<h:outputText value="About Us" />
</h:outputLink>
</h:column>

<h:column>
<h:outputLink value="#advertise">
<h:outputText value="Advertise" />
</h:outputLink>
</h:column>

</h:dataTable>
</h:panelGrid>

</h:body>
</f:view>
</html>

footer.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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"
xmlns:f="http://java.sun.com/jsf/core">
<h:head> 
</h:head>
<f:view>
<h:body>
<h:outputStylesheet library="css" name="myCSS.css" target="head" />
<h:panelGrid columns="1" styleClass="t1">
<h:dataTable value="" title="ui:composition tag example">
<h:column>
<h:outputLink value="#home">
<h:outputText value="Home" />
</h:outputLink>
</h:column>

<h:column>
<h:outputLink value="#about">
<h:outputText value="About Us" />
</h:outputLink>
</h:column>

<h:column>
<h:outputLink value="#privacy">
<h:outputText value="Privacy Policy" />
</h:outputLink>
</h:column> 
</h:dataTable>
<h:panelGroup> 
</h:panelGroup>
</h:panelGrid>
</h:body>
</f:view>
</html>

p.xhtml

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

<h:body>
<p>Content of the <b>q.xhtml</b> page is included here.</p>
</h:body>
</html>

q.xhtml

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

<h:body>
<p>Content of the <b>q.xhtml</b> page is included here.</p>
</h:body>
</html>

inputTemplate.xhtml

<!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">
<h:head>
<title><ui:insert name="title">JSF Facelets</ui:insert></title>
</h:head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content"/> 
</div>
<div id="data">
<ui:include src="/pages/p.xhtml"/>

</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml" />
</ui:insert>
</div> 
</body>
</html>

myCSS.css

@CHARSET "ISO-8859-1";
table.t1
{
width:0px;
border:0px;
}
table.t1 td
{ 
margin:0;
padding:0;
overflow:hidden;
text-align:center; 
}
a
{
color:#ffffff;
display:block;
width:181px;
background-color:#2f1e2a;
}

outputTemplate.xhtml

<!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">
<h:head>
<title><ui:insert name="title">JSF Facelets</ui:insert></title>
</h:head>
<body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/header.xhtml" />
</ui:insert>
</div>
<div id="content">
<ui:insert name="content"/>
</div>
<div id="data">
<ui:include src="/pages/q.xhtml"/>
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/WEB-INF/templates/footer.xhtml" />
</ui:insert>
</div> 
</body>
</html>

input.xhtml

<!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"
xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/inputTemplate.xhtml">
<ui:define name="content">
<h:form>
<h3>Enquiry Form</h3>
<table>
<tr>
<td><h:outputText value="Enter Your Name : " /></td>
<td><h:inputText value="#{nameBean.name}" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Your e-mail : "/></td>
<td><h:inputText value="#{nameBean.email}"/></td>
</tr>
<tr>
<td></td>
<td><h:commandButton value="Submit" action="output"/></td>
</tr>
</table>
</h:form>
</ui:define>
</ui:composition>
</html>

output.xhtml

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

<ui:composition template="/WEB-INF/templates/outputTemplate.xhtml">
<ui:define name="content">
<table>
<tr>
<td><h:outputText value="Your Name is :"/></td>
<td><h:outputText value="#{nameBean.name}"/></td>
</tr>
<tr>
<td><h:outputText value="Your email id is :" /></td>
<td><h:outputText value="#{nameBean.email}"/></td>
</tr> 
</table>
</ui:define>
</ui:composition>
</html>

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_3_0.xsd" id="WebApp_ID" version="3.0">
<display-name>jsfUIInclude</display-name>
<welcome-file-list>
<welcome-file>/UsingPages/input.xhtml</welcome-file>
</welcome-file-list>
<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>
<url-pattern>*.jsf</url-pattern>
<url-pattern>*.xhtml</url-pattern>
<url-pattern>*.jsp</url-pattern>
</servlet-mapping>
<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.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.faces</url-pattern>
</servlet-mapping>
</web-app>

How to execute this example

To execute this example you can download a WAR file example form here and import this war file into your eclipse by File -> import -> web -> war file and simply execute this example by selecting the imported project as follows :- Select your project -> Right Click -> Run As -> Run On Server.

Output :

When you will execute this example successfully then output will be as follows :

1. The home page will be look like as follows :

2. When at the home page you will provide the value in the given textboxes like 'deepak' and 'deepak@devmanuals.com' and clicked on the submit button then the output will be as follows :

In the above images you can see how the contents of other files can be included.

Go to Topic «Previous Home Next»

Tags:

How to learn Advanced Java Programming?

Java Video tutorial: How to learn Java?

6 Programming Languages for Learners to Begin with Coding

Java Video tutorial: How to create directory in Java?

Video Tutorial: How to write to a file in Java?

[ 0 ] Comments

Your Comment:

Tutorial Topics

Java