投稿

2009の投稿を表示しています

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}
<< XPages Tutorial Part 20 : 特定のカテゴリのものだけを表示させる方法 | TOC | XPages Tutorial Part 22 : ユーザー文書の作成 >>
これまで「home」XPage と「Location」XPage を完成させてきましたが、それぞれはまだリンクした形になっていません。今回はサイドバーに表示されているリストをリンクに変更し、ユーザーがそれをクリックするとそのロケーション名を URL へ引き渡す処理を行っていきます。

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

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

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

リンクコントロールのプリパティのひとつである「ラベル」を探して…

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

イメージ
Restricting The Repeat To A Single Category {Original Source}
<< XPages Tutorial Part 19: もう一つの繰り返しともう一つの表 | TOC | XPages Tutorial Part 21 : サイドバーをロケーション XPage にリンクさせる >>

現在のところ「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");…

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

イメージ
Another Repeat Another Table {Original Source}
<< XPages Tutorial Part 18: 2 つ目の XPage 作成 | TOC | XPages Tutorial Part 20 : 特定のカテゴリのものだけを表示させる方法 >>

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

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

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

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

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


上のスクリーンで分かる通り、一行おきの色の設定をした場合は正しく表示されないことがわかります。
オリジナ…

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

イメージ
Building The Second XPage {Original Source}
<< XPages Tutorial Part 17: ホームページ上の表のスタイリング | TOC | XPages Tutorial Part 19: もう一つの繰り返しともう一つの表 >>

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

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

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

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

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

イメージ
Styling Our Homepage Table {Original Source}
<< XPages Tutorial Part 16: ホームページの見た目を改善 | TOC | XPages Tutorial Part 18: 2 つ目の XPage 作成 >>
前回までに 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」というスタイルクラスを指定します。
ソースタブで…

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

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

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



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

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

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

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

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

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

イメージ
A Better Homepage Look {Original Source}

<< XPages Tutorial Part 15: ホームページコンテンツの構築 | TOC | XPages Tutorial Part 17: ホームページ上の表のスタイリング >>

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

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

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

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

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

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

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

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


もうお分かりだと思いますが、何かがおかしいと気付き…

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

イメージ
Building The Homepage Content {Original Source}
<< XXPages Tutorial Part 14: ロケーションリストに OneUI の適用 | TOC | XPages Tutorial Part 16: ホームページの見た目を改善 >>

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

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

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

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

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

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

すでにデータソースは定義してありますので一番上…

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

イメージ
Applying OneUI To The Locations List {Original Source}
<< XPages Tutorial Part 13: サイドバーに Location のリスティングTOC | XPages Tutorial Part 15: ホームページコンテンツの構築 >>

前回はあるサイドバーにビューからデータを取得し、繰り返しコントロールを使って情報を表示させるところまで完成しました。ただ、見栄えが良くないので今回は 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}
<< XPages Tutorial Part 12: サイドバー Widget の準備TOC | XPages Tutorial Part 14: ロケーションリストに OneUI の適用
 >>
新しいカスタムコントロールが完成されレイアウトに配置されましたので、バックエンドのドミノデータベースからデータを表示させたいと思います。
このロケーションのリストはアプリケーションのメインメニューとして OneUI のスタイルを適用しロケーションのリストを繰り返しコントロールを使用して実装したいと思います。

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

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

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

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