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

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

2014年8月13日水曜日

XPagesで「データベースを開く」コマンドを使うには?

こんにちは。今週は夏休みを取られている方も多いのではないでしょうか?
私もその一人で、今日(8/13)から8/17(日)までが夏休みです。
ということで、ブログの更新を行います!(なんで???)


そんな私が可哀想と思ったらこちらのボタンをクリックしてください。
思わなくてもクリックしてくださいね。
にほんブログ村 IT技術ブログへ



では始めましょう。

「データベースを開く」コマンドとは? 
さて、今日はXPagesで「データベースを開く」コマンドを使う方法についてです。
Notesクライアントでいう、こちらの画面ですね。
NotesクライアントもしくはDominoサーバ上のアプリケーションを選択して、情報を取得する(またはそのアプリケーションを開く)というものです。
「アプリケーションを開く」ダイアログ

※Notes/Domino 8.0からは「Notesアプリケーション」と呼称するようになっているので、ダイアログのタイトルは「アプリケーションを開く」となっています。

これを実装しようとなると、かなり大変そうです。


OpenNTF.orgで探そう

ここは、実装するのではなく、OpenNTF.orgから探してきましょう。

で・・・、見つけてきました。その名もXPages Database Open Dialog Custom Control

こちらは、今年(2014年)の1月にv2.0がリリースされて、Notes/Domino 9.0に対応しています。
きちんとしたテストはしていないようですが、8.5.3でも動作すると書いてありますので、まだバージョンアップしていないお客様でも使えるのは嬉しいですね。


実装は、Javaでしてあり、さらにExtension Libraryを使用していますが、既存のNotesアプリケーションにも組み込めるようになっています。
手順書も(英語ですが)しっかりしているので、安心です。
さらにサンプルアプリケーションもついているので、実装する前にどんな動きをするのかの確認もできます。


ダウンロードしてみる
では、ダウンロードしてみましょう。
プロジェクトの「Downloads/Releases」のタブを開いて、「XC OpenAppDlg v2.0」をクリックします。
「hedersoft_OpenAppDlgV20.zip」というファイルがあるので、それをクリックしてダウンロードします。
ダウンロードできたら、適当なフォルダに解凍します。下図がzipを解凍した状態です。
zipファイルを解凍した内容
この中にはサンプルアプリケーション、インストール手順書、インストール用ファイル等が含まれています。


デモを見てみる
zipの中にある「hsOpenAppDlgV20.nsf」をDominoサーバにコピーします(クライアントでは動かないようです)。
Domino Designerで開いたら、demoというXPageを開きます。
下図はブラウザで見たときの画面です。
デモ画面

画面はjQueryとBootstrapを使って作成しているようです。
ここにある[Open Application]というボタンをクリックすると、下図ようなダイアログが表示されます。
Open Applicationのダイアログ

なぜか、Notesクライアントのよりもすっきりして見やすく感じるのは気のせいでしょうか?
ここで、Notesアプリケーションを選択して[OK]ボタンをクリックすると、下図のように元の画面にアプリケーションの情報がセットされます(下図はnames.nsfを選択した状態)。
names.nsfの情報

画面を見ればわかるように、
タイトル、サーバー名、 ファイル名、レプリカIDを取得してくれています。さらにはURL及びNotesURLまで生成してくれています。


インストールする
では、実際にNotesアプリケーションにインストールしてみましょう。
分かり易くするため、新規に作成したアプリケーションにインストールします。
既存のアプリケーションでも手順は変わりませんので安心してください。

1.カスタムコントロールのコピー
サンプルアプリケーションにある「ccOpenAppDlg」カスタムコントロールをコピーします。

2.Java クラスのコピー
サンプルアプリケーションにある「de/heresoft/OpenAppDlg.java」「de/heresoft/PhaseValidator.java」をコピーします。
「カスタムコントロール」と「Java クラス」をコピー


3.フォルダーの作成
パッケージエクスプローラービューを開きます。

作成したアプリケーションの「WebContent」フォルダを探して、右クリックします。
ポップアップメニューから「新規」「その他」を選択します。
「新規」「その他」メニューを実行

「新規」のダイアログが表示されるので、「一般」「フォルダー」を選択して、[次へ]をクリックします。
「フォルダー」を選択

フォルダー名を入力する画面になるので、「css」と入力して、[終了]をクリックします。
フォルダー名の入力

同様にして、「fonts」と「js」というフォルダーを作成します。

4.ファイルのコピー
サンプルアプリケーションにあるファイルを今作成したフォルダーにコピーします。
cssフォルダー
 bootstrap.min.css
fontsフォルダー
 glyphicons-halflings-regular.eot
 glyphicons-halflings-regular.svg
 glyphicons-halflings-regular.ttf
 glyphicons-halflings-regular.woff
jsフォルダー
 bootstrap.min.js
 html5shiv.js
 jquery-1.10.2.min.js
 jquery-2.0.3.min.js
 jquery-ui.min.js
 respond.min.js
下図はコピーが完了したときの状態です。
ファイルコピー時の状態


5.faces-config.xmlのカスタマイズ
ダウンロードしたzipを解凍した中に「snippets」フォルダがあり、そこに「demo.faces-config.xml」ファイルがあります。このファイルの中身を丸ごとコピーします。
次に、パッケージエクスプローラーで「WebContent」「WEB-INF」フォルダにある「faces-config.xml」をダブルクリックして開きます。
この「faces-config.xml」の中身を削除して、先にコピーしたものを貼り付けます。

6.XSPプロパティの修正
「アプリケーション」ビューを開きます。
「アプリケーション構成」「XSPプロパティ」をダブルクリックして開きます。
「永続性」のタブを開き、「実行時最適化JavaScriptとCSSリソースの使用」にチェックを入れます(デフォルトでチェックが付いているはずです)
「永続性」タブ

次に「ページの生成」タブを開きます。
「HTML doctype」の値を「HTML5」に変更します。
また、「com.ibm.xsp.extlib.library」ライブラリにチェックを付けて保存します。
「ページの生成」タブ

これで必要なものはインストールされました。
もし、「問題」ビューにエラーが表示されているようであれば、「プロジェクト」「クリーン」メニューから再ビルドしてみてください。エラーがなくなるはずです。


実行用のページを作成する
任意の名前でXPageを作成します(今回は「home」とします)。
XPage内に「ccOpenAppDlg」カスタムコントロールを配置します。
「アプリケーションを開く」ダイアログを呼び出すためのボタンコントロールを配置します。
ボタンにonClickイベントを設定しますが、クライアントサイドのJavaScriptなので、次のように設定します。
「プロパティ」ビューの、「すべてのプロパティ」タブを開きます。
onClickの横にある編集ボタンをクリックします。
onClickの編集

クライアントサイドJavaScriptの内容は
$.openAppDlgCs.show({load:true, fade:true, callback:setFields, passThrough:''});
です。
ここでは、callbackの引数である「setFields」を覚えておいてください。これがダイアログの戻り値を取得するためのコールバック関数になります。
ボタンのサンプルコードはzipファイル内の「snippets」フォルダの「open_dialog_button_snippet.txt」にあります。

次に、ダイアログの戻り値をセットするためのコントロールを配置します。
今回は、計算結果のフィールドコントロールを用意します。
戻り値はデモで見たように
「タイトル」「サーバー名」「ファイル名」「レプリカID」「URL」「NotesURL」の6つですので、計算結果のフィールドコントロールも6つ配置します。
名称はそれぞれ、下記のようにします。
タイトルdbTitle
サーバー名dbSrv
ファイル名dbPath
レプリカIDdbReplicaId
URLdbHttpUrl
NotesURLdbNotesUrl


最後に、コールバック関数を記述するために「出力スクリプト」コントロールを配置します。
これはコントロールビューに表示されていないので、「その他...」を選択してドラッグ&ドロップします。
すると、「コントロールの作成」ダイアログが表示されるので、「出力スクリプト」を選択して[OK]をクリックします。
「コントロールの作成」ダイアログ

「プロパティ」ビューの「すべてのプロパティ」タブを開き、vaue項目にある編集ボタンをクリックします。
クライアントサイドJavaScriptの編集画面が表示されるので、
function setFields() {
 try {
  var dbTitle = "";
  var dbPath = "";
  var dbSrv = "";
  var dbHttpUrl = "";
  var dbNotesUrl = "";
  var dbReplicaId = "";
  
  if (arguments.length > 0) {
   var db = arguments[0];
   var passThrough = arguments[1];
   
   dbTitle = (typeof db.title === "undefined") ? "" : db.title;
   dbPath = (typeof db.path === "undefined") ? "" : db.path;
   dbSrv = (typeof db.server === "undefined") ? "" : db.server;
   dbHttpUrl = (typeof db.httpUrl === "undefined") ? "" : db.httpUrl;
   dbNotesUrl = (typeof db.notesUrl === "undefined") ? "" : db.notesUrl;
   dbReplicaId = (typeof db.replicaId === "undefined") ? "" : db.replicaId;
  }
  
  document.getElementById( "view:_id1:dbTitle" ).innerHTML = dbTitle;
  document.getElementById( "view:_id1:dbSrv" ).innerHTML = dbSrv;
  document.getElementById( "view:_id1:dbPath" ).innerHTML = dbPath;
  document.getElementById( "view:_id1:dbHttpUrl" ).innerHTML = dbHttpUrl;
  document.getElementById( "view:_id1:dbNotesUrl" ).innerHTML = dbNotesUrl;
  document.getElementById( "view:_id1:dbReplicaId" ).innerHTML = dbReplicaId;
 } catch (e) {
  console.log(arguments.callee.name);
  console.log(e);
 }
};
と入力します。
上記は少しカスタマイズしてあります。
サンプルのものをそのまま使用したい場合は、zipファイル内の「snippets」フォルダにある「proccess_selected_app_snippet.txt」を使用してください。


ここで注意しなければいけないのは、計算結果のフィールドコントロールのidです。
クライアントサイドJavaScriptで使用する場合、設定したIDでは判断されません。
どのように設定されるかはブラウザでプレビューした際にソース画面で見ると良いでしょう。

実行結果は画面の見た目以外はサンプルアプリケーションと変わりませんので、ここでは割愛します。
※画面の見た目を重視するのであれば、サンプルアプリケーションの「demo」XPageを参考にしてください。


ダイアログをカスタマイズする
これで十分使用できる状態なのですが、このアプリケーションはなんとカスタマイズができます。
ダイアログの項目の表示を変えることができるのです。
標準だと英語なので、使うのに抵抗がある人がいるかもしれませんがここを日本語に変えてしまえば、そんな問題も吹き飛びます。
カスタマイズの仕方は以下の通り。
「ccOpenAppDlg」カスタムコントロールを配置したときのプロパティの「カスタムプロパティ」に値を設定するだけです。
下図はそれぞれのプロパティに日本語の値をセットした状態です。
カスタムプロパティ

この状態で実行したときのダイアログが下図です。
日本語での「アプリケーションを開く」ダイアログ

どうでしょう?ずいぶんと印象が変わったでしょう?





動作環境の確認
このアプリケーションは以下の環境でテストされています。
Windows版 Domino 9.0(32bit版)
Windows版 Notes 9.0(32bit版)
※上述したように、Notes/Domino 8.5.3でも動作するようです。

Firefox 4以上
Chrome 11以上
IE 8以上
Safari 5以上

動作させるには、このアプリケーションの他、XPages Extension Libraryが必要です。
9.0ならば、標準で組み込まれているもので大丈夫です。
また、8.5.3の場合、アップグレードパック1を導入することでも良いようです。



さらに工夫をすれば、ここで取得したデータをNotes文書のアイテムとして保存することも可能です。
是非、利用してみてください。




他にもOpenNTFで、使ってみたら便利だな!というものがあれば、また紹介しますので、お楽しみに。






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





0 件のコメント: