JSF 2 ui repeat

JSF 2 ui repeat


Posted in : Java Posted on : October 22, 2012 at 11:19 AM Comments : [ 0 ]

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

JSF 2 ui repeat

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

<ui:repeat> tag is basically used as a substitute of h:dataTable tag of JSF html tag library or c:forEach tag of JSTL core tag library. This tag can also be used with the jsfc (feature of Facelet) attribute as a value. This tag is used to iterate over the collection.

Attributes of JSF 2 ui repeat

  • offset : This attribute is used to set the offset for starting the iteration of collection. If this attribute is not used or set then the iteration will be started form the stating of a collection.
  • size : This attribute is used to specify the size of collection.
  • step : This attribute is used to specify the step that the iteration will be processed every step item of collection.
  • value : This attribute is used to specify the collection's name which value has to be iterated.
  • var : This attribute is used to provide a name to the iteration using which the items can be iterated.
  • varStatus : This attribute is used to specify the status of the variable. Using this attribute a name can be assigned using which the following status can be set.
    • begin of type Integer
    • end of type Integer
    • index of type int
    • step of type Integer
    • even of type boolean
    • odd of type boolean
    • first of type boolean
    • last of type boolean

Example :

Here I am giving a simple example which will demonstrate about the use of JSF facelet repeat tag. In this example I have tried to iterate the items of a collection using ui:repeat tag. In this example I have created a bean class named SalesBean.java. Then created a template named basicTemplate.xhtml and then created a using page named repeat.xhtml. In the output of this example you will see that all the records will be displayed in a table.

Directory Structure

SalesBean.java

package devmanuals;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="salesBean")
@SessionScoped
public class SalesBean {

private Sales[] saleList = new Sales[] {

new Sales(1, "Leather Shoe", 2000, 1),
new Sales(2, "Sport Shoe", 3000, 2),
new Sales(1, "Ladies Sandle", 700, 3),
new Sales(2, "Men's Sandle", 1000, 1), 
};

public Sales[] getSaleList() {

return saleList; 
}

public static class Sales{

int sellerId;
String productName;
int cost;
int qty;
public Sales(int sellerId, String productName, int cost, int qty) {
super();
this.sellerId = sellerId;
this.productName = productName;
this.cost = cost;
this.qty = qty;
}
public int getSellerId() {
return sellerId;
}
public void setSellerId(int sellerId) {
this.sellerId = sellerId;
}
public String getProductName() {
return productName;
}
public void setProductName(String productName) {
this.productName = productName;
}
public int getCost() {
return cost;
}
public void setCost(int cost) {
this.cost = cost;
}
public int getQty() {
return qty;
}
public void setQty(int qty) {
this.qty = qty;
} 
}
}

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

<body> 
<ui:insert name="face1">

</ui:insert>
</body>
</html>

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

<body> 
<ui:composition template="/template/basicTemplate.xhtml">
<ui:define name="face1">
<table border="1">
<tr>
<th>Salesman Id</th>
<th>Product Name</th>
<th>Cost</th>
<th>Quantity</th>
</tr>
<tbody>
<ui:repeat var="sales" value="#{salesBean.saleList}" >
<h:panelGroup>
<tr>
<td><center>#{sales.sellerId}</center></td>
<td>#{sales.productName}</td>
<td>#{sales.cost}</td>
<td><center>#{sales.qty}</center></td>
</tr>
</h:panelGroup> 
</ui:repeat>
</tbody>
</table>
</ui:define> 
</ui:composition>
</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>jsfUIRepeat</display-name>
<welcome-file-list>
<welcome-file>/usingpage/repeat.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 the link Download Source Code 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 :

And the HTML source code will be look like as follows :

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

<body>
<table border="1">
<tr>
<th>Salesman Id</th>
<th>Product Name</th>
<th>Cost</th>
<th>Quantity</th>
</tr>
<tbody>
<tr>
<td><center>1</center></td>
<td>Leather Shoe</td>
<td>2000</td>
<td><center>1</center></td>
</tr>
<tr>
<td><center>2</center></td>
<td>Sport Shoe</td>
<td>3000</td>
<td><center>2</center></td>
</tr>
<tr>
<td><center>1</center></td>
<td>Ladies Sandle</td>
<td>700</td>
<td><center>3</center></td>
</tr>
<tr>
<td><center>2</center></td>
<td>Men's Sandle</td>
<td>1000</td>
<td><center>1</center></td>
</tr>
</tbody>
</table>
</body>
</html>
Go to Topic «PreviousHomeNext»

Your Comment:


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 

 
Tutorial Topics