slack

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

2009/12/28

XPages Tutorial Part 22 : ユーザー文書の作成

Creating The User Document {Original Source}
<< XPages Tutorial Part 21 : サイドバーをロケーション XPage にリンクさせる | TOC | XPages Tutorial Part 23 : Person Details XPage へのデータフィールド追加 >>

これまでにレイアウトを設定し、繰り返しを使ってビュー上の内容を表示させ XPage 電話帳アプリケーションに取り組んできました。
これから XPage に文書を表示させたり、サイドバーメニューのロケーションから URL のパラメーターを使ってリンクさせる方法とは別のやり方でリンクさせる方法を見ていきます。

では新規の XPage と カスタムコントロールを作成していきたいと思います。
今回も以前作成した「content_Location」カスタムコントロールをコピーペーストして、F2 キーを押して名前を変更しましょう。
今回の名前は「content_Person」とします。
名前を変更し、開いたらソースビューで「lotusContent」パネル以外のすべてを削除してください。
そしてそのパネルの中にテキストを下のスクリーンのように入力します。

では保存して閉じてください。今度は XPages ビューから「Location」 XPage をコピーペーストしてください。
同じ手順で F2 キーで名前変更してください。名前は「Person」としてください。
ソースビューで「lotusMain」の DIV を探し、「content_Location」を参照している部分を下のように「content_Person」に変更します。


ではこの「Person」XPage を保存してブラウザでプリビューしてみましょう。
以前と同様に OneUI のレイアウトでページのメインの部分には入力したテキストが表示されているのを確認します。

新規の XPage とカスタムコントロールを作成できたので次回はノーツ文書の内容を表示させていきたいと思います。

XPages Tutorial Part 21 : サイドバーをロケーション XPage にリンクさせる

Linking The Sidebar To The Location XPage {Original Source}

これまで「home」XPage と「Location」XPage を完成させてきましたが、それぞれはまだリンクした形になっていません。今回はサイドバーに表示されているリストをリンクに変更し、ユーザーがそれをクリックするとそのロケーション名を URL へ引き渡す処理を行っていきます。

「sb_LocationsList」カスタムコントロールを開いてください。
現在はデータベースの lookup¥locations ビュー を繰り返し表示しているだけで下のような内容になっています。
今回このリストの見栄えをちょっと変更してみたいと思います。なぜなら OneUI CSS のファイルの中に追加のコンポーネントがあることを見つけたのでこれを利用したいと思います。
ではメニューにタイトルを付けたいと思います。
新しいパネルを「lotusInner」の中にくるようドラッグインしてください。ソースを確認して正しい位置に配置されたかどうか確認してください。
「lotusInner」の真下に追加して、スタイルクラスを「lotusMenuSelection」と指定してください。そして<h3>タグしてメニュータイトルを入力します。
では保存してブラウザで表示させてみてください。
タイトルが表示されているのを確認してください。

では次にもう一つのパネルをドラッグインして「lotusMenuSubsection」というスタイルクラスを指定してください。
次にソースビューで繰り返しコントロールの部分(xp:repeat)が、今作成したパネルの内部に来るようにこのパネルの終了位置を修正します。

次に繰り返しコントロールの中にある h3 タグで囲まれた計算結果フィールドですか、今回はこの計算結果フィールドはもう使用しませんので、そのかわりリンクコントロールをドラッグインして置き換えてください。

リンクコントロールのプリパティのひとつである「ラベル」を探してください。
右端の計算プロパティメニューボタン(青いダイアモンド)をクリックし計算結果の値として rowData.getColumnValue("Location") をスクリプトエディタで指定します。
そしてリンクプロパティのオプションから「オープンページ」に Location を指定します。
この指定で Location XPage が開くことは指定できるようになりました。?Location= を URL へ追加するためにすべてのプロパティに切り替えてください。
データセクションの「parameters」オプションを探してください。入力エリアをクリックすると 2 つの小さなボタンが表示されます。最初のボタンがパラメーターを追加するためのボタンです。
parameter の name に「location」、value にJavaScript で rowData.getColumnValue("Location") と入力してください。
ではカスタムコントロールを保存して、home.xps をブラウザで開き、今回作ったリンク URL にパラメーターを引き渡して対象のロケーションだけが表示されるようになっているか確認してください。

