当ブログに掲載しているサンプルは、すべて利用者の自己責任という形でお願いします。
ただし、明らかな不具合がある場合、ご連絡いただければ、訂正記事を出します。
また、こちらのサンプルは、別のサイト等への公開、転載は一切禁止しています。
どうしてもと言う場合は、筆者にあらかじめご連絡ください。

テクてく Lotus 技術者 Slack に参加しよう!

2012年8月24日金曜日

繰り返しコントロールを装飾してみよう

こんにちは。予告通り、3日間更新をお休みさせて頂きました。
ということで、今日は更新します(でないと、3日間の休みではなくなってしまいますしね)。

その前に、恒例のボタンクリックをお願いします。どうも、記事を更新したときだけクリックして頂いているようなのですが、読むたびにクリックして頂いて構いませんので、ご協力をお願いします!
にほんブログ村 IT技術ブログへ



さて、では今日の話題へと・・・
前回は、繰り返しコントロールを使ってビューを表現してみました。
ですが、最後に書いたように、スタイルの設定をしていないので、とてもみすぼらしい形になってしまいました。
皆さん、各自で色々試されたのではないかと思いますが、筆者も筆者流にカスタマイズしてみようかと思います。

今回の記事を読めば、ノーツプログラマーな方もXPagesアプリケーションを「それなりに」(笑)、デザインできるようになるはずです。


主にやることは次の4つでしょう。
  1. ビューのページャを作成する
  2. ビューの列タイトルを追加する
  3. ビューの書式を整える
  4. その他細かい調整を行う
 では、順に見ていきましょう。
1.ビューのページャとは、1画面に文書が表示しきれないとき(デフォルトは1画面30文書)に、次のページに移動するようにするというものです。

コントロールビューの「コアコントロール」の中に「ページャ」があるので、それを繰り返しコントロールの上にドラッグ&ドロップします。
ページャコントロールを追加

貼り付けた「ページャ」を繰り返しコントロールと連携する必要があるので、プロパティビューの「添付先」という項目をクリックして、繰り返しコントロールを選択します。
ページャコントロールのプロパティを設定

同じ画面内にある「ページャスタイル」はページャの見せ方をどのようにしますか?というものなので、後で自由に設定してください。ここでは、「サンプル1」のままとしておきます。

ページャの設定はこれだけです。簡単ですね。

次は、2.ビューの列タイトルを追加しましょう。
繰り返しコントロールは表を使って列項目を表現するようにしました。
ですので、列も同じように表を使って表現します。
「表」コントロールを「ページャ」と「繰り返しコントロール」の間にドラッグ&ドロップします。
表の大きさは「行:1、列:3」とします。
列タイトルを配置するための表を追加

表の幅は100%にしておきましょう(上の画面で設定できるのですが、いつも忘れてしまいます・・・)

列タイトルを表示させるので、「ラベル」コントロールをそれぞれのセルにドラッグ&ドロップします。
一番左のセルのラベルは、「作成日
真ん中のセルのラベルは、「件名
一番右のセルのラベルは、「添付ファイル名
とします。
列名のラベルを追加

また、それぞれのラベルは太文字に設定しておいてください。

このままだと、セルが自動配置されてしまい、表示が見にくくなります。
そこでセルの幅を固定にします。
この時、ビューの列幅も同じ設定にしておくことで、より見やすくすることが出来ます。

そう言うときにスタイルシートを使うと簡単に行う事ができます。
[表示][移動][スタイルシート]メニューをクリックして、スタイルシートの一覧画面を表示します。
スタイルシート画面に移動する

データベースナビゲータビューで、スタイルシートを選択しても良いのですが、どこにあるか分からないと言うときに、上のやり方は簡単です(実際に、スタイルシートは、[リソース]の配下にあります)。

さて、[新規スタイルシート]ボタンをクリックしてスタイルシートを作成します。
名前は任意ですが、ここでは「stylesheet」としておきます。
新規スタイルシートの作成

スタイルシートには、以下のように記述してください。
.ViewCellLeft   { border-top: solid 1px #D9D9D9; width: 10em; height: 2em }
.ViewCellCenter { border-top: solid 1px #D9D9D9; width: 40em; height: 2em }
.ViewCellRight  { border-top: solid 1px #D9D9D9; height: 2em }
記述したら、保存して閉じます。

今まで編集していたXPageに戻ります。
設計画面の何もないところをクリックして、プロパティビューの「リソース」タブを開きます。

[追加]ボタンをクリックします。 すると、追加したいリソースの一覧が表示されるので、「スタイルシート」を選択します。
追加するリソースとしてスタイルシートを選択

すると、追加するスタイルシートを選択するダイアログが表示されるので、先ほど作成した「stylesheet」を選択して、[OK]をクリックします。
スタイルシートを選択

これで、このXPageではstylesheet.cssが利用できるようになりました。

スタイルシートの内容を各コントロールに当てはめる設定を行います。
1番左の列タイトルのセルを選択したら、プロパティビューの「スタイル」タブを開きます。
スタイルシートの中の作成した項目が表示されるので、「.ViewCellLeft」を選択します。すると、その瞬間にセルにスタイルシートの内容が反映されます。

同じように真ん中のセルのスタイルは「.ViewCellCenter」を、一番右のセルのスタイルは「.ViewCellRight」を選択します。


今度は、3.ビューの書式を整えるということで、
列のタイトルと同じように設定します。
ビューデータを設定したセルのそれぞれのスタイルに、「.ViewCellLeft」「.ViewCellCenter」「.ViewCellRight」を設定します。

ここまでで一度、XPageを保存してWebブラウザで結果を確認してみましょう。
繰り返しコントロールにいくつかのスタイルを追加

最初に比べたら、随分と見栄えが良くなりました。もう少し改良してみましょう。
件名の部分は、ハイパーリンクになっているので、分かりやすくするため、太文字にしましょう。

また、列タイトルは、ビューデータと混同しないように、背景色を設定してみましょう。
列タイトルを配置してあるビュー自身の背景色にグレーを設定します。


そして、もう一つ。ちょっとしたお遊びを。
マウスカーソルが当たっている行の色を変えてみたいと思います。

さきほど作成したstylesheetに以下の行を追加して保存してください。
.ViewDataColumn { cursor: default }
.ViewDataColumn:hover{ background-color:#FFFFC8 }

その次に、ビューデータを格納している「表」コントロールを選択してプロパティビューを表示します。
「スタイル」タブを開いて、スタイルに「.ViewDataColumn」を選択してください。
表コントロールにスタイルを追加

これでXPageを保存します。
こうすると、Webブラウザで見たときに、マウスカーソルがあたっている行がハイライトされます。
.ViewDataColumn:hoverの「hover」というのが、CSS でマウスカーソルが当たっているときというのを指しています。


ちなみに・・・通常のビューコントロールでも同様の設定が行えます。
1.ビューコントロールを選択します。
2.プロパティビューの「スタイル」タブを開きます。
3.スタイルクラスで「rowClasses」を選択します。
4.スタイル一覧から「.ViewDataColumn」を選択します。
ビューコントロールにスタイルを追加


この状態で、繰り返しコントロールのXPageをWebブラウザで表示したのが次の画面です。
一行だけ反転しているのがわかるでしょうか?
選択した行が反転している


いかがでしょうか?繰り返しコントロールを使ったビューなら、色々と自分好みにカスタマイズできるのが分かって頂けたでしょうか?

スタイルシートを使うと、このようにXPagesアプリケーションの表現方法が格段に増えますので、是非覚えましょう。



では、今日はこの辺で・・・






【PR】ノーツ/ドミノに関するお問い合わせは下記まで【PR】
単純なDBのカスタマイズから他アプリケーションとの連携までご要望にお応えします
Lotus Notes/Domino カスタマイズとセキュリティ強化 - 株式会社エフ

0 件のコメント: