XPages標準のビューコントロールはダサい？？？

XPageのデータソースにDominoビューを設定し、ビューコントロール(xp:viewPanel)でビューを作るとこんな感じになるかと思います。これではちょっとかっこ悪いですね。少なくとも幅は100%になって欲しいですし、標準では文字も小さい気がします。

スタイルはどこに書く？

さて、スタイルはどこで設定すれば良いでしょう？XPagesではある程度の設定は「プロパティ-スタイル」や「プロパティ-すべてのプロパティ」を使って設定できるようになっています。

簡単に設定できて良いのですが、下記のようなデメリットがあります。

• XPageのソースとして記述されるため、ソースとしてXPageを編集する際にメンテナンスしづらい
• 設定したスタイルは、出力されるHTML内のstyleタグとして出力されるため、HTMLを見てデバッグする際、コード解析がしづらい
• ビューごとに毎回設定する必要があり、複数のビューがあった場合に非効率であり、バグの発生を招きやすい

XPageのプロパティで設定すると出力されるHTMLはこんな感じ。ちょっと設定しただけでもこのくらいは出力されます。

デザインはCSSファイルに記述しよう!

現在のWebアプリ開発はデザイン(CSS)と構造(HTMLやXPage)の分離が標準となっていますし、デバッグなど開発生産性の面からも合理的です。ですので、今回は外部ファイルとしてCSSファイルを作成します。まずはdesign.cssをテキストエディタで作成し、文字コードを指定するために、下記のコードを書きます。テキストエディタはメモ帳でもかまいませんが、Sublime Textなどを使うと開発効率が向上します。

/* 全体 */
@charset "UTF-8";

次にビューの幅を100%、背景を白、文字サイズを120%に設定するクラスを追加します。好みに応じていろいろ変更してみて下さい。

/* NOTES VIEW */
.notes_view			{width: 100%;
					background-color: #fff;
					font-size: 120%;
					}

CSSファイル(design.css)をXPagesに組み込む

それでは作成したdesign.cssをXPageに組み込んでみましょう。対象アプリケーション(データベース)をDominoDesignerで開き、「リソース-スタイルシート」を開きます。「スタイルシートのインポート」ボタンを押し、先ほど作成したdesign.cssをリソースとして読み込みます。

念のため、文字セットはUnicode(UTF-8)に設定しておきます。(この設定はDominoDesignerでcssファイルを開くための文字コードなので、外部エディタで編集しインポートする分には設定しなくて良いように思います。)

ビュー用のXPageを開き、リソースタブにある追加ボタンでスタイルシートを選択、先ほどインポートしたdesign.cssをリソースとして読み込みます。

次に読み込んだスタイルシートのクラスを割り当てていきます。ビューコントロールの「すべてのプロパティ-viewStyleClass」にdesign.cssで追加したクラス名”notes_view”を設定し、保存を行います。(viewStyleClassはビュー全体に反映するクラスです。)

幅が100%になり、文字サイズが大きくなりました。

マウスオーバーで色を変えよう！

これではちょっと物足りないので、マウスオーバーで選択されている行の色を変えてみましょう。先ほどのdesign.cssファイル(XPagesにインポートする前のテキストファイル)を開き、”notes_view_hover”クラスを追加します。

.notes_view_hover:hover{
					background-color: #cf0;
					}			

design.cssの保存が出来たら、「リソース-スタイルシート」を開き、「置換」ボタンで先ほど更新したdesign.cssをリソースとして読み込みます。

先ほど追加したマウスオーバーのためのクラスを追加します。ビューコントロールの「すべてのプロパティ-rowClasses」に”notes_view_hover”を設定し、保存を行います。

完成!!これで少しCoolになりました。

あとはCSS次第で、Notes9っぽい色にも出来ます。

.notes_view_hover:hover{
					background-color: #4682B4; 
					color: #fff;
					}				
.notes_view_hover:hover a{
					color: #fff;
					}

次回予告

今回は番外編でデザインの話を書きましたが、次回は予告通りjQueryの話を書きます。