2010/01/12

XPages Tutorial Part 39 : 繰り返しコントロールにページャを追加

Adding Pagers To Our Repeats {Original Source}

ここまでアプリケーションはほぼ完成の状態にまでなりましたが、Location XPage に表示されるの現在ひとつのロケーションに対して 30 人までになっています。
そこで、30 人以上いる場合には最後に到達するまで次の 30 人を表示させるようにしなければなりません。XPages では「ページャ」というコントロールがあり、このような機能を実現してくれます。

では「content_Location」カスタムコントロールを開き、繰り返しコントロールの内部にある表の、行が繰り返される部分がその対象になります。
ページャコントロールをカスタムコントロールの上部にドラッグインして、ソースビューでページャが「lotusContent」DIV の内部にあることを確認してください。

ソースビューのまま、スクロールダウンして以前作成した繰り返しコントロールの探し、選択してください。
以前に表の中の繰り返しコントロールは、名前が指定されていると不正な HTML を生成するとお話ししたと思いますが、ページャが繰り返しコントロールに接続するためには名前を付けなければなりません。今回「peopleRepeat」という名前を付けます。

では次にページャに戻ります。
添付先に先ほど繰り返しコントロールで設定した名前を選択します。今回は部分的な更新のオプションにチェックします。

ではカスタムコントロールを保存しページを再読み込みしましょう。ページの上部にページャが現れたのが確認できると思います。

このページャは基本的なもの、まだ OneUI のCSS クラスを適用していません。
もう少し凝ったページャにしたいので、先ほど見たページャのプロパティに戻ってください。今度はオリジナルのページャを作成したいと思います。

プロパティの中の「ページャスタイル」を見ると、いくつかのサンプルの中から選ぶこともできますがカスタムのページャを作ることもできるようになっています。
上のような順番で指定したページャタイプを追加しました。
次にこのページャにスタイルを適用したいと思います。ページャコントロール全体に対して「lotusPaging」というスタイルクラスを適用してください。


ソースビューを見ると、それぞれのページャの子コントロールは「xp:pagerControl」として出てきます。それを上から見ていきましょう。

最初のは「Status」タイプです。デフォルトでは現在のページ番号が表示されます。
しかし、value に「Page {0} of {1}」と指定すると、XPages のプロセッサーが実行時に {0} の部分に現在のページ番号、{1} にページの総数を表示します。


同時に「lotusLeft」のスタイルクラスを設定します。


次の 3 つのページャの子コントロールに対しては「lotusRight」のスタイルクラスを指定しますが、一番最後は何も指定しないでください。


カスタムコントロールを保存し、ブラウザで再読み込みするとページャは下のように表示されるはずです。



中央




カスタムのページャをご覧いただくとページャは大変有効に利用でき CSS を組み合わせることで配置においてもコントロールができます。
中央に出てくるページグループのフォーマットがちょっと窮屈なように感じますので「custom.css」に下の記述を追加して<span>タグの内部に来るように調整します。

.lotusPaging span{padding-left:2px;padding-right:2px;} 

次のようになると思います。

より洗練されてきたと思います。

0 件のコメント:

コメントを投稿