In this tutorial you will learn about the JSF 2 ui fragment tag.
JSF 2 ui fragment
In this tutorial you will learn about the JSF 2 ui fragment tag.
<ui:fragment> tag of JSF 2 ui tag library is used to specify a new component. This tag is acted alike ui:component tag but the difference is that the ui:component tag is ignored all the contents outside of the this tag but, the ui:fragment tag doesn't ignore all the contents written outside of this tag.
Attributes of JSF 2 ui fragment
- id : This is not a required attribute. This attribute is used to make the component uniquely identifiable. If the value of this attribute is specified by the page author then the JSF will use this name to identify the component otherwise, it assigns a name to the component to identify using an algorithm used for naming all the component.
- binding : This is not a required attribute. This attribute is used to bind a backing bean property with the component.
Example :
An example is being given here which will demonstrate about how to use the JSF facelet fragment tag. In this example I have created the XHTML pages where I have used the JSF facelet fragment tag. From these XHTML pages in one of the page i.e. in input.xhtml page I have used the ui:component tag and in the other page i.e. in output.xhtml page I have used the ui:fragment tag. When you will see the output of this example, output of the individual page i.e. in the output of input.xhtml page you will see that the contents written outside the ui:component tag is not rendered whereas, in the output of output.xhtml page you will see that the contents written outside the ui:fragment tag is rendered.
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;
}
}
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">
<h:body>
<h3>Text outside the ui:component tag will be ignored.</h3>
<ui:component>
<h:form>
<h3>Enquiry Form</h3>
<table>
<tr>
<td><h:outputText value="Enter Your Name : " /></td>
<td><h:inputText id="nameFiled" value="#{nameBean.name}"
required="true" requiredMessage="value is required"/></td>
<td><h:message for="nameFiled" style="color:red" /></td>
</tr>
<tr>
<td><h:outputText value="Enter Your e-mail : "/></td>
<td><h:inputText id="email" value="#{nameBean.email}"
required="true" requiredMessage="value is required"/></td>
<td><h:message for="email" style="color:red" /></td>
</tr>
<tr>
<td></td>
<td><h:commandButton value="Submit" action="output"/></td>
</tr>
</table>
</h:form>
</ui:component>
<p>Text outside the ui:component will be ignored.</p>
</h:body>
</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">
<h:body>
<h3>Text outside the ui:fragment will be rendered.</h3>
<ui:fragment>
<div>
<table border="1">
<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>
</div>
</ui:fragment>
<p>Text outside the ui:fragment will be rendered.</p>
</h:body>
</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>jsfUIFragment</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 the above example you will get the output as follows :
1. The main page i.e. output of the input.xhtml will be as follows :
2. When you will provide the value to the given text boxes and clicked on submit button then the output will be as follows :
[ 0 ] Comments