Comments
Description
Transcript
既存の けるポイント Notes 2012/4/10
2012/4/10
Lotus Technical Update Workshop
既存のNotesアプリケーションのXPages化にお
けるポイント
日本アイ・ビー・エム システムズ・エンジニアリング株式会社
コラボレーション＆モバイル 青木 悟大
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
当セッションについて
主な対象
– LotusScriptや式言語を用いて、NotesDBを開発したことのある開発者
目的
– NotesDBをXPages化する際のポイントと、XPages特有の考慮点と対応方法について把握
いただく
前提
– 既存のアプリケーションの機能をそのまま実装
•
•
2
本来はXPages化にあたって、Web2.0にふさわしい新機能の追加や機能の取捨選択等含めて再設
計を行うことが本来は望ましい
当サンプルでは割愛
–
バージョンはLotus Domino 8.5.3 Upgrade Pack 1が前提
–
ブラウザからの利用を前提
サンプルのダウンロード先
– developerWorks Japan Lotus(http://www.ibm.com/developerworks/jp/lotus/)
に4/13公開予定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
当資料での標記方法
SSJS・・・サーバーサイドのJavaScript。
CSJS・・・クライアントサイドJavaScript。
LS・・・LotusScript
3
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
アジェンダ
XPages化するNotesアプリケーションの紹介
XPages化の手順
– 画面・レイアウト設計・実装
– フォームの実装
– 入力補助ボタンの実装（日数計算）
– 主要アクションの実装（承認依頼）
参考.XPagesの設計でつまずかないために
4
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化するNotesアプリケーションの紹介（デモ）
5
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化したアプリケーションの紹介（デモ）
6
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
実装順序
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
7
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
実装順序
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
8
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化するNotesクライアントの画面レイアウト
9
画面レイアウト
設計・実装
下記の画面をXPages化する
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
画面設計方針
画面設計方針
– Notesと同様の見た目、画面遷移とする
– OneUI（参考.p19∼参照）を利用する
•
各コンポーネントはOneUIに沿って配置
ロゴ
DBタイトル
ログイン/ログアウト
検索ボタン
メッセージバー
アクションバー
グローバルナビゲータ
ナビゲータ
ビュー/フォーム
10
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
画面の大枠作成
Application Layoutコントロールを使ってレイアウトを作成する
–
–
カスタムコントロール上に配置して使用する
プロパティ定義とテーマの設定（次項）だけで画面の大枠が作成可能
•
Application LayoutコントロールはUpgrade Pack 1で追加
Logo
Application Links
Utilitiy Links
Place Bar
Search
footer Links
legal Text
11
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
アプリケーションテーマの設定方法
Lotus Domino Designerから[アプリケーションのプロパティ]-[XPage]-[テーマの
デフォルト]-[アプリケーションのテーマ]で指定する
– サンプルでは[oneuiv2.1_silver]を指定
– 指定方法と画面イメージ詳細(http://goo.gl/HMqJ2)
③
②
①
12
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面の大枠作成完了
13
画面レイアウト
設計・実装
Application Layoutコントロールのロゴやリンクを設定し、アプリケーションテーマを
設定した画面
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.Application Layoutコントロールのリンクの設定方法
画面レイアウト
設計・実装
[プロパティ]-[Application Links/Utilitiy Links]-[AddItem]-[Basic Node]
[Basic Node]の[href]プロパティと[label]プロパティを設定
14
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
画面レイアウトを構成する①
ナビゲーターの箇所にはNavigatorコントロールを配置
メインコンテンツの箇所にはアクションバー/メッセージバー、ビュー/フォームを配置
–
フォームの開発については後述
ナビゲーター
メインコンテンツ
メッセージバー（カスタムコントロール）
ナビ
ゲーター
コント
ロール
15
アクションバー（カスタムコントロール）
ビュー または フォーム
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
画面レイアウトを構成する②
Application Layoutコントロールの編集可能領域を編集する
–
–
下図の緑丸の箇所が編集可能
サンプルでは「Left Column」にナビゲーターとメインコンテンツの箇所を編集
LeftColumn
16
メインコンテンツ
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウトの構成要素の作成・配置
画面レイアウト
設計・実装
NavigatorコントロールをLeftColumnに配置
–
リンクをリスト形式で表示するコントロール
•
•
リンクはアプリケーションコントロールと同様にプロパティから追加(p14)
Upgrade Pack 1で追加
メッセージバーをメインコンテンツ上部に配置
– カスタムコントロールを作成し、計算結果フィールドコントロール配置（詳細後述）
アクションバーをメインコンテンツ上部に配置
– カスタムコントロールを作成し、ボタンコントロールを配置
ビューをメインコンテンツ下部に配置
– ビューコントロールをドラッグ&ドロップで追加
•
17
参考. XPages コントロールの紹介： 「ビュー」 コンテナコントロール
(http://goo.gl/IU3zw)
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面・レイアウト実装完了
18
画面レイアウト
設計・実装
ナビゲーター、アクションバー、ビューを配置した画面
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.Upgrade Pack 1のコントロールの詳細を確認するには
画面レイアウト
設計・実装
Lotus Notes and Domino Application Development wikiの下記参照
– [Product Documentation]タブ-[Domino Designer XPages Extension Library]
•
Using controls from the XPages Extension Library
http://goo.gl/iNf88
–
•
サンプルで使用しているコントロール
»
Application Layout & Page Navigator Controls（画面作成で使用）
http://goo.gl/cGPyA
»
Value and name pickers（申請者の入力補助で使用）
http://goo.gl/0QjUW
»
valuePicker - Value Picker （申請者の入力補助で使用）
http://goo.gl/KUiz9
»
dialog - Dialog （差し戻しアクションで使用）
http://goo.gl/MIYXo
Control reference
http://goo.gl/ykxiz
デモファイル
– XPages Extension Library
•
19
アーカイブに含まれる「XPagesEXT.nsf」
http://goo.gl/g1Bt8
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.OneUIとは
画面レイアウト
設計・実装
統一されたルック＆フィールを提供するためのユーザーインターフェースの標準化ガイドライン
– Lotus製品で共通のテーマとして利用されている
•ディスカッションテンプレートでも利用
–
ドキュメント
•IBM Lotus User Interface Developer Documentation
各種ドキュメントやExampleページがある
http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/index.htm
•サンプルでは下記参照
–Notesフォームの調整で使用
» Forms(Formに使用するスタイル）
http://www-12.lotus.com/ldd/doc/oneuidoc/docpublic/components/forms.htm
» General Style(スタイルの微調整に使用する）
http://goo.gl/5H6C9
–
CSSファイルはLotus/Notes Domino 8.5.1から製品に同梱
•パスは下記
–(Dataフォルダ)¥domino¥html¥oneui (v2/v2.1)
20
XPagesの開発ではOneUIフレームワークの利用を推奨
– Webデザインの熟練者がいない場合
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.OneUIのレイアウトとクラス概要
21
画面レイアウト
設計・実装
3Columns,summary viewの例
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
参考.OneUIのレイアウトとクラス概要
3Columns,summary viewのクラス
lotusBanner
lotusTitleBar
lotusFrame
lotus
ColLeft
lotusContent
lotus
ColRight
lotusMain
lotusFooter
22
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
設計・実装
参考.OneUIのレイアウトとクラス概要
3Columns,summary viewのクラス詳細
lotusLogo
lotusInline list lotusLinks
lotusInline list lotusUtility
lotusSearch
lotusTabs
lotusMenu
lotusFrame
lotusMain
lotus
Section
lotusHeader
lotusMessage lotusInfo
lotusActionBar lotusBtnContainer
lotusPaging
lotusSection
lotusFirst
lotusSort
lotusSection
lotusFooter
23
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ログイン/ログアウトのリンクの作成①
画面レイアウト
設計・実装
ログイン/ログアウトリンクの作り方の例
前提：セッション認証が有効
– 1.[Application Layou]コントロールの[プロパティ]-[utility link]を開く
– 2.[Add Item]-[Basic Node]
– 3 .[label] プロパティを[値の計算]とし、下記のロジックを記述
var userName:NotesName = session.createName(@UserName());
if (userName.getCommon()=="Anonymous")
{
var rtnvalue = "Log In"
}
else
{
var rtnvalue = "Logout"
}
return(rtnvalue);
24
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ログイン/ログアウトのリンクの作成②
画面レイアウト
設計・実装
ログイン/ログアウトリンクの作り方の例
– 4. [href]プロパティを[値の計算]とし、下記のロジックを記述
var userName:NotesName = session.createName(@UserName());
if (userName.getCommon()=="Anonymous")
{
facesContext.getExternalContext().getRequestContextPath() + "?login";
}
else
{
facesContext.getExternalContext().getRequestContextPath() + "?logout";
}
※facesContextはJSFのグローバルオブジェクト。詳細は「Notes開発者向け
XPagesのサーバーサイドJavascriptガイド(http://goo.gl/UqUuZ)p46-47参照」
25
参考.Lotus Domino Designer ヘルプ『認証を要求する URL コマンド』
参考. XPages Tutorial Part 7: バナーのログイン/ログアウトボタン
http://notesdominoliaison.blogspot.com/2009/12/xpages-tutorial-part7.html
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
画面レイアウト
参考.Application Layoutコントロールのプロパティで全文検索を実装
設計・実装
検索後に表示するビューを含むXPageを指定する
– Application Layoutコントロールの[プロパティ]-[Search]-[Page name]
全文検索がないとエラーとなる（検証により確認）
26
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
実装順序
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
27
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化するNotesのフォーム
28
フォームの実装
下記のフォームをXPages化する
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームの実装順序
フィールドを配置する
– フォームにコントロールを配置・バインド
フォームのリフレッシュの指定
– リフレッシュのタイミング（フォーム検証の実行）の設定
入力値チェック(入力確認式）の置き換え
–
29
フォームの実装
妥当性検査の設定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームの実装順序
フィールドを配置する
– フォームにコントロールを配置・バインド
フォームのリフレッシュの指定
– リフレッシュのタイミング（フォーム検証の実行）の設定
入力値チェック(入力確認式）の置き換え
–
30
フォームの実装
妥当性検査の設定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フィールドを配置する
フォームの実装
フォームにコントロールを配置・バインドする
– Notesフォームのフィールドなどに対応するコントロールをドラッグ＆ドロップで配
置
•
•
編集可能
–
–
–
テキストフィールド ・・・編集ボックスコントロール
名前フィールド
・・・編集ボックスコントロール
日付/時刻フィールド・・・日付ピッカーコントロール
–
など
計算結果
–
•
•
–
計算結果テキスト ・・・計算結果フィールドコントロール
ホットスポットボタン ・・・ボタンコントロール
etc…
データソースにNotesのフォームを指定し、各コントロールとフィールドをバインド
•
サンプルでは休暇申請フォームを指定
XPage
31
データソース
コントロールA
バインド
フィールドA
コントロールB
バインド
フィールドB
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.データソースの指定とバインド手順
XPage/カスタムコントロールのデータソースにフォームを指定する
– [XPage]/[カスタムコントロール]-[データ]-[追加]-[Domino文書]
– [フォーム]に対応するフォームを指定
–
対応するコントロールを配置し、バインド
•
32
フォームの実装
下記は日付コントロールをフォーム上の種類が[日付/時刻]のフィールドをバインドした
例
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
データソースを指定するときの注意事項 複数値を持つフィールド
フィールドのプロパティの[複数値も可」が無効の場合、フィールドの最初の値しか読
み込まれない（検証により確認）
– Notesのフォーム上では、「複数値も可」が無効であっても、複数値として保存可
能
– XPagesでは標記のプロパティが有効でないと、複数値と認識されず、単一の値
（最初の値）として読み込む
– XPageとバインドしてないフィールド(非表示フィールドなど）でも発生する
•
33
フォームの実装
読者フィールドや作成者フィールドで特に注意
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
コントロールとフィールドをバインドする時の注意事項①複数値
フォームの実装
XPageで入力した値を複数値としてフィールドに格納する場合、プロパティを設定
–
コントロールの[すべてのプロパティ]-[multipleSeparator]で区切り記号を指定
※区切り記号に”,”を指定した例
一部の複数値はXPagesではNotesの種類と表示タイプが異なる(表示タイプについ
ては次項参照）
–
表示形式を誤ると、値が正常に読み込まれなかったり、XPage自体が開けなくなるため注
意（検証により確認）
数値の複数値
日付/時刻の複数値
Notes
XPages
数値
日付/時刻
テキスト
テキスト
NotesよりXPagesでは型の扱い方が厳密で、型を誤るとバグの原因になるた
め注意
34
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォーム
の実装
コントロールとフィールドをバインドする時の注意事項②名前フィールド
Notesのフォーム上で、[名前][読者][作成者]フィールドに入力する場合と、XPages
から入力する場合の動作が異なる
– Notesのフォーム上では、UI上は省略形式で表示されるが、実際には階層名形
式で格納されている
–
Test User1/TEST
CN=Test User1/O=TEST
同様の動作とするためには、SSJSで変換してセットしなおすか、コンバーター（下記）を使
用する必要がある（次項）
コンバーターとは
•
35
保存されているデータ
XPageでは自動的に上記の動作にはならない（検証により確認）
•
–
表示
編集ボックスなどのコントロールに設定できる[表示タイプ]
–
[プロパティ]-[データ]-[表示タイプ]
–
–
日付や数値の表示形式はプロパティから指定可能
プロパティでは名前に該当するものはない（次項）
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPagesで編集ボックスコントロールを名前フィールドと同様の動きにする フォーム
の実装
名前フィールドとバインドしたコントロールにコンバーターのCustomConverterを設
定
– CustomConverterを使うことで自由に設定することが可能
•
–
入力変換式の代替としても使用可能（次項）
設定方法
•
•
•
設定するコントロールのプロパティ-[データ]-[converter]で[xp:customConverter]を
選択し、下記のプロパティを設定する
getAsObject・・・データを格納するときの変換方法を指定
getAsString・・・データを表示するときの表示方法を指定
getAsObject
//階層名形式で格納
@Name('[Canonicalize]', value);
getAsString
//省略形式で表示
@Name('[Abbreviate]', value);
※valueはコントロールの値が格納されている予約語
サンプルでは申請者名のコントロールで実装。コンバーターの詳細は
『Converters on an XPage』(http://goo.gl/uwFNy)参照
36
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.入力変換式をカスタムコンバーターに置き換える
フォームの実装
入力変換式はp36のカスタムコンバーターを用いて置き換え可能
ただし、保存時にフォーム検証を実行すれば入力変換式が実行されるので、置き換え
は必須でない
– 妥当性検査（後述）やサーバーサイドのイベントで変換後の値が必要であれば、
置き換える。実行順序については最後の節のp105など参照。
下記は入力変換式の置き換え例（検証により確認）
– 余分な空白を入れずに、[Subject] フィールドの単語の頭文字だけを大文字に変
換し、その他を小文字に変換するロジックの例
Notes(入力変換式）
XPages(customConverter)
getAsObject
@Trim(@ProperCase(Subject))
@Trim(@ProperCase(value));
getAsString
value;
37
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームの実装順序
フィールドを配置する
– フォームにコントロールを配置・バインド
フォームのリフレッシュの指定
– リフレッシュのタイミング（フォーム検証の実行）の設定
入力値チェック(入力確認式）の置き換え
–
38
フォームの実装
妥当性検査の設定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームのリフレッシュの指定
フォームの実装
リフレッシュのタイミング（フォーム検証の実行）を設定する
フォーム検証の実行とは
– ComputeWithFormと同様
– フィールドの計算結果、入力確認式、入力変換式などが実行される
– イベントは実行されない
データソースに[Domino文書]を追加したときに指定する
– Notesのフォームと同様の動作とするためには[両方]を指定
•
•
新規文書作成時に、フィールドの計算結果やデフォルト値を反映するためには[文書ロー
ド時]に実行する必要がある
保存するときに必ず再計算させるためには[文書保存時]に実行する必要がある
※XPage/カスタムコントロールの[プロパティ]-[データ]-[データソース:Lotus Domino 文書]
39
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームの実装順序
フィールドを配置する
– フォームにコントロールを配置・バインド
フォームのリフレッシュの指定
– リフレッシュのタイミング（フォーム検証の実行）の設定
入力値チェック(入力確認式）の置き換え
–
40
フォームの実装
妥当性検査の設定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
Notesフォーム上の入力確認式
41
フォームの実装
下記のロジックをXPages化する
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
入力値チェック(入力確認式）の置き換え
フォームの実装
妥当性検査を設定する
編集ボックスコントロール、日時ピッカーコントロールは[必須]または[最小/最大]をプ
ロパティから設定可能
入力確認式(式言語)
XPages(妥当性検査)
REM{"入力必須のチェック"};
@If(
HdStartDate="";@Failure("休暇期間（開始日）を
入力してください。");
@Success)
※休暇開始日の例
42
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.妥当性検査の表示
フォームの実装
妥当性検査のメッセージを表示するためには、[エラー表示コントロール]を配置し、関
連付ける
設定方法
表示
43
妥当性検査プロパティは、[値の計算](SSJS)を用いていない場合、クライアントサイドで実行さ
れます
– クライアントサイドで実行される場合、プロンプトを表示
– クライアントサイドのチェックを無効にする場合は[すべてのプロパティ][disableClientSideValidation]を[true]に設定
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.妥当性検査の応用
フォームの実装
必須・最小/最大以外も対応可能
⇒[すべてのプロパティ]-[validators]
–
正規表現
•
–
[Validate Constraint]
–
Regex・・・正規表現を指定
–
» アルファベットのみ [A-Za-z]*
» 数値のみ [0-9]*
Message・・・表示するメッセージを指定
任意のSSJSの式で判定
•
[Custom Validator]
–
–
validate・・・true/falseを返すSSJSのロジックを記述
message・・・表示するメッセージを指定
–
注意点
» 妥当性検査が行われるフェーズでは、各コンポーネント/NotesXSPDocumentに送信後の
値は反映されていない（参考.コンポーネント・ツリーのライフサイクル）。送信された値を取得
するにはgetComponent関数でコントロールを直接取得し、getSubmittedValueメソッドを使
用する必要がある
詳細は『Validation On An XPage』(http://goo.gl/peHUa)参照
44
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォーム画面の完成
45
フォームの実装
作成した画面
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.フォーム検証で実行される入力確認式のエラー表示
フォームの実装
フォーム検証（保存時）に入力確認式で失敗した場合、文書は保存されない
上記のエラーのメッセージを表示するためには複合エラー表示コントロールを配置す
る（下図、検証により確認）
– 上記を用いれば、妥当性検査を実装せずとも入力確認式で入力値チェックが可能
•
ただし、実行順序を考慮するとサブミット後すぐに妥当性検査で行ったほうがよい（参考.
XPagesの設計でつまずかないためにのp105など参照）
複合エラー表示コントロール
46
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考. 編集モードと読み込みモードの違い
フォームの実装
変換されるhtmlのタグが変更される
– 編集可能なときはinputタグ
– 読み取りモードのときはspanタグやtableタグ（ラジオボタングループやチェック
ボックスグループ）など
CSJSでコントロールの値を取得する場合はロジックに注意
– 編集ボックスコントロールの場合、編集モードのときはvalue、読み取りモードのと
きはinnerHTMLを取得する
CSJS
var subject = dojo.byId("#{id:inputText1}");
if (subject.nodeName=="INPUT"){
dojo.byId("#{id:inputHidden1}").value = subject.value;
}
else if(subject.nodeName=="SPAN"){
dojo.byId("#{id:inputHidden1}").value = subject.innerHTML;
}
alert("submitvalue=" + dojo.byId("#{id:inputHidden1}").value);
※編集ボックスコントロールの値を取得、非表示の入力コントロールに入れ、
表示するサンプル
47
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考. 読み取りモードから入力する
フォームの実装
バインドされたコントロールから入力は不可能
– 非表示の入力コントロールも同様
XPages：読み込みモードの文書において <xp:inputHidden> フィールドが利
用できない
https://www-304.ibm.com/support/docview.wss?uid=swg21569342
XSP Client Side JavaScriptのsetSubmitValueを用いると、読み取りモードからで
もサーバーサイドのロジックへ値を渡すことが可能
SSJS
CSJS
//サブミット時に下記に値をセット
XSP.setSubmitValue(“任意の値”);
//クライアントからサブミットした値を取得
var temp=context.getSubmittedValue();
詳細はサンプルの「差し戻し」アクション参照
48
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
実装順序
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
49
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
日数計算アクションのロジックを置き換える
入力補助ボタン
の実装
XPagesで置き換える日数計算の処理
実行前
休暇期間が入力
されてない場合は
警告を表示
50
実行後
土日を除く営業日
を計算
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
入力補助ボタンの実装（日数計算)
入力補助ボタン
の実装
日数計算アクションのロジックをUIで動作するものとサーバーサイドで計算するもの
に分離する
– 日数計算アクションのロジック
Notes(式言語)
REM{"休暇期間の入力チェック"};
@If((HdStartDate=""|HdEndDate=""); @Return(@Prompt([Ok];"エ
ラー";"休暇期間を入力してください")); "");
REM{"営業日を計算してセット"};
FIELD DayCount :=@BusinessDays(HdStartDate;HdEndDate;1:7);
前半・・・ブラウザのUIの動作（ポップアップ表示）なのでCSJSに置き換える
後半・・・ブラウザのUIの動作ではないので、SSJSに置き換え部分更新する
51
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
クライアントサイドスクリプトとサーバーサイドスクリプト
入力補助ボタン
の実装
1つのイベントにはクライアントサイドのスクリプト(CSJS)とサーバーサイドのスクリプ
ト(SSJS)の２つが記述可能
CSJS ⇒ SSJSの順で実行される
– ただしCSJSの途中で「false」が返されると、処理は中断され、Submitされない
return falseで
処理中断
クライアントサイド
スクリプト
52
Submit(POST)
サーバーサイド
スクリプト
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
日数計算ロジックの前半部分をCSJSへ置き換え
入力補助ボタン
の実装
日数計算のロジックをCSJSに置き換える
Notes(式言語)
@If(
(HdStartDate=""|HdEndDate="");
@Return(@Prompt([Ok];"エラー";"休暇期間
を入力してください")); "");
XPages(CSJS)
var startDate =dojo.byId("#{id:hdStartDate1}");
var endDate =dojo.byId("#{id:hdEndDate1}");
if(startDate.value=="" ||endDate.value=="" ){
alert('休暇期間を入力してください');
return false;
}
XPagesのCSJS
– 通常のJavaScriptとDojoのライブラリが使用可能
注意：idの指定時
– XPagesのコントロール名(id)はhtml変換時に変更されるため
•
変更されるidは予測できないため、必ず下記の形式で指定する
"#{id:control_name}"
53
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
日数計算アクションの入力値チェック
54
入力補助ボタン
の実装
CSJSで実装した入力値チェックのプロンプト
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
ロジック後半部分の置き換え
入力補助ボタン
の実装
Notes(式言語)
FIELD DayCount :=@BusinessDays(HdStartDate;HdEndDate;1:7);
XPages
営業日をSSJSで
@BusinessDays
を実行して計算
55
部分更新で
日数を入力する
コントロールのみ更新
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
日数計算ロジックの後半部分のSSJSへ置き換える
入力補助ボタン
の実装
Notes(式言語)
FIELD DayCount :=@BusinessDays(HdStartDate;HdEndDate;1:7);
XPages(SSJS)
var startDateObj = document1.getItemValueDate("HdStartDate");
var endDateObj = document1.getItemValueDate("HdEndDate");
①入力値取得（後述）
startDateStr =startDateObj.toLocaleDateString()
endDateStr =endDateObj.toLocaleDateString()
②yyyy/mm/ddへ変換
var formula = '@BusinessDays([' + startDateStr + '];[' + endDateStr +
'];1:7)';
var dayCount = session.evaluate(formula);
③営業日計算（後述）
document1.replaceItemValue("DayCount",dayCount);
④日数のセット
56
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
SSJSで休暇開始日、終了日に入力された値を取得する①
入力補助ボタン
の実装
休暇開始日、終了日に入力された日付を取得するロジック
var startDateObj = document1.getItemValueDate("HdStartDate");
var endDateObj = document1.getItemValueDate("HdEndDate");
※HdStartDate/HdEndDateは休暇開始日/終了日のフィールド名
document1とは
– デフォルトのデータソース名
•
–
[プロパティ]-[データソース]で指定した名前（任意の名前に変更可能）
NotesXSPDocumentオブジェクトというXPages特有のオブジェクト
•
•
概念としてはNotesUIDocumentに近い
プロパティ、メソッドはNotesDocumentオブジェクトに近い
–
–
57
ただしSSJSは内部的にはJavaのクラスをコールするため型の扱いが厳密
例.getItemValueString/getItemValueInteger/getItemValueDateなど
SSJSでは、特に宣言することなくデータソース名で呼べる
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
入力補助ボタン
の実装
参考.SSJSで入力された値を取得する３つの方法
データソースに指定したフィールドの値を取得する
•
フィールドにバインドされていない値を取得する
– getComponent関数を用いてコントロールの値を直接取得する
•
•
NotesXSPDocumentを用いる
取得できるオブジェクトはJavaのオブジェクト
getValue()/setValue()メソッドはどのオブジェクトでも使用可能（ロジックのサンプル次
項）
NotesDocumentオブジェクトを取得する
– NotesXSPDocumentのgetDocumentメソッドを用いる
•
引数でtrueを指定すると入力された値を反映した状態で取得する（ロジックのサンプル
データソース名.getItemValueXXX
次項）
getComponent関数
NotesXSPDocument
コントロールA
バインド
フィールドA
コントロールB
バインド
フィールドB
コントロールD
58
フィールドC
NotesDocument
フィールドA
get
Docu
ment
メソッド
フィールドB
フィールドC
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.各値を取得/セットするロジックサンプル
入力補助ボタン
の実装
データソースにバインドされている値
temp=document1.getItemValueString(“フィールド名”);
document1.replaceItemValue(“フィールド名”,”任意の値”);
※”document1”をデータソース名に指定している場合
データソースにバインドされていない値（コントロールの値）
temp=getComponent(“コントロール名”).getValue();
getComponent(“コントロール名”).setValue(“任意の値”);
バックエンドのNotes文書の値
Var doc:NotesDocument=document1.getDocument(true);
temp=doc.getItemValueString(“フィールド名”);
doc.replaceItemValue(“フィールド名”,”任意の値”);
59
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
営業日を計算する
入力補助ボタン
の実装
営業日を計算するロジック
– SSJSで式言語を実行するロジックを実装
var formula = '@BusinessDays([' + startDateStr + '];[' + endDateStr + '];1:7)';
var dayCount = session.evaluate(formula);
SSJSで式言語と同様の機能を持つ関数を約1/3ほど用意
– @BusinessDaysはない
詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド(http://goo.gl/UqUuZ)p34参照」
SSJSで対応する関数がない場合の対応方法
– NotesSessionオブジェクトのevaluateメソッドから呼び出せる場合がある
•
メソッドの使い方はLSと同様
–
–
•
60
Webから機能しない関数には注意
参考.デザイナーヘルプ「Web での @関数 」
NotesSessionオブジェクトの取得方法は次項
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.NotesSessionオブジェクトの取得方法
入力補助ボタン
の実装
SSJSではNotesSessionオブジェクトは「session」という文字列に予め割り当てられ
ている
LSでは、出発点となるオブジェクトはNewを用いて取得
– Dim session as New NotesSession
– Dim ws as New NotesUIWorkspace
SSJSでは、あらかじめ予約語に出発点となるオブジェクトが割り当てられている
–
このようなプログラムのどこからでも参照可能なオブジェクトを「グローバルオブ
ジェクト」と呼ぶ
•
•
NotesXSPDocumentオブジェクトもグローバルオブジェクト
SSJSではどのようなグローバルオブジェクトがあるかを予め把握する必要あり
LS
Dim session As New NotesSession
Dim user As String
user = session.EffectiveUserName
SSJS
//session（予約語）がNotesSessionクラスの
//グローバルオブジェクト
var user = session. getEffectiveUserName();
詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド(http://goo.gl/UqUuZ)p11
参照」
61
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.SSJSのライブラリ
入力補助ボタン
の実装
XSPライブラリ
– 現在表示しているXSPライブラリやブラウザコンテキストにアクセスする（一部後
述）
詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド(http://goo.gl/UqUuZ)p15参照」
Dominoライブラリ
– LSのバックエンドのオブジェクトと同様の処理が可能
詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド(http://goo.gl/UqUuZ)p21参照」
62
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.SSJSの落とし穴 Java/JSFのオブジェクトを扱う
入力補助ボタン
の実装
SSJSでは、処理途中でJavaのオブジェクトを扱うことがある
– SSJSのXSPライブラリ/Dominoライブラリのメソッドの戻り値が配列の場合など
•
•
戻り値の型はjava.util.Listかjava.util.Vector
上記の型のメソッド/プロパティはJavaのAPIDocを参照する必要あり
–
–
–
http://java.sun.com/javase/ja/6/docs/ja/api/index.html?java/util/List.html
http://java.sun.com/javase/ja/6/docs/ja/api/java/util/Vector.html
SSJSではJavaクラスを介してDominoオブジェクトへアクセスしているため
•
SSJSのアクセス順序
SSJS
•
Lotus Domino
Javaクラス
LotusScript
Back engine
LotusScript
Back engine
Lotus Domino
のオブジェクト
Lotus Domino
のオブジェクト
LSのアクセス順序
LS
詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド
(http://goo.gl/UqUuZ)p41参照」
63
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化された日数計算のロジック
入力補助ボタン
の実装
SSJSに置き換えた日数計算のロジック
SSJSで置き換えられたロジック
var startDateObj = document1.getItemValueDate("HdStartDate");
var endDateObj = document1.getItemValueDate("HdEndDate");
//yyyy/mm/dd形式に変換
startDateStr =startDateObj.toLocaleDateString()
endDateStr =endDateObj.toLocaleDateString()
var formula = '@BusinessDays([' + startDateStr + '];[' + endDateStr +
'];1:7)';
var dayCount = session.evaluate(formula);
document1.replaceItemValue("DayCount",dayCount);
64
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
部分更新の設定
営業日をSSJSで
@BusinessDays
を実行して計算
65
入力補助ボタン
の実装
部分更新で
日数を入力する
コントロールのみ更新
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
フォームの値を部分更新する
サンプルでは以下、 ２つの設定を行う
– 部分更新でdayCount1(日数を入力するコントロールのＩＤ）を指定
•
–
66
入力補助ボタン
の実装
部分更新では選択されたWebページの一部のみ更新（後述）
「検証を行わずにデータを処理する」を有効にする（後述）
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
入力補助ボタン
の実装
部分更新理解の前提-XPagesの「ページ」
XPagesの「ページ」には２つの意味がある
クライアントサイド
のページ
＝
Webページ※1
サーバーサイド
のページ
≒
JSFページ※2
XPagesの「ページ」
※1以下、当資料ではクライアントサイドのページを、「Webページ」と記載する
※2以下、当資料ではサーバーサイドのJSFページを「ページ」と記載する
67
ページはJavaのインスタンスの集合で、これをhtmlに変換し、レスポンスを返してい
る。レスポンスを返した後はキャッシュされる（詳細はp94∼参考.コンポーネント・ツ
リーとは参照）
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
NotesとXPagesの”フロントエンド”のメカニズムの違い
入力補助ボタン
の実装
XPagesではNotesの入力フォーム（NotesUIDocument）の役割を「ブラウザ」と
サーバー上の「ページ」が担う
– 入力中のデータはページが保持し、明示的に保存するまで文書には反映されない
全体更新も部分更新も処理順序、処理内容は変わらない
– いずれも下図の「送信」に該当
N
o
t
e
s
サーバー
Ｎｏｔｅｓクライアント
①編集
NotesUI
Document
②保存
Notes
文書
編集中の
データ・状態を保持
68
X
P
a
g
e
s
①④編集
ブラウザ
②送信
XPage
HTML出力
③更新
サーバー
ページ
⑥保存
Notes
文書
⑤送信
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
日数計算アクションの部分更新の設定
入力補助ボタン
の実装
日数計算の部分更新では妥当性検査を無効にする
– 日数は必須入力のため、無効にしない場合、SSJSで日数をセットする前に必須入
力チェックが実行されてしまう（処理順序は最後の節、p105など参照）
–
そのため「検証を行わずデータを処理する」を有効にする
サーバーオプションの設定と解説
すべて更新
サブミットする。サーバー/ブラウザの両方のページをすべて更新
部分更新
サブミットする。サーバーのページを更新し、ブラウザ側は指定した
一部のみ更新
更新なし
サブミットする。サーバーのページのみ更新。ブラウザ側は更新しな
い。
サブミットなし
サブミットしない。サーバーページは更新されない。
データの検証または
更新を行わない
サーバーのページを更新しない。
検証を行わずデータ
を処理する
妥当性検査を行わない。
※フォーム検証が有効な場合、入力確認式は行われない
部分更新はパフォーマンスの観点/レスポンスの観点から有用のため積極的
69に活用ください
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化した日数計算アクション
70
入力補助ボタン
の実装
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
実装順序
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
71
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化する承認依頼の処理順序
承認依頼ボタン押下
主要アクション
の実装
ステータスを変更して文書を保存、メールで通知
72
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼の処理順序
サブミット
XPageで置き換える要素
ポップアップ表示
（処理継続確認）
CSJS
遅延判定
73
遅延理由入力
プロンプト表示
SSJS + フォーム入力
主要ロジックの実行
（文書更新・通知メール送信）
SSJS(+スクリプトライブラリ)
終了処理
(メッセージを表示して、
フォームを閉じる)
SSJS + メッセージバー
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼の処理順序
サブミット
XPageで置き換える要素
ポップアップ表示
（処理継続確認）
CSJS
遅延判定
74
遅延理由入力
プロンプト表示
SSJS + フォーム入力
主要ロジックの実行
（文書更新・通知メール送信）
SSJS(+スクリプトライブラリ)
終了処理
(メッセージを表示して、
フォームを閉じる)
SSJS + メッセージバー
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
承認依頼を例に-ポップアップの表示の置き換え
CSJSに置き換える
– [承認依頼]ボタンのイベントタブの[クライアント]に記述
–
キャンセルされた場合などは、“return false”とすると処理が中断される
LS
'処理継続確認
askme = ws.Prompt (PROMPT_YESNO, _
"継続確認", "休暇申請を承認します。よろしいで
すか？")
If askme = 0 Then Exit Sub
75
主要アクション
の実装
CSJS
//処理継続確認
var askme = window.confirm("承認依頼を行
います。よろしいですか？");
if(askme != true){return false};
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼の処理順序
サブミット
XPageで置き換える要素
ポップアップ表示
（処理継続確認）
CSJS
遅延判定
76
遅延理由入力
プロンプト表示
SSJS + フォーム入力
主要ロジックの実行
（文書更新・通知メール送信）
SSJS(+スクリプトライブラリ)
終了処理
(メッセージを表示して、
フォームを閉じる)
SSJS + メッセージバー
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼を例に-遅延理由入力の置き換え
遅延理由の入力はフォームから入力するように置き換える
– CSJSへの置き換えは行わない（次項）
※遅延判定はLSからSSJSに書き換える。詳細はサンプル参照。
Notes
XPages
＋
77
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
承認依頼を例に-遅延理由入力の置き換え
主要アクション
の実装
プロンプトの表示
– view.postScriptメソッドを利用
•
•
クライアントにロード後に実行されるCSJSを文字列として指定
viewは画面全体を現すグローバルオブジェクト（Notesのビューとは異なる、後述)
SSJS
view.postScript("alert('遅延理由を入力してください。');");
78
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
承認依頼を例に-遅延理由入力の置き換え
主要アクション
の実装
フォームに遅延理由を表示
– 承認依頼のロジック・・・フラグを立て、”return”で処理を中断
SSJS
document1.replaceItemValue("DelayFlag","1");
return false;
–
フォーム・・・遅延理由のラベル/編集ボックスを配置した表のセルの[可視]プロパ
ティを、フラグがたっている場合のみ表示する
•
プロパティから[可視]プロパティを[値の計算]とし、下記のロジックとする
SSJS
document1.getItemValueString("DelayFlag") == "1";
79
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
補足-遅延理由入力の置き換え
プロンプトを置き換える際の考慮点
– CSJSのwindow.promptメソッドを使用するのがもっともLSのプロンプトの
[PROMPT_OKCANCELEDIT]オプションの操作感に近い
–
ただし、IE7/IE8では、デフォルトでwindow.promptメソッドがブロックされる
•
80
主要アクション
の実装
「ツール」→「インターネットオプション」→「セキュリティタブ」→「レベルのカスタマイズ」「スクリプト化されたウィンドウを使って情報の入力を求めることをWebサイトに許可す
る」を有効にする必要あり
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼の処理順序
サブミット
XPageで置き換える要素
ポップアップ表示
（処理継続確認）
CSJS
遅延判定
81
遅延理由入力
プロンプト表示
SSJS + フォーム入力
主要ロジックの実行
（文書更新・通知メール送信）
SSJS(+スクリプトライブラリ)
終了処理
(メッセージを表示して、
フォームを閉じる)
SSJS + メッセージバー
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼を例に-主要ロジックの置き換えLSをSSJSに置き換える
–
バックエンドロジックの置き換えは、原則、文法やネーミングルールの違いの修正
のみ
LS
Set db = ss.currentdatabase
Set doc = db.Createdocument()
Set rtitem = New
NotesRichTextItem(doc,"Body")
Call rtitem.Appendtext(db.Title)
Call rtitem.AppendDocLink( linkdoc,
db.Title )
Call rtitem.Appendtext(":" & bodymessage)
doc.Subject = Subject
doc.SendTo = Sendto
doc.Copyto = Copyto
doc.Send( False )
SSJS
var doc:NotesDocument =
database.createDocument();
var rtitem:NotesRichTextItem =
doc.createRichTextItem("Body");
rtitem.appendText(database.getTitle());
rtitem.appendDocLink( linkDoc,
database.getTitle() );
rtitem.appendText(":" + bodyMessage);
doc.replaceItemValue("Subject",subject);
doc.replaceItemValue("Sendto",sendto);
doc.replaceItemValue("Copyto",copyto);
doc.send(false);
※通知メールを送信するスクリプトライブラリのロジック抜粋
※JavaScriptは大文字小文字を厳密に判定するので注意
LSとSSJSの差異の詳細は「Notes開発者向けXPagesのサーバーサイドJavascriptガイド
(http://goo.gl/UqUuZ)p21-31参照」
82
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.スクリプトライブラリの置き換え
主要アクション
の実装
LSのスクリプトライブラリはSSJSのスクリプトライブラリに置き換え可能
– SSJSのスクリプトライブラリの呼び出し方法は下記いずれか
•
SSJSの冒頭でimport文で呼び出し
SSJS
import jsLibCommon;
•
下記からリソースに追加しておくと、都度importにより呼び出す必要はない
–
83
[XPages]/[カスタムコントロール]-[リソース]-[追加]-[JavaScriptライブラリ]
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
参考.SSJSのスクリプトライブラリの考慮点
SSJSのスクリプトライブラリ上でグローバル変数を使用することは非推奨
グローバル変数
ローカル変数
–
アプリケーションスコープ（後述）のようにページ/セッションを越えて共有するよう
な動作をする
•
–
異なるユーザーとも共有される
メモリ上に保持する時間は定義されておらず、任意の時間（OSが要求するまで）
で破棄されるため、使用は推奨されない
•
詳細は下記参照
『Are global variables in server-side JavaScript libraries shared across
sessions in XPages?』
http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-globalscriptlibrary-variables.htm
84
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼の処理順序
サブミット
XPageで置き換える要素
ポップアップ表示
（処理継続確認）
CSJS
遅延判定
85
遅延理由入力
プロンプト表示
SSJS + フォーム入力
主要ロジックの実行
（文書更新・通知メール送信）
SSJS(+スクリプトライブラリ)
終了処理
(メッセージを表示して、
フォームを閉じる)
SSJS + メッセージバー
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPages化した終了処理
86
主要アクション
の実装
ビューページへ遷移し、メッセージバーにメッセージを表示する
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
主要アクション
の実装
承認依頼を例に-終了処理-①画面遷移
画面遷移（次の画面を表示）
– 他のXpageへのリダイレクトはメソッドをひとつ呼ぶだけで可能
XPage以外へリダイレクトする方法は「Notes開発者向けXPagesのサーバー
サイドJavascriptガイド(http://goo.gl/UqUuZ)p47参照」
LS
'画面を閉じる
Call uidoc.close
87
SSJS
//画面遷移、contextはグローバルオブジェクト
context.redirectToPage("holidayView")
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
承認依頼を例に-終了処理-②メッセージの表示
メッセージバーに表示できるように、sessionScope.Msgにメッセージを格納（次項に
詳細）
•
sessionScopeとはページを越えて共有できるスコープ変数。
LS
SSJS
MsgBox "休暇申請を行いました。"
主要アクション
の実装
sessionScope.Msg="休暇申請を行いました。"
スコープ変数とは
•
–
スコープ変数を用いると、宣言を行わず、[xxxScope.”任意の名前”]に値やオブジェクト
を格納できる
※事前に変数名の定義/宣言などを行う必要はない
スコープ変数の種類と有効範囲はp97参照
–
例.値を格納する場合
var userName = "IBM User";
sessionScope.name = userName;
–
例.値を呼び出す場合
var userName = sessionScope.name;
88
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
補足.メッセージバーの実装方法
カスタムコントロールを作成
パネルコントロールに計算結果フィールドコントロールを配置
計算結果フィールドに下記の値をバインド
– ページ間をまたぐのでセッションスコープを使用する（後述）
主要アクション
の実装
SSJS
//メッセージを表示
sessionScope.Msg
パネルの[可視]プロパティに下記のロジックを記述
//メッセージがあるときのみ表示
sessionScope.Msg != null;
カスタムコントロールの[afterRenderResponse]イベントに下記のロジックを記述
※afterRenderResponseイベントは、HTML生成後に実行される（詳細は後述）
SSJS
//メッセージを初期化
sessionScope.Msg = null;
89
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
作成手順の完了
画面レイアウト設計・実装
フォームの実装
入力補助ボタンの実装
（日数計算)
主要アクションの実装
(承認依頼エージェント)
90
© 2012 IBM Corporation
参考.XPagesの設計でつまずかないために
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
XPagesの設計でつまづかないために
92
ページとコンポーネント・ツリー
オブジェクトの生成と破棄のタイミング
スコープ変数の有効範囲
イベント順序
実行順序
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
NotesとXPagesの主要なオブジェクトの違い
Notes
クライアント
フロントエンド
バックエンド
NotesUI
Document
Notes
Document
XPages
サーバー(メモリ）
ブラウザ
GET/POST
Web
ページ
93
HTML
生成
ページ
コンポーネント NotesXSP
Document
・ツリー
Notes
Document
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
コンポーネント・ツリーとは
JSFの仕組みで、XPageのコントロール(タグ)の階層構造をJavaオブジェクトのインス
タンスの階層構造に置き換えたもの
– コントロール(タグ)１つが１つのJavaオブジェクトに対応
– 入力されたフィールドの値や、表示/非表示などの状態（ステート）を、文書に保存
することなく、サーバー側で保持する
•
新規にWebページにアクセスした段階で生成され、クライアントにレスポンスを返した後
もキャッシュされる
対応するコントロール
対応するタグ
コンポーネントツリー
<xp:view>
View※
ラベル
<xp:label>
Label1
編集ボックス
<xp:inputText>
InputText2
ボタン
<xp:button>
Button1
※ViewはMVCのVで、コンポーネントツリー全体をあらわす。Lotus Notes/Dominoのビューとは異なる
94
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
コンポーネント・ツリーのライフサイクル
Restore View
コンポーネント・ツリーを作成/復元
新規アクセス
Apply Request Value
送信されてきた値をSubmitted Valueとして、
各コンポーネントに格納（p44と関連）
Process Validations
コンバーター/妥当性検査の実行
妥当性検査エラー
Update Model Value
Invoke Application
イベントのサーバーサイドスクリプトの実行
Render Response
HTMLを出力し、レスポンスを返す
キャッシュ
95
各コンポーネントの値へ反映
ページをメモリまたはディスクに格納（次項）
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ページの有効範囲-キャッシュされるページの最大数
デフォルトでは１６（ページをディスクに保存）
ページが破棄された場合、Submitを行って保存しようとしても処理されない
–
–
初めてそのページを開いた状態に戻ってしまう
XPagesでは、なるべく同一ページを遷移する設計がのぞましい
•
•
キャッシュされるページの数は下記のプロパティから変更可能
– [アプリケーションのプロパティ]-[XPage]-[サーバーページの保持：」
•
•
•
•
96
「Xpages：保存のアクションを実施したのに内容が保存されないことがある」
http://www-01.ibm.com/support/docview.wss?uid=swg21465472
サーバーのデフォルト（何も設定していない場合「ページをメモリの保存」と同様
ページをメモリの保存・・・キャッシュされるページは４つまで
ページをディスクに保存・・・キャッシュされるページは１６まで
現在のページのみをメモリに保存・・・上記２つの組み合わせ。キャッシュされるページは
１６まで。
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
NotesDocumentオブジェクトの有効範囲
NotesDocumentオブジェクトはページにアクセスがあった段階で生成され、ページ
がキャッシュされるタイミングで破棄される
– データソースにDomino文書を指定している場合
– 各イベント（後述）の変更は、保存しない限り、1回のリクエストの間だけ引き継が
れる（検証により確認）
HTMLレスポンス
URLへリクエスト
ページ
イベント発生
生成
ページ
生成＆文書
イベント発生
読取
キャッシュ
破棄
NotesDocument
※新規アクセスの場合
97
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
スコープ変数とその有効範囲
スコープ変数一覧
– applicationScope・・・アプリケーションの範囲。異なるユーザー間でも共有され
る
–
sessionScope・・・セッションの範囲。一人のユーザーのセッションの間保持され
る
※sessionScopeはアクセスしているDBに保存されるため、複数DBで共有はできない。
–
viewScope・・・表示の範囲。１つのページ内でのみ有効。ページを遷移すると無
効
–
requestScope・・・要求の範囲。1つのページ内の1回のリクエスト（サーバーへ
のサブミットとそのレスポンス）の間のみ有効
次項に注意事項を記載。非常に便利だが、動きを把握するまでは多用するこ
とは控えるほうがベター
98
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.スコープ変数の注意点①有効範囲
applicationScopeとsessionScopeの有効時間はデフォルトでは30分
–
–
上記のスコープ変数を用いる場合、アプリケーションの設計として、タイムアウトを
考慮する必要がある
上記変数が無効になった場合にも正常に処理が行われるように設計する
•
–
有効時間の設定はアプリケーションのプロパティから変更可能
•
99
参考. XPages のスコープ変数の有効範囲とタイムアウト(http://goo.gl/3RbjG)
[アプリケーションのプロパティ]-[XPage]-[エラーとタイムアウト]
サーバー文書/Webサイト文書で[アイドル状態のセッションのタイムアウト」をデフォ
ルトより長くしている場合は特に注意
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.スコープ変数の注意点②格納可能なものとそうでないもの
Notesのオブジェクトは格納できない
– Can I cache Notes objects (like a NotesDocument object) in scoped
variables in XPages?
– http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-cache-notesobjects-in-scoped-variables.htm
シリアライズ可能ではないオブジェクトをviewScopeに格納している場合、[ページを
ディスクを保存]を有効にしているとエラーになる
– Do's and Do Not's for XPages Scoped Variables
– http://www10.lotus.com/ldd/ddwiki.nsf/dx/Dos_and_Do_Nots_for_XPages_Scop
ed_Variables#Serialization+Issue
100
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
イベント-ページイベント
XPageには６つのページイベントが用意されている
※アウトラインで[XPage]を選択した
状態で[イベント]タブを開いた画面
設定できるのはサーバーサイドの処理のみ
– onClientLoadのみクライアントサイドが記述可能
実行順序は次ページ参照
101
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
ページイベントの実行順序
新規アクセス(GET)
ライフサイクルのフェーズ
継続アクセス(POST)
Restore View
beforePageLoad
afterPageLoad
afterRestoreView
Apply Request Value
Process Validations
Update Model Value
beforeRenderResponse
afterRenderResponse
Invoke Application
Render Response
beforeRenderResponse
afterRenderResponse
onClientLoad(CSJS)
102
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
文書イベント
文書イベントは７つ
– queryNewDocument
– queryOpenDocument
– querySaveDocument
– postNewDocument
– postOpenDocument
– postSaveDocument
– computeDocument
それぞれ文書に対して操作を加えたタイミングで発生
[データ]-[イベント]タブから文書に関するイベントが記述可能
–
103
実行できるスクリプトはすべてサーバーサイド
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
NotesとXPagesのページイベント/文書イベントのマッピング
1対1では対応しない
Notesフォームイベン
ト
XPagesで対応するイ
ベント（候補）
Notesフォームイベン
ト
XPagesで対応するイ
ベント（候補）
QueryOpen
Querymodechange
なし（文書モードの変
更に紐づけて実行）
PostOpen
queryNewDocumen
t/queryOpenDocu
ment/beforePageL
oad
postNewDocument
Postmodechange
なし（文書モードの変
更に紐づけて実行）
Queryrecalc
afterRestoreView
Querysend
なし（sendを行うロジッ
クの前に記述）
Postrecalc
computeDocument
またはなし
Postsend
なし（sendを行うロジッ
クの後に記述）
Querysave
querySaveDocume
nt
Queryclose
なし(CSJSの
onUnLoadなど）
Postsave
postSaveDocument
104
/postOpenDocume
nt/afterPageLoad/o
nClientLoad
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.XPagesの実行順序
新規アクセス(GET)
サブミット（POST）
queryNewDocument
イベント-CSJS実行-
フォーム検証（文書ロード時）
RestoreView
afterRestoreView
postNewDocument
computeDocument
beforePageLoad
RestoreView
beforeRenderResponse
Render
Resnponse
妥当性検査
イベント-SSJS実行-
ページ読み込み時に計算
afterPageLoad
コンバーター
Process
Validations
querySaveDocument
Invoke
Application
フォーム検証（文書保存時）
(文書の保存)
動的に計算
postSaveDocument
(HTMLレンダリング)
computeDocument
afterRenderResponse
beforeRenderResponse
value-動的に計算-
onClientLoad（ＣＳＪＳ）
Render
Resnponse
(HTMLレンダリング)
afterRenderResponse
文書イベント
ページイベント
値の計算のタイミング
その他
検証により確認。POSTするときに文書を保存する前提。http://goo.gl/Y3IhJも参照推奨
105
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.XPagesでのCGI変数/URLコマンド
XPagesでのCGI変数でのアクセス方法
– How to access CGI variables in XPages
– http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-cgivariables.htm
Domino URL コマンドと同様 XPagesでもURLによる操作が可能
–
–
–
106
データソースのプロパティに関連したパラメータを用いる
参考.XPages データソース解説 - URL パラメータ
http://goo.gl/qn3Gr
参考.デザイナーヘルプ『data - データソース』
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.XPagesでのHTMLタグの書き方
計算結果フィールドコントロールを利用して動的に出力する
– XPages コントロールの紹介：「計算結果フィールド」コントロール
– http://goo.gl/ue4mn
ビューの列の出力をHTMLにする
– XPages のビューコントロールのリンクを別ウインドウで開くようにする
– http://goo.gl/yuX8U
直接記述する
– XPages における範囲指定要素： <DIV> と <SPAN>
– http://goo.gl/gGvnY
– How can I use native html tags inside XPages?
– http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-using-nativehtml-tags.htm
107
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
まとめ
XPagesはNotesをWeb化する際にも開発生産性が高い
– Upgrade Pack 1では豊富なコントロールを追加
•
画面作成を容易にするアプリケーションレイアウトコントロール
–
•
Noteｓのピックリスト/宛先リストやダイアログもコントロールで実装可能
–
•
–
Dojoを用いずともリッチなUIが開発可能
モバイル対応も容易
部分更新
•
html + CSSでデザインを一から行う必要はない
Webサービスを開発することなく、部分更新が実装可能
ただし、NotesDBをXPages化するためには、Notesの幅広い技術要素とXPagesの
対応を知る必要がある
– 幅広いXPagesの理解があるとよりよい
XPages 技術者コミュニティー
http://goo.gl/cQtYp
• IBM XPages Japan イケヤマ君のつぶやき
http://ja-jp.facebook.com/xpagesjapan?sk=app_206014466086412
•
108
ぜひまず１つNotesDBのXPages化の設計・開発をしてみてください！
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.XPagesのヘルプ
Standard版のみ参照可能
Lotus Domino Designer User Guideの
一部とLotus Domino Designer XPage
のリファレンスに記載
109
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ヘルプ以外の情報源①
Lotus Notes and Domino Application Development wiki
– XPagesの情報はwikiに多く掲載されている。
•
•
日本語のカテゴリ
http://goo.gl/2kg8l
XPages リンク集
–
•
各コントロールやOneUIの解説などへのリンク集
http://goo.gl/ZD6sp
Domino Designer XPages Extension Library(英語)
http://goo.gl/engyS
•
API Documentation(英語)
http://goo.gl/wzqjz
XPages開発のお供に「Demonstration Application for XPages」
http://goo.gl/cMg2k
Notes 開発者のための XPages SSJS 解説
•
SSJSサンプルコード(英語)
•
•
http://goo.gl/QHTZ6
–
“クラス名” + “sample JavaScript code for XPages ” というタイトルで各クラスのサンプルコードがある
http://goo.gl/qk4Bv
※ページを開いたタイミングでエラーが表示される場合は、各ページをタイトルで検索しなおしてくだ
さい
110
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ヘルプ以外の情報源②
Developer Works Lotus/Notes Domino
– 主にアプリケーション開発の項目に多くのXPagesの情報を掲載
http://www.ibm.com/developerworks/jp/lotus/products/lnd/
– Lotus Domino 8.5.1 を使用した Domino Web アプリケーションの構築
http://goo.gl/Am2fa
–
チュートリアル
•
XPages入門
http://www.ibm.com/developerworks/jp/lotus/education/xpages/
•
新人SEが学ぶ XPages
http://goo.gl/S4uwc
•
111
Lotus Domino Designer での XPages 機能の活用
http://www.ibm.com/developerworks/jp/lotus/education/ls-ddxpages/
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ヘルプ以外の情報源③
112
XPages技術者コミュニティー
– ディスカッションやwiki/ファイルなどを共有
http://goo.gl/ApvMS
XPages.Info
– サンプルアプリの操作が可能。一部のサンプルはDL可能
http://xpages.info/XPagesHome.nsf/DemosJapan.xsp#
OpenNTF
– http://www.openntf.org/blogs/openntf.nsf/d6plinks/NHEF-8427T9
© 2012 IBM Corporation
既存NotesアプリケーションのXPages化におけるポイント
参考.ヘルプ以外の情報源④
テクてく Lotusコミュニティー
– テクてくLotus 技術者夜会の資料を公開。デベロッパー編にはXPagesのハンズ
オンなどがある
http://goo.gl/XH0mk
ICS Business Partner Technical Enablement team Japan Blog
– XPagesのTipsや製品の最新情報の提供など
http://goo.gl/uCLNw
notes/domino liaison
– Teamstudio社のテクニカルディレクター、加藤氏のサイト
•
113
XPagesのチュートリアル、Tipsなども掲載
http://notesdominoliaison.blogspot.com/
© 2012 IBM Corporation