今日から始める xpages アプリケーション開発！（オープンセミナー 2016...

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

ノーツコンソーシアムオープンセミナー 2016 ハンズオンXPagesDay 出張セッション

2016/11/09

株式会社ソルクシーズ吉田武司

Ver. 1.0.2

本資料の掲載内容は、できる限り正確を期するように努めてはおりますが、いかなる明示または暗黙の保証も責任も負いかねます。

掲載情報は不定期に変更されることもあります。他のメディア等に無断で転載する事はご遠慮下さい。

当資料をコピー等で複製することは、執筆者の承諾なしではできません。

当資料に掲載された製品名または会社名はそれぞれの各社の商標または登録商標です。

特記事項 2

3

STEP 1はじめに

これから XPages を始める方への取っ掛かりになるようハンズオンにしたいと思います。

限られた時間のため、極力プログラミング要素を除外した仕様となっています。標準機能を積極的に使用

事前に用意したノーツアプリケーションを XPages 化

レイアウト以降は、オプションにしています。復習の際、お試しください。

XPages 開発に慣れてきたら、プログラミングを含めた次のステップに挑戦してみてください。

本日の課題のレベル感 4

バージョン 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

• 署名、適切なACL/ECLを設定してご利用ください。

• 検索機能を使うには、事前に全文索引を作成しておく必要があります。

• ファイル構成

demo.nsf （XPages 化する前のアプリケーション）

demo1.nsf （XPages 化途中のアプリケーション）

demo2.nsf （XPages 化後のアプリケーション）

demo3.nsf （XPages 化後、追加でカスタマイズしたアプリケーション）

環境 5

http://www.slideshare.net/chemp7/2016-xpagesday-2016

https://goo.gl/Q9WcjS

本来ならば、CSSを使用した方が良いのですが、最初からすべてを覚えるのは大変です。

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

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

よって、今回は直接的には CSS を使用しないで作成を行います。実際には、後述のテーマで間接的には利用しています。

その代わり、標準で用意されている「テーマ」と拡張ライブラリの「アプリケーションレイアウト」を使用します。

前提：デザイン 6

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 とは 7

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 とは 8

①

②

③

④

本資料では、基本的に以下のように表現しています。他の資料では違う場合があります。ご了承ください。

XPages• XPages 技術、アプリケーションなど全般的な意味

XPage• データベース（アプリケーション）の設計要素である「XPage」

ブラウザで表示するWeb ページもこの設計要素です。

XPages と X

Domino Designer アプリケーションの開発

ブラウザまたはノーツクライアント（スタンダード版）アプリケーションの動作確認

Domino サーバーアプリケーションの実行

データベース（アプリケーション）本日のお題：アンケートDBの XPage 化

開発に必要なもの 10

XPage を利用するには、２つの方法があります。ノーツクライアント（スタンダード版）

ブラウザ

利用方法 11

ブラウザ

ドミノサーバー

ノーツクライアントノーツクライアント

ローカルにレプリカ

サーバー文書セキュリティ－可能なプログラムの制限

• 制限なしで署名または実行

• 呼び出したユーザーとして実行するエージェントとまたは XPage を署名

開発者のユーザーまたはグループを設定

ノーツクライアント（スタンダード版）のみでもローカルで実行可能です。• XPages in Notes client (XPiNC)

Domino サーバー上で利用するための設定 12

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

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

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

ローカルでプレビューするための ACL 設定 13

14

STEP 2Domino Designer について

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

Domino Designer の起動 15

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

枠の並びは自由に変更できます。

Domino Designerの説明 16

コントロールデータパレット

アプリケーション

アウトライン

プロパティイベント問題（エラー等）

設計ソース

Domino Designerの説明：基本の流れ 17

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

③対象を設定

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

Domino Designerの説明：枠と閉じてしまった場合 18

19

STEP 3XPages 化するアプリケーションについて

社員に対して IT 機器のアンケートを実施するためのノーツアプリケーションです。フォームが１つ、ビューが３つあります。

• 回答フォームには、３つの質問があります。

• 回答の結果はビュー（３種類）で確認できます。

アプリケーションの概要 20

ビュービュー【ビュー】

すべてのアンケート

【フォーム】

アンケート

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

• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回は全データが閲覧できる仕様です。

• 変更は本人と管理者のみ可能です。

アプリケーションの ACL 21

