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

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

2014年9月24日水曜日

XPagesで複数DBの内容を一つのビューとして表示させてみる

秋分の日を迎え、日が短くなり、いよいよ秋本番となってきました。
秋と言えば、スポーツの秋、食欲の秋、読書の秋、等々いろいろありますが、やっぱり「Notes/Dominoの秋」でしょう(笑)。

ということで今日もブログ記事を更新です。
早速本題に・・・と行きたいのですが、恒例のボタンクリックをしてくださいね。
にほんブログ村 IT技術ブログへ


では本題に入りましょう。今日もXPagesについてです。


XPages化にあたっての問題点?
先週の9月16日にノーツコンソーシアムのXPages研究会がありました。
その中で既存のノーツDBをXPages化するにあたって、質問がありました。
「複数のノーツDBに情報がわかれて登録されている。そのため、毎回毎回それぞれのDBを閲覧しないといけない。XPages化するにあたって一つのビューから複数のノーツDBの情報を参照することができないだろうか?」
というものです。

参加者たちは、複数のデータソースが定義できるんだから実現できるんじゃないかな?
と怪しげです。

これが解決すれば、XPagesの導入の手助けになるのであれば、是非解決したいところです。
さらには、こちらのスキルのレベルアップにもなります。
という事で私が独自に調べてみました。


考えてみよう
まず、複数のノーツDBの情報を表示するということなので、新規にノーツDBを作成してその中で表示させることにしました。


次にノーツDBの情報を表示するとなっていますが、ここではビューの情報が表示されれば良いでしょう。
ということで、ビューコントロール(9.0.xだと「表示」コントロールという名称です)が使えるかな?と思いましたが、以下の理由でやめました。
  • 複数のノーツDBの定義方法が不明(そもそもできるのかどうかも不明)
  • 複数のノーツDBが同じビュー名、さらに同じ構造(列情報)になっているか不明

アプリケーションを作成するのに、決まった方法はないので、ビューコントロールに固執する必要はないだろうということで、別の方法で解決することにしました。

とりあえず、表示させたいノーツDBのビューをデータソースとして定義してみることにしました。
データソースは「Dominoビュー」とすれば良いはずです。

そして、複数のデータソースを連結するのと、ビューの内容を表示するということで、「繰り返しコントロール」を使うことにしました。
先に定義したデータソースはここでJavaScriptを使って連結すればできるかな?と。

これがうまくいけば、後は繰り返しコントロールの中にフィールドを配置すれば、できる!(はず・・・)


実装してみよう
なんとなく、実装の方法が見えてきたので、実際に実装してみましょう。
※テストプログラムなので、こんな見切り発車的なやり方してますが、実際の開発ではちゃんと設計してからやりますよ(多分・・・)。
まず、新規にノーツDBを作成します。ここでは、「multiview.nsf」という名前で作成しました。
新規ノーツDBを作成

次に、XPageを作成します。名称は任意ですが、ここでは「main」としました。
「main」という名前でXPageを作成

「main」XPageを開いたら、データソースを定義します。
ここでは、「TagCloudBBS.nsf」(タグクラウド掲示板)と「wfboardxpg.nsf」(全社掲示板)という2つのノーツDBのビューをデータソースとして定義します。それぞれ「($All)」ビューを定義してあるのでそれを定義します。
画面だと見づらいので、ソースコードを書き出します。

 
 
 
 


各ノーツDBの($All)ビューはこんな感じに作ってあります(手元にあったテスト用のノーツDBを使っています)。

タグクラウド掲示板の($All)ビュー

全社掲示板の($All)ビュー


別々の設計要素になっていることがわかってもらえましたでしょうか?
ただし、まるっきり別々になっていると統合したビューとして表示させるときに問題になるので、
「タイトル」「最終更新日」「文書UNID」の列だけは作成するようにしました。


そして今度は、「繰り返しコントロール」を配置します。名前はデフォルトのままで構いません。
繰り返し限度もデフォルトのままで良いでしょう。
コレクション名には任意の名前を入力します。ここでは「rowData」としました。
使用するバインドデータは、JavaScriptにして次のような式を入力しました。
var db1ID = view1.getParent().getReplicaID();
var db2ID = view2.getParent().getReplicaID();
var array1 = view1.getColumnValues(4) + ";" + view1.getColumnValues(1) + ";" + db1ID + ";" + view1.getColumnValues(6);
var array2 = view2.getColumnValues(2) + ";" + view2.getColumnValues(0) + ";" + db2ID + ";" + view2.getColumnValues(3);
var retArray = array1.concat(array2);
retArray.sort( function( a, b ) {
 if ( a < b ) return 1;
 if ( a > b ) return -1;
 return 0;
});
retArray;

