In this section we will learn about the JSF 2 ui composition tag.
JSF 2 ui composition
In this section we will learn about the JSF 2 ui composition tag.
<ui:composition> tag of JSF 2 ui tag library is used to specify the composition that may use a template. Several compositions can use the same template that specifies the encapsulation and reusing of layout. The layout of the template is defined by its children tag. Outside of the ui:composition tag everything is ignored by the JSF.
Attributes of JSF 2 ui compositon
- template : This is not a required attribute. If this attribute is used with the ui:composition tag it locates to a template/layout which inserts the part of the page defined in the composition.
Note : Contents written outside the <ui:composition></ui:composition> tag is ignored at the time of execution.
Example
An example is being given here for you which will demonstrate about the JSF 2 ui composition tag. In this example you will see that how this tag is useful in the application development. So in this example I have tried to explain about how to use this tag. Before, explaining what I have done in this example I want to explain the requirements first that what I need or what I want in the web pages. So, in this example simply I just want to add the header and footer part on each web page. For this I have created a simple header and a footer page which is an XHTML page. Then I have created a template (an XHTML page) to add the header, footer part as well as to add the contents in the web pages. To use this template on the web pages I will simply call this page using the ui:composition tag with attribute template on the page ( also an XHTML page) where I want to add the header and footer page. Then created the Using pages which are also an XHTML pages where I have used the <ui:composition> tag with the template attribute and inside this tag some of the subtags and other JSF tags are also used because the contents written outside the JSF 2 ui composition tag are ignored at the time of execution.
Directory Structure
Bean Class
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:graphicImage value="/images/FaceletsHeader.jpg" /> <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:graphicImage value="/images/FaceletsFooter.jpg" /> </h:panelGroup> </h:panelGrid> </h:body> </f:view> </html>
BasicTemplate.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"> <!-- here you can include your content file like the below --> <!-- <div> --> <!-- <ui:include src="contentFileName.xhtml"/> --> <!-- </div> --> <!-- or in the using pages wherever this template will be called you will have to --> <!-- write your content inside the <ui:composition><ui:define> --> <!-- </ui:define></ui:composition> tag to show your content--> </ui:insert> </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";
<style type="text/css">
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:#2f1e2b;
}
</style>
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/BasicTemplate.xhtml">
<ui:define name="content">
<p>
DevManuals.com is technical resource for the web site developers,<br/>
programmers, designers, database administrators and technical <br/>
managers. On this website we are providing articles, tutorials, <br/>
examples and tips on many programming languages and programming <br/>
technologies. Here you will find technical stuff's on HTML, DHTML, <br/>
CSS, Java, JSP, Servlets, Ajax, jQuery and many other technologies. <br/>
These tutorials will help you in getting started with programming <br/>
and web development technologies. The getting started guide will <br/>
help you in learning the basic concepts easily and quickly. We hope <br/>
tutorials provided here will help you in learning various programming <br/>
technologies.
</p>
<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/BasicTemplate.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>
<p><b>Thank You for visiting. We will shortly contact to you.</b></p>
</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>jsfUIComposition</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 this example will be executed successfully then the output will be as follows :
1. The main page will be look like as follows :
2. When you will fill the above text boxes (for example I have filled 'Deepak' in the first text box and 'deepak@devmanuals.com' value to the second text box) and submitted the form by clicking on submit button then the output will be as follows :
[ 0 ] Comments