JSF 2 repeat tag example

The ui:repeat is always uses as an alternative to h:dataTable, to loop over array or list to display the data in HTML table format. See following examples :

1. h:dataTable

In dataTable, JSF helps you to generate all the HTML table tags.


<h:dataTable value="#{order.orderList}" var="o">
 
	<h:column>
		#{o.orderNo}
	</h:column>

	<h:column>
		#{o.productName}
	</h:column>

	<h:column>
		#{o.price}
	</h:column>

	<h:column>
		#{o.qty}
	</h:column>
 
</h:dataTable>

2. ui:repeat

In repeat tag, you have to put all the HTML table tags manually.


<table>

   <ui:repeat var="o" value="#{order.orderList}" varStatus="status">
	
	<tr>
		<td>#{o.orderNo}</td>
		<td>#{o.productName}</td>
		<td>#{o.price}</td>
		<td>#{o.qty}</td>
	</tr>
		
   </ui:repeat>
    			
</table>

ui:repeat example
Here’s a JSF 2.0 ui:repeat example to render exactly the same HTML output like this h:dataTable example. Compare both and spot the different.

JSF…


<?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"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:head>
    	<h:outputStylesheet library="css" name="table-style.css"  />
    </h:head>
    <h:body>
    	
    	<h1>JSF 2 ui:repeat tag example</h1>

    	<table class="order-table">
    		<tr>
    			<th class="order-table-header">Order No</th>
    			<th class="order-table-header">Product Name</th>
    			<th class="order-table-header">Price</th>
    			<th class="order-table-header">Quantity</th>
    		</tr>
    		<tbody>
	    		<ui:repeat var="o" value="#{order.orderList}" varStatus="status">
	    			<h:panelGroup rendered="#{status.even}">
	   			  <tr>
		    			<td class="order-table-even-row">#{o.orderNo}</td>
		    			<td class="order-table-even-row">#{o.productName}</td>
		    			<td class="order-table-even-row">#{o.price}</td>
		    			<td class="order-table-even-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		        <h:panelGroup rendered="#{status.odd}">
	    			  <tr>
		    			<td class="order-table-odd-row">#{o.orderNo}</td>
		    			<td class="order-table-odd-row">#{o.productName}</td>
		    			<td class="order-table-odd-row">#{o.price}</td>
		    			<td class="order-table-odd-row">#{o.qty}</td>
		    		  </tr>
	    			</h:panelGroup>
	    		</ui:repeat>
    		</tbody>
    	</table>
    </h:body>
</html>
Note
You can find the “order” managed bean source code in this h:dataTable example.

The “ui:repeat” tag comes with many helpful attributes like offset, size, status and etc. Make sure you check this JSF ui:repeat javadoc.

Output

jsf2-repeat-example

Download Source Code

Download It – JSF-2-Repeat-Tag-Example.zip (10KB)

References

  1. JSF ui:repeat JavaDoc
  2. JSF h:dataTable JavaDoc
  3. JSF h:panelGroup JavaDoc

About the Author

author image
mkyong
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter, or befriend him on Facebook or Google Plus. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
13 Comment threads
4 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
VinothVishwassencesebastienmurasame Recent comment authors
newest oldest most voted
Abraão Isvi
Guest
Abraão Isvi

Thanks!

yanping
Guest
yanping

thanks for the great example.
the reference doc link is broken. can you elaborate on the varStatus variable?

Vinoth
Guest
Vinoth

is it possible to iterate in reverse order? With out changing the java code.

Vishwas
Guest
Vishwas

Hi Yong,
Could you please put some example of how to iterate two dimensional array of string using ui:repeat. I want to show some db table table on user interface.
Thanks

sence
Guest
sence

why it removes my tags…… i mean use simple #{status.odd ? ‘order-table-odd-row’ : ‘
order-table-even-row’} for the css class setter

sence
Guest
sence

why not simple use ?

#{o.orderNo}
#{o.productName}
#{o.price}
#{o.qty}

and stop repeating yourself :)

sebastien
Guest
sebastien

you’re cool Mr mkyong

Do Van Kien
Guest
Do Van Kien

How I can inport the library of this URI: “http://java.sun.com/jsf/facelets”?

trackback
JSF 2.0 Tutorial

[…] JSF 2 repeat tag example JSF 2 <ui:repeat> example as alternative to <h:dataTable>. […]

gebuh
Guest
gebuh

Hi Mkyong, what are the differences between ui:repeat, h:datatable and c:foreach? When would you choose one over the other?
thanx

murasame
Guest
murasame

First of all…. ui:repeat and c:foreach are TagHandlers which participate only before the view has rendered and then they dissapear from the document. h:datatable is a component which renders to the document.

On the other hand, ui:repeat and c:foreach are cycle structures and h:datatable is a component that allows you to create an HTML table.

I hope this helps….

Sushil Kumar
Guest
Sushil Kumar

Is there any way to update ui:repeat component once some ajax call is completed?
I’m submitting a form and after that i will populate the list.

ram
Guest
ram

Since, i dont want to see repeated row values in one column, can we hide the row values of same content repeated and just display one row and rest empty or blank in a rich:datatable or h:datatable column?

Peter Saly
Guest
Peter Saly

ui:repeat Tag is not new to JSF 2.0. It is since JSF 1.2.