<h3>タグのスタイリングにはあまり満足できないので、そのかわりに <li> タグを使うことにしました。同時に繰り返しコントロールを <ul> タグで囲むようにしました。
そうすると次のようにより見栄えのいいものになるはずです。
最新のダウンロードファイルを下に追加しておきます。その中には「Build Sample Data」というノーツクライアントで起動するエージェントが入っています。このエージェントはロケーションを 10 個、ランダムな Person 文書を 1000 個作ります。このエージェントは詳細の情報までは作成しませんが。
ダウンロードファイル xPhonep21.zip

XPages Tutorial Part 20 : 特定のカテゴリのものだけを表示させる方法

Restricting The Repeat To A Single Category {Original Source}

現在のところ「Location」XPage はビューのカテゴリも含めてすべてのエントリを表示してしまっています。
今回は http://demosite/xphone.nsf/location.xsp?location=Dublin のようなフォーマットの URL を使って変数を用いながら制御する方法を見ていきます。

これにはサーバーサイドの JavaScript を使って対処したいと思います。
ここで使用する JavaScript ライブラリは Thomas Gumz によって作成され、Matt White によっていくつか修正されているスクリプトライブラリを活用したいと思います。またこれは 8.5 の XPages ディスカッションテンプレートの中にあるものです。また taskjam.net でダウンロードできる TaskJam アプリケーションにもいくつかの修正が加えられた形で使用されています。
このスクリプトライブラリは次回のダウンロードファイルに含まれています。

このスクリプトライブラリをアプリケーションに追加するために「content_Location」カスタムコントロールを開き、アウトラインのビューからカスタムコントロールを選択します。
プロパティタブのリソースへ切り替え、「スクリプトライブラリの追加...」ボタンをクリックします。
「スクリプトライブラリをページへ追加」ダイアログボックスが表示されたら対象のスクリプトライブラリを選択します。

次に「すべてのプロパティ」タブに切り替え、「BeforePageLoad」プロパティを探してください。
そしてサーバーサイド JavaScript のコードを記述します。コードは下のようになります。
var cgi = new CGIVariables();
var param = cgi.getURLParam("Location");
if (param) {
if (param != "" ) 
sessionScope.locationfilter = param;
}

このコードが意味するのは、ページがロードされる前に URL を参照し location= の部分を見つけます。もし存在する場合にはセッションスコープの「locationfilter」という変数に値を代入します。
セッションスコープはユーザーのセッションのライフタイムで追加できる変数を設定することができます。言い換えるとブラウザが閉じられた時点でセッションスコープで設定した変数はなくなります。その他にもアプリケーションスコープやページスコープなどもあり同様に変数の値を保存しておくことができます。
下のコードはソーズビューでみたサーバーサイドのスクリプトライブラリのリソースを参照しているものと beforePageLoad のコードです。


URL からロケーションを取得してセッションスコープの変数としてその値を保存できるようになりましたので、次はデータソースにそれがカテゴリであることを教えてあげなければなりません。
すべてのプロパティタブから「データ」-「data」- 「dominoView[0]」の「categoryFilter」を探してください。

ここで値の計算のためのスクリプトエディタを表示させてセッションスコープの変数を参照するようにしていきます。
「sessionScope.locationfilter」を入力してください。
ソースビューで確認すると以下のようなコードが追加されているはずです。

ではカスタムコントロールを保存してブラウザで「?Location=Pittsburgh」を URL のお尻に追加して表示させてみてください。(もしサンプルデータを追加しているのであればそれも試してみてください)

?Location=Chicago とすると結果はこうなるはずです。

?Location=Pittsburgh はこうなります。(データによりますが)

これで行のスタイルも正しく表示されるようになりました。

次回はサイドバーにあるロケーション名をこのページにリンクさせたいと思います。

XPages Tutorial Part 19: もう一つの繰り返しともう一つの表

Another Repeat Another Table {Original Source}

2つのXpageが作成できましたので、実際のコンテンツを追加していきましょう。
「content_Location」カスタムコントロールを開き前回追加したテキストを削除します。
次にこのコントロールのデータソースを指定します。
アウトラインのビューから「カスタムコントロール」のノードを選択し「データ」プロパティタブに切り替え新しい「vw_People」ビューをデータソースとして指定します。

データソースの指定が終わったら繰り返しコントロールをドラッグイン。その中に表コントロールをドラッグインし 2 行 6 列の表として作成していきます。
繰り返しコントロールのプロパティに切り替えてください。

上記のように前回ホームページの作成で繰り返しの表を作成したときと同様にコレクション名と索引名を定義します。
計算結果フィールドをドラッグインして、rowData.getColumnValue("列名") の簡単な JavaScript を使って値を計算します。
表のヘッダー行を繰り返しコントロールの外に出し、<th> タグに変更します。その際に表のスタイルクラスに「phonebook」という CSS を指定します。
また繰り返しコントロールの id は取り除きます。

ではカスタムコントロールを保存し「Location」XPage をブラウザで表示させてみましょう。データベース内のすべてのスタッフが表示されると思います。
もし一行おきの色を変更したければ以前にやったのと同様の手順で行ってください。

注意:ダウンロードしたデータベースの「content¥people」ビューには JobTitle を表示している列がないため上記の手順を忠実に行ってもブラウザで開くとエラーが発生します。ビューに JobTitle を表示する列を追加してください。


上のスクリーンで分かる通り、一行おきの色の設定をした場合は正しく表示されないことがわかります。
オリジナルのビューをよく見てみると最初の行はカテゴリの列がビューの先頭にあるため索引のカウントがうまくされていないように見えます。
次回はこのようなカテゴリ行を繰り返しから取り除くための URL を変数として渡す方法を用いて解決したいと思います。

XPages Tutorial Part 18: 2 つ目の XPage 作成

Building The Second XPage {Original Source}

アプリケーション開発のこの段階では電話帳アプリケーションの見栄えの良いホームページが作成できました。ブラウザで表示させると OneUI のレイアウト、左側にはロケーションのメニューリスト、メインの部分では全ロケーションの情報が電話番号、FAX 番号と一緒に表形式で表示されています。
しかしまだ表示しているだけで肝心なところはこれからです。
ホームページからこれから新しくつくる XPage にリンクさせることをやっていきたいと思います。

次の Xpage ではひとつのロケーションに所属する全スタッフの情報を表示させることをやっていきます。レイアウトはホームページと同様 OneUI をベースにします。唯一違う点はページに表示されるメインの部分だけです。
では早速 Domino Designer で新規のカスタムコントロールを作成しましょう。
このカスタムコントロールには「content_Location」という名前を付けます。

次にパネルコントロールをドラッグインして、そのプロパティで「lotusContent」のスタイルクラスを指定します。そしてパネルに何かテキストを入力します。
テキストを入力することでプリビューをしたときにこのコントロールが正しい場所に表示されるかどうかをすぐ確認できるのでとても有効だと思います。
下がこのコントロールのソースになります。

ではカスタムコントロールを保存してください。
次は新規の XPage を作成していきましょう。
前回の XPage を作成したときのように div を追加したり、カスタムコントロールをドラッグインしたりするのですが、今回は「home」XPage をコピーペーストして時間を短縮しましょう。
そうすると「home_1」が出来上がりますので名前を変更しなければなりません。
以前の Domino Designer であれば設計要素を開いてプロパティボックスから名前を変更できましたが XPage に関してはこの方法では名前の変更ができません。
そこでファイルメニューから名前変更を選ぶか F2 キーを押して名前の変更ダイアログを表示します。(注意:下のスクリーンでは Copy_of_home と出ていますが、8.5.1 では home_1 となります。)



