Iterating in JSF, rendering plain HTML <div> elements using for each loop

Question

I'm using JSF 2 with Facelets. I have a managed bean that has a property referring to a List<Employee>. Now, I have the <h:dataTable> tag that can create a table out of that collection in a simple way.

What I need is something different, I need to create a <div> element with an <img> for each item in that collection. How can I achieve this in JSF 2 with Facelets?

Answer 1

You can use <ui:repeat> to iterate over a collection while controlling the markup fully yourself. E.g.

private List<Employee> employees;

@EJB
private EmployeeService employeeService;

@PostConstruct
public void init() {
    employees = employeeService.list();
}

public List<Employee> getEmployees() {
    return employees;
}

<ui:repeat value="#{bean.employees}" var="employee">
    <div><img src="#{employee.image}" /></div>
</ui:repeat>