XPages 開発 Tips 百連発

5-A
1-A

XPages 開発 Tips 百連発
チームスタジオジャパン株式会社
Technical Director
加藤満

@katoman

1
Domino Designer 8.5.x

• どこで入手？
- http://www.ibm.com/developerworks/downloads/ls/dominodesigner/
- IBM ID が必要

2
Domino Designer パフォーマンス
Google検索で「notes 8.5」と入れると「notes 8.5 重い」と候補があがってきます。そんなあなたに。。。

• jvm.properties
- <Notesディレクトリ>framework¥rcp¥deploy

• vmarg.Xmx=-Xmx256m
- Eclipseクライアント上の最大メモリー

• vmarg.Xms=-Xms48m
- Designerの最初の起動時にアサインされるメモリーサイズ
128
256
768
1024
など16の倍数を

3
Domino Designerのメモリ消費

• プリファレンス
- [一般] - ヒープ・ステータスを表示
- 左下にヒープサーズ表示
- 次回Designer起動時には表示されないので注意

4
エディターの行番号表示

• プリファレンスより
- [一般] - [エディター] - [テ
キストエディター]

5
エラー表示の設定

• アプリケーションプロパティ
‒ 「XPages実行時エラーページを表示」をチェック

6
Firefox、Firebug

• Web開発者ツールやプラグインを利用

7
設計 vs ソース

• 初心者のうちは設計パネル。慣れてくると設計パネルは
あまり使わなくなるってホント？
- ソースにもコントロールをドラッグ＆ドロップできる
- 複雑な入れ子（階層構造）のソースにドラッグ＆ドロップしても意図し
た場所に入らない場合もしばしば
- 上級者はドラッグ＆ドロップせず<xp: xxxx>タグから直接書き出
す。。。らしい。

小ネタ
設計タブ、ソースタブの切り替えショートカットは
CTRL-SHIFT-PageDown (または PageUp)

8
スコープ変数

• ライフスパンを理解しましょう
- applicationScope
- sessionScope
- requestScope
- viewScope

詳細は「XPages のスコープ変数の有効範囲とタイムアウト」 (wiki)で
http://XPag.es/?scopevaliables

8
スコープ変数

• ライフスパンを理解しましょう
- applicationScope
- sessionScope
- requestScope Pertial
- viewScope Refresh

詳細は「XPages のスコープ変数の有効範囲とタイムアウト」 (wiki)で
http://XPag.es/?scopevaliables

9
セッションタイムアウト

• applicationScopeとsessionScopeのタイムアウトは
アプリごとで指定可能

• タイムアウト > アイドル状態のセッションタイムアウト

10
カスタムコントロール

• カスタムコントロールの役割は、サブフォームによく似
ています。 XPage XPage XPage
CC CC CC CC CC CC CC CC CC

CC CC CC CC CC CC CC CC CC

• 以下を効果的に使う
- 編集可能領域(ファセット)
- カスタムプロパティ(compositeData)
• カスタムコントロールは、ページ上のある領域を持つも
のだけではない。例えば、ボタン、リンク、スクリプト
だけ、などなど

11
編集可能領域

• 編集可能領域はそのXPage特有のコントロールを配置す
る際に使用します。
カスタム
XPage
コントロールソース

•

12
カスタムプロパティの使用

• カスタムコントロールのプロパティ定義
- それぞれのXPageに固有のパラメーターを渡したいときに使用

カスタム
コントロールソース

13

• カスタムプロパティに値を設定
- XPage内のカスタムコントロールをハイライト
- カスタムプロパティに値（パラメーター）を指定

XPage

14

• カスタムプロパティをJavaScriptで利用
- 受け側のXPageは「compositeData」グローバルオブジェクトとして
カスタムプロパティの値をどこからでもアクセス可能

XPage

15
カスタムコントロールの設計定義
XPageにたくさんのカスタムコントロール。どれがどれだかわからなくなる!？

• カスタムXSPマークアップでイメージを指定
- 例はディスカッションテンプレート参照

16
スコープ変数の値の確認

• 次のカスタムコントロールを作成
• 確認したいXPageに追加
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:panel id="applicationVars" styleClass="debugPanel">
<xp:table styleClass="debug">
<xp:tr>
<th>変数名</th>
<th>値</th>
</xp:tr>
<xp:repeat id="varRepeat" rows="30"
value="#{javascript:applicationScope.keySet();}" var="scopeData">
<xp:tr>
<xp:td>
<xp:text escape="true" id="varName"
value="#{javascript:scopeData}" />
</xp:td>
<xp:td>
<xp:text escape="true" id="varValue"
value="#{javascript:applicationScope.get(scopeData)}" />
</xp:td>
</xp:tr>
</xp:repeat>
</xp:table> ※このコードはapplicationScopeだけです。
</xp:panel>
sessionScopeなど他の変数をみたい場合はコードを変更してくださ
</xp:view>
い。

17
ノーツビュー列のプログラム名を確認

• 式で計算している列は「$<数値>」というプログラム名
• このプログラム名はデータバインディングする際に使用
される

18
コントロールの可視(表示)プロパティ

• ノーツフォーム上の非表示(式)とは異なるので注意
- rendered オプション
- HTMLとしてレンダリングするかしないか

• レンダリングしてXPage上でデータを保管するなど操作
が必要な場合は「非表示の入力(inputHidden)」コント
ロールを使用

19
複数値のフィールドをバインドするコントロール

• XPageで入力した値を複数値として扱う
- [すべてのプロパティ] - [multipleSeparator]にカンマなどの区切り記
号を指定

20
Panelコントロール、Divコントロール、div

<xp:panel id="panel1"></xp:panel>
XPage
<xp:div id="div1"></xp:div>
ソース <div></div>

<div id="view:_id1:panel1"></div>
HTML <div id="view:_id1:div1"></div>
ソース <div></div>

• Panelコントロールを使用する場合
- データバインディングがある場合

• Divコントロールを使用する場合
- 主にその領域の可視（レンダリング）をコントロールしたい場合

• HTMLのdivを使用する場合
- 単なる領域を指定する場合

21
サーバーサイドJavaScript

• 利用可能なライブラリ
http://XPag.es/?library

グローバルオブジェクトオブジェクト名から直接アクセス可能。使用時に事前の宣言不要。

例）database

グローバル関数グローバルオブジェクト同様、宣言なく直接利用できる関数。

DOM XML文書を表す

Domino Dominoバックエンドにアクセスできるライブラリ

Runtime グローバリゼーションに役立つメソッドを提供

Standard 型の異なるデータを操作し、共通の演算を実行するためのクラスなどの標準ラ
イブラリ

XSP LotusScriptのUIクラスをほぼ同等。加えて、ブラウザコンテキストにアクセス
するクラス群

@Functions Lotus Notes の@関数をエミュレート
http://XPag.es/?atFunctions

22
グローバルオブジェクト

• SSJS主要コンポーネントのひとつ
- XPagesアプリケーションでSSJSを使ってどこからでも参照可能なオ
ブジェクト http://XPag.es/?globals
- つまり、宣言なく直接メソッドコール、プロパティアクセス可能、
そして予約語
- context
- database
- session
- applicationScope/sessionScope/requestScope/viewScope
- facesContextなどのJSFオブジェクト
Lotus Dim session As New NotesSession
Dim username As String
Script
username = session.Effectiveusername

SSJS
var username = session.getEffectiveUserName();

23
XPagesでサポートされない@Functions

• 「List of Formula Not Supported In XPages 」
- http://www-10.lotus.com/ldd/ddwiki.nsf/dx/List_of_Formula_Not_Supported_In_XPages

24
独自@Functionの作成

• サーバーJavaScriptライブラリ作成
function @GetMyFuction(parameter){

return @Left(paramter,"")

}

• XPage/カスタムコントロールに作成したスクリプトラ
イブラリをリソースとして取り込む

25
LotusScript er に贈るJavaScriptの基本

• JavaScriptは大文字小文字を区別
‒ 始めた頃によくやる間違い例 @DBTitle() (正)@DbTitle()

• 変数名、独自で作成する関数名の命名
‒ <小文字始まり><大文字始まり>が基本
• 例 startDate、endSubmitDate

• @Functionsでは必ず()が必要。例 @Now()
• = は値をセット、値の比較は==
• @Functionsのパラメーターの区切りはセミコロン(;)で
はなくカンマ(,)
• @Functionsのパラメーターは、従来のものと同じとは
限らない

26
ソースの読み解き - Expression Language (EL)

<xp:inputText id="inputText1" value="#{document1.Name}">
</xp:inputText>

• dot notation (.) で次のオブジェクトにバインド
- NotesXSPDocument
- NotesXSPViewEntry
- スコープ変数

27
ソースの読み解き - SSJS

#{javascript:database.getProfileDocument("Configuration","Server")}

• javascript: で始まる

•#と$
- #{....} や ${....}
- # はダイナミック（動的に計算）
- $ はスタティック（ページの読み込み時に計算）

28
ソース読み解き- CDATAセクション

<![CDATA[#{javascript:database.getProfileDocument("Configuration","Server")}]]>

• XMLマークアップの指定と解釈されないようにするため
の記述でXML一般に用いられている
- <![CDATA[....]]>

29
ソースの読み解き

<xp:this.data>
<xp:dominoDocument var="document1" formName="Contact"></
xp:dominoDocument>
</xp:this.data>
<xp:button value="ラベル" id="button1">
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><!
[CDATA[document.getElementById("#{id:elementID}").innerHTML;]]></xp:this.script>
</xp:eventHandler>
</xp:button>
<xp:inputText id="inputText1" value="#{document1.Name}">
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><!
[CDATA[#{javascript:database.getProfileDocument("Configuration","Server")}]]></
xp:this.action>
</xp:eventHandler>
</xp:inputText>
</xp:view>

30
データベース参照の指定(データバインディング)

• 外部のデータベースを参照する場合
@Name("[CN]",@Subset(@DbName(),1)) + "!!" + "another.nsf"

• 現在のデータベースのパス(フォルダ+ファイル名)
database.getFilePath() Test¥dev¥Test.nsf

• 現在のデータベースのがあるフォルダ名だけを取得
@LeftBack(database.getFilePath(),"") Test¥dev
- または

database.getFilePath().split(database.getFileName())[0] Test¥dev¥

31
@DbColumnと@DbLookup

• 最初のパラメーター（サーバー、ファイルパス）は配列
- 同じデータベース内のビューであれば @DbName() で
@DbName() CN=bootcamp/O=XPagesChannel,Lesson42NamePicker.nsf

@DbName()[0] CN=bootcamp/O=XPagesChannel

または @Subset(@DbName(),-1)

@DbName()[1] Lesson42NamePicker.nsf

または @Subset(@DbName(),1)

- 他のデータベース

var db:NotesDatabase = new Array(@DbName()[0], "names.nsf");
@DbColumn(db, "(People)", 2)

32
@DbColumnと@DbLookupの戻り値

• 取得した戻り値が一つの場合はString型、複数の場合は
配列で返ってくる
- その戻り値を使ってJavaScriptで続きの処理をするような場合、型が
厳密なJavaScriptではエラーになる可能性が高いので、型の判断を入
れるなど注意が必要

33
ノーツエージェントの呼び出し1

• XPageで保存した文書を対象に処理をする
‒ 文書を保存した後のpostSaveDocumentイベント
var agent = database.getAgent("agent_name");
var noteid = dominoDoc.getDocument().getNoteID();

agent.run(noteid)
あるいは
agent.runOnServer(noteid)

呼び出される
エージェント

Dim session As New NotesSession
Dim agent As NotesAgent
Dim doc As NotesDocument
Set agent = session.CurrentAgent
Set doc = session.CurrentDatabase.getDocumentById(agent.parameterDocId)
......

注意：エージェントの基本タブにある「対象」を「なし」に設定すること！

34
ノーツエージェントの呼び出し2

• メモリー上の文書に対して(8.5.2∼)
- agent.runWithDocumentContext(doc:NotesDocument)

呼び出される
エージェント

Dim session As New NotesSession
Dim doc As NotesDocument
Set doc = session.DocumentContext

35
SSJS上で使用する変数型宣言

• 変数名:<Dominoオブジェクト>
- 例） var doc:NotesDocument =
- 必須ではない（動作しないわけではない）が、より型が厳密な
JavaScriptの記述では推奨
- 一番のメリットはメソッドの補完機能が使用できる

var doc = database.getDocumentByUNID(docId);

var doc:NotesDocument = database.getDocumentByUNID(docId);

36
UnprocessedDocuments

• XPagesにはNotesDatabaseクラスの
UnprocessedDocumentsに該当するものがない。ど
うする？
(1) getComponentを用いてビューコントロールをオブジェクトとして取得

(2) ビューコントロールのメソッドであるgetSelectedIds()を用いて、選択文書のNoteIDを取得

(3) NoteIDをキーに、databaseオブジェクト(NotesDatabaseクラス)から文書を取得する

var viewPanel=getComponent("viewPanel1");
var docIDs=viewPanel.getSelectedIds();
for(i=0 ; i < docIDs.length ; i++){
var docId = docIDs[i];
var doc:NotesDocument = database.getDocumentByID(docId); // 選択文書への処理
doc.recycle();
}

37
XPage上のコントロールがもつ値へのアクセス

SSJS getComponent("control_name").getValue();
getComponent("control_name").setValue("value_to_set");

Client
document.getElementById("#{id:elementID}").value;
JS

計算結果フィールドの場合
document.getElementById("#{id:elementID}").innerHTML;

38
XPage上のノーツフィールドへのアクセス

• フロントエンド
fieldValue = document1.getItemValue("field_name");

document1.replaceItemValue("filed_name", "value_to_set");

※ document1はデータソース名

• バックエンドNotes文書の値
var doc:NotesDocument = datasourcename.getDocument();

fieldValue = doc.getItemValue("field_name")

doc.replaceItemValue("field_name", "value_to_set");
※ datasourcenameはバックエンドNotes
文書のデータソース名

39
getItemValue...

• フィールドの型に合わせた関数を使用
- getItemValueString
- getItemValueInteger
- getItemValueDate
- ....

40
recycle()

• Dominoライブラリのオブジェクト使用後、明示的にメ
モリーを解放を推奨
- Lotus Notes/DominoオブジェクトはJVMのガベージコレクションの
対象外

41
妥当性検査

• 入力フィールドの妥当性検査は「妥当性検査」タブの項
目だけではありません
- Validation on an XPage http://XPag.es/?1696
-

42
妥当性検査 - Validate Expression

• 入力コンポーネントに対する妥当性検査ロジックに使用
http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson21

try{
var number = getComponent("serialNumber1").getSubmittedValue();
var vw:NotesView = database.getView("BySerialNumber");
var key:java.util.Vector = new java.util.Vector();
key.add(number);
var product = vw.getDocumentByKey(key,true);
if (product == null){
// 重複なし。OK
return true;
}else{
if (product.getUniversalID() == docProduct.getDocument().getUniversalID()){
//合致したレコードは現在編集中のこの文書、OK。
return true;
}else{
//同じ商品番号のレコードあり。
return false;
}
}
}catch(e){
_dump(e);
return false;
}

43
妥当性検査 - まとめて検査

• ノーツフォーム設計のQuerysaveイベントに書いていた
ロジックと同じようにしたい場合
- まとめてエラーを表示する計算結果コンロトール作成(HTML表示)
- 妥当性検査のロジックを記述
http://www.xpageschannel.com/
channel.nsf/detail.xsp?course=lesson21

44
JavaScript エラー処理

• try ∼ catch
try {
<ここに実行処理>
} catch(e) {
<ここにエラー処理>
}

try {
database.getDocumentByUNID(docid)
} catch(e) {
print("エラー："+e);
}

45
SSJSのデバッグ

• print() println() で変数などコンソールに出力
<xp:button id="button1">
<xp:this.value>
<![CDATA[print() & println()]]>
</xp:this.value>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action>
<![CDATA[#{javascript:print(@Now());
print("UserName: " + @UserName());
println("Database Name: " + database.getFileName());}]]>
</xp:this.action>
</xp:eventHandler>
</xp:button>
</xp:view>

46
Domino DesignerでローカルHTTP

• Domino DesignerからローカルDBをブラウザでプリ
ビューすれば自動的にローカルのHTTP立ち上がる

• ローカルHTTPサーバー「コンソール」の立ち上げ
‒ Notes.ini にDebug_Console=1
• デバッグ時に役立つ
‒ nhttp -preview
• Notesクライアント/Domino Designerを閉じる
• DOSコマンドでノーツプログラムフォルダー
• 「nhttp -preview」
• ユーザーパスワードの入力

47
メモリ/CPUプロファイラー

• OpenNTFプロジェクト
- 本日基調講演のPhilippe Riand氏のコントリビューション
- http://www.openntf.org/projects/pmt.nsf/ProjectLookup/
XPages%20Toolbox

48
Notes Speciﬁc - ロール

• @UserRolesは使用できない。ロールはよく非表示式で
使用されているが...
- context.getUser().getRoles() ※戻り値 java.util.List 型
- 例 [Admin]のロールを持っているかの判定(trueかfalse)

var roleList = context.getUser().getRoles();
return roleList.contains("[Admin]")

ちなみに、java.util.Listの戻り値をもつ SSJS メソッドは他に
✦getGroups メソッド (DirectoryUser)
✦getAttachmentList (NotesXspDocument)

contains以外の java.util.List のメソッドは
✦get (リスト内の指定位置にある要素取得)
✦indexOf (指定要素がリスト内で最初に検出された位置インデックス)
✦size (リスト内の要素数)
など

49
XPage上のアクセス制御

• XPage/カスタムコントロールまたはパネルに対して指
定が可能
- これは非表示ではなく、あくまでアクセス制御
- 指定できるタイプ
- USER
- GROUP
- ROLE
- ORGUNIT
- ORGROLE
- DEFALUT
- ANONYMOUS

50
Notes Speciﬁc - プロフィール文書

• getProfileDocumentで取得可能
var doc:NotesDocument = database.getProfileDocument("DbConfig", name);

• ノーツクライアントからのように値のセットはXPages
からできない。

51
Notes Speciﬁc - 返答文書の作成

• ボタンのシンプルアクションに別のXPageを開いて返答
文書作成

document1.getNoteID()

• 主文書を読み取りモードで開いているページ内に、編集
モードで開いた返答文書
var doc:NotesDocument = currentDocument.getDocument();
var response:NotesDocument = database.createDocument();
response.appendItemValue("Form", "Response");
response.appendItemValue("Subject", "AAAA");
response.makeResponse(doc);
response.save();

52
Notes Speciﬁc - フィールドの値の引き継ぎ

• 主文書から返答文書作成時に主文書の値を引き継ぐこと
がよくある
- XPageそのものの中に値を引き継ぐという機能は用意されていない

• ひとつのアプローチとしてsessionScope変数に元文書
IDやフィールド値を代入
- postNewDocumentイベントで引き継ぐ元文書の内
容を引き継ぎ先のコントロールへ代入

53
同一ページで読み取りモードと編集モード

• [Use Case] ひとつのXPageに主文書と返答文書投稿を
表示したい場合
- ひとつのXPageで複数の文書にバインディングできる
- 「ignoreRequestParams」を「true」に
- 注意：XPage/カスタムコントロールレベルでのデータバインディングを使用しないよ
うに（パネル上にバインディング）

54
Notes Speciﬁc - 読者名フィールド

• 読者名ってXPageでも有効なの?
- XPagesのコントロールには名前フィールドに対応するコントロールは
ありませんが、編集ボックスフィールドにバインドすれば期待通りの動
作をします！
- ただし、従来からあるように読者名、作成者名フィールドに格納する型
変換に注意が必要。[Canonicalize]形式で。
- さらに、XPageから新規文書を作成する場合には
- データソースのComputeWithFormを「onsave」

55
Notes Speciﬁc - 読者名フィールドにロール

• onsaveだけでは、『?』の場合、やはりsetAuthors、
setReadersが便利
- ロールを追加したいなど

var doc:NotesDocument = document1.getDocument();
var authors = new Array("[AdminEditors]");
var user:String=session.getEffectiveUserName();
authors.push( user );
var authitem:NotesItem = doc.replaceItemValue("Authors", authors );
authitem.setAuthors(true);

var readitem:NotesItem = doc.replaceItemValue("Readers", "[AdminReaders]" );
readitem.setReaders(true);

56
ビューコントロールのデータ絞り込みのプロパティ

• categoryFilterプロパティ
- 「¥」で区切り多段階フィルタ可能

• keysプロパティ、startKeysプロパティ
- 多重キーは java.util.Vector 型で指定

var keys = new java.util.Vector();
keys.add("value_1");
keys.add("value_2");
return keys;

57
ビューの一行おきの色指定

• ビューコントロールのスタイル rowClasses
- スタイルクラスを指定、指定した数だけ反復

- スタイルシート

.oddrow {
background-color: rgb(248,248,248);
}
.evenrow {
}

58
ノーツビューを繰り返しコントロールで使用

• 基本形
- コレクション名指定例）viewEntry

• フィールド名指定の場合
- viewEntry.getColumnValue( field_name )

• 列番号指定の場合
- viewEntry.getColumnValues()[0]
- viewEntry.getColumnValues()[1]

59
ビューの全文検索

• 全文検索のロジックは至って簡単！
- ポイントはビューコントロールの「search」プロパティ

60
全文検索機能 - 検索ボックス

• 検索文字を入力する編集ボックスコントロール
- 検索結果を表示する次のページに入力内容を渡すためのスコープ変数と
して使用できるように指定

61
全文検索機能 - 検索ボタン

• 検索ボタン
- onclickイベントでページを開くシンプルアクション作成

- ページは値の計算で次のスクリプト

"search.xsp?searchValue=" + viewScope.searchValue;

63
全文検索機能 - ビューコントロール

• searchプロパティ
- URLのパラメーターを指定

63
全文検索機能 - プラスα

• データベースに全文作成が作成されていないと実行時エ
ラーになります
- 全文索引作成の有無をチェック
- 無い場合は検索ボックス・ボタン非表示

database.isFTIndexed();

• 検索にヒットした検索が０件だった場合、ビューのヘッ
ダー・フッターが表示されるだけ

- ヒット件数なしを表示する計算結果フィールドかラベルコントロールを
作成。その可視プロパティに次のスクリプト。
getComponent("viewPanel1").getRowCount() < 1

65
ディスカッションテンプレートのカスタマイズ

• テンプレートdiscussion8.ntfは他言語対応されている
- 設計そのものは英語で作成されている
- アプリケーションのプロパティ - XPageタブのローカリゼーション
オプション
- 不要言語削除
- パッケージ・エクスプローラーからxxxxx_ja.propertiesファ
イル内の固定文字を変更

65
プロパティファイル上のダブルバイト文字

• 日本語を使用するためには、日本語をJavaのUnicode
に変換する必要がある
- native2ascii (http://java.sun.com/j2se/1.4/ja/docs/ja/tooldocs/
win32/native2ascii.html)

ServerName=bootcamp/Teamstudio
DbTitle=u9867u5ba2u30c7u30fcu30bfu30d9u30fcu30b9
DbLocation=Lesson41

• Eclipseのプラグイン「プロパティエディタ」が重宝
- http://propedit.sourceforge.jp/

ServerName=bootcamp/Teamstudio
DbTitle=顧客データベース
DbLocation=Lesson41

66
リソースバンダル

• プロフィール文書の代わりにデータソース指定など
Configuration設定に使用
- 拡張子「.properties]のリソースファイル作成例）config.properties
- XPageのリソース->リソースバンダル作成、リソースバンダル名
- リソースバンダル名を使って値を取得

JavaScript

config.getString("DbPath")

67
部分更新

• 部分更新したい場所がページ上に散らばっているとき
は？
- XPage上の部分更新は通常ひとつのコントロールが対象（パネルな
ど）

- クライアントJavaScriptを使って個々のコントロールを複数指定して
部分更新させることができる
XSP.partialRefreshPost(id)

68
Web ページレイアウト

• 独自レイアウトでアプリを作成
- CSSフレームワークを利用

• OneUIを利用してアプリを作成
- 特にレイアウトの要件がなければOneUIを
- OneUI の利用(wiki): http://XPag.es/?1692
- Extension Libraryでさらに簡単に

69
CSS IDとClass

CSS ID Class

#para1 .para1
{ {
text-align: center; text-align: center;
color: red; color: red;
} }

HTML

<p id= para1 > <p class= para1 >
Hello World Hello World
</p> </p>

XPagesと相性がいいのは、ClassセレクタのCSS
XPageがHTMLにレンダリングされると、
styleClass= XXX は class= XXX に

70
OneUI

• IBM Lotus 製品(Webベース)で使用されている共通のUI
仕様
• IBM Lotus User Interface Developer Documentation - Version 2.1
- http://infolib.lotus.com/resources/oneui/2.1/docPublic/index.htm
- http://XPag.es/?168E (wiki XPages における OneUI 情報)

71
テーマ設計

• アプリケーションレベルで必要なリソース
- スタイルシート
- JavaScript
- XPagesコントロールプロパティの設定

• テーマは通常次の3つから拡張
- webstandard - 一般的なWebsiteページを作成するとき
- oneui - OneUIのテーマを使用するとき
- notes - Notesクライアント

<theme extends="webstandard">
</theme>

72
CSSの読み込み - アプリケーションレベル

• テーマ設計で追加で使用するCSSを指定
• アプリケーションのプロパティで使用するテーマを指定
CSS

<resource>
<content-type>text/css</content-type>
<href>/screen.css</href>
</resource>
<resource rendered="#{javascript:context.getUserAgent().isIE(0,6) == true}">
<context-type>text/css</context-type>
<href>/ie.css</href>
</resource>
<resource>
<context-type>text/css</context-type>
<href>/application.css</href>
</resource>

JavaScirpt
<resource>
<content-type>text/javascript</content-type>
<href>clientjavascript.js</href>
</resource>

73
Faviconの実装

• テーマ設計に次のコード追加
<control>
<name>ViewRoot</name>
<property>
<name>pageIcon</name>
<value>/favicon.ico</value>
</property>
</control>

• Faviconの作成?
•例 http://www.chami.com/html-kit/services/favicon/

74
テーマ設計 - コントロール編

• dojoTheme、dojoParseOnLoadを「true」
<control>
<property>
<name>dojoTheme</name>
<value>true</value>
</property>
</control>
<control>
<property>
<name>dojoParseOnLoad</name>
<value>true</value>
</property>
</control>

• ページタイトルにデータベースタイトルを
<control override="false">
<name>ViewRoot</name>
<property>
<name>pageTitle</name>
<value>#{javascript:@DbTitle()}</value>
</property>
</control>

75
テーマの無効

• IBMが提供するCSSを使用したくない場合など
- ブランクの「テーマ」を作成
- 3つのCSS

76
Dojo の無効化

• さらにDojo以外のフレームワークを使いたいなど
- パッケージエクスプローラーから WebContent->WEB-INF
- xsp.propertiesファイルに次の一行を追加

xsp.client.script.libraries=none

77
Form の無効化

• さらにドミノと関係ない普通のHTMLページを作成した
い場合
- createForm を false

78
xsp.properties

• アプリケーションのプロパティ「XPage」タブにある項
目以外にもXPageに関する設定がたくさん。
- パッケージエクスプローラーから
- WebContent -> WEB-INF xsp.properties ファイル

http://XPag.es/?1682

79
Dojo ウィジェット使用時

• dojoParseOnLoad、dojoTheme を true

• リソースで使用するDojoモジュールを指定

80
Dojo Tooltip

• dijit.Tooltip を Dojo モジュールとして取り込み
• 基本形 <div dojoType="dijit.Tooltip" style="display:none"
connectId="id-of-element-to-connect-the-tooltip-to">
here is my tooltip
</div>

• サンプル
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
dojoParseOnLoad="true"
dojoTheme="true">
<xp:this.resources>
<xp:dojoModule name="dijit.Tooltip"></
xp:dojoModule>
</xp:this.resources>
<xp:label id="label1" value="テストラベル"></xp:label>
<xp:text escape="false" id="computedField1">
<xp:this.value><![CDATA[#{javascript:"<div dojoType=
"dijit.Tooltip"n" +
"connectId="" + getClientId("label1") + "" style="display:none;">
n" +
"これがツールチップですn" +
"</div>";
}]]></xp:this.value>
</xp:text>
</xp:view>

81
知っておきたいオープン技術 - JSON

• JavaScript Object Notation
- 軽量のデータ交換フォーマット
- http://www.json.org/json-ja.html
- Dojo ウィジェットへのデータ受け渡しなどでよく使用されるデータ形
式

82
知っておきたいオープン技術 - REST

• Representational State Transfer
- Webサービスのひとつ
- 一昔前はSOAP、今はRESTが主流になりつつある
- サービスを経由して、HTTPのGETメソッドでリクエストを送信すると
XML形式のデータを取得できるもの。
- 例えば、特定のURLにパラメーターを指定してリクエストを送ると商品
情報などを含むXMLデータ(あるいはJSONデータ)を取得できる

83
知っておきたいオープン技術 - OpenSocial

• http://www.opensocial.org/
• Lotus Notes Social Edition, IBM Connections
NEXT
- Activity Stream
- Embedded Experience

84
OpenNTF

• www.openntf.org

85
XPages Extension Library

• OpenNTF XPages Extension Library
- http://extlib.openntf.org/
- コミュニティに公開 - 実験的

• Upgrade Pack
- OpenNTF から安定したものを提供
- IBMのサポート
- http://www-06.ibm.com/software/jp/lotus/products/nd85/nd85-UpgradePack853-1.html

86
Extension Library - Mobile Controls

• Dojo Mobile フレームワーク
• コントロールをドラッグ&ドロップ、パラメータを設定s
るだけで簡単にモバイルWebアプリが作成できる
• iOS、Androidに対応
• チュートリアル
• http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tutorial_

• http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson33

87
Extension Library - OneUI Application Layout

• コントロールをドラッグ&ドロップ
- コードレス（プロパティ設定）でOneUIレイアウトを作成できる
-

88
Extension Library - Rest + Dojo Grid

• ビュー項目の内容をDojo Gridで表示、同時にon the
flyで修正

89
Extension Library - Value Picker、Name Picker

• ビューやアドレス帳から値を取得
- コントロールをドラッグ&ドロップしてパラメータを指定するだけ
- Dojo ダイアログのピッカーダイアログが表示される

90
Login/Logout
<xp:this.resources>
<xp:dojoModule name="dijit.Dialog"></xp:dojoModule>
</xp:this.resources>

<xp:link escape="true" id="banner_btn_login" styleClass="loginLink"
text="ログイン">
<xp:this.rendered>
<![CDATA[#{javascript:
var strLoginURL:String;
var strLogoutURL:String;
var contextPath = facesContext.getExternalContext().getRequest().getContextPath();
var requestURI = facesContext.getExternalContext().getRequest().getRequestURI();

strLoginURL = contextPath + "?login&redirectto=" + requestURI;
strLogoutURL = contextPath + "?logout&redirectto=" + contextPath;
return (@UserName() == "Anonymous")?true:false;}]]>
</xp:this.rendered>
<xp:eventHandler event="onclick" submit="false">
<xp:this.script><![CDATA[javascript:dijit.byId("#{id:showLoginDialog}").show();]]></xp:this.script>
</xp:eventHandler>
</xp:link>
<xp:link escape="true" id="banner_btn_logout" styleClass="loginLink"
value="#{javascript:return strLogoutURL}" text="ログアウト">
<xp:this.rendered>
<![CDATA[#{javascript:
return (@UserName() == "Anonymous")?false:true;}]]>
</xp:this.rendered>
</xp:link>

<xp:div dojoType="dijit.Dialog" id="showLoginDialog"
style="overflow:auto;" title="ログイン">
<xp:this.dojoAttributes>
<xp:dojoAttribute name="href"
value="#{javascript:strLoginURL}" />
</xp:this.dojoAttributes>
</xp:div>

91
CGI 環境変数へのアクセス
Domino HTTP ではフィールドまたはLotusScritエージェントを介してCGI変数を取得できた。XPagesでは？

facesContext.getExternalContext().getRequest().getXXXXXXXX();

• ディスカッションテンプレートに「xpCGIValiables」と
いうサーバーサイドJavaScriptライブラリ。取得の例は
「mainTopic」カスタムコントロールを参照
- 取得の例は「mainTopic」カスタムコントロール内のデータソース
querySaveDocumentイベント参照

• wikiでの説明
- http://www-10.lotus.com/ldd/ddwiki.nsf/dx/xpages-cgi-
variables.htm

92
ノーツ文書に添付された画像イメージの表示

• イメージをポイントするURLの基本形
- /0/<文書のUNID>/$FILE/<イメージのファイル名>

•例
- /0/ + viewEntry.getDocument().getUniversalID() + /$FILE/ +
viewEntry.getColumnValue( Image )
ビューにイメージのファイル名を表示する列「image」があるものとする
文書内の添付ファイル名を取得する@AttachmentNamesを使用

93
/.ibmxspres/

• Domino上のリソースファイル参照
- /.ibmxspres/domino/icons → <data>¥domino¥icons
- /.ibmxspres/dojoroot → <data>¥domino¥js¥dojo-1.x.x
- /.ibmxspres/dojojs → <data>¥domino¥js
- /.ibmxspres/domino/oneuiv2/images → <data>¥domino¥html
¥oneuic2¥images
- /.ibmxspres/global → <data>¥domino¥java¥xsp


<xp:image url="/.ibmxspres/domino/oneuiv2/images/ibmlogo.png"
id="image1">
</xp:image>
</xp:view>

94
URLの操作まとめ

• 別のURLへリダイレクト
- faceContext.getExternalContext().redirect( http://www.ibm.com )

• 別のXPageへリダイレクト
- context.redirectToPage( Page.xsp )

• 現在のパス取得
- faceContext.getExternalContext().getRequest().getContextPath()

• ページ名を含むフルパス取得
- faceContext.getExternalContext().getRequest().getRequestURI()

• 完全URL
- faceContext.getExternalContext().getRequest().getRequestURL()

• URLパラメーターの取得
- param.get( parameter_name )

95
XPagesでサービスエージェント(XAgent)

• 通常XPageはWebページを表示するものですが、ファ
イル出力(.txt、.xls、.csvなど)することもできます
- http://XPag.es/?169A
- http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson24

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
<xp:this.afterRenderResponse><![CDATA[#{javascript:
var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
var response = externalContext.getResponse();
// コンテンツのタイプをセット
response.setContentType("text/xml");
// response.setContentType("application/json"); JSON形式の場合
response.setHeader("Cache-Control", "no-cache");
// パラメーターの取得など
var param = context.getUrlParameter("myParam");
// HTMLの出力など
writer.write("<br></br>");
// writer.write("{'jsonvar'='jsonvalue'}");
writer.endDocument();
}]]>
</xp:this.afterRenderResponse>
</xp:view>

96
ソースコードコントロール

• Domino Designer 8.5.3からSubversionなどのソース
コードコントロールが利用可能に

- http://heidloff.net/home.nsf/dx/09152011024951AMNHEA28.htm
- http://heidloff.net/home.nsf/dx/09192011040807AMNHEBK6.htm
- http://www.xpageschannel.com/channel.nsf/detail.xsp?course=lesson29

97
XSP Client Object

• Client JavaScript - XSP Object
- XSP.addOnLoad()
- ページがロードされたときに実行するコード
- XSP.setSubmitValue(value)

• 現在はDojo主体
• 将来XPages独自の拡張
• 詳細
- http://XPag.es/?xspobject
- http://XPag.es/?CSJSinXPages

Dojoを使用するとき、
dojo.addOnLoad()を使用することも
ありますが、XSP.addOnLoad()は
XPageが完全にロードされたことを
保証していますのでXSPを使用することを
推奨します。

99
快適なXPagesライフのために

• フォローすべきTwitterアカウント
- @Lotus_BPTE
- @IBM_XPages_JP
- @xpagesinfo
- @XPages
- @xpagesblog
- @openntf

- 個人アカウントでつぶやく方もたくさん

• Website
- Lotus Notes/Domino Application Development wiki http://www-10.lotus.com/ldd/ddwiki.nsf/
- IBM developerWorks http://www.ibm.com/developerworks/jp/
- notes/domino liaison http://notesdominoliaison.blogspot.jp/
- IBM XPages Japan Facebook 公式ファンページ https://www.facebook.com/xpagesjapan
- XPages.info http://xpages.info/XPagesHome.nsf/Home.xsp
- XSnippets http://openntf.org/xsnippets
- OpenNTF http://www.openntf.org

I m with you 100

• notes/domino liaison
• XPagesChannel (@XPagesChannel Facebook)
• @katoman
• Google+

XPages 開発 Tips 百連発

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to XPages 開発 Tips 百連発

Similar to XPages 開発 Tips 百連発 (20)

More from Mitsuru Katoh

More from Mitsuru Katoh (17)

XPages 開発 Tips 百連発

Editor's Notes