ではここで「Location」という名前を付けたあとダブルクリックして編集モードにします。
「content_HomePage」のカスタムコントロールを削除し、その場所に「content_Location」をドラッグインします。
ソースコードは下のようになります。

ではこの XPage を保存してブラウザでプリビューしてみましょう。
以前作成した OneUI レイアウトと今回入力したテキストが下のように表示されるはずです。


次回は「content_Location」カスタムコントロールに繰り返しコントロールを追加していくことにします。

XPages Tutorial Part 17: ホームページ上の表のスタイリング


Styling Our Homepage Table {Original Source}

前回までに XPages アプリケーションに繰り返しコントロールを使用してデータを表として表示させることをしてきました。今回はこの表にカスタムの CSS を適用することと、サーバーサイド JavaScript を使って表の行に使用されるスタイルを付けます。

まず最初に「custom.css」ファイルにスタイルを定義することからはじめましょう。
データベース設計から「リソース」−「スタイルシート」の中にある「custom.css」を開き、次の CSS を追加してください。
#phonebook,.phonebook {
border:1px solid #CCCCCC;
width:100%;}

#phonebook th, .phonebook th {
background-color:#EEEEEE;
padding:5px;
font-weight:bold;}

#phonebook tr, .phonebook tr {
background-color:#FFFFFF;
padding:5px;}

#phonebook tr.altRow, .phonebook tr.altRow {
background-color:#EEEEEE;}

#phonebook tr.over, .phonebook tr.over {
background-color:orange;
color:#FFFFFF;
cursor:pointer;}

#phonebook td, .phonebook td {
padding:0 2px;
text-align:left;} 
「custom.css」の保存後に、「contents_HomePage」カスタムコントロールを開きます。
前回作成した表に対して「phonebook」というスタイルを使用する宣言をします。
この表のすべてのプロパティに切り替え、「phonebook」というスタイルクラスを指定します。
ソースタブでコードを確認すると下のような記述がされているはずです。
では保存後、ブラウザからページを表示させてみましょう。

表の中の行に背景色を設定すると良くなると思いませんか?
特に表の中にたくさんの情報がある場合にはユーザーにとって見やすいものになるはずです。

ちょっとしたサーバーサイド JavaScript で実現できると思います。
表の中のそれぞれの行は繰り返しの内部にあり、一度だけコードを書けばすみます。

「contents_HomePage」コントロールを再び開きソースビューに切り替えてください。
繰り返しコントロールの内部にある<xp:tr>タグを見つけてクリックしてください。
そうすることで表の行に対するプロパティが表示されます。そこですべてのプロパティタブに切り替え「styleClass」が見つかるまでスクロールダウンしてください。
以前にもお話ししましたがほとんど XPages の中のほとんどが計算結果で値を設定できるようになっています。今回もそれをしたいと思います。
「styleClass」 に直接書き込まず、右側の青のダイヤモンドボタン(計算プロパティメニューボタン)をクリックし「値の計算」を選択します。

するとスクリプトエディタが表示されますので以下のコードを入力してください。
if (rowIndex % 2 == 0 )
return ""
else
return "altRow";

この JavaScript は以前設定した繰り返しコントロールの中に索引を保管する変数として指定した「rowIndex」を参照します。
rowIndex%2では現在の行番号を 2 で割り、行番号の偶数、奇数を判別するシンプルなコードです。また、行の索引は 0 からスタートすることを覚えておいてください。
ではスクリプトを保存してブラウザから再読み込みしてページを表示させてみましょう。

一行だけの簡単なサーバーサイド JavaScript を繰り返しコントロールで使用すれば表の一行おきの色を変更させることができます。

次回以降は新しい XPage を作成してひとつのロケーションに所属するスタッフ全員を表示してみます。ホームページからロケーションのページへのリンクやサイドバーからのロケーションのリンクなどもカバーしたいとおもいます。
下のダウンロードはこれから使用していく最新のアプリケーションです。
ダウンロードファイル xPhonep17.zip

2009/12/25

XPages デバッグ中の HTTP エラートラブルシューティング

XPages アプリケーションを開発している際によく HTTP エラーに出くわします。
アクセス系の問題である場合にはおおよその見当はつくのですが、「HTTP Web Server: 例外―コマンドはハンドルされません」エラー 500 だけでは問題の追及が難しいのがほとんどです。
特にサーバーサイドの JavaScript を使ったりする場合、ロータススクリプトと違い、事前にコンパイルするわけではないので、事前のバリデーションができません。

デフォルトでは下のスクリーンのように、ブラウザにはエラーをただ出力するだけなので、これを見ても何の解決の糸口も見つかりません。



そこでロータスのサポート技術情報から引用しますが(参考)XPage 操作中に発生する HTTP エラーのトラブルシューティングの中で説明されているように、アプリケーションのプロパティ上の「XPage」タブに下のスクリーンのように「デフォルトのエラーページを表示」オプションを有効にします。

そうすると先程のエラーのページよりもより詳細の情報が得られるようになります。

上記の場合、本来のメソッドは「getColumnValue」でミスタイピングしていたのが分かりわかります。

このように開発途中、あるいはテスト段階のアプリケーションはデフォルトのエラーページを表示のオプションはチェックしておいたほうが便利です。

その他に XPages 開発には通常 Web 開発で使用するブラウザのプラグインツールなども活用したほうがよい局面が多々あります。例えばロードされた CSS は何でどのような設定になっているのかをブラウザのプラグインで確認できたりします。そういう意味では Firefox のアドオンなどが多機能ではないですが非常に便利です。私は定番の Web DeveloperFirebug 等を使っています。皆さんもご自分の気に入ったものを探してみてください。

2009/12/24

XPages Tutorial Part 16: ホームページの見た目を改善

A Better Homepage Look {Original Source}


前回は「content_HomePage」カスタムコントロールにビューコントロールを追加しました。そしてアプリケーション内のビューからその内容を表示させることをやってきました。
単純なビューでそれを表示させるだけであればこの方法でも良いかもしれませんが、繰り返しコントロールを使ってビューコントロールの代わりをさせることにたくさんの利点があると思います。

では初めに、ビューコントロールを削除することから始めましょう。
設計タブで視覚的に表示されているものだけでなく、コードもすべて取り除くことが大事です。
取り除いた後は、データソースの定義、div のセクション、「lotusContent」クラスの指定されたパネルだけの定義だけです。

確認できたら、まず最初に繰り返しコントロールをドラッグアンドドロップします。

その後に、繰り返しコントロールの中に表コントロールをドラッグアンドドロップします。
どのような表にしたいかを訊いてくるダイアログボックスが表示されるはずです。

2行3列の指定をし、その他の項目はそのままで OK ボタンを押します。
ここで繰り返しコントロールのプロパティに切り替え、サイドバーでデータソースを指定して以前行ったことと同じことを行います。
コレクション名と索引名の指定を下のように行ってください。

表に関して、ヘッダーの部分はテキストを下のように直接入力してください。
そして、2行目に計算結果フィールドをドラッグアンドドロップで 3 つそれぞれの列に追加します。
追加したあとは下のようになります。

サイドバーのところで行った指定方法と同じやり方をここでも行っていきます。
JavaScript を選び、rowData.getColumnValue("ビューの列名") といった感じで表示させたい列の指定を行います。

この時点で保存をし、ブラウザの再読み込みをすると下のようなページが表示されるはずです。


もうお分かりだと思いますが、何かがおかしいと気付きます。表全体が繰り返しコントロールの中にあるためヘッダーとデータがそれぞれ繰り返し表示されています。
これを修正するためには、ソースを直接変更しなければなりません。表の最初の行であるヘッダー部分を繰り返しコントロールの外に出し、表の2行目を繰り返しコントロールの中に入れます。
ここで注意しなければならないのは表の始まりと終わりの HTML の記述です。
下のコードとまったく同じになるように修正を加えてください。


あともう一つだけ大変重要なことがあります。それは繰り返しコントロールの名前を削除することです。
もしこれを行わないと表の中に DIV が表示されるようになり CSS によって表示が壊れてしまいます。名前を削除するにはソースタブのコードから「id="repeat1"」を探し出しその部分を削除してください。

完了したら保存をし、ブラウザでページを再読み込みしてみてください。
下のようなページが表示されるはずです。


次回はカスタムの CSS を作成して、この表への適用をしていきます。

XPages Tutorial Part 15: ホームページコンテンツの構築

Building The Homepage Content {Original Source}

アプリケーションのホームページとして表示する内容の作業を今回は行いたいと思います。
ここでは電話番号、FAX番号といった情報と一緒にすべてのロケーション情報を表示させたいと思います。
では、「content_HomePage」カスタムコントロールを開きましょう。

今回も繰り返しコントロールを使用していきます。最初にこの繰り返しコントロールで使用するデータソースの定義です。
アウトラインで表示されているツリー構造からカスタムコントロールノードを選択してください。
そして、プロパティタブからデータのセクションに切り替えます。

今回はデータベースの中から「content\locations」ビューを指定します。

データソース名として「dominoLocationsView」を指定することにします。
サイドバーでのロケーションのリスト表示でもこの domino ビューを使用しましたが、同じ名前のデータソースを異なるコンポーネントで使用しても、XPages サーバーランタイムは全く問題なく動作します。しかし、私のお勧めはどのコンポーネントがどのデータソースを使用しているかを分かりやすくするため、それぞれに判別しやすい名前を使い、のちのちでもメンテナンスがしやすいような名前を付けることです。

では、XPage 上に表示するデータソースの定義ができましたので次に今回新しくご紹介するビューコントロールを試してみましょう。
ただ、このビューコントロールは確認後すぐ削除してしまいます。その代わり私がお勧めする繰り返しコントロールを使用した実装をそのあとで行いたいと思います。

ビューコントロールをドラッグアンドドロップで貼り付けますが、「lotusContent」クラスをもつ div の内側に貼り付けるようにします。
このコントロールを貼り付けると下のようなダイアログが表示されビューのデータソースの指定ができるようになっています。

すでにデータソースは定義してありますので一番上のドロップダウンメニューから「dominoLocationsView」を選択します。また、ここから直接データソースを作成することも可能です。
後は省略値で表示されているものをすべてそのままにし、OK ボタンを押します。
すると下のような表が自動的に作成されます。

この状態で保存し、ブラウザを再読みすると下のようなアプリケーションのデータを表示するページが出力されます。

このビューコントロールに対してまだスタイルを設定していないのでこのような表示になっていますが、ここでは単にアプリケーションの中にどのようなデータがあるかを XPage 上で確認する程度で構いません。

次回は今回作成したビューコントロールを削除し、それに代わる繰り返しコントロールを作成してから CSS のスタイルを適用していきたいと思います。

XPages Tutorial Part 14: ロケーションリストに OneUI の適用

Applying OneUI To The Locations List {Original Source}

前回はあるサイドバーにビューからデータを取得し、繰り返しコントロールを使って情報を表示させるところまで完成しました。ただ、見栄えが良くないので今回は OneUI を使ってスタイルを整えていきたいと思います。

私が OneUI CSS をレビューしていたとき、これまでしてきた方法といくつか違いがあることに気付きました。最初、<ul>と<li>タグを繰り返しコントロールの中にメニュー項目を追加したのですが、正しい方法は下のようになります。

ここでのポイントは<UL>タグが繰り返しコントロールの外側にすることと、<li>タグを繰り返しコントロールの内側に指定することです。
これはいくつかのコンポーネントを使って繰り返しコントロールを使用する際のよいお手本にもなります。
また、このリストフォーマットを作成する際に defaulttheme.css で定義されている OneUI の見た目とはちょっと異なる見せ方をさせたいので <h3> タグを使用することにしました。
こうすることでエンドユーザーがメニューからオプションを指定しやすいちょうどよい大きさになります。
では、上記のコードで <ul> タグを削除し、<li> タグを <h3> タグに変更してください。
変更が終了したら保存し、ブラウザのページを再読みこみしてください。