ユーザーアクセス権作成削除ロール備考

管理者・サーバー管理者〇〇なし

一般（-Default-）作成者〇〇なし

Anonymous なし－－なし

1. フォーム：アンケートフィールド

1. 回答日：回答時の日時

2. 回答者：回答者のユーザー名

3. 回答１：数値（デフォルト値：0）

4. 回答２：チェックボックス（3択）

5. 回答３：テキスト

ボタン1. 閉じる

2. 保存

3. 編集

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

1. ビュー：すべてのアンケート回答日順に表示

2. ビュー：回答１回答１をカテゴリ別に表示

3. ビュー：回答２回答２をカテゴリ別に表示

各ビューには、アンケート入力を新規作成するアクションボタンがあります。

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

1. ビューのアクションボタンから新規にアンケートを回答してみましょう。

2. Domino Designer を起動して設計を確認してみましょう。

3. クラシックWeb で表示してみましょう。フレームセット「メインフレームセット」を

Web ブラウザプレビューする。

アプリケーションの確認 24

Step 4～ 61. ビューの表示

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

XPage の完成イメージ（前半） 25

Step 7 ～ 11 文書の作成、編集、削除

レイアウト

複数のビューの切り替え

XPage の完成イメージ（後半） 26

27

STEP 4データベースの設定

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

2. 「アプリケーション構成」をダブルクリック

3. 「Xsp プロパティ」をダブルクリック

4. タブ「一般」をクリック

5. 「エラー処理」の「XPage 実行時エラーページを表示」を有効にする

6. 「テーマのデフォルト」の「アプリケーションのテーマ」で「OunUI V2.1」を選択

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

8. メニューバーから「ファイル > 閉じる」をクリック

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

29

STEP 5フォーム画面の作成

XPages アプリケーション開発では以下の設計要素をよく使用します。

設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレームセット、ページなどのことです。

上記以外にもリソース（ファイル、スタイルシート、テーマ）やスクリプトライブラリなども必要に応じて使用します。

設計要素

XPagesアプリケーションノーツアプリケーションで例えると…

XPage フォーム

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

イメージイメージ（同じ）

30

XPages には、ノーツの文書およびビューに簡単にアクセスするための機能があります。

アクセスするためには、「データソース」を定義します。 Domino 文書

Domino ビュー

フォームのフィールドデータを XPages のコントロールと関連付ける場合、データソースのフィールドをバインド先として指定します。

データの参照・作成・変更などが行えます。

データソース、バインド 31

後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロール」で作成します。

作成したカスタムコントロールを XPage に貼り付けます。

「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケーションの「サブフォーム」をイメージすればわかりやすいかと思います。

基本構成 32

XPage

カスタムコントロール

フォーム

サブフォーム

33

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

XPage



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

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

4. 「名前」を入力

5. 「OK」をクリック

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

項目設定値

名前 ccFormTopic

1. 画面右の枠「データパレット」をクリック

2. 「データソース」で「データソースの定義」を選択

3. ダイアログ「データソースの定義」が開く

4. 「データソース」で「Domino 文書」を選択

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

• 設定は次頁を参照

POINT

「データソース」を定義することで文書のデータにアクセスできるようになります。

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


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

項目設定値

フォームアンケート - Topic

フォーム検証の実行文書ロード時

POINT「フォームの検証の実行」

指定したタイミングでフォームのフィールドが計算されます。• 文書のロード時• 文書保存時• 両方

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

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

使用可能：

使用不可：

POINT「使用可能」の場合、

フィールドを貼り付ける際にコントロールを選択できます。

1. データパレットに表示されているフィールドの名前をすべて選択 Ctrl を押しながらマウスでクリック

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

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

フォーム：フィールドの貼り付け 38

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


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

フィールドラベルコントロール

CreatedDate 回答日計算結果フィールド

Author 回答者計算結果フィールド

Answer01 質問１編集ボックス

Answer02 質問２リストボックス

Answer03 質問３テキスト領域

1. 「Answer02」フィールドを選択

2. 画面下部の枠「プロパティ」のタブ「値」を選択

3. ボタン「項目の追加」から下記の選択肢を設定

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

ラベル値

iPhone iPhone

Android Android

その他その他

1. メニューバーから「ファイル > 保存」をクリック• タブ名の「*」が表示されている場合、未保存状態

フォーム：カスタムコントロールの保存 41

42

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

XPage



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

3. 「新規 XPage」をクリック



フォーム：新規 X

項目設定値

名前 xpFormTopic

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

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

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

フォーム：カスタムコントロールの貼り付け 44


フォーム：XPage の保存 45

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

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

フォーム：補足：自動ビルドがオフになりました 46

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

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

フォーム：XPage のプレビュー 47

48

STEP 6ビュー画面の作成

49

XPage


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





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

項目設定値

名前 ccViewAll

1. 画面右の枠「データパレット」をクリック

2. 「データソース」で「データソースの定義」を選択

3. ダイアログ「データソースの定義」が開く

4. 「データソース」で「Domino ビュー」を選択

5. 「ビュー」で「すべてのアンケート - all」を選択


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

1. データパレットに表示されている列の名前をすべて選択 Ctrl を押しながらマウスでクリック

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

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


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

1. ビューパネルを選択枠「アウトライン」からだと簡単に選択できます。

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

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

ビュー：文書を開く時のフォーム（XPage）の設定 53

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

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

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

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

ビュー：列に文書を開くリンクを設定 54


ビュー：カスタムコントロールの保存 55

56

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

XPage




3. 「新規 XPage」をクリック



ビュー：新規 X

項目設定値

名前 xpViewAll


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

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

ビュー：カスタムコントロールの貼り付け 58


ビュー：XPage の保存 59

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

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

ビュー：XPage のプレビュー 60

61

STEP 7ボタンの作成

ボタン：仕様 62

名前動作（アクション）ボタンの種類

ボタンのアイコン

可視可視の条件JavaScript

閉じるすべてのアンケートビューを開く

キャンセル actn027.gif 常時－設定なし－

編集文書を編集モードにする

ボタン/送信 actn083.gif 読み込み !(document1.isEditable());

保存して閉じる

保存後、

すべてのアンケートビューを開く

ボタン/送信 actn117.gif 編集 document1.isEditable();

削除文書を削除するボタン/送信 actn004.gif 読み込み !(document1.isEditable());

今回使用するアイコンの画像は、あらかじめリソースにインポート済みです。

1. カスタムコントロール「ccFormTopic」を開く

2. 枠「設計」の上端に改行を１つ入力矢印キーでカーソルを移動し、改行を入力します。

3. 枠「コントロール」の「コアコントロール」をクリックして展開

4. ボタンをドラッグ＆ドロップして上端に４つ並べて貼り付け

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

POINT開くのは

カスタムコントロールの方です。

1. ボタンを選択

2. 「イベント」を選択

3. タブ「イベント」で「マウス – onclick 」を選択

4. タブ「サーバー」で「シンプルアクション」をチェック

5. ボタン「アクションの追加…」をクリック

6. ダイアログ「シンプルアクションの追加」でアクションを選択


上記を基本とし、共通の操作でイベントを設定します。

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

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

1. ボタンを選択

2. 「プロパティ」のタブ「ボタン」を選択

3. 「可視」でコントロールの表示/非表示を制御1. チェックあり：常に表示

2. チェックなし：常に非表示

3. 計算済み：条件で表示

条件の設定方法

4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択

5. ダイアログ「スクリプトエディタ」で条件（JavaScript 等）を記述


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

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

編集モード時のみ表示

document1.isEditable();

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

!(document1.isEditable());

文書のデータソース

文書が編集モードかどうか？True : 編集モードFalse : 読み込みモード

True / Flase を反転させる

文書が編集モードかどうか？True : 編集モードFalse : 読み込みモード

POINTノーツの非表示式とは

逆のため注意が必要です。

67

STEP 7.1ボタン「閉じる」の設定

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

ボタン：閉じる：設定 68

項目設定値

ラベル閉じる

ボタンの種類キャンセル

ボタンのイメージを選択チェックあり

アイコン actn027.gif

可視チェックあり

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

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

項目設定値

カテゴリ基本

アクションページを開く

開くページの名前 xpViewAll

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

一通りボタンの動きを確認するアイコン

名前

動作

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

71

STEP 7.2ボタン「編集」の設定

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

ボタン：編集：設定 72

項目設定値

ラベル編集

ボタンの種類ボタン



可視計算済み（◇値の計算…から設定）

JavaScript !(document1.isEditable());

項目設定値

カテゴリ文書

アクション文書モードの変更

文書モード編集モード

データソース名 document1


ボタン：編集：イベント 73

74

STEP 7.3ボタン「保存して閉じる」の設定

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

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

項目設定値

ラベル保存して閉じる





JavaScript document1.isEditable();

２つのアクションを設定します。



項目設定値

カテゴリ文書

アクション文書の保存


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

項目設定値

カテゴリ基本

アクションページを開く

開くページの名前 xpViewAll

77

STEP 7.4ボタン「削除」の設定

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

ボタン：削除：設定 78

項目設定値

ラベル削除





JavaScript !(document1.isEditable());

項目設定値

カテゴリ文書

アクション文書の削除

次に開くページの名前 xpViewAll

確認テキスト削除しますか？



ボタン：削除：イベント 79

80

STEP 7.5ボタンの動作確認

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

一通りボタンの動きを確認するアイコン

名前

動作

可視（表示/非表示）

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

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

82

STEP 8起動プロパティの設定

Web ブラウザでアクセスした場合、指定した XPageで開く設定を行います。



3. 「アプリケーションのプロパティ」をダブルクリック

4. タブ「起動」をクリック

5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択

6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択



起動プロパティの設定 83

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

但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があります。よって、テストは別途必要です。

起動プロパティの設定（補足） 84

85

STEP 9オプション：アプリケーションレイアウト

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

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

バナータイトルバー

プレースバー

フッターリーガル

コンテンツ領域（左）コンテンツ領域（中央）※ここにカスタムコントロール貼り付け

1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け

2. その上にフォームやビューのカスタムコントロールを貼り付け

レイアウト：構成 87

XPage

カスタムコントロールアプリケーションレイアウト

カスタムコントロールフォーム/ビュー

88

XPage


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




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

レイアウト：新規カスタムコントロール 89


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

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

レイアウト：アプリケーションレイアウトの貼り付け 90

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


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

項目設定値

構成 OneUI アプリケーション構成

バナー [チェックあり]

タイトルバー [チェックあり]

プレースバー [チェックあり]

フッター [チェックあり]

リーガル [チェックあり]

アプリケーションのテーマ

OneUI V2.1

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

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

レイアウト：コンテンツ領域の設定 92

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

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

レイアウト：バナーの設定 93

1. タブ「バナー > アプリケーションリンク」を選択

2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択

3. 画面右のプロパティ「label」で「ホーム」を入力

4. 画面右のプロパティ「page」で「xpViewAll」を選択

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

1. タブ「タイトルバー」を選択

2. 「タイトルテキスト」の右の◇マークをクリックし、「値の計算…」を選択

3. 以下の JavaScriptを入力（DBタイトルを表示）@DbTitle()

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

検索機能を利用するためには、事前に全文索引の作成が必要です。

1. タブ「タイトルバー > 検索」を選択

2. 「検索コントロール（オプションドロップダウン、編集ボックス、検索アイコン）を表示」をチェック

3. 「ページ名」で「xpViewAll」を設定

レイアウト：検索の設定 96

1. タブ「プレースバー」を選択

2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択

3. 画面右のプロパティで下記を設定

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

プロパティ設定値

image /actn089.gif

labal アンケート入力

page /xpFormTopic.xsp 新規フォームボタン

1. タブ「フッター」を選択

2. 「リンク」の「コンテナノード > 基本ノード」を選択

3. 画面右のプロパティ「href」「ラベル」を設定今回は時間の関係からデフォルトのまま使用します。

余裕がある方は設定してみてください。

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


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

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

レイアウト：ナビゲータの貼り付け 100

1. タブ「ナビゲーション項目」を選択コントロール「ナビゲータ」にあります。

2. ボタン「項目の追加」から「ページリンクノード」を追加

3. 画面右のプロパティで下記を設定

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

プロパティ設定値

image /actn120.gif

labal すべて

page /xpViewAll.xsp

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

レイアウト：カスタムコントロールの保存 102

103

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

XPage




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

レイアウト：すべてのアンケートビュー用 XPage の修正 104

1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除アウトラインから選択して右クリック、「削除」を選択

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

3. 「ccLayout」を「設計」にドラッグ＆ドロップ

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

XPage



↓ この部分

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

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

XPage



↓ この部分



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

レイアウト：フォーム用 XPage の修正 107

1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除アウトラインから選択して右クリック、「削除」を選択

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

3. 「ccLayout」を「設計」にドラッグ＆ドロップ

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

XPage



↓ この部分

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

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

XPage



↓ この部分

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

アプリケーション名

リンク、ボタン

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

バナー

検索

リンク

リーガル

新規作成ボタン

リンク

バナー

ビュー/フォーム画面

ビュー切り替え

111

STEP 10オプション：デザインの調整

112

STEP 10.1フォームのデザインの調整

1. 対象のコントロールを選択

2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定フォント

背景

余白

本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。

デザイン：スタイル 113


2. 枠「プロパティ」の [最上段のタブ] の「幅」「単位」で設定ピクセル

パーセント

自動

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


2. 枠「プロパティ」のタブ「表のセル」のオプションで設定セルの横位置

セルの縦位置

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

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

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

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

幅 100ピクセル

高さ 70ピクセル幅 100パーセント

セルの幅 50ピクセル

セルの縦位置「上」

直接テキストを入力

表の幅 100パーセント

117

STEP 10.2ビューのデザインの調整

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

2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定表示形式：日付と時刻

日付スタイル：デフォルト

時刻スタイル：デフォルト

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

注意：

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

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

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

整数のみ：チェック

デザイン：列の設定（表示タイプ：数値（整数のみ）） 119

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

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

表示タイプ：日付/時刻

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

表示タイプ：数値（整数のみ）

121

STEP 11オプション：ビューの追加

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

回答２

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

設計要素名前データソース（タイプ）

データソース（名称）

貼り付けるカスタムコントロール


ccViewAns1 Domino ビュー回答１ - q1 －

XPage xpViewAns1 －－ ccLayoutccViewAns1





ccViewAns2 Domino ビュー回答２ - q2 －


今までの作業を参考にナビゲータへ２つのビューのリンクを追加してみましょう。

1. カスタムコントロール「ccLayout」を開く

2. コントロール「ナビゲータ」を選択

3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択

4. ボタン「項目の追加」から下記の項目を追加

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

種類 image label page

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

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

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

ナビゲータ

ビュー

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

ビュー切り替え

125

STEP 12オプション：テーマの変更



3. 「Xsp プロパティ」をダブルクリック

4. タブ「一般」をクリック

5. 「テーマのデフォルト」の「アプリケーションのテーマ」で「OunUI V3.0.2」を選択



テーマの変更 126

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

OneUI V2.1

OneUI V2

OneUI V3.0.2

128

補足資料設計要素の構成および設定

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

【XPage】xpFormTopic

【カスタムコントロール】ccFormTopic

【XPage】xpViewAll

【カスタムコントロール】ccViewAll

フォーム「アンケート」ビュー「すべてのアンケート」

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

【XPage】xpFormTopic

【カスタムコントロール】アプリケーションレイアウト

ccLayout

【カスタムコントロール】ccFormTopic

【XPage】xpViewAll


ccLayout

【カスタムコントロール】ccViewAll

フォーム「アンケート」ビュー「すべてのアンケート」

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

【XPage】xpViewAns1


ccLayout

【カスタムコントロール】ccViewAns1

【XPage】xpViewAns2


ccLayout

【カスタムコントロール】ccViewAns2

ビュー「回答１」ビュー「回答２」

設計要素の設定 132




XPage xpFormTopic －－ ccLayoutccFormTopic


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

XPage xpViewAll －－ ccLayoutccViewAll


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



ccViewAns1 Domino ビュー回答１ - q1 －



ccViewAns2 Domino ビュー回答２ - q2 －


ccLayout －－－

フォームのボタンの設定 133

名前動作（アクション）ボタンの種類

ボタンのアイコン

可視可視の条件JavaScript

閉じるすべてのアンケートビューを開く

キャンセル actn027.gif 常時－設定なし－

編集文書を編集モードにする

ボタン/送信 actn083.gif 読み込み !(document1.isEditable());

保存して閉じる

保存後、

すべてのアンケートビューを開く

ボタン/送信 actn117.gif 編集 document1.isEditable();

削除文書を削除するボタン/送信 actn004.gif 読み込み !(document1.isEditable());

134

参考サイト

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/

参考資料 135

http://xpages.jp/

http://www.facebook.com/XPages.JP

http://xpages.jp/XSnippetsJ.nsf/

今日から始める xpages アプリケーション開発！（オープンセミナー 2016...

Software