特記事項 2 本資料の掲載内容は できる限り正確を期するように努めてはおりますが いかなる明示または暗黙の保証も責任も負いかねます 掲載情報は不定期に変更されることもあります 他のメディア等に無断で転載する事はご遠慮下さい 当資料をコピー等で複製することは 執筆者の承諾なしではできません 当資料に掲

今日から始める

XPages アプリケーション開発！

ノーツコンソーシアム オープンセミナー 2016 ハンズオン

XPagesDay 出張セッション

2016/11/09 株式会社ソルクシーズ 吉田 武司 Ver. 1.0.2

本資料の掲載内容は、できる限り正確を期するよう に努めてはおりますが、 いかなる明示または暗黙の 保証も責任も負いかねます。 掲載情報は不定期に変更されることもあります。他 のメディア等に無断で転 載する事はご遠慮下さい。 当資料をコピー等で複製することは、執筆者の承諾 なしではできません。 当資料に掲載された製品名または会社名は それぞれの各社の商標または 登録商標です。

特記事項

2

3

STEP 1



今年もやります！XPagesDay 2016

 XPages のどっぷりつかれる2日間です。11月21日（月）、22日（火）  Web セッションなのでネット環境があれば、参加できます。  詳しくは、ホームページをご覧ください。 • http://xpagesday.com/xpagesday.nsf/home.xsp

告知

4 豪華賞品が当たる！ かも？



今日から始める XPages アプリケーション開発

 XPages をまだ初めてない方、これから始めたい方を対象に、最初の取っ 掛りになるようなセッションにしたいと思います。  吉田武司 (株式会社ソルクシーズ)



XPagesで検索してみよう

 XPagesの場合の全文検索の実装方法について色々と解説してみます。  御代 政彦 (株式会社エフ)



XPagesでJava開発するぞ！

 Domino/XPages上でManagedBeanとMVCを使った本格Java開発の手法 をご紹介します。 XPagesの基盤技術であるJavaEE/JSFにも触れXpagesの理解を深めます。  米原 和之／田付 和慶 (ケートリック株式会社)

告知 11月21日（月）のセッション

5 初心者 すべて 中上級



標準コントロールを使わないXPages開発

 「Bootstrap」と「jQuery」を使い、XPages知識がなくても開発できる手法を ご紹介します。  西 雄樹 (リコーITソリューションズ株式会社)



私がハマった失敗例

 私がXPagesの開発でつまづいたケースをいくつかご紹介します。皆様は 大けがされませんように・・・  谷口 望 (株式会社ライブネス)



【開発事例】XPagesで作る動画閲覧サイト

 XPagesであなたの「tube」を作って、現場での作業やルール・教育方法を 統一、新入社員等の理解度の向上を図りませんか？  小野 誠 (エームサービス株式会社)



今年もやります！どこよりも早い XPages 最新情報！

 XPages on Bluemix から App Modernization としての提供が予定されてい る XPages の最新機能までをデモを交えて紹介します  佐藤 淳 (日本 IBM 株式会社)

告知 11月22日（火）のセッション

6 中上級 すべて すべて すべて



ノーツアプリケーション

1. 修正・開発したことがある？



XPages アプリケーション

1. 今日が初めて？ 2. 練習をしたことがある？ 3. アプリケーションを開発したことがある？ 4. 拡張ライブラリのアプリケーションレイアウトを使用したことがある？

開発経験は？

7



これから XPages を始める方への取っ掛かりになるようハンズオ

ンにしたいと思います。



90分の限られた時間のため、極力プログラミング要素を除外し

た仕様となっています。

 標準機能を積極的に使用  事前に用意したノーツアプリケーションを XPages 化



XPages 開発に慣れてきたら、プログラミングを含めた次のステッ

プに挑戦してみてください。

本日の課題のレベル感

8



バージョン

 Domino 9.0.1 FP3 （FP5でも確認済み）  Notes 9.0.1 FP5



資料およびアプリケーション（NSF）は公開しています。

 テキスト • http://www.slideshare.net/chemp7/2016-xpagesday-2016  アプリケーション（NSF） • https://goo.gl/Q9WcjS または https://www.ibm.com/developerworks/community/files/app#/file/b37521a1-1dc2-4667-9e31-78e2b13ca71d （リンク先は同じです） • 署名、適切なACL/ECLを設定してご利用ください。 • 検索機能を使うには、事前に全文索引を作成しておく必要があります。 • ファイル構成  demo.nsf （XPages 化する前のアプリケーション）  demo1.nsf （XPages 化途中のアプリケーション）  demo2.nsf （XPages 化後のアプリケーション）  demo3.nsf （XPages 化後、追加でカスタマイズしたアプリケーション）

環境

9



本来ならば、

_CSS

を使用した方が良いのですが、最初からすべて

を覚えるのは大変です。

 Cascading Style Sheets（CSS、カスケーディング・スタイル・シート、カス

ケード・スタイル・シート）とは、HTML や XML の要素をどのように修飾 （表示）するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を 分離させるという理念を実現する為に提唱されたスタイルシートの、具体 的な仕様の一つ。

Wikipedia 「Cascading Style Sheets」より要約 最終更新 2016年10月6日 (木) 18:15



よって、今回は直接的には CSS を使用しないで作成を行います。

 実際には、後述のテーマで間接的には利用しています。



その代わり、標準で用意されている

「テーマ」と拡張ライブラリの

「アプリケーションレイアウト」

を使用します。

XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな 技術であり、Domino Designer を使用して開発する。

NSF ファイルに新たな設計要素として XMLで表現される XPage が追加された。

XPages は JavaServer Faces をベース技術として採用し、HTML、JavaScript、スタ

イルシートなどの_{標準的な Web のプログラミングモデル}を取り入れてアプリ

ケーション開発を行える。

Domino で実行されるサーバーサイド JavaScript (SSJS) も提供され、Notes アプ

リケーションのオブジェクトにアクセスすることも可能。

Web ブラウザでの実行だけではなく Notes クライアントからも使用可能。

 XPages in Notes client (XPiNC)

 スタンダード版クライアントのみです

Wikipedia 「XPages」より要約 最終更新 2013年7月11日 (木) 16:54

XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな 技術であり、Domino Designer を使用して開発する。

NSF ファイルに新たな設計要素として XMLで表現される XPage が追加された。 XPages は JavaServer Faces をベース技術として採用し、HTML、JavaScript、スタ

イルシートなどの_{標準的な Web のプログラミングモデル}を取り入れてアプリ ケーション開発を行える。

Domino で実行されるサーバーサイド JavaScript (SSJS) も提供され、Notes アプ

リケーションのオブジェクトにアクセスすることも可能。

Web ブラウザでの実行だけではなく Notes クライアントからも使用可能。

 XPages in Notes client (XPiNC)

 スタンダード版クライアントのみです

Wikipedia 「XPages」より要約 最終更新 2013年7月11日 (木) 16:54



本資料では、基本的に以下のように表現しています。

 他の資料では違う場合があります。ご了承ください。  XPages • XPages 技術、アプリケーションなど全般的な意味  XPage • データベース（アプリケーション）の設計要素である「XPage」  ブラウザで表示する Web ページもこの設計要素です。

XPages と XPage

13



Domino Designer

 アプリケーションの開発



ブラウザまたはノーツクライアント（スタンダード版）

 アプリケーションの動作確認



Domino サーバー

 アプリケーションの実行



データベース（アプリケーション）

 本日のお題：アンケートDBの XPage 化

開発に必要なもの

14



XPage を利用するには、２つの方法があります。

 ノーツクライアント（スタンダード版）  ブラウザ

利用方法

15 ブラウザ ドミノサーバー ノーツクライアント ノーツクライアント ローカルにレプリカ



サーバー文書

 セキュリティ－可能なプログラムの制限 • 制限なしで署名または実行 • 呼び出したユーザーとして実行するエージェントとまたは XPage を署名 開発者のユーザーまたはグループを設定  ノーツクライアント（スタンダード版）のみでもローカルで実行可能です。

• XPages in Notes client (XPiNC)

ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です。

ACL に「Anonymous」を追加し、「作成者」以上の権限を付加します。

Anonymous が設定されていない場合、プレビュー時に警告が表示されます。

18

STEP 2



「アンケート」 DB を選択して右クリック、メニューから「Designer で

開く」を選択します。



Designer の各枠は、「Eclipse ビュー」呼びます。

 ノーツの設計要素であるビューと紛らわしいため、今回のハンズオンで は、便宜的に「枠」と呼ぶことにします。（例：アプリケーション枠）  枠の並びは自由に変更できます。

Domino Designer の説明

20 コントロール データパレット アプリケーション アウトライン プロパティ イベント 問題（エラー等） 設計 ソース

Domino Designer の説明：基本の流れ

21

② 部品を配置 ① 対象を選択



枠の表示

 ウィンドウ > Eclipse ビューの表示 > [枠]

23

STEP 3



社員に対して IT 機器のアンケートを実施するためのノーツアプリ

ケーションです。

 フォームが１つ、ビューが３つあります。 • 回答フォームには、３つの質問があります。 • 回答の結果はビュー（３種類）で確認できます。

アプリケーションの概要

24 ビュー ビュー【ビュー】 すべてのアンケート 【フォーム】 アンケート



ACL（アクセス制御リスト）

• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回 は全データが閲覧できる仕様です。 • 変更は本人と管理者のみ可能です。

アプリケーションの ACL

25 ユーザー アクセス権 作成 削除 ロール 備考 管理者・サーバー 管理者 〇 〇 なし 一般（-Default-） 作成者 〇 〇 なし Anonymous なし － － なし

1.

フォーム：アンケート

 フィールド 1. 回答日：回答時の日時 2. 回答者：回答者のユーザー名 3. 回答１：数値（デフォルト値：0） 4. 回答２：チェックボックス（3択） 5. 回答３：テキスト  ボタン 1. 閉じる 2. 保存 3. 編集

アプリケーションの設計：フォーム

26

1.

ビュー：すべてのアンケート

 回答日順に表示

2.

ビュー：回答１

 回答１をカテゴリ別に表示

3.

ビュー：回答２

 回答２をカテゴリ別に表示  各ビューには、アンケート入力を新規作成するアクションボタンがあります。

アプリケーションの設計：ビュー

27

1. ビューのアクションボタンから新規に アンケートを回答してみましょう。 2. Domino Designer を起動して設計を 確認してみましょう。 3. クラシック Web で表示してみましょう。  フレームセット「メインフレームセット」を Web ブラウザプレビューする。

アプリケーションの確認

28



Step 4 ～ 6

1. ビューの表示

2. ビューから文書を開く



Step 7 ～ 11

 文書の作成、編集、削除

 レイアウト

 複数のビューの切り替え

31

STEP 4

1. 画面左の枠「アプリケーション」の「アン ケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「Xsp プロパティ」をダブルクリック 4. タブ「一般」をクリック 5. 「エラー処理」の「XPage 実行時エラー ページを表示」を有効にする 6. 「テーマのデフォルト」の「アプリケーショ ンのテーマ」で「OunUI V2.1」を選択 7. メニューバーから「ファイル > 保存」をク リック 8. メニューバーから「ファイル > 閉じる」を クリック

エラー処理とテーマの設定

32

33

STEP 5

XPages アプリケーション開発では以下の設計要素をよく使用します。  設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレー ムセット、ページなどのことです。 上記以外にもリソース（ファイル、スタイルシート、テーマ）やスクリプトライブラ リなども必要に応じて使用します。

設計要素

XPages アプリケーション ノーツアプリケーションで例えると… XPage フォーム カスタムコントロール サブフォーム イメージ イメージ（同じ） 34

XPages には、ノーツの文書およびビューに簡単にアクセスするための機能が あります。 アクセスするためには、「データソース」を定義します。  Domino 文書  Domino ビュー フォームの_{フィールドデータを XPages のコントロールと関連付ける}場合、デー タソースのフィールドをバインド先として指定します。 データの参照・作成・変更などが行えます。

データソース、バインド

35

後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロー ル」で作成します。 作成したカスタムコントロールを XPage に貼り付けます。 「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケー ションの「サブフォーム」をイメージすればわかりやすいかと思います。

基本構成

36 XPage カスタム コントロール フォーム サブフォーム

37

STEP 5.1

フォーム「アンケート」を表示する「カスタムコントロール」の作成

XPage カスタム コントロール

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「カスタムコントロール」をダブルクリック 3. 「新規カスタムコントロール」をクリック 4. 「名前」を入力 5. 「OK」をクリック

フォーム：新規カスタムコントロール

38 項目 設定値 名前 ccFormTopic

1. 画面右の枠「データパレット」をクリック 2. 「データソース」で「データソースの定義」を選択 3. ダイアログ「データソースの定義」が開く 4. 「データソース」で「Domino 文書」を選択

フォーム：データソースのバインド（１）

39 • 設定は次頁を参照 POINT 「データソース」を定義するこ とで文書のデータにアクセス できるようになります。

1. ダイアログ「データソースの定義」で下記を設定 2. 「OK」をクリック

フォーム：データソースのバインド（２）

40 項目 設定値 フォーム _{アンケート - Topic} フォーム検証の実行 文書ロード時 POINT 「フォームの検証の実行」 指定したタイミングでフォーム のフィールドが計算されます。 • 文書のロード時 • 文書保存時 • 両方

[コントロールの選択]ダイアログボックスが使用可能になっていることを確認

フォーム：[コントロールの選択]の確認

41 使用可能： 使用不可： POINT 「使用可能」の場合、 フィールドを貼り付ける際に コントロールを選択できます。

1. データパレットに表示されているフィールドの名前をすべて選択

 Ctrl を押しながらマウスでクリック

2. 選択した状態で画面中央の枠「設計」にドラッグ＆ドロップ

3. ダイアログ「データバインドコントロールの選択」が開く

1. ダイアログ「データバインドコントロールの選択」で下記を設定 2. 「OK」をクリック

フォーム：データバインドコントロールの選択

43 フィールド ラベル コントロール CreatedDate 回答日 計算結果 フィールド Author 回答者 計算結果 フィールド Answer01 質問１ 編集ボックス Answer02 質問２ リストボックス Answer03 質問３ テキスト領域

1. 「Answer02」フィールドを選択 2. 画面下部の枠「プロパティ」のタブ「値」を選択 3. ボタン「項目の追加」から下記の選択肢を設定

フォーム：リストボックスの選択肢の設定

44 ラベル 値 iPhone iPhone Android Android その他 その他

1. メニューバーから「ファイル > 保存」をクリック

• タブ名の「*」 が表示されている場合、未保存状態

46

STEP 5.2

フォーム「アンケート」を表示する「XPage」の作成

XPage カスタム コントロール

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「新規 XPage」をクリック 4. 「名前」を入力 5. 「OK」をクリック

フォーム：新規 XPage

47 項目 設定値 名前 xpFormTopic

1. 画面右の枠「コントロール」を選択

2. カスタムコントロールをクリックして展開

3. カスタムコントロール「ccFormTopic」を「設計」にドラッグ＆ドロップ

1. メニューバーから「ファイル > 保存」をクリック

保存時に、下図のダイアログが表示されることがあります。

 メニューバーから「プロジェクト > 自動にビルド」を有効にしてください。

1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を

クリック

• ツールバーからもプレビュー可能

52

STEP 6

53 XPage カスタム コントロール

STEP 6.1

ビュー「すべてのアンケート」を表示する「カスタムコントロール」

の作成

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「カスタムコントロール」をダブルクリック 3. 「新規カスタムコントロール」をクリック 4. 「名前」を入力

ビュー：新規カスタムコントロール

54 項目 設定値 名前 ccViewAll

1. 画面右の枠「データパレット」をクリック 2. 「データソース」で「データソースの定義」を選択 3. ダイアログ「データソースの定義」が開く 4. 「データソース」で「Domino ビュー」を選択 5. 「ビュー」で「すべてのアンケート - all」を選択 6. 「OK」をクリック

ビュー：データソースのバインド

55

1. データパレットに表示されている列の名前をすべて選択  Ctrl を押しながらマウスでクリック 2. 選択した状態で画面中央の枠「設計」にドラッグ＆ドロップ 3. ダイアログ「データバインドコントロールの選択」が開く 4. 「OK」をクリック

ビュー：ビューパネルの貼り付け

56

1. ビューパネルを選択

 枠「アウトライン」からだと簡単に選択できます。

2. 「プロパティ」のタブ「表示」を選択

3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定

1. ビューの列「viewColumn1」を選択（回答日）

2. 「プロパティ」のタブ「表示」を選択

3. 「列の値をリンクとして表示する」をチェック

4. 文書を開くモードは「読み取り専用」を選択

1. メニューバーから「ファイル > 保存」をクリック

60

STEP 6.2

ビュー「すべてのアンケート」を表示する「XPage」の作成

XPage カスタム コントロール

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「新規 XPage」をクリック 4. 「名前」を入力 5. 「OK」をクリック

ビュー：新規 XPage

61 項目 設定値 名前 xpViewAll

1. 画面右の枠「コントロール」を選択

2. カスタムコントロールをクリックして展開

3. カスタムコントロール「ccViewAll」を「設計」にドラッグ＆ドロップ

1. メニューバーから「ファイル > 保存」をクリック

1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を

クリック

2. 回答日のリンクをクリックすると文書が開くことを確認

65

STEP 7

ボタン：仕様

66 名前 動作（アクション） ボタンの 種類 ボタンの アイコン 可視 可視の条件 JavaScript 閉じる すべてのアンケー トビューを開く キャンセル _actn027.gif 常時 － 設定なし － 編集 文書を編集モード にする ボタン/送信 actn083.gif 読み込み !(document1.isEditable()); 保存し て閉じる 保存後、 すべてのアンケー トビューを開く ボタン/送信 actn117.gif 編集 document1.isEditable(); 削除 文書を削除する _{ボタン/送信} actn004.gif 読み込み !(document1.isEditable());  今回使用するアイコンの画像は、あらかじめリソースにインポート済みです。

1. カスタムコントロール「ccFormTopic」を開く 2. 枠「設計」の上端に改行を１つ入力  矢印キーでカーソルを移動し、改行を入力します。 3. 枠「コントロール」の「コアコントロール」をクリックして展開 4. ボタンをドラッグ＆ドロップして上端に４つ並べて貼り付け

ボタン：コントロールの貼り付け

67 POINT 開くのは カスタムコントロール の方です。

1. ボタンを選択 2. 「イベント」を選択 3. タブ「イベント」で「マウス – onclick 」を選択 4. タブ「サーバー」で「シンプルアクション」をチェック 5. ボタン「アクションの追加…」をクリック 6. ダイアログ「シンプルアクションの追加」でアクションを選択 7. 「OK」をクリック  上記を基本とし、共通の操作でイベントを設定します。

ボタン：イベント（シンプルアクション）設定方法

68 POINT シンプルアクションを使用すると 基本動作を簡単に設定できます。

1. ボタンを選択 2. 「プロパティ」のタブ「ボタン」を選択 3. 「可視」でコントロールの表示/非表示を制御 1. チェックあり：常に表示 2. チェックなし：常に非表示 3. 計算済み：条件で表示 条件の設定方法 4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択 5. ダイアログ「スクリプトエディタ」で条件（JavaScript 等）を記述 6. 「OK」をクリック

ボタン：可視（表示/非表示）の設定方法

69

ボタン：可視（表示/非表示）の設定例

70



編集モード時のみ表示

document1.isEditable();



読み込みモード時のみ表示

!(document1.isEditable()); 文書の データソース 文書が編集モードかどうか？ True : 編集モード False : 読み込みモード True / Flase を反転させる 文書が編集モードかどうか？ True : 編集モード False : 読み込みモード POINT ノーツの非表示式とは 逆のため注意が必要です。

71

STEP 7.1

1. ボタン「閉じる」に下記を設定

ボタン：閉じる：設定

72 項目 設定値 ラベル 閉じる ボタンの種類 キャンセル ボタンのイメージを選択 チェックあり アイコン actn027.gif 可視 チェックあり

1. ダイアログ「シンプルアクションの追加」 で下記を設定

ボタン：閉じる：イベント

73 項目 設定値 カテゴリ 基本 アクション ページを開く 開くページの名前 _xpViewAll

メニューバーから「ファイル > 保存」をクリック 一通りボタンの動きを確認する  アイコン  名前  動作

ボタン：閉じる：プレビューで確認

74

75

STEP 7.2

1. ボタン「編集」に下記を設定

ボタン：編集：設定

76 項目 設定値 ラベル 編集 ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn083.gif 可視 _{計算済み （◇値の計算…から設定）} JavaScript !(document1.isEditable());

項目 設定値 カテゴリ 文書 アクション 文書モードの変更 文書モード 編集モード データソース名 document1 1. ダイアログ「シンプルアクションの追加」 で下記を設定

ボタン：編集：イベント

77

78

STEP 7.3

1. ボタン「保存して閉じる」に下記を設定

ボタン：保存して閉じる：設定

79 項目 設定値 ラベル 保存して閉じる ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn117.gif 可視 _{計算済み （◇値の計算…から設定）} JavaScript document1.isEditable();

２つのアクションを設定します。 1. ダイアログ「シンプルアクションの追加」で下記を設定 2. ダイアログ「シンプルアクションの追加」で下記を設定 項目 設定値 カテゴリ 文書 アクション 文書の保存 データソース名 _document1

ボタン：保存して閉じる：イベント

80 項目 設定値 カテゴリ 基本 アクション ページを開く 開くページの名前 _xpViewAll

81

STEP 7.4

1. ボタン「削除」に下記を設定

ボタン：削除：設定

82 項目 設定値 ラベル 削除 ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn004.gif 可視 _{計算済み （◇値の計算…から設定）} JavaScript !(document1.isEditable());

項目 設定値 カテゴリ 文書 アクション 文書の削除 次に開くページの名前 xpViewAll 確認テキスト 削除しますか？ データソース名 document1 1. ダイアログ「シンプルアクションの追加」で 下記を設定

ボタン：削除：イベント

83

84

STEP 7.5

メニューバーから「ファイル > 保存」をクリック 一通りボタンの動きを確認する  アイコン  名前  動作  可視（表示/非表示）

ボタン：プレビューで確認

85 読み込みモード 編集モード

86

STEP 8

Web ブラウザでアクセスした場合、指定した XPage で開く設定を行います。 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「アプリケーションのプロパティ」をダブルクリック 4. タブ「起動」をクリック 5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択 6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択 7. メニューバーから「ファイル > 保存」をクリック 8. メニューバーから「ファイル > 閉じる」をクリック

起動プロパティの設定

87

「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライア ント（スタンダード版）からも「XPage」が利用できます。

但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があり

ます。よって、テストは別途必要です。

89

STEP 9

簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウ ト」を使ってみましょう。

レイアウト：拡張ライブラリのアプリケーションレイアウト

90 バナー タイトルバー プレースバー フッター リーガル コンテンツ領域（左） コンテンツ領域（中央） ※ ここにカスタムコントロール貼り付け

1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け 2. その上にフォームやビューのカスタムコントロールを貼り付け

レイアウト：構成

91 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー

92 XPage カスタム コントロール

STEP 9.1

「アプリケーションレイアウト」を使用した「カスタムコントロール」

の作成

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック

2. 「カスタムコントロール」をダブルクリック

3. 「新規カスタムコントロール」をクリック

4. 「名前」で「ccLayout」を入力

1. 画面右の枠「コントロール」を選択

2. 拡張ライブラリをクリックして展開

3. 「アプリケーションレイアウト」を「設計」にドラッグ＆ドロップ

1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定 2. 「OK」をクリック

レイアウト：パラメータの設定

95 項目 設定値 構成 _{OneUI アプリケーション構成} バナー _{[チェックあり]} タイトルバー _{[チェックあり]} プレースバー _{[チェックあり]} フッター _{[チェックあり]} リーガル _{[チェックあり]} アプリケーション のテーマ OneUI V2.1

1. タブ「アプリケーションレイアウト」を選択

2. コンテンツ領域の「中央の列」をチェック

1. タブ「バナー」を選択

2. ロゴの「イメージ」で「xpagesday_logo_banner.png」を選択

1. タブ「バナー > アプリケーションリンク」を選択 2. ボタン「項目の追加」をクリック、メニューから「ページリンク ノード」を選択 3. 画面右のプロパティ「label」で「ホーム」を入力 4. 画面右のプロパティ「page」で「xpViewAll」を選択

レイアウト：バナーの設定（アプリケーションリンク）

98

1. タブ「タイトルバー」を選択 2. 「タイトルテキスト」の右の◇マークをクリックし、 「値の計算…」を選択 3. 以下の JavaScript を入力 （DBタイトルを表示） @DbTitle()

レイアウト：タイトルバーの設定

99

検索機能を利用するためには、事前に全文索引の作成が必要です。 1. タブ「タイトルバー > 検索」を選択 2. 「検索コントロール（オプションドロップダウン、編集ボックス、検索アイコン） を表示」をチェック 3. 「ページ名」で「xpViewAll」を設定

レイアウト：検索の設定

100

1. タブ「プレースバー」を選択 2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択 3. 画面右のプロパティで下記を設定

レイアウト：プレースバーの設定

101 プロパティ 設定値 image /actn089.gif labal アンケート入力 page /xpFormTopic.xsp 新規フォームボタン

1. タブ「フッター」を選択 2. 「リンク」の「コンテナノード > 基本ノード」を選択 3. 画面右のプロパティ「href」「ラベル」を設定  今回は時間の関係からデフォルトのまま使用します。  余裕がある方は設定してみてください。

レイアウト：フッターの設定

102

1. タブ「リーガル」を選択

2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択

3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」

を入力

1. 画面右の枠「コントロール」を選択

2. 拡張ライブラリをクリックして展開

3. 「ナビゲータ」を「設計」にドラッグ＆ドロップ

1. タブ「ナビゲーション項目」を選択  コントロール「ナビゲータ」にあります。 2. ボタン「項目の追加」から「ページリンクノード」を追加 3. 画面右のプロパティで下記を設定

レイアウト：ナビゲータの設定

105 プロパティ 設定値 image /actn120.gif labal すべて page /xpViewAll.xsp

カスタムコントロール「ccLayout」を保存して閉じます。

107

STEP 9.2

「アプリケーションレイアウト」を使用した「XPage」の作成

XPage カスタム コントロール

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック

2. 「XPage」をダブルクリック

3. 「xpViewAll」をダブルクリック

1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除  アウトラインから選択して右クリック、「削除」を選択 2. 枠「コントロール」の「カスタムコントロール」をクリックして展開 3. 「ccLayout」を「設計」にドラッグ＆ドロップ

レイアウト：すべてのアンケートビュー用 XPage の設定（１）

109 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分

1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール 「ccViewAll」をドラッグ＆ドロップ

レイアウト：すべてのアンケートビュー用 XPage の設定（２）

110 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分

1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック

2. 「XPage」をダブルクリック

3. 「xpFormTopic」をダブルクリック

1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除  アウトラインから選択して右クリック、「削除」を選択 2. 枠「コントロール」の「カスタムコントロール」をクリックして展開 3. 「ccLayout」を「設計」にドラッグ＆ドロップ

レイアウト：フォーム用 XPage の設定（１）

112 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分

1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール 「ccFormTopic」をドラッグ＆ドロップ

レイアウト：フォーム用 XPage の設定（２）

113 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分

XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する  バナー、アイコン  アプリケーション名  リンク、ボタン

レイアウト：プレビューで確認

114 バナー 検索 リンク リーガル 新規作成ボタン リンク バナー ビュー/フォーム画面 ビュー 切り替え

115

STEP 10

116

STEP 10.1

1. 対象のコントロールを選択 2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定  フォント  背景  余白  本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。

デザイン：スタイル

117

1. 対象のコントロールを選択 2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定  ピクセル  パーセント  自動

デザイン：コントロールの幅

118

1. 対象のコントロールを選択 2. 枠「プロパティ」のタブ「表のセル」のオプションで設定  セルの横位置  セルの縦位置

デザイン：表のセルの位置

119 例）セルの中のラベル「質問１：」を上付きにした場合

下図を参考にフォームのデザインを自由に変更してみましょう。

デザイン：演習問題（１）

120 幅 100ピクセル 高さ 70ピクセル 幅 100パーセント セルの幅 50ピクセル セルの縦位置「上」 直接テキストを入力 表の幅 100パーセント

121

STEP 10.2

1. 対象の「ビューの列」を選択 2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定  表示形式：日付と時刻  日付スタイル：デフォルト  時刻スタイル：デフォルト

デザイン：列の設定（表示タイプ：日付/時刻）

122 注意： 列のプロパティを操作していると、「ビューの列のヘッダー」のラ ベルが勝手に変更される場合があります。 変更された場合、手動で直して保存してください。

1. 対象の「ビューの列」を選択

2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定

 表示形式：小数点

 整数のみ：チェック

下図を参考にビューのデザインを自由に変更してみましょう。

デザイン：演習問題（２）

124

表示タイプ：日付/時刻

ビューパネル 幅 100パーセント

125

STEP 11

今までの作業を参考に以下の２つのビューを追加してみましょう。  回答１  回答２

オプション：演習問題（３－１）

126 設計要素 名前 データソース （タイプ） データソース （名称） 貼り付ける カスタムコントロール カスタム コントロール ccViewAns1 Domino ビュー 回答１ - q1 －

XPage xpViewAns1 － － ccLayout ccViewAns1 設計要素 名前 データソース （タイプ） データソース （名称） 貼り付ける カスタムコントロール カスタム コントロール ccViewAns2 Domino ビュー 回答２ - q2 －

XPage xpViewAns2 － － ccLayout ccViewAns2

今までの作業を参考にナビゲータへ２つのビューのリンクを追加してみましょう。 1. カスタムコントロール「ccLayout」を開く 2. コントロール「ナビゲータ」を選択 3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択 4. ボタン「項目の追加」から下記の項目を追加

オプション：演習問題（３－２）

127

種類 image label page

ページリンクノード /actn120.gif 回答１ /xpViewAns1 ページリンクノード /actn120.gif 回答２ /xpViewAns2

XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する  アイコン  ナビゲータ  ビュー

オプション：プレビューで確認

128 ビュー 切り替え

129

STEP 12

1. 画面左の枠「アプリケーション」の「アン ケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「Xsp プロパティ」をダブルクリック 4. タブ「一般」をクリック 5. 「テーマのデフォルト」の「アプリケーショ ンのテーマ」で「OunUI V3.0.2」を選択 6. メニューバーから「ファイル > 保存」をク リック 7. メニューバーから「ファイル > 閉じる」を クリック

テーマの変更

130

テーマの変更：プレビューで確認

131

OneUI V2.1

OneUI V2 OneUI V3.0.2

132

補足資料

設計要素の構成（Step 8 まで）

133 【XPage】 xpFormTopic 【カスタムコントロール】 ccFormTopic 【XPage】 xpViewAll 【カスタムコントロール】 ccViewAll フォーム「アンケート」 ビュー「すべてのアンケート」

設計要素の構成（Step 9 から）（１）

134 【XPage】 xpFormTopic 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccFormTopic 【XPage】 xpViewAll 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAll フォーム「アンケート」 ビュー「すべてのアンケート」

設計要素の構成（Step 9 から）（２）

135 【XPage】 xpViewAns1 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAns1 【XPage】 xpViewAns2 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAns2 ビュー「回答１」 ビュー「回答２」

設計要素の設定

136 設計要素 名前 データソース （タイプ） データソース （名称） 貼り付ける カスタムコントロール

XPage xpFormTopic － － ccLayout

ccFormTopic カスタム

コントロール

ccFormTopic Domino 文書 アンケート - Topic －

XPage xpViewAll － － ccLayout

ccViewAll カスタム

コントロール

ccViewAll Domino ビュー すべてのアンケート - all －

XPage xpViewAns1 － － ccLayout

ccViewAns1 カスタム

コントロール

ccViewAns1 Domino ビュー 回答１ - q1 －

XPage xpViewAns2 － － ccLayout

ccViewAns2 カスタム コントロール ccViewAns2 Domino ビュー 回答２ - q2 － カスタム コントロール ccLayout － － －

フォームのボタンの設定

137 名前 動作（アクション） ボタンの 種類 ボタンの アイコン 可視 可視の条件 JavaScript 閉じる すべてのアンケー トビューを開く キャンセル _actn027.gif 常時 － 設定なし － 編集 文書を編集モード にする ボタン/送信 actn083.gif 読み込み !(document1.isEditable()); 保存し て閉じる 保存後、 すべてのアンケー トビューを開く ボタン/送信 actn117.gif 編集 document1.isEditable(); 削除 文書を削除する _{ボタン/送信} actn004.gif 読み込み !(document1.isEditable());

138



XPages.JP Project

 XPagesの普及のためさまざまな活動を行っています。  http://xpages.jp/  http://www.facebook.com/XPages.JP



XSnippets 日本版

 XPages, LotusScript などサンプルソースの登録サイト  http://xpages.jp/XSnippetsJ.nsf/



qa9 for ICS(Lotus) Developers

 QAサイト

 http://qa.xpages.jp/QA/qa.nsf/