初めに
ここでは順不同に、JSF に関する話題を書いていきます。事の成り行き上、まとまりに欠けることはご了解ください。また、新しい項目に気が付いた場合には、随時内容を増やしまた修正していきたいと思います。
なんといっても機能豊富なページングの実装に関する説明から始めます。
ページングの実装（複合コンポーネントの利用方法）
ページングの機能は、その画面を定義する xhtml ファイルと、その画面専用の管理 Bean の２つから構成されます。この画面定義は、複合（合成）コンポーネントと呼ばれる技術となります。一方の管理 Bean は通常の Java クラスです。以下では順にページング機能の実装方法を説明していきます。
xhtml ファイルは pagingPart.xhtml とし、管理 Bean のクラス名は PagingModel とします。ページングの外観は ここ を参照してください。先頭ページや最終ページなどで使用しているアイコンは Bootstrap のものを使用しています。この部分は適宜読み替えてください。
ページング用 xhtml
第１ステップは、複合コンポーネントの作成になります。 KnowledgeDB プロジェクトを選択した状態で、メニューの「ファイル」→「新規ファイル」を選択してください。
「カテゴリ」から「JavaServer Faces」を、「ファイル・タイプ」から「JSF合成コンポーネント」を選択して、「次へ」をクリックしてください。
「ファイル名」に pagingPart と入力し、「場所」や「フォルダ」はデフォルトのままでかまいません。「終了」をクリックしてください。
上記の「場所」と「フォルダ」で指定した位置に、 pagingPart.xhtml ファイルができています。
第２ステップは、 xhtml ファイルを編集します。そのソース（部分）を以下に示します。
1 <cc:interface>
2 <cc:attribute name="pagingModel" />
3 </cc:interface>
4 <cc:implementation>
5 <div class="text-center #{cc.attrs.pagingModel.isValid() ? '' : 'hidden'}">
6 <a jsfc="h:link" type="button" outcome="#{cc.attrs.pagingModel.firstUrl}" class="btn btn-default #{cc.attrs.pagingModel.isMode(1) ? '' : 'hidden'}" >
<span class="glyphicon glyphicon-fast-backward"></span>
</a>
7 <a jsfc="h:link" type="button" outcome="#{cc.attrs.pagingModel.prevUrl}" class="btn btn-default #{cc.attrs.pagingModel.isMode(2) ? '' : 'hidden'}" >
<span class="glyphicon glyphicon-step-backward"></span>
</a>
8 <span jsfc="ui:repeat" var="id" value="#{cc.attrs.pagingModel.numbers}" style="margin: 5px;font-size: 1.5em;" >
<a jsfc="h:link" type="text" outcome="#{cc.attrs.pagingModel.getNumberUrl(id)}" value="#{id.toString()}" class="#{id == cc.attrs.pagingModel.currentIndex + 1 ? 'text-danger' : 'text-primary'}"></a>
</span>
9 <a jsfc="h:link" type="button" outcome="#{cc.attrs.pagingModel.nextUrl}" class="btn btn-default #{cc.attrs.pagingModel.isMode(4) ? '' : 'hidden'}" >
<span class="glyphicon glyphicon-step-forward"></span>
</a>
10 <a jsfc="h:link" type="button" outcome="#{cc.attrs.pagingModel.lastUrl}" class="btn btn-default #{cc.attrs.pagingModel.isMode(8) ? '' : 'hidden'}" >
<span class="glyphicon glyphicon-fast-forward"></span>
</a>
</div>
</cc:implementation>
かなり複雑と思います。特に、管理 Bean である PagingModel との間を何度も行き来しないと理解が困難と思います。以下に簡単ですが、説明します。
xhtml は２つの部分からなります。cc:interface と cc:implementation とです。 cc:interface はこの xhtml を外部から利用するインターフェースとなります。ここではペアとなって動作する管理 Bean クラスの名前を pagingModel のパラメータ名で受け渡しすること宣言しています。
一方 cc:implementation は実装の定義になります。全体を div タグで囲っています（５行目）。PagingModel の isValid メソッドを呼び出して、 div タグの表示／非表示を制御しています。１件もデータが存在しない場合は、ページングに関係する表示を一切表示させないためです。
ここでページングの実際の画面を見てください。全体は、次の５つの部分に分かれています。先頭ページに移動するボタン・１つ前ページに移動するボタン・数字を直接クリックして移動するエリア・１つ後ページに移動するボタン・最終ページに移動するボタンです。 div タグの内容は、その５つの部分に対応しています。
６行目の説明です。 a タグをどのように動的に作成しているかが肝になります。 outcome="#{cc.attrs.pagingModel.firstUrl}" により、PageingModel に先頭ページの URL を計算させています。 #{cc.attrs.pagingModel.isMode(1) ? '' : 'hidden'}" の部分で、先頭ページへ移動するボタンが有効かどうかを調べています。 PagingModel の設定により、先頭ページへの移動を無効にする機能があるため、その状態を調べています。 class="glyphicon glyphicon-fast-backward" は Bootstrap の該当するアイコンを指定しています。
この行が理解できれば、７、９、１０行目は同様に理解できます。
８行目は少しばかり複雑です。この行では直接数字をクリックして遷移することを可能にしています。この処理を行う上で必要な情報は次のものになります。データの総件数・１ページの表示データ数・現在表示しているページ番号・データ総件数があまりに多い場合に直接選択できる数字をいくつまで表示するか、の４つとなります。こうした設定値はすべて PagingModel が管理するようになっています。以下のPagingModel のソースと見比べてください。
問題があるとすると、 style 属性で直接マージンやフォントサイズを指定していることです。ここはより柔軟性を持たせた方がよいかもしれません。
ページング用 Bean クラス
ページング用の管理 Bean クラス PagingModel のソース（部分）を次に示します。
public class PagingModel extends BaseBean {
/*
ページングで使用するナビゲーション用のボタンとリンク
FIRST 先頭ページに移動するボタン
PREV 前頁に移動するボタン
NEXT 次頁に移動するボタン
LAST 最終ページに移動するボタン
NUMBER ページ番号で直接移動するページ番号
ALL 全てのナビゲーション用ボタンとリンクを有効にする
*/
public static final int FIRST = 0x01;
public static final int PREV = 0x02;
public static final int NEXT = 0x04;
public static final int LAST = 0x08;
public static final int NUMBER = 0x10;
public static final int ALL = FIRST | PREV | NEXT | LAST | NUMBER;
/*
現在のナビゲーションボタンとリンク
デフォルトではALL
*/
private int mode = PagingModel.ALL;
/*
データの総数
*/
private int totalItems = 0;
/*
現在表示しているページのインデックス（ゼロベース）
*/
private int currentIndex = 0;
/*
１ページに表示するデータの件数
デフォルトでは10件
*/
private int pageItems = 10;
/*
表示モードにNUMBERが含まれている場合に、何件のページ番号を表示するか
デフォルトではページ番号は10件
*/
private int numberItems = 10;
/*
リンク先のURL
*/
private String url = "";
/*
ページ番号をGETで指定するためのパラメータ名
paramがpageであった場合、?page=0のような書式でURLが呼び出される
デフォルトのパラメータ名は「"page"」
*/
private String param = "page";
/*
GETのパラメータで渡されたページ番号にバインドする変数
*/
private int page = 0;
private String sql = "";
}
ソースに付けてあるコメントをそのまま残しました。
ページングの実装は、全件検索ではなく、必要なページ部分だけを毎回検索することで行います。そのため検索に使用する SQL 文も PagingModel クラスで管理しています。
さして複雑なメソッドはありませんが、ここではページ番号を直接クリックしてリンクを作成する場合に使用する、そのページ番号の集合を返すメソッドを以下に示します。例えば、検索データが２５件あり、１ページに１０件のデータを表示した場合は、{ 1, 2, 3 } となるリストを返すメソッドになります。
public List<Integer>getNumbers()
{
1 if (totalItems <= 0 || pageItems <= 0 || numberItems <= 0 || (mode & NUMBER) == 0)
2 return new ArrayList<Integer>();
3 int pages = totalItems / pageItems;
4 if (totalItems % pageItems != 0)
5 ++pages;
6 int start, current = currentIndex + 1, half = numberItems / 2;
7 if (current <= half)
8 start = 1;
9 else if (current + half > pages)
10 start = pages - numberItems + 1;
else
11 start = current - half;
12 List<Integer> values = new ArrayList<>();
13 for (int i = 0; start <= pages && i <= numberItems - 1; ++i, ++start)
14 values.add(start);
15 return values;
}
１、２行目はページ番号でリンクする必要がない場合です。データの総数がゼロ件の場合、１ページに表示するデータがゼロ件の場合、直接数字でリンクするそのリンク数がゼロ件の場合、そして直接数字でリンクするモードが不要の場合は、空のリストを返しています。
３～５行目は全ページ数の計算です。５行目はページに端数がある場合の処理。
６～１１行目は、開始するページ番号を計算しています。 current が現在のページ番号です。 half は１ページに表示するデータ件数の半分です。 start は計算により開始ページ番号を決定しています。
１２～１４行目は、リンク用のページ番号を計算している部分です。
ページングの利用方法
このようにして用意したページング用の xhtml と PagingModel クラスをどのようにして利用するか、簡単なのは PagingModel です。 ここ にあるように、利用したい管理 Bean クラスを PagingModel クラスから派生するだけです。
あまり無いとは思いますが、１画面にページングが２か所に必要になる場合は、継承では実現できません。その場合は PagingModel のインスタンス変数を２つ用意して、移譲を使って実装することになると思います。工夫してください。
pagingPart.xhtml を利用している knowledgeList.xhtml のソース（部分）を以下に示します。
1 <html xmlns:ez="http://xmlns.jcp.org/jsf/composite/ezcomp">
…
2 <ez:pagingPart pagingModel="#{knowledgeListBean}" />
3 <f:metadata>
4 <f:viewParam name="page" value="#{knowledgeListBean.page}"/>
5 <f:event type="preRenderView" listener="#{knowledgeListBean.preRender}"/>
</f:metadata>
…
</html>
この部分をページングを必要とするタグの位置にそのまま記述するだけです。
１行目は、 ez: 名前空間の定義を読み込んでいます。実際にはこれ以外の読み込みも必要ですので、適宜追加してください。
２行目は、pagingPart.xhtml の cc:interface において管理 Bean クラスの名前は paingModel で受け渡すことにしましたので、 knowledgeListBean を渡します。 knowledgeListBean クラスは PagingModel クラスから派生しましたので、ページングに必要な機能はすべて実装済みです。
４行目は、knowledgeList.xhtml が呼び出された際の、 GET パラメータの page にバインドする用のメソッドを指定しています。ここで問題があるとすると、 PagingModel ではパラメータの名前を変更可能にしてあります。しかし name="page" としてありますから、パラメータの名前は page 固定になっていることです。ここにも EL 式を記述して、 PagingModel のもつパラメータ名を動的に設定すれば、より柔軟性が高まります。
５行目は、knowledgeList.xhtml が呼び出された際の初期画面を構築しています。 GET パラメータの page の値により画面を作成しているわけです。
次に、preRender メソッドを見てみましょう。
public void preRender()
{
1 int p = getPage();
2 if (p > 0)
{
3 --p;
4 setCurrentIndex(p);
5 int count = getPageItems();
6 knowledges = select(knowledgeDao.findPage(p * count, getPageItems(), getSql()));
}
}
GET で指定されたページ番号を知り（１行目）、０ベースのインデックスに変更し（３行目）、全件数を調べ（５行目）、該当するページのデータを検索しています（６行目）。今気が付きましたが、２つ目の getPageItems 呼び出しは不要ですね。ソースはこのまま修正しないで載せておきます。
ブラウザに返される HTML のページングに関係する部分を次にしめします。１ページから３ページまである場合になります。
１つ目の a タグは、先頭ページに移動する用、２つ目は１つ前に移動するため用、３つ目から５つ目までは、それぞれ１ページ目・２ページ目・３ページ目に移動する用、６つ目は１つ後に移動するため用、最後のリンクは最終ページに移動する用になります。URL の後に page パラメータで移動するページ番号が指定してあります。サーバではこのパラメータを読み取って、正しくページを構成することになります。