2009/12/28

XPages Tutorial Part 17: ホームページ上の表のスタイリング


Styling Our Homepage Table {Original Source}

前回までに XPages アプリケーションに繰り返しコントロールを使用してデータを表として表示させることをしてきました。今回はこの表にカスタムの CSS を適用することと、サーバーサイド JavaScript を使って表の行に使用されるスタイルを付けます。

まず最初に「custom.css」ファイルにスタイルを定義することからはじめましょう。
データベース設計から「リソース」−「スタイルシート」の中にある「custom.css」を開き、次の CSS を追加してください。
#phonebook,.phonebook {
border:1px solid #CCCCCC;
width:100%;}

#phonebook th, .phonebook th {
background-color:#EEEEEE;
padding:5px;
font-weight:bold;}

#phonebook tr, .phonebook tr {
background-color:#FFFFFF;
padding:5px;}

#phonebook tr.altRow, .phonebook tr.altRow {
background-color:#EEEEEE;}

#phonebook tr.over, .phonebook tr.over {
background-color:orange;
color:#FFFFFF;
cursor:pointer;}

#phonebook td, .phonebook td {
padding:0 2px;
text-align:left;} 
「custom.css」の保存後に、「contents_HomePage」カスタムコントロールを開きます。
前回作成した表に対して「phonebook」というスタイルを使用する宣言をします。
この表のすべてのプロパティに切り替え、「phonebook」というスタイルクラスを指定します。
ソースタブでコードを確認すると下のような記述がされているはずです。
では保存後、ブラウザからページを表示させてみましょう。

表の中の行に背景色を設定すると良くなると思いませんか?
特に表の中にたくさんの情報がある場合にはユーザーにとって見やすいものになるはずです。

ちょっとしたサーバーサイド JavaScript で実現できると思います。
表の中のそれぞれの行は繰り返しの内部にあり、一度だけコードを書けばすみます。

「contents_HomePage」コントロールを再び開きソースビューに切り替えてください。
繰り返しコントロールの内部にある<xp:tr>タグを見つけてクリックしてください。
そうすることで表の行に対するプロパティが表示されます。そこですべてのプロパティタブに切り替え「styleClass」が見つかるまでスクロールダウンしてください。
以前にもお話ししましたがほとんど XPages の中のほとんどが計算結果で値を設定できるようになっています。今回もそれをしたいと思います。
「styleClass」 に直接書き込まず、右側の青のダイヤモンドボタン(計算プロパティメニューボタン)をクリックし「値の計算」を選択します。

するとスクリプトエディタが表示されますので以下のコードを入力してください。
if (rowIndex % 2 == 0 )
return ""
else
return "altRow";

この JavaScript は以前設定した繰り返しコントロールの中に索引を保管する変数として指定した「rowIndex」を参照します。
rowIndex%2では現在の行番号を 2 で割り、行番号の偶数、奇数を判別するシンプルなコードです。また、行の索引は 0 からスタートすることを覚えておいてください。
ではスクリプトを保存してブラウザから再読み込みしてページを表示させてみましょう。

一行だけの簡単なサーバーサイド JavaScript を繰り返しコントロールで使用すれば表の一行おきの色を変更させることができます。

次回以降は新しい XPage を作成してひとつのロケーションに所属するスタッフ全員を表示してみます。ホームページからロケーションのページへのリンクやサイドバーからのロケーションのリンクなどもカバーしたいとおもいます。
下のダウンロードはこれから使用していく最新のアプリケーションです。
ダウンロードファイル xPhonep17.zip

0 件のコメント:

コメントを投稿