<?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:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:head> <title>Numbers</title> <style type="text/css"> .number-table { border-collapse: collapse; } .entry, .header { text-align: right; font-family: monospaced; padding-left: 0.5em; padding-right: 0.5em; width: 1.0em; border: thin solid lightgray; } .header { font-weight: bold; } </style> </h:head> <h:body> <h4>Addition Table</h4> <table class="number-table"> <tr> <!-- column header row --> <td class="header">+</td> <!-- corner entry --> <ui:repeat value="#{numbers.list}" var="col"> <td class="header">#{col}</td> <!-- column header entries --> </ui:repeat> </tr> <ui:repeat value="#{numbers.list}" var="row"> <tr> <!-- main table rows --> <td class="header">#{row}</td> <!-- row header entry --> <ui:repeat value="#{numbers.list}" var="col"> <td class="entry">#{row+col}</td> <!-- main table entries --> </ui:repeat> </tr> </ui:repeat> </table> <h4>Multiplication Table</h4> <table class="number-table"> <tr> <!-- column header row --> <td class="header">*</td> <!-- corner entry --> <ui:repeat value="#{numbers.list}" var="col"> <td class="header">#{col}</td> <!-- column header entries --> </ui:repeat> </tr> <ui:repeat value="#{numbers.list}" var="row"> <tr> <!-- main table rows --> <td class="header">#{row}</td> <!-- row header entry --> <ui:repeat value="#{numbers.list}" var="col"> <td class="entry">#{row*col}</td> <!-- main table entries --> </ui:repeat> </tr> </ui:repeat> </table> </h:body> </html>
Here, the ui:repeat tag is applied inside ordinary HTML tables to build a multiplication table and an addition table.
In general, the ui:repeat tag has the following form:
<ui:repeat value="#{array-or-list-expression}" var="iteration-variable-name"> content-to-be-repeated </ui:repeat>
In the var attribute, iteration-variable-name introduces the name for an iteration variable. This variable name can be used in value expressions in content-to-be-repeated.