JSF 2 Repeat Example

The ui:repeat component is one of the most popular component that could be used as an alternative way for iterating the data. The using of h:dataTable may be tedious specifically when the user comes to worry about headers, footers, captions and styles. But if the developer was familiar with HTML tables and has a good knowledge , there is nothing wrong with using a ui:repeat instead of h:dataTable.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

One remaining major issue that need to mention here that the JavaServer Faces 2 has considered a facelets; facelets are an alternative view technology based on pure XML templates (no scritplets). That technology is adopted in JSF 2 instead of using JavaServer Pages (JSP). The ui:repeat is a JSF 2 component and it’s not provided in the JSF 1, cause the ui:repeat component is coming with the facelets technology.

The following attributes let the developer iterate over a subset of the collection:

offset is the index at which the iteration starts (default:0)
step is the difference between successive index values (default:1)
size is the number of iterations (default (size of the collection – offset)/step)

1. Managed Bean

package net.javabeat.jsf;

import java.util.ArrayList;
import java.util.List;

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

@ManagedBean
@SessionScoped
public class RepeatBean {

	private List<Tutorial> tutorials = new ArrayList<Tutorial>();

	public RepeatBean() {
		this.tutorials.add(new Tutorial(1, "JSF 2"));
		this.tutorials.add(new Tutorial(2, "EclipseLink"));
		this.tutorials.add(new Tutorial(3, "HTML 5"));
		this.tutorials.add(new Tutorial(4, "Spring"));
	}

	public String register() {
		return "registrationInfo";
	}

	public List<Tutorial> getTutorials() {
		return tutorials;
	}

	public void setTutorials(List<Tutorial> tutorials) {
		this.tutorials = tutorials;
	}

}

2. Tutorial Class

Tutorial.java

package net.javabeat.jsf;

public class Tutorial {
	private int tutorialId;
	private String tutorialDescription;

	public Tutorial(int id, String desc){
		this.tutorialId = id;
		this.tutorialDescription = desc;
	}

	public int getTutorialId() {
		return tutorialId;
	}
	public void setTutorialId(int tutorialId) {
		this.tutorialId = tutorialId;
	}
	public String getTutorialDescription() {
		return tutorialDescription;
	}
	public void setTutorialDescription(String tutorialDescription) {
		this.tutorialDescription = tutorialDescription;
	}
}

3. The Views

UIRepeat.xhtml

<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:form>
	<h1>
		<h:outputText value="JavaBeat JSF 2.2 Examples" />
	</h1>
	<h2>
		<h:outputText value="UI Repeat Example" />
	</h2>
	<h:outputText value="JavaBeat Site Provides the Following Tutorials:"/>
	<br/>
	<table border="1">
		<tr>
			<th>
				Tutorial Id
			</th>
			<th>
				Tutorial Description
			</th>
		</tr>
		<ui:repeat var="tutorial" value="#{repeatBean.tutorials}">
			<tr>
				<td>
					<h:outputText value="#{tutorial.tutorialId}"/>
				</td>
				<td>
					<h:outputText value="#{tutorial.tutorialDescription}"/>
				</td>
			</tr>
		</ui:repeat>
	</table>
</h:form>
</html>

5. JSF 2 UIRepeat Demo

The below snapshot shows you the complete scenario of using ui:repeat compoenent for achieving data iteration.

[wpdm_file id=11]

1. Managed Bean

2. Tutorial Class

3. The Views

5. JSF 2 UIRepeat Demo

About Amr Mohammed