array1というのは「TagCloudBBS.nsf」(タグクラウド掲示板)のデータソースをカスタマイズした配列です。
array2というのは「wfboardxpg.nsf」(全社掲示板)のデータソースをカスタマイズした配列です。
それぞれ、「最終更新日」、「タイトル」、「ノーツDBのレプリカID」、「文書UNID」を";"で結合しています。
そして、array1.concat(array2)で配列同士を結合してretArrayに代入しています。
このままだと、array1の後ろにarray2が配置されるだけなので、sort関数で最終更新日の降順に配列を並び替えています。
そして並び変わった配列を戻しています。
※JavaScriptの関数についてはgoogle検索等で調べてください。たくさん出てます。


データソースはできたので・・・
これで、データソースの定義はできました。
次に実際に値を表示させるための設定を行います。
まずは、繰り返しコントロールの配下に「1行4列」の表を作成します。
幅は100%にしておきます。

一番左のセルに「計算結果フィールド」コントロールを配置します。

ここで本当にデータが生成されているのかを確認するために
値の式を
rowData
と入力してみましょう(単純データバインディングではなく、JavaScriptに変えてから入力します)。
できたら、Webブラウザでプレビューしてみてください。
繰り返しコントロールのデータを表示してみた

なんとかデータは表示されているようです。ですが、これではただ単に表示されているだけでほとんど役に立ちません。
そこで、式を次のように修正します。
var xx = @Explode( rowData, ";" );
xx[0] 
これは、繰り返しコントロールのデータを";"で区切った配列として扱い、そのうち1番目のデータを返すというものです。1番目のデータは「最終更新日」として作成してあるので、つまりは最終更新日だけをひょうじするというものになっています。


二番目のセルには「リンク」コントロールを配置します。
ラベルには以下の式を入力します。
var xx = @Explode( rowData, ";" );
xx[1]
先ほどの式との違いは、配列の2番目のデータを使用するというところです。2番目はタイトルを配置しているので、タイトルが返ってきます。


また、タイトルをクリックしたら該当文書が開くようにしたいので、リンクタイプに以下の式を入力します(横の◇をクリックして、「値の計算...」を選択します)。
var xx = @Explode( rowData, ";" );
var url = context.getUrl();
var sPath = url.getScheme() + "://" + url.getHost() + ":" + url.getPort() + "/";
sPath + xx[2] + "/%24%24OpenDominoDocument.xsp?documentId=" + xx[3] + "&action=openDocument";

sPathというのは現在のサーバのURLパスを示しています。
"/%24%24OpenDominoDocument.xsp?documentId="というのは、指定した文書UNIDをXPageで表示するというURLパラメータです。
*1 ここではテストプログラミングなので、それぞれのノーツDBにあらかじめ文書表示用のXPageを作成してあります。
*2 表示用のDB(新規作成)と既存のノーツDBが同じサーバ内にあるという前提で作成してあります。

3番目のセルにも「計算結果フィールド」コントロールを配置して、以下の式を値として入力します。
var xx = @Explode( rowData, ";" );
xx[2] 
これはレプリカIDを返す式です。

同じように4番目のセルにも「計算結果フィールド」コントロールを配置して、以下の式を値として入力します。
var xx = @Explode( rowData, ";" );
xx[3] 
これは文書UNIDを返す式です。


保存して、Webブラウザでプレビューしてみたのが次の図です。
プレビューしてみた

まだちょっと情けないですが、出来ています。
この後、列タイトルの表を追加したり、列幅を調整したりした結果がこちらです。
完成版


いかがでしょうか?
これで既存のノーツDBが複数に分かれていても、一つのDBを経由することで簡単に?参照することができるようになります。

文書を表示するためのXPageは今回は作成していませんが、これも新規作成したDBの中に組み込むことができますので、うまく作れば既存のDBにほとんど手を入れずにXPages化することも夢ではありません。

