JSF 2リピート・タグの例

投稿日: 2019-11-05 2019-11-05
タグ: jsf2

ui:repeat`は
h:dataTable`に代わるものとして常に使われ、配列やリストをループしてHTMLテーブル形式でデータを表示します。次の例を参照してください。

1. h:dataTable

dataTableでは、JSFを使用すると、すべてのHTML表タグを生成できます。

<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:繰り返し

リピートタグでは、すべてのHTMLテーブルタグを手動で入力する必要があります。

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

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>

注** このリンクでは、 “order”管理Beanのソースコードを見つけることができます。//jsf2/jsf-2-datatable-example/[h:dataTableの例]

”

ui:repeat

“タグには、

offset

、

size

、

status

などの有益な属性が付いています。これを確認してください。http://docs.oracle.com/javaee/6/javaserverfaces/2.1/docs/vdldocs/facelets/ui/repeat.html[JSF ui:repeat javadoc]を参照してください。