PrimeFacesのDataTableを探る　～テーブル内コンポーネント～

久しぶりにPrimeFacesのDataTableネタです。
一覧テーブルの中に色々なコンポーネントを定義してみます。

過去エントリではDynamic Columnを使ってましたが、今日は普通のColumnで(^^;

なんか毎回触れてますが、業務システムの一覧ってすごく色々な要望が強くて、お客様自身が「一覧の中はこういうイメージ」とか「こうできないか？」と意見を持たれてたりするように感じます。

一覧テーブルの中にチェックボックスやプルダウンなどのコンポーネントを入れるパターンも多々あったり…。

実際、今の開発ではPrimeFacesのDataTableにチェックボックスがあって、チェックを変えるタイミングでデータベースの値を変えたりとか、リンク貼って内部状態によって色々処理を振り分けたりとか、をしていますが特に問題なく、安定している感じです(^^)

コンポーネント自体の組み込みは非常に簡単なので、色々試してみると面白いかと思います。

例えば以下のような一覧を結構簡単に作れます。

f:id:kikutaro777:20130413230509j:plain

カレンダー部分も通常のカレンダーと同じなので、一覧内で動きます。

f:id:kikutaro777:20130413230557j:plain

それぞれのColumn定義の中で使いたいコンポーネントを指定するだけ(^^)

<?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:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>色々コンポーネント</title>
    </h:head>
    <h:body>
        <h:form id="dtFrm">
            <p:dataTable id="dt" var="book" value="#{bookBean.bookList}" 
　　　　　      sortMode="multiple"
                paginator="true" rows="5" rowsPerPageTemplate="5,10,15"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} 
                    {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} 
                    {RowsPerPageDropdown}" pageLinks="5">

                <!-- チェックボックス -->
                <p:column id="colCheck" >
                    <p:selectBooleanCheckbox />
                </p:column>

                <!-- ラベル -->
                <p:column id="colId" headerText="ID">
                    <p:outputLabel value="#{book.id}" />
                </p:column>
                <p:column id="colTitle" headerText="タイトル">
                    <p:outputLabel value="#{book.title}" />
                </p:column>

                <!-- プルダウン -->
                <p:column id="colAuthor" headerText="著者">
                    <p:selectOneMenu>
                        <f:selectItem itemLabel="#{book.author}" 
                            itemValue="#{book.author}" />
                    </p:selectOneMenu>
                </p:column>

                <!-- カレンダー -->
                <p:column id="colDate" headerText="発売日">
                    <p:calendar value="#{book.createDate}" />
                </p:column>

                <!-- レートコンポ -->
                <p:column id="colRate" headerText="おすすめ">
                    <p:rating stars="5" cancel="false" />
                </p:column>

                <!-- リンク -->
                <p:column id="colOperation" headerText="操作">
                    <p:commandLink value="詳細情報" />
                    <h:outputLabel value=" | " />
                    <p:commandLink value="削除" />
                </p:column>
            </p:dataTable>
        </h:form>
    </h:body>
</html>

あとはactionListenerやaction属性、ajaxタグのlistenerなどを利用すればBackingBeanと連動してあれやこれやと…。

最後に…当たり前ですが、あまり複雑なことをするとイベント地獄になりかねないので、本格的に使う場合には、前もって色々と検証することをお勧めします…(^^;

「PrimeFacesのDataTableを探る」の過去エントリは以下です。
ちなみに今までのエントリは以下です。

PrimeFacesのDataTableを探る　～DynamicColumn～

PrimeFacesのDataTableを探る　～カラムソート～

PrimeFacesのDataTableを探る　～DynamicColumnで明細リンク～

PrimeFacesのDataTableを探る　～ページング～