是非是非、試してみてください。
それでは今日はこの辺で・・・


Web化するならXPages!



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






2014年9月17日水曜日

XPagesで添付したイメージを画面に表示させる

最近、ブログの投稿がされてない!と怒られました。はっはっは・・・
でもね・・・記事を書かせたい(私のモチベーションを上げる)と思うのであれば、コメントくださいね。
役に立ったのか立ってないかだけで構いませんので、 書いてください。匿名でいいんです。
このブログはNotes/Dominoを使っていただいている皆様のために書いています。

ですが、有益な情報なのか、そうでないのかを決めるのは読んでいただいている皆様です。
ぜひ、他の利用者へのフィードバックとしてコメントをください。


想いを吐露したので、少しすっきりしました。ということで?今日もブログを更新しましょう。





XPagesについて質問があったので、それを解決する方法について書いてみます。
NotesアプリケーションをWeb化したことがある人からすると、「なんだよ、こんなの知ってるよ」という内容かもしれませんがお付き合いください。


質問内容は・・・
XPagesアプリケーションで文書に画像ファイルを添付した。
文書を開いた時にその画像ファイルをイメージとして表示させるにはどうすれば良いか?
このイメージは文書のタイトルと同等の扱いとしたい。なので、画像は文書内の目立つ場所に独立して表示させたい。
というものでした。
ノーツクライアントのアプリケーションの場合、クリップボード経由で画像ファイルを貼り付けられたので簡単に実現できますが、XPagesやWebアプリの場合はどうなんでしょう?(下図はノーツクライアントで画像ファイルを貼り付けてみたところ)
ノーツクライアントなら画像を貼り付けられる

考えてみた
Webアプリケーションの場合も考えると大変なので(めんどくさい・・・)、XPagesで実現する方法を考えてみました。
リッチテキストがあるならば、XPagesからもイメージの貼り付けはできますが、これだとその場所にしか表示できません。となると「目立つ場所に独立して表示させたい。」という要件を満たしません。
となると、やはり添付ファイルで実現するのが良いでしょう。


やってみよう
まずは添付ファイルをアップロードできるようにします。
こちらについてはXPagesで添付ファイルの処理をする(アップロード) に記事を書いていますので、そちらを参照願います。
それでは、実際に表示する方法についてみていきましょう。
画像ファイルをイメージとして表示するので、「イメージコントロール」を利用します。
イメージコントロールをドラッグ&ドロップする時に、イメージのリソースをどうするのか選択する画面になりますが、「イメージプレースホルダーの使用」を選択して[OK]をクリックしてください。
「イメージプレースホルダーの使用」を選択

プロパティの中に「イメージソース」という項目があるので、そこの◇をクリックしてスクリプトエディタを開きます。
ここに
document1.getDocument().getUniversalID() + "/$FILE/" + @AttachmentNames()
という式を記述します。
この式でWebアプリケーション上で添付ファイルを指し示すURLを生成しているのです。
「document1」はデータソースの名前なので、ご自身の環境に合わせてください。
document1.getDocument().getUniversalID()は、開いている文書の文書UNIDを指します。
添付ファイルは「$FILE」に格納されているので、 それを定義しています。
@AttachmentNames()は文書内にある添付ファイルの名前を取得してくる関数ですね。

これだけで終わりなのですが、添付する画像ファイルの縦横の長さがまちまちだとそのままのサイズで表示されるので文書ごとに統一感がなくなります。
そこで「高さ」と「幅」に固定値を設定しておきます。ここでは両方とも150ピクセルとしました。
イメージコントロールのプロパティ

実行してみた
実際にXPagesからファイルを添付して開きなおした状態がこちらです。
XPagesで添付ファイルを表示してみた

これの優れているところは、添付されているファイルが画像ファイルであればノーツクライアントから添付しても正しく表示されるという事です(画像を直接貼り付けている場合は不可です)。



注意事項
ここで実現している方法は、文書中に添付ファイルが一つしかないこと、添付ファイルは画像ファイルである事ということが注意点としてあります。
添付するファイルの数を限定する方法については、XPagesで文書保存時に添付ファイルの数を限定させるには で書いていますので、そちらを参照願います。



このようにちょっとした工夫でできますので、色々と試してみてください。
では今日はこの辺で・・・