見栄えが良くなったと思います。

これでサイドバーメニューはしばらくそのままにし、次回はリンクとして動作させるための下準備としてメインのコンテンツ部分について見ていきたいと思います。

XPages Tutorial Part 13: サイドバーに Location のリスティング


Listing The Locations In The Sidebar {Original Source}
新しいカスタムコントロールが完成されレイアウトに配置されましたので、バックエンドのドミノデータベースからデータを表示させたいと思います。
このロケーションのリストはアプリケーションのメインメニューとして OneUI のスタイルを適用しロケーションのリストを繰り返しコントロールを使用して実装したいと思います。

「sb_LocationsList」を再び開きます。記述したテキストを上書きで 3 つのパネルをそれぞれネストさせて配置します。そしてそれぞれに次のスタイルクラスを配置した順番に適用します: lotusMenu、lotusBottomCorner、lotusInnerのスタイルクラスを指定してください。
ソースタブで確認していただくとコードは下のようになります。

保存後、プリビューするとサイドバーに現れるメニューは下のようになります。

XPages の強力な機能のひとつ、繰り返しコントロールを使って実際のコンテンツを追加してみたいと思います。繰り返しコントロールは文字通りリピートコントロール内でいくつでも繰り返して処理を行うことができます。繰り返しコントロールの内部にひとつのコントロールを配置することもできますし、さらに複数のコントロールを設定することも可能です。
繰り返しコントロールを使うともう以前のドミノ Web 開発に戻ることができなくなります。ビューのデザイン、ロータススクリプト、そのデバッグなどなど数日かかっていたことがほんの数分で実現できるようになりました。

データベースに作成してあるビューのひとつから情報を取得し繰り返しに表示させたいので、XPage にどのデータから情報を取得するかを指定する必要があります。スクリーンの左側のアウトラインを見るとアウトラインの一つのエントリとしてカスタムコントロールがあることを確認してください。XPage への作業ではここが XPage となっているでしょう。基本的に同じことです。では「カスタムコントロール」をアウトラインで選択し XPage/コントロールのプロパティを見てください。



ここで Domino ビューの新しいデータソースを追加しましょう。
追加ボタンを押し Domino ビューを選択します。
そして使用するビューをプロパティボックスから選択します。

ここでは予め作成してある「lookup\location」ビューを選択します。そしてデータソース名として 「dominoView」を指定します。

次に右側のコントロールペインから繰り返しコントロールをドラッグアンドドロップで先ほど作成したパネルの中に配置します。さらに、この繰り返しコントロールの中に計算結果フィールドコントロールをドラッグアンドで配置します。

この計算結果フィールドコントロールを繰り返しとしてメニュースタイルの中でフィットさせる方法は次回に行います。

では繰り返しコントロールに戻り、プロパティを見てみましょう。
反復のオプションで、「単純データバインディング」を選択し、データバインディングのソースから先程指定したデータソース「dominoView」を指定します。
次にいくつかの追加のオプション設定を下のように設定してください。


コレクション名は文書を取得するための変数名を指定します。索引名は現在のエントリのカウントです。この繰り返しコントロールでは「rowData」と指定することにします。

では次に計算結果フィールドをクリックして値プロパティを見ていきましょう。
JavaScript を使用してデータをバインドします。JavaScript のラジオボタンを選択肢、エディターを立ち上げるボタンをクリックし、下のコードを書き込みます。
rowData.getColumnValue("Location")
「rowData」は繰り返しコントロールで指定したコレクション名で、getColumnValue はロータススクリプトでみる NotesViewEntry のメソッドのようなものです。

ではコーディングが完了したら保存後、ブラウザでページを再読み込みしてください。
そうするとデータベースのデータのようなものが表示されるのが確認できます。

データは表示されたもののまだ完成には至っていませんので次回に整えていきたいと思います。