ShowTable of Contents
概要
XPages Extension Library「TooltipDialog」の利用方法について記述する。
「TooltipDialog」とは
「TooltipDialog」を使うと、画面上でボタンクリックなどのイベントを実施した際に、ツールチップ（吹き出し）表示で詳細情報などの画面を表示できる。
わざわざ、画面の切替をしたくない場合などに重宝する。
「Tooltip」との違い
「TooltipDialog」と同様に XPages Extension Library内に「Tooltip」が存在する。
このコアコントロールとの違いを下記に記述する。
| コアコントロール | 違い |
| Tooltip | 対象の項目にカーソルが当たっている間のみツールチップが表示されるので、値の入力などができない。 |
| TooltipDialog | ボタンやリンクなどのクリックイベント後にツールチップが表示される。ツールチップの外枠をクリックした際に吹き出しが消える。 |
実現方法
XPage上に 「TooltipDialog」を実現するにあたり、下記の2つを配置する。
・ツールチップ表示用のアクションボタン
・「TooltipDialog」コントロール
1.ツールチップ表示用のアクションボタンの配置
XPage上でコアコントロールから[ボタン]を表示させたい場所へドラッグする。
追加されたボタンの [プロパティ]-[ボタン]-[名前]と[ラベル]を入力する。
プロパティ名 | 記述内容 |
| 名前 | button1 |
| ラベル | ツールチップの表示 |
2.「TooltipDialog」コントロールの配置
[コアコントロール]-[Extension Library]に含まれる[Tooltip Dialog]をドラッグする。
プロパティ名 | 記述内容 |
| 名前 | tooltipDialog1 |
3.ツールチップの内容を記述
「
」と 「
」と間に、ツールチップで表示したい内容を記述する。
◆編集ボックスとボタンをパネルの中に表示した例
4.アクションの記述
1.にて追加したボタンの[onclick]イベント（[クライアント]サイド-[スクリプトエディタ]にツールチップを表示させるアクションを記述する。
記述個所 | 記述内容 |
| [イベント]-[onclick] | XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:button1}') |
5.ブラウザで確認
ブラウザで表示した際、「ツールチップの表示」ボタンを押すとツールチップが表示される。
また、ツールチップの外側をクリックすると消える。
◆ブラウザイメージ（ボタンクリック前）
◆ブラウザイメージ （ボタンクリック後）
実現方法（応用編）
応用編として商品マスタDBの情報を一覧表示し、「詳細」を押した際にツールチップ表示で詳細画面が表示されるような画面を作る。
1.フォームの作成
通常のノーツ開発同様、商品情報を登録する為のフォームを作成する。
◆画面イメージ
◆フィールドの内容
項目 | フィールド名 | 内容 |
| 商品番号 | no | 編集可能テキスト |
| 商品名 | goodsName | 編集可能テキスト |
| 発売元会社 | goodsCom | 編集可能テキスト |
| 画像 | temp | リッチテキスト |
| 発売日 | openday | 編集可能テキスト |
| 型番 | info1 | 編集可能テキスト |
| CPU | info2 | 編集可能テキスト |
| メモリ | info3 | 編集可能テキスト |
| コメント | comment | 編集可能テキスト |
2.ビューの作成
同様にビューを作成する。
◆画面イメージ
3.xpageにて「繰り返し」コントロールを配置
新規にxpageを作成し、「繰り返し」コントロールを配置する。
「繰り返し」コントールでは、ビューより取得した文書を繰り返し表示するように設定する。
◆設定画面
◆設定内容
項目 | 要素 | 名前 | 入力内容 |
| - | 「繰り返し」コントロール | repeat1 | ・データバインディングにて参照用のビューをデータ定義する。
・コレクション名を「row」と記述する。
 |
| 商品番号 | 計算結果フィールド | No_Field | ・「繰り返し」コントロールにて取得したコレクション「row」から、「no」フィールドをバインディングするように設定する。
 |
| 発売元 | 計算結果フィールド | goodsCom_Field | ・商品番号同様、「goodsCom」をバインディングするように設定する。 |
| 商品名 | 計算結果フィールド | goodsName_Field | ・商品番号同様、「goodsName」をバインディングするように設定する。 |
| 詳細 | リンク | link1 | ・クライアントサイドの「onclick」イベントに下記を記述し、ツールチップが表示されるように設定する。
◆入力内容
XSP.openTooltipDialog("#{id:tooltipDialog1}",'#{id:link1}') |
4.「ToolTipDialog」コントロールを配置
「繰り返し」コントールの中に[コアコントロール]-[Extension Library]に含まれる[TooltipDialog]をドラッグし、
さらに「パネル」コントロールを配置する。
その中にツールチップ（吹き出し）で表示したい詳細情報とコメント入力欄の画面を配置する。
◆設定画面
◆設定内容
項目 | 要素 | 名前 | 入力内容 |
| - | 「パネル」コントロール | - | ・パネル内にて、データソース「document1」を追加。「繰り返し」コントロールにて取得した文書を紐付ける。
◆文書IDへの記述内容
row.getNoteID() |
| 画像 | 「イメージ」コントロール | image1 | ・イメージリソース欄に文書の添付ファイルを取得して表示するように設定する。
◆イメージソースへの記述内容
var attachment:NotesRichTextItem = document1.getDocument().getFirstItem("temp");
var attachment_vector = attachment.getEmbeddedObjects();
return "/0/" + document1.getDocument().getUniversalID() + "/$FILE/" + attachment_vector.firstElement().getName();
|
| 商品番号 | 計算結果フィールド | No_Field_S | データソース「document1」から、「no」フィールドをバインディングするように設定する。
|
| 商品名 | 計算結果フィールド | goodsName_Field_S | ・商品番号同様、「goodsName」をバインディングするように設定する。 |
| 発売元 | 計算結果フィールド | goodsCom_Field_S | ・商品番号同様、「goodsCom」をバインディングするように設定する。 |
| 発売日 | 計算結果フィールド | openday_Field_S | ・商品番号同様、「goodsday」をバインディングするように設定する。 |
| 型番 | 計算結果フィールド | info1_Field_S | ・商品番号同様、「info1」をバインディングするように設定する。 |
| CPU | 計算結果フィールド | info2_Field_S | ・商品番号同様、「info2」をバインディングするように設定する。 |
| メモリ | 計算結果フィールド | info3_Field_S | ・商品番号同様、「info3」をバインディングするように設定する。 |
| コメント | 編集ボックス | comment_ADD | ・ユーザーがコメントを入力できるよう編集ボックスを設置する。
「追加」ボタンにて値を取得する為、スコープ変数の設定を行う。
 |
| 追加 | ボタン | button1 | ・「コメント」欄に追加したコメントを文書内に保存するようｏｎＣｌｉｃｋイベントに記述する。
コメント欄へは、入力したコメント、日付、ユーザー名をセットする。
◆onclickイベント（[サーバーサイド]-[スクリプトエディタ]）への記述内容
var doc = document1.getDocument(true);
var ncomment = doc.getItemValueString("comment");
var acommnet = requestScope.comment_ADD +"("+ @Now() +" "+ @Name("[CN]",@UserName())+")"
if (ncomment==""){
doc.replaceItemValue("comment",acommnet);
}else{
doc.replaceItemValue("comment",ncomment + "\n" + acommnet);
}
doc.save();
requestScope.comment_ADD = null; |
| コメント（表示欄） | 複数行編集ボックス | commentLog | ・商品番号同様、「comment」をバインディングするように設定する。
・表示用なので、「読み取り専用」にチェックを付ける。
|
5.ブラウザで確認
ブラウザで表示した際、「詳細」ボタンを押すとツールチップが表示される。
◆ブラウザイメージ（「詳細」ボタンクリック前）
◆ブラウザイメージ （「詳細」ボタンクリック後）
◆ブラウザイメージ （コメント入力） 参考サイト
調査環境
Lotus Domino Designer 8.5.3 Upgrade Pack1
Internet Explorer 8
Google Chrome 19.0.1084.46 m
Mozilla Firefox 12
Safari 5.1.5
この記事は九州地区ノーツパートナー会技術部会(リコー IT ソリューションズ 株式会社)によって作成されました。