従来の Notes アプリケーション開発者が初めて XPages の開発に触れる時、今までと違う手法に戸惑う事も多いかと思います。本資料は、Notes アプリケーション開発者 (掲示板などが作成できる方) が XPages を使って、一通りの開発を一週間で体験できる事を目指して作成しました。その為、本来の XPages らしさを生かせていない部分が多々ありますがご了承ください。本記事が、最初の一歩の手助けになれば幸いです。

吉田 武司, ソフトウェア開発エンジニア, 株式会社ソルクシーズ

吉田 武司, ソフトウェア開発エンジニア, 株式会社ソルクシーズ SOLXYZ Co., Ltd.
Notes 3.3J の頃に Lotus Notes/Domino アプリケーション開発に携わるようになり、現在に至る。



2012年 1月 20日

これから一週間の流れについて

はじめに

今回作成するアプリケーションは、フォームとビューが 1つずつのシンプルな掲示板です。

短い時間の中で開発を終える為、最低限の機能のみとしています。

  • ビューでの掲示文書の一覧表示 (図 1)
  • 文書の作成 / 編集 / 保存 / 表示 (図 2)
図 1. ビューの完成イメージ
ビューの完成イメージ
図 2. フォームの完成イメージ
フォームの完成イメージ

学習用という事を考慮してサーバー上ではなく、ローカル上での作成を想定して説明しています。よって、XPages の表示はノーツクライアント (スタンダード版) のローカルでの動作確認としています。ご注意ください。

一週間の流れ

日程毎の NSF ファイルを付属で用意しています。開発する際の参考にしてください。

※NSF ファイルを利用する場合は、署名を忘れずに行ってください。
区切りのよいところで日程を分けました。その為、作業量が多い日と少ない日があります。

1日目

これから開発するアプリケーションで必要になるフォームとビューを作成します。 この部分は従来のノーツアプリケーション開発と同様です。

2日目

XPage でフォーム画面を作成します。

3日目

XPage でビュー画面を作成します。

4日目

XPage (フォーム画面) にボタンを作成します。(閉じる、保存、編集)

5日目

XPage (フォーム画面) のボタンの表示 / 非表示を設定します。

6日目

データベースを開いた時に表示する画面を XPage (ビュー画面) に設定します。 XPage (ビュー画面) に掲示文書の新規作成ボタンを作成します。

7日目

入力欄の表示幅を設定します。 また、必須入力チェックを設定します。

図 3. 一週間の流れのイメージ図
一週間の流れのイメージ図

1日目: ベースとなる Notes アプリケーションの作成

これから開発するアプリケーションで必要になるフォームとビューを作成します。この部分は従来のノーツアプリケーション開発と同様です。
実際の XPages 開発は 2日目からになりますので、本章は目を通すだけで付属の NSF ファイルを利用して 2日目から始めて頂いてもかまいません。sample01.nsf ファイルが 1日目の完成版になります。

新規アプリケーションの作成

新規のアプリケーション (データベース) をローカルに作成してください。
ACL は、以下を参考にしてください。

ユーザー / サーバー / グループアクセス権
-Default-なし
[あなたのユーザーID]管理者
Anonymous編集者

サーバー上に作成する場合は、上記以外に適切な ACL を設定します。
(例:LocalDomainServers, OtherDomainServers, 運用ルールに従った管理者ユーザーなど)

フォームの作成

今回作成するアプリケーションはシンプルな掲示板になります。
まず、掲示内容を入力する為のフォームを作成します。(図 1)

図 1. 「メイントピック」フォームの設計画面イメージ
「メイントピック」フォームの設計画面イメージ

XPages 開発で利用するのは、主にフィールドの情報になります。
表や文字 (項目名) などのレイアウト関連は利用されませんので自由に作成してください。

フォームのプロパティ設定

フォーム情報
項目名
名前メイントピック (別名:MainTopic)
オプション「デフォルトのデータベースフォーム」にチェックをつける
※他はデフォルト設定
図 2. フォームのプロパティ
フォームのプロパティ

フィールドのプロパティ設定

フィールド情報
項目名フィールド名種類フィールド値 (式)
作成者Author作成者
作成時の計算結果
@UserName
作成日DateCreated日付/時刻
作成時の計算結果
@Today
件名Subjectテキスト
編集可能
[-なし-]
本文Bodyリッチテキスト
編集可能
※制御タブの保存「HTML と MIME 形式で保存する」を有効にする。(図 3)
[-なし-]
図 3. HTML と MIME 形式で保存する
HTML と MIME 形式で保存する

ビューの作成

作成日の降順に表示する「作成日順」ビューを作成します。(図 4)

図 4. 「作成日順」ビューの設計画面イメージ
「作成日順」ビューの設計画面イメージ

XPages 開発で利用するのは、主に列の情報になります。
列幅は XPages 側での設定になります。

ビューのプロパティ設定

ビュー情報
項目名
名前作成日順 (別名:DateCreatedView)
オプション「データベースを最初に開くときデフォルトで表示する」にチェックをつける
「新規フォルダまたはビューのデフォルト設計とする」にチェックをつける
※他はデフォルト設定
図 5. ビューのプロパティ (1)
ビューのプロパティ (1)
図 6. ビューのプロパティ (2)
ビューのプロパティ (2)

列のプロパティ設定

列情報
項目名ソート/種類列の値 (式)
作成日降順
カテゴリなし
DateCreated
作成者なし@Name([Abbreviate];Author)
件名なしSubject

フォームとビューの動作確認

本日作成したフォームとビューの動作を確認します。
また、翌日からの開発の為に数文書のテストデータを入力しておきます。(図 7, 図 8)
(文書の作成は、メニューバーの<作成>-<メイントピック>から行います)

図 7. 作成日順ビューのイメージ
作成日順ビューのイメージ
図 8. 掲示フォームのイメージ
掲示フォームのイメージ

次回について

本日は以上になります。お疲れ様でした。
明日は、本日作成したフォームを使って XPages での入力 / 表示画面を作成していきます。

ダウンロード

サンプル DB (1日目)


2日目: フォーム画面の作成

XPages を使ってフォーム画面を作成します。
1日目をとばした方は、前回の sample01.nsf ファイルを利用して本日の開発を始めてください。
(署名を忘れずに行ってください)

XPages を使ったフォーム画面の作成

新規 XPage の作成

デザイナー画面で XPage の設計要素を開きます。
「新規 XPage」ボタンをクリックします。(図 1)

図 1. 「新規 XPage」ボタン
「新規 XPage」ボタン

「新規 XPage」作成ダイアログが表示されます。(図 2)

図 2. 「新規 XPage」ダイアログ (1)
「新規 XPage」ダイアログ (1)

「データソースをページに追加」にチェックをつけます。
その他の設定は、以下の表に従って入力してください。(図 3)

新規 XPage 作成ダイアログの設定値
項目名補足
名前xpMainTopicXPage の設計要素名です。画面の呼び出しなどに使用されます。
データソースDomino 文書バインド (リンク) するデータが、ノーツの文書またはビューなのかを定義します。
フォームメイントピック – MainTopicどのフォームと関連付けるかを設定します。
データソース名document1XPage 内の JavaScript で使用する場合のノーツ文書のオブジェクト名です。
フォームの検証の実行両方文書ロード時、または文書保存時にフォーム上の計算を実行するかどうかの設定です。「両方」を設定すると、文書ロード時と文書保存時にそれぞれフォーム上の計算が実行されます。
【メモ】参照

※他はデフォルト設定

【メモ】 フォームの検証の実行

この機能を使うと従来のフォーム上のフィールドである程度の処理が可能ですので、XPage 上で処理を記述する手間が省けます。但し、動作に癖がありますのでご注意ください。

図 3. 「新規 XPage」ダイアログ (2)
「新規 XPage」ダイアログ (2)

「OK」をクリックします。

新規 XPage が作成され、空の画面が表示されます。(図 4)

図 4. 「新規 XPage」画面
「新規 XPage」画面

コントロールの配置

【メモ】 デザイナーの画面構成について

8 以降のデザイナーでは、Eclipse が採用されています。その為、「コントロール」や「データパレット」などの画面をビューと呼んでいます。文字だけですとノーツのビューと混乱するかと思います。

画面右側にある「データパレット」ビューを選択します。 【メモ】参照

※タブの部分にカーソルを重ねるとタブ名が表示されます。

図 5. データパレット
データパレット

フィールドを画面に配置する前に、「コントロールの選択」ダイアログボックスが使用可能になっているかを確認します。下図のアイコンにカーソルを重ねるとメッセージが表示されます。使用可能になっていることを確認してください。(図 6)

図 6. 使用可能時の表示 (この状態にしてください)
使用可能時の表示 (この状態にしてください)

使用不可の場合、アイコンの左下隅には×が表示されています。(図 7) アイコンをクリックすると有効 / 無効になります。

図 7. 使用不可時の表示
使用不可時の表示

データパレットのデータソース「 document1 」に表示されているフィールドをすべて選択します。
選択した状態で画面中央の XPapge 画面にドラッグ&ドロップします。ドロップする位置は、空白の画面のどこでもかまいません。(図 8)

図 8. コントロール (フィールド) の配置
コントロール (フィールド) の配置

ドロップすると「データバインドコントロールの選択」ダイアログが表示されます。(図 9)
基本的にデフォルトでは、編集可能なコントロールに設定されています。

図 9. 「データバインドコントロールの選択」ダイアログ
「データバインドコントロールの選択」ダイアログ
各コントロールを以下のように変更してください。(図 10)
項目名コントロール補足
Author計算結果フィールドフォーム側の計算結果を表示する為
Date created計算結果フィールドフォーム側の計算結果を表示する為
Subject編集ボックス変更なし
Bodyリッチテキストデフォルトでは編集ボックス (テキスト) になっている為
図 10. 「データバインドコントロールの選択」ダイアログ (設定変更後)
「データバインドコントロールの選択」ダイアログ (設定変更後)

設定変更後、「OK」をクリックしてください。設定に従って、表の中にコントロールが配置されます。(図 11)

図 11. コントロールの配置後の画面
コントロールの配置後の画面

各コントロールの設定

画面に配置した各コントロールの設定を行います。
各項目名 (ラベルコントロール) をクリックしてプロパティを開き、「ラベル」タブの「ラベル」を変更してください。(図 12, 図 13)

コントロールの名前ラベル補足
author_Label1作成者:特になし
dateCreated_Label1作成日:特になし
subject_Label1件名:特になし
body_Label1本文:特になし
図 12. ラベルコントロールの設定
ラベルコントロールの設定
図 13. 変更後のイメージ
変更後のイメージ

作成した画面の確認

作成した画面をプレビューで確認する前に「自動的にビルド」が有効になっているかを確認してください。
メニューの<プロジェクト>-<自動的にビルド>にチェックが付いていることを確認します。 【メモ】参照

【メモ】 自動的にビルドが無効な場合について

「自動的にビルド」が有効になっていない場合、プレビュー時に以下のようなダイアログが表示されることがあります。(図15)

図 14. 「自動的にビルド」が有効な状態
「自動的にビルド」が有効な状態
図 15. 「自動ビルドがオフになりました」ダイアログ
「自動ビルドがオフになりました」ダイアログ

メニューの<設計>-< Lotus Notes でプレビュー>をクリックします。(図 16) 【メモ】参照

【メモ】 プレビュー方法について

ツールバーのノーツクライアントのアイコンからもプレビューすることが可能です。(図 17)

図 16. Lotus Notes でプレビュー
Lotus Notes でプレビュー
図 17. プレビューアイコン
プレビューアイコン

保存していない場合、確認のダイアログが表示されます。(図 18)
「はい」をクリックします。

図 18. 保存の確認ダイアログ
保存の確認ダイアログ

ノーツクライアントでフォーム画面 ( XPage ) がプレビュー表示されます。
表示項目の誤字や編集可能/不可などに問題がないかを確認してください。(図 19)

図 19. フォームのプレビュー表示
フォームのプレビュー表示

次回について

本日は以上になります。お疲れ様でした。
明日は、XPages でのビュー画面を作成していきます。

ダウンロード

サンプル DB (2日目)


3日目: ビュー画面の作成

XPages を使ってビュー画面を作成します。
2日目に作成した NSF ファイルを利用して始めてください。

XPages を使ったビュー画面の作成

新規 XPage の作成

2日目と同様に、デザイナー画面で XPages の設計要素を開きます。
「新規 XPage」ボタンをクリックします。(図 1)

図 1. 「新規 XPage」ダイアログ (1)
「新規 XPage」ダイアログ (1)

「データソースをページに追加」にチェックをつけます。
その他の設定は、以下の表に従って入力してください。(図 2)

新規 XPage 作成ダイアログの設定値
項目名補足
名前xpDateCreatedViewXPage の設計要素名です。画面の呼び出しなどに使用されます。
データソースDomino ビューバインド (リンク) するデータが、ノーツの文書またはビューなのかを定義します。
ビュー作成日 – DeteCreatedViewどのビューと関連付けるかを設定します。
データソース名view1XPage 内の JavaScript で使用する場合のビューのオブジェクト名です。

※他はデフォルト設定

図 2. 「新規 XPage」ダイアログ (2)
「新規 XPage」ダイアログ (2)

「OK」をクリックします。

新規 XPage が作成され、空の画面が表示されます。(図 3)

図 3. 「新規 XPage」画面
「新規 XPage」画面

コントロールの配置

画面右側にある「データパレット」ビューを選択します。
※タブの部分にカーソルを重ねるとタブ名が表示されます。

2日目と同様に、データパレットのデータソース「view1」に表示されている列をすべて選択します。
選択した状態で画面中央のXPapge 画面にドラッグ & ドロップします。ドロップする位置は、空白の画面のどこでもかまいません。(図 4)

図 4. コントロール (ビュー / 列) の配置
コントロール (ビュー / 列) の配置

「コントロールの選択」ダイアログボックスが使用可能になっていた場合、ドロップすると「データバインドコントロールの選択」ダイアログが表示されます。(図 5) デフォルトでは、ビューの列コントロールに設定されています。ビューではデフォルト設定のままでかまいません。(図 6)

図 5. 使用可能時の表示
使用可能時の表示
図 6. 「データバインドコントロールの選択」ダイアログ
「データバインドコントロールの選択」ダイアログ

「OK」をクリックします。(使用不可になっていて表示されなかった場合はそのまま進めてください)

ビューに必要なコントロールが配置されます。(図 7)
※デフォルト状態だと、ビューの幅が狭くなっています。次のステップで幅を調整していきます。

図 7. コントロールの配置後の画面
コントロールの配置後の画面

各コントロールの設定

画面に配置した各コントロールの設定を行います。
まず、ビュー全体の設定を行います。
ビューコントロールをクリックしてプロパティを開き、「ビュー」タブを以下のように設定してください。(図 8)

設定項目補足
単位パーセントビューの表示幅を画面に対してパーセントで指定
幅よりこちらを先に指定してください。 【メモ】参照
100ビューの表示幅を画面に対して何パーセントで表示するかの設定
実行時に、次を使用して選択した文書を開くxpMainTopicビューのリンク (文書) 先を開く場合に使用する XPage の指定
図 8. ビューコントロールの設定
ビューコントロールの設定

【メモ】 ビューの幅について

筆者の環境では、時々「幅」の項目を変更していると、グレーアウトして入力できなくなる場合がありました。その場合、「単位」を一度別のものに変更して、再度パーセントにすると幅が変更できるようになりました。同様の現象が発生した場合は参考にしてください。

次にビューの列の設定 (列の値をリンクとして表示) を行います。
ビューの列コントロールをクリックしてプロパティを開き、「表示」タブを以下のように設定してください。(図 9)

設定項目補足
列の値をリンクとして表示する有効文書を開くリンクとして表示します。
文書のオープンモード読み込み専用文書を開く時のモード (編集/読み込み専用) を設定
図 9. 列の値をリンクとして表示する
列の値をリンクとして表示する

作成した画面の確認

2日目と同様に、作成した画面をプレビューで確認します。(図 10)

図 10. ビューのプレビュー表示
ビューのプレビュー表示

件名のリンクをクリックして、文書が開くかを確認します。(図 11)

図 11. リンクの動作確認
リンクの動作確認

次回について

本日は以上になります。お疲れ様でした。
明日は、フォーム画面にボタン (閉じる、保存、編集) を作成していきます。

ダウンロード

サンプル DB (3日目)


4日目: 閉じる、保存、編集ボタンの作成

XPage (フォーム画面) にボタンを作成します。(閉じる、保存、編集)
3日目に作成した NSF ファイルを利用して始めてください。

フォーム画面のボタンの作成

2日目に作成したフォーム画面の xpMainTopic (設計要素:XPage) を開きます。(図 1)

図 1. xpMainTopic
xpMainTopic

【メモ】 コントロールの配置について

画面上のコントロールを配置したい箇所にカーソルを置いて、コントロールをダブルクリックするとことでも配置は可能です。

ボタンのコントロールは、初期設定では画面の右側にあります。
コントロールを配置するには、ドラッグ & ドロップします。(図 2)
【メモ】参照

図 2. コントロール (ボタン) の配置
コントロール (ボタン) の配置

閉じるボタンの作成

画面を閉じるボタンを作成します。
クリックするとビュー画面に戻るように作成します。

ボタンコントロールをフォーム画面の上端に配置します。
ボタンコントロールをクリックしてプロパティを開き、「ボタン」タブを以下のように設定してください。(図 3, 図 4)

設定項目補足
ラベル閉じる 
オプション
 ボタンの種類
キャンセルクリック時に「データの検証または更新を行わない」
※妥当性検査や再計算などを行いません
図 3. 閉じるボタン (ラベル) の設定
閉じるボタン (ラベル) の設定
図 4. 閉じるボタン (ボタンの種類) の設定
閉じるボタン (ボタンの種類) の設定

次にイベントを設定します。
ボタンコントロールをクリックしてイベントを開き、「onclick」イベントを以下のように設定してください。(図 5)

設定項目補足
(実行場所) サーバープログラムをサーバー側で動作させるのか、クライアント側で動作させるのかの設定
(アクションの設定) シンプルアクションJavaScript で記述することでも可能
図 5. 閉じるボタン (イベント) の設定
閉じるボタン (イベント) の設定

「アクションの追加」をクリックすると、「シンプルアクションの追加」ダイアログが表示されます。(図 6)

図 6. 「シンブルアクションの追加」ダイアログ (1)
「シンブルアクションの追加」ダイアログ (1)

以下の設定を行ってください。(図 7)

項目名補足
分類すべて (または「基本」) アクションに表示するリストの絞り込みが可能
アクションページを開くクリック時に実行する動作を設定
このアクションの引数xpDateCreatedViewクリック時に表示する XPage を設定

※他はデフォルト設定

図 7. 「シンブルアクションの追加」ダイアログ (2)
「シンブルアクションの追加」ダイアログ (2)

「OK」をクリックします。

シンプルアクションが設定されていることを確認します。(図 8)

図 8. シンブルアクションの確認
シンブルアクションの確認

【メモ】 閉じるボタンで表示するビューについて

今回作成するアプリケーションでは、XPages の概要を掴むことを目的としていますので、戻り先のビューを固定としています。
実際の開発では複数のビューが存在し、また元のビューを表示したいなどの要件が出てくるかと思います。その場合は、スクリプトエディタで JavaScript を記述することになります。

閉じるボタンの動作確認

作成した閉じるボタンの動作を確認します。
プレビュー表示してください。
フォーム画面が表示されたら「閉じる」ボタンをクリックします。(図 9)

図 9. 閉じるボタンの動作確認 (1)
閉じるボタンの動作確認 (1)

「作成日順」ビューが表示されます。(図 10)

図 10. 閉じるボタンの動作確認 (2)
閉じるボタンの動作確認 (2)

保存ボタンの作成

保存ボタンを作成します。

ボタンコントロールをフォーム画面の上端 (閉じるボタンの右隣) に配置します。
ボタンコントロールをクリックしてプロパティを開き、「ボタン」タブを以下のように設定してください。(図 11)

設定項目補足
ラベル保存 
オプション
 ボタンの種類
ボタン今回はデフォルト設定のまま
図 11. 保存ボタン (ラベル) の設定
保存ボタン (ラベル) の設定

次にイベントを設定します。
ボタンコントロールをクリックしてイベントを開き、「onclick」イベントを以下のように設定してください。(図 12)

設定項目補足
(実行場所) サーバープログラムをサーバー側で動作させるのか、クライアント側で動作させるのかの設定
(アクションの設定) シンプルアクションJavaScript で記述することでも可能
図 12. 保存ボタン (イベント) の設定
保存ボタン (イベント) の設定

「アクションの追加」をクリックすると、「シンプルアクションの追加」ダイアログが表示されます。
以下の設定を行ってください。(図 13)

項目名補足
分類すべて (または「文書」) アクションに表示するリストの絞り込みが可能
アクション文書の保存クリック時に実行する動作を設定
図 13. 「シンブルアクションの追加」ダイアログ
「シンブルアクションの追加」ダイアログ

「OK」をクリックします。

シンプルアクションが設定されていることを確認します。(図 14)

図 14. シンブルアクションの確認
シンブルアクションの確認

保存ボタンの動作確認

保存ボタンの動作確認は、次に作成する編集ボタン作成後にまとめて行います。

編集ボタンの作成

文書を編集モードで表示する編集ボタンを作成します。

ボタンコントロールをフォーム画面の上端 (保存ボタンの右隣) に配置します。
ボタンコントロールをクリックしてプロパティを開き、「ボタン」タブを以下のように設定してください。(図 15)

設定項目補足
ラベル編集 
オプション
 ボタンの種類
ボタン今回はデフォルト設定のまま
図 15. 編集ボタン (ラベル) の設定
編集ボタン (ラベル) の設定

次にイベントを設定します。
ボタンコントロールをクリックしてイベントを開き、「onclick」イベントを以下のように設定してください。(図 16)

設定項目補足
(実行場所) サーバープログラムをサーバー側で動作させるのか、クライアント側で動作させるのかの設定
(アクションの設定) シンプルアクションJavaScript で記述することでも可能
図 16. 編集ボタン (イベント) の設定
編集ボタン (イベント) の設定

「アクションの追加」をクリックすると、「シンプルアクションの追加」ダイアログが表示されます。
以下の設定を行ってください。(図 17)

項目名補足
分類すべて (または「文書」) アクションに表示するリストの絞り込みが可能
アクション文書モードの変更クリック時に実行する動作を設定
このアクションの引数
 文書モード
編集モードクリック時に文書を編集モードで表示
図 17. 「シンブルアクションの追加」ダイアログ
「シンブルアクションの追加」ダイアログ

シンプルアクションが設定されていることを確認します。

図 18. シンブルアクションの確認
シンブルアクションの確認

すべてのボタンの動作確認

作成したボタンの動作を確認します。
プレビュー表示してください。
フォーム画面が表示されたら「件名」を入力します。(図 19)
その後、「保存」ボタンをクリックします。
(今回の仕様では、保存後に画面が閉じたり、メッセージが表示されたりしません。)
一度「閉じる」ボタンをクリックしてビュー画面を表示します。

図 19. 保存ボタンの動作確認
保存ボタンの動作確認

ビューに保存した文書が表示されていることを確認します。(図 20)

図 20. 保存した文書の確認 (1)
保存した文書の確認 (1)

ビューから保存した文書を開きます。(件名のリンクをクリック) (図 21)

図 21. 保存した文書の確認 (2)
保存した文書の確認 (2)

「編集」ボタンをクリックすると、文書が編集モードで表示されます。(図 22)

図 22. 編集ボタンの動作確認
編集ボタンの動作確認

次回について

本日は以上になります。お疲れ様でした。
明日は、フォーム画面のボタンに表示 / 非表示を設定していきます。

ダウンロード

サンプル DB (4日目)


5日目: ボタンの表示 / 非表示の設定

XPage (フォーム画面) のボタンに表示 / 非表示を設定していきます。
4日目に作成した NSF ファイルを利用して始めてください。

ボタンの表示 / 非表示の設定

4日目にボタンを作成したフォーム画面の xpMainTopic (設計要素:XPage) を開きます。

保存ボタンの表示 / 非表示の設定

保存ボタンを編集モード時のみ表示するように設定していきます。
「保存」ボタンをクリックしてプロパティを開き、「ボタン」タブの「表示」右隣にある◇ (菱形マーク) をクリックします。
その後、表示されたメニューの「値の計算」をクリックします。(図 1)

図 1. 保存ボタンの表示の設定
保存ボタンの表示の設定

「スクリプトエディタ」ダイアログが表示されます。
右側のエディタ画面に以下の JavaScript を入力してください。(言語や条件はデフォルトのまま) (図 2)

document1.isEditable()

上記 JavaScript は、文書 (document1) が編集モード時に True を返します。

図 2. 「スクリプトエディタ」ダイアログ
「スクリプトエディタ」ダイアログ

「OK」ボタンをクリックします。

表示 / 非表示の設定を行うと「表示」右隣に{計算済み}と青文字で表示されます。(図 3)

【メモ】 表示 / 非表示の判定について

XPage の表示 / 非表示の判定は、True の 時「表示」となります。従来のノーツアプリケーションでは、True の時「非表示」ですので逆になります。慣れないうちは混乱するかと思います。ご注意ください。

図 3. 表示条件の設定後
表示条件の設定後

編集ボタン の表示 / 非表示の設定

編集ボタンを読み込みモード時のみ表示するように設定していきます。
「編集」ボタンをクリックしてプロパティを開き、「ボタン」タブの「表示」右隣にある◇ (菱形マーク) をクリックします。
その後、表示されたメニューの「値の計算」をクリックします。(図 4)

図 4. 編集ボタンの表示の設定
編集ボタンの表示の設定

「スクリプトエディタ」ダイアログが表示されます。
右側のエディタ画面に以下の JavaScript を入力してください。(言語や条件はデフォルトのまま) (図 5)

!(document1.isEditable())

上記 JavaScript は、文書 (document1) が読み込みモード時に True を返します。

図 5. 「スクリプトエディタ」ダイアログ
「スクリプトエディタ」ダイアログ

「OK」ボタンをクリックします。

表示 / 非表示の設定を行うと「表示」右隣に{計算済み}と青文字で表示されます。(図 6)

図 6. 表示条件の設定後
表示条件の設定後

表示 / 非表示設定 の動作確認

設定した表示 / 非表示設定の動作を確認します。
プレビュー表示してください。
プレビュー表示直後は、編集モードです。「閉じる」と「保存」ボタンのみ表示されていることを確認します。(図 7)
次に件名や本文を入力して「保存」後、「閉じる」ボタンをクリックしてビュー画面を表示します。

図 7. ボタンの表示 / 非表示の動作確認 (編集モード)
ボタンの表示 / 非表示の動作確認 (編集モード)

ビューから保存した文書を開きます。(件名のリンクをクリック)
ビューからの表示は、読み込みモードです。「閉じる」と「編集」ボタンのみが表示されていることを確認します。(図 8)

図 8. ボタンの表示 / 非表示の動作確認 (読み込みモード)
ボタンの表示 / 非表示の動作確認 (読み込みモード)

次回について

本日は以上になります。お疲れ様でした。
明日は、データベースを開いた時に表示する画面を XPage (ビュー画面) に設定していきます。
また、XPage (ビュー画面) に掲示文書の新規作成ボタンを作成していきます。

ダウンロード

サンプル DB (5日目)


6日目: データベースを開いた時の設定と新規作成ボタンの作成

データベースを開いた時に表示する画面を XPage (ビュー画面) に設定します。
また、XPage (ビュー画面) に掲示文書の新規作成ボタンを作成していきます。
5日目に作成した NSF ファイルを利用して始めてください。

データベースを開いた時に表示する画面の設定

今までは設計画面のプレビューのみで表示を確認していました。
これからは、データベースを開いた時に XPage を表示するように設定します。
(設定方法は、既存のデータベースを開いた時に表示するフレームセットの設定と同様です。)

データベースのプロパティの設定

まず、データベースのプロパティを表示して、「起動」タブを開きます。
以下の設定を行ってください。(図 1)

項目名補足
Lotus Notes クライアントで開いたとき指定された Xpage を開く (標準クライアント)
XPagexpDateCreatedView.xsp
ブラウザで開いたとき指定された Xpage を開く
XPagexpDateCreatedView.xsp
図 1. データベースのプロパティ (起動) の設定
データベースのプロパティ (起動) の設定

データベースを開いた時の動作確認

ノーツクライアントからデータベースを開いた時に XPage で開くことを確認します。(図 2)
※ワークスペースから従来のデータベースを開くようにデータベースアイコンをダブルクリックします。

図 2. データベースを開いた時の画面
データベースを開いた時の画面

【メモ】 従来のビュー画面の表示方法について

テストなどで従来のビューで表示したい場合があるかと思います。その時は、ワークスペース上でデータベースアイコンを選択して、メニューバーの<表示>-<移動>でビューを選択して表示します。データベースを開いて、XPage の画面を表示してしまうと上記メニューは表示されません。ご注意ください。

ビュー画面のボタンの作成

2日目に作成したビュー画面の xpDateCreatedView (設計要素: XPage) を開きます。

新規作成ボタンの作成

新規文書を作成するボタン (新規入力画面を開く) を作成します。

ボタンコントロールをビュー画面の上端に配置します。
ボタンコントロールをクリックしてプロパティを開き、「ボタン」タブを以下のように設定してください。(図 3)

設定項目補足
ラベル新規作成 
オプション
 ボタンの種類
ボタン今回はデフォルト設定のまま
図 3. 新規作成ボタン (ラベル) の設定
新規作成ボタン (ラベル) の設定

次にイベントを設定します。
ボタンコントロールをクリックしてイベントを開き、「onclick」イベントを以下のように設定してください。(図 4)

設定項目補足
(実行場所) サーバープログラムをサーバー側で動作させるのか、クライアント側で動作させるのかの設定
(アクションの設定) シンプルアクションJavaScript で記述することでも可能
図 4. 新規作成ボタン (イベント) の設定
新規作成ボタン (イベント) の設定

「アクションの追加」をクリックすると、「シンプルアクションの追加」ダイアログが表示されます。
以下の設定を行ってください。(図 5)

項目名補足
分類すべて (または「基本」) アクションに表示するリストの絞り込みが可能
アクションページを開くクリック時に実行する動作を設定
このアクションの引数
 開くページの名前
xpMainTopicクリック時に表示する XPage を設定
 ターゲット文書新規文書どのモードで文書を開くのかを設定

※他はデフォルト設定

図 5. 「シンブルアクションの追加」ダイアログ
「シンブルアクションの追加」ダイアログ

シンプルアクションが設定されていることを確認します。(図 6)

図 6. シンブルアクションの確認
シンブルアクションの確認

新規作成ボタンの動作確認

作成した新規作成ボタンの動作を確認します。
データベースを開いてください。「新規作成」ボタンが表示されていることを確認します。
確認できましたら、「新規作成」ボタンをクリックします。(図 7)

図 7. 新規作成ボタンの動作確認
新規作成ボタンの動作確認

新規入力画面が表示されます。
件名と本文を入力して保存してください。(図 8)

図 8. 新規文書の保存
新規文書の保存

文書が保存されていることを確認します。(図 9)

図 9. 保存した文書の確認
保存した文書の確認

次回について

本日は以上になります。お疲れ様でした。
明日は、フォーム画面の入力欄 (編集ボックス) の表示幅を設定していきます。
また、必須入力チェック (妥当性検査) を設定していきます。

ダウンロード

サンプル DB (6日目)


7日目: 入力欄の表示幅と必須入力チェックの設定

フォーム画面の入力欄 (編集ボックス) の表示幅を設定します。
また、必須入力チェック (妥当性検査) を設定します。
6日目に作成した NSF ファイルを利用して始めてください。

件名編集ボックスの設定

5日目に修正したフォーム画面の xpMainTopic (設計要素: XPage) を開きます。

件名編集ボックスの表示幅の設定

デフォルトの設定だと「件名」の編集ボックスの幅が狭い状態です。
件名の編集ボックスコントロールをクリックしてプロパティを開き、「編集ボックス」タブを以下のように設定してください。(図 1)

設定項目補足
単位パーセント編集ボックスの表示幅を画面 (表の中ならば表の幅) に対してパーセントで指定
幅よりこちらを先に指定してください
98編集ボックスの表示幅を画面 (表の中ならば表の幅) に対して何パーセントで表示するかの設定
図 1. 件名編集ボックス (表示幅) の設定
件名編集ボックス (表示幅) の設定

件名編集ボックスの必須入力の設定

「件名」を必須入力に設定します。
件名の編集ボックスコントロールをクリックしてプロパティを開き、「妥当性検査」タブを以下のように設定してください。(図 2)

設定項目補足
必須フィールド有効入力欄を必須入力とするかどうかの設定
必須フィールドのエラーメッセージ件名は必須入力です未入力時のエラーメッセージの設定
図 2. 件名編集ボックス (必須入力) の設定
件名編集ボックス (必須入力) の設定

件名編集ボックスの動作確認

設定した表示幅と必須入力の動作を確認します。
新規作成画面を開いてください。件名の表示幅が、画面の幅まで広がっていることを確認します。(図 3)

図 3. 件名編集ボックスの表示幅の確認
件名編集ボックスの表示幅の確認

件名を未入力のまま保存して、必須入力のエラーメッセージが表示されることを確認します。(図 4)

図 4. 必須入力のエラーメッセージ
必須入力のエラーメッセージ

今度は、件名を入力して保存できる (エラーメッセージが表示されない) ことを確認します。(図 5)

図 5. 文書の保存
文書の保存

次回について

本日は以上になります。お疲れ様でした。これにて実習は終了になります。
最後に少しだけ補足があります。

ダウンロード

サンプル DB (7日目)


補足

全日程終了、お疲れ様でした。
駆け足の 7日間でしたが、XPages アプリケーションの概要を理解して頂けたでしょうか。
当資料で、XPages アプリケーションの作成に少しでも興味を持って頂ければ嬉しく思います。

今回作成したアプリケーションには、実際の運用で利用するには機能が不足している部分が多くあり、思いつくだけでも以下のようなものがあるかと思います。

  • Web アプリケーションとしてのヘッダーやフッター、スタイルシート (CSS) やテーマの適用
  • 添付機能
  • 複数のビュー表示 (ナビゲータやアウトラインのようなもの)
  • ビューでの未読 / 既読表示
  • ビューでのカテゴリ表示
  • ビューでのアイコン表示
  • 環境設定に設定したリストを利用したキーワード表示 (分類フィールドなど)
  • 検索機能
  • ウィンドウタイトルの表示

最初の一歩として最低限の機能のみと考えた末、上記機能の実装は今回見送りました。
機会があれば、補足していきたいと思います。

資料はありませんが、上記機能を実装したサンプルデータベースを現在公開しています。
興味がある方は、developerWorks「XPages の自習 (サンプル掲示板)」をご覧ください。

7日間、御付き合い下さいましてありがとうございました。


ダウンロード

内容ファイル名サイズ
サンプル DB (1日目)sample01.nsf26KB
サンプル DB (2日目)sample02.nsf33KB
サンプル DB (3日目)sample03.nsf34KB
サンプル DB (4日目)sample04.nsf36KB
サンプル DB (5日目)sample05.nsf37KB
サンプル DB (6日目)sample06.nsf37KB
サンプル DB (7日目)sample07.nsf39KB

コメント

developerWorks: サイン・イン

必須フィールドは(*)で示されます。


IBM ID が必要ですか?
IBM IDをお忘れですか?


パスワードをお忘れですか?
パスワードの変更

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


お客様が developerWorks に初めてサインインすると、お客様のプロフィールが作成されます。会社名を非表示とする選択を行わない限り、プロフィール内の情報(名前、国/地域や会社名)は公開され、投稿するコンテンツと一緒に表示されますが、いつでもこれらの情報を更新できます。

送信されたすべての情報は安全です。

ディスプレイ・ネームを選択してください



developerWorks に初めてサインインするとプロフィールが作成されますので、その際にディスプレイ・ネームを選択する必要があります。ディスプレイ・ネームは、お客様が developerWorks に投稿するコンテンツと一緒に表示されます。

ディスプレイ・ネームは、3文字から31文字の範囲で指定し、かつ developerWorks コミュニティーでユニークである必要があります。また、プライバシー上の理由でお客様の電子メール・アドレスは使用しないでください。

必須フィールドは(*)で示されます。

3文字から31文字の範囲で指定し

「送信する」をクリックすることにより、お客様は developerWorks のご使用条件に同意したことになります。 ご使用条件を読む

 


送信されたすべての情報は安全です。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Lotus
ArticleID=782877
ArticleTitle=一週間で学ぶ XPages 開発入門 (初級編)
publish-date=01202012