今日から始める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
本来ならば、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 と XPage 9
Domino Designer アプリケーションの開発
ブラウザまたはノーツクライアント(スタンダード版) アプリケーションの動作確認
Domino サーバー アプリケーションの実行
データベース(アプリケーション) 本日のお題:アンケートDBの XPage 化
開発に必要なもの 10
XPage を利用するには、2つの方法があります。 ノーツクライアント(スタンダード版)
ブラウザ
利用方法 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 機器のアンケートを実施するためのノーツアプリケーションです。 フォームが1つ、ビューが3つあります。
• 回答フォームには、3つの質問があります。
• 回答の結果はビュー(3種類)で確認できます。
アプリケーションの概要 20
ビュービュー【ビュー】
すべてのアンケート
【フォーム】
アンケート
ACL(アクセス制御リスト)
• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回は全データが閲覧できる仕様です。
• 変更は本人と管理者のみ可能です。
アプリケーションの ACL 21
ユーザー アクセス権 作成 削除 ロール 備考
管理者・サーバー 管理者 〇 〇 なし
一般(-Default-) 作成者 〇 〇 なし
Anonymous なし - - なし
1. フォーム:アンケート フィールド
1. 回答日:回答時の日時
2. 回答者:回答者のユーザー名
3. 回答1:数値(デフォルト値:0)
4. 回答2:チェックボックス(3択)
5. 回答3:テキスト
ボタン1. 閉じる
2. 保存
3. 編集
アプリケーションの設計:フォーム 22
1. ビュー:すべてのアンケート 回答日順に表示
2. ビュー:回答1 回答1をカテゴリ別に表示
3. ビュー:回答2 回答2をカテゴリ別に表示
各ビューには、アンケート入力を新規作成するアクションボタンがあります。
アプリケーションの設計:ビュー 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
カスタムコントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規カスタムコントロール 34
項目 設定値
名前 ccFormTopic
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino 文書」を選択
フォーム:データソースのバインド(1) 35
• 設定は次頁を参照
POINT
「データソース」を定義することで文書のデータにアクセスできるようになります。
1. ダイアログ「データソースの定義」で下記を設定
2. 「OK」をクリック
フォーム:データソースのバインド(2) 36
項目 設定値
フォーム アンケート - Topic
フォーム検証の実行 文書ロード時
POINT「フォームの検証の実行」
指定したタイミングでフォームのフィールドが計算されます。• 文書のロード時• 文書保存時• 両方
[コントロールの選択]ダイアログボックスが使用可能になっていることを確認
フォーム:[コントロールの選択]の確認 37
使用可能:
使用不可:
POINT「使用可能」の場合、
フィールドを貼り付ける際にコントロールを選択できます。
1. データパレットに表示されているフィールドの名前をすべて選択 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
フォーム:フィールドの貼り付け 38
1. ダイアログ「データバインドコントロールの選択」で下記を設定
2. 「OK」をクリック
フォーム:データバインドコントロールの選択 39
フィールド ラベル コントロール
CreatedDate 回答日 計算結果フィールド
Author 回答者 計算結果フィールド
Answer01 質問1 編集ボックス
Answer02 質問2 リストボックス
Answer03 質問3 テキスト領域
1. 「Answer02」フィールドを選択
2. 画面下部の枠「プロパティ」のタブ「値」を選択
3. ボタン「項目の追加」から下記の選択肢を設定
フォーム:リストボックスの選択肢の設定 40
ラベル 値
iPhone iPhone
Android Android
その他 その他
1. メニューバーから「ファイル > 保存」をクリック• タブ名の「*」 が表示されている場合、未保存状態
フォーム:カスタムコントロールの保存 41
42
STEP 5.2フォーム「アンケート」を表示する「XPage」の作成
XPage
カスタムコントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規 XPage 43
項目 設定値
名前 xpFormTopic
1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccFormTopic」を「設計」にドラッグ&ドロップ
フォーム:カスタムコントロールの貼り付け 44
1. メニューバーから「ファイル > 保存」をクリック
フォーム:XPage の保存 45
保存時に、下図のダイアログが表示されることがあります。
メニューバーから「プロジェクト > 自動にビルド」を有効にしてください。
フォーム:補足:自動ビルドがオフになりました 46
1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」をクリック
• ツールバーからもプレビュー可能
フォーム:XPage のプレビュー 47
48
STEP 6ビュー画面の作成
49
XPage
カスタムコントロール
STEP 6.1ビュー「すべてのアンケート」を表示する「カスタムコントロール」の作成
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
ビュー:新規カスタムコントロール 50
項目 設定値
名前 ccViewAll
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino ビュー」を選択
5. 「ビュー」で「すべてのアンケート - all」を選択
6. 「OK」をクリック
ビュー:データソースのバインド 51
1. データパレットに表示されている列の名前をすべて選択 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
4. 「OK」をクリック
ビュー:ビューパネルの貼り付け 52
1. ビューパネルを選択 枠「アウトライン」からだと簡単に選択できます。
2. 「プロパティ」のタブ「表示」を選択
3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定
ビュー:文書を開く時のフォーム(XPage)の設定 53
1. ビューの列「viewColumn1」を選択(回答日)
2. 「プロパティ」のタブ「表示」を選択
3. 「列の値をリンクとして表示する」をチェック
4. 文書を開くモードは「読み取り専用」を選択
ビュー:列に文書を開くリンクを設定 54
1. メニューバーから「ファイル > 保存」をクリック
ビュー:カスタムコントロールの保存 55
56
STEP 6.2ビュー「すべてのアンケート」を表示する「XPage」の作成
XPage
カスタムコントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
ビュー:新規 XPage 57
項目 設定値
名前 xpViewAll
1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccViewAll」を「設計」にドラッグ&ドロップ
ビュー:カスタムコントロールの貼り付け 58
1. メニューバーから「ファイル > 保存」をクリック
ビュー: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. 枠「設計」の上端に改行を1つ入力 矢印キーでカーソルを移動し、改行を入力します。
3. 枠「コントロール」の「コアコントロール」をクリックして展開
4. ボタンをドラッグ&ドロップして上端に4つ並べて貼り付け
ボタン:コントロールの貼り付け 63
POINT開くのは
カスタムコントロールの方です。
1. ボタンを選択
2. 「イベント」を選択
3. タブ「イベント」で「マウス – onclick 」を選択
4. タブ「サーバー」で「シンプルアクション」をチェック
5. ボタン「アクションの追加…」をクリック
6. ダイアログ「シンプルアクションの追加」でアクションを選択
7. 「OK」をクリック
上記を基本とし、共通の操作でイベントを設定します。
ボタン:イベント(シンプルアクション)設定方法 64
POINTシンプルアクションを使用すると基本動作を簡単に設定できます。
1. ボタンを選択
2. 「プロパティ」のタブ「ボタン」を選択
3. 「可視」でコントロールの表示/非表示を制御1. チェックあり:常に表示
2. チェックなし:常に非表示
3. 計算済み:条件で表示
条件の設定方法
4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択
5. ダイアログ「スクリプトエディタ」で条件(JavaScript 等)を記述
6. 「OK」をクリック
ボタン:可視(表示/非表示)の設定方法 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
項目 設定値
ラベル 編集
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn083.gif
可視 計算済み (◇値の計算…から設定)
JavaScript !(document1.isEditable());
項目 設定値
カテゴリ 文書
アクション 文書モードの変更
文書モード 編集モード
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で下記を設定
ボタン:編集:イベント 73
74
STEP 7.3ボタン「保存して閉じる」の設定
1. ボタン「保存して閉じる」に下記を設定
ボタン:保存して閉じる:設定 75
項目 設定値
ラベル 保存して閉じる
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn117.gif
可視 計算済み (◇値の計算…から設定)
JavaScript document1.isEditable();
2つのアクションを設定します。
1. ダイアログ「シンプルアクションの追加」で下記を設定
2. ダイアログ「シンプルアクションの追加」で下記を設定
項目 設定値
カテゴリ 文書
アクション 文書の保存
データソース名 document1
ボタン:保存して閉じる:イベント 76
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll
77
STEP 7.4ボタン「削除」の設定
1. ボタン「削除」に下記を設定
ボタン:削除:設定 78
項目 設定値
ラベル 削除
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn004.gif
可視 計算済み (◇値の計算…から設定)
JavaScript !(document1.isEditable());
項目 設定値
カテゴリ 文書
アクション 文書の削除
次に開くページの名前 xpViewAll
確認テキスト 削除しますか?
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で下記を設定
ボタン:削除:イベント 79
80
STEP 7.5ボタンの動作確認
メニューバーから「ファイル > 保存」をクリック
一通りボタンの動きを確認する アイコン
名前
動作
可視(表示/非表示)
ボタン:プレビューで確認 81
読み込みモード 編集モード
82
STEP 8起動プロパティの設定
Web ブラウザでアクセスした場合、指定した XPageで開く設定を行います。
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「アプリケーションのプロパティ」をダブルクリック
4. タブ「起動」をクリック
5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択
6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択
7. メニューバーから「ファイル > 保存」をクリック
8. メニューバーから「ファイル > 閉じる」をクリック
起動プロパティの設定 83
「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライアント(スタンダード版)からも「XPage」が利用できます。
但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があります。よって、テストは別途必要です。
起動プロパティの設定(補足) 84
85
STEP 9オプション:アプリケーションレイアウト
簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウト」を使ってみましょう。
レイアウト:拡張ライブラリのアプリケーションレイアウト 86
バナータイトルバー
プレースバー
フッターリーガル
コンテンツ領域(左) コンテンツ領域(中央)※ここにカスタムコントロール貼り付け
1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け
2. その上にフォームやビューのカスタムコントロールを貼り付け
レイアウト:構成 87
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
88
XPage
カスタムコントロール
STEP 9.1「アプリケーションレイアウト」を使用した「カスタムコントロール」の作成
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」で「ccLayout」を入力
レイアウト:新規カスタムコントロール 89
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「アプリケーションレイアウト」を「設計」にドラッグ&ドロップ
レイアウト:アプリケーションレイアウトの貼り付け 90
1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定
2. 「OK」をクリック
レイアウト:パラメータの設定 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
1. タブ「リーガル」を選択
2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択
3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」を入力
レイアウト:リーガルの設定 99
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「ナビゲータ」を「設計」にドラッグ&ドロップ
レイアウト:ナビゲータの貼り付け 100
1. タブ「ナビゲーション項目」を選択 コントロール「ナビゲータ」にあります。
2. ボタン「項目の追加」から「ページリンクノード」を追加
3. 画面右のプロパティで下記を設定
レイアウト:ナビゲータの設定 101
プロパティ 設定値
image /actn120.gif
labal すべて
page /xpViewAll.xsp
カスタムコントロール「ccLayout」を保存して閉じます。
レイアウト:カスタムコントロールの保存 102
103
STEP 9.2「アプリケーションレイアウト」を使用した「XPage」の作成
XPage
カスタムコントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpViewAll」をダブルクリック
レイアウト:すべてのアンケートビュー用 XPage の修正 104
1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ&ドロップ
レイアウト:すべてのアンケートビュー用 XPage の設定(1) 105
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール「ccViewAll」をドラッグ&ドロップ
レイアウト:すべてのアンケートビュー用 XPage の設定(2) 106
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpFormTopic」をダブルクリック
レイアウト:フォーム用 XPage の修正 107
1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッグ&ドロップ
レイアウト:フォーム用 XPage の設定(1) 108
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール「ccFormTopic」をドラッグ&ドロップ
レイアウト:フォーム用 XPage の設定(2) 109
XPage
カスタムコントロールアプリケーションレイアウト
カスタムコントロールフォーム/ビュー
↓ この部分
XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する バナー、アイコン
アプリケーション名
リンク、ボタン
レイアウト:プレビューで確認 110
バナー
検索
リンク
リーガル
新規作成ボタン
リンク
バナー
ビュー/フォーム画面
ビュー切り替え
111
STEP 10オプション:デザインの調整
112
STEP 10.1フォームのデザインの調整
1. 対象のコントロールを選択
2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定 フォント
背景
余白
本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。
デザイン:スタイル 113
1. 対象のコントロールを選択
2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定 ピクセル
パーセント
自動
デザイン:コントロールの幅 114
1. 対象のコントロールを選択
2. 枠「プロパティ」のタブ「表のセル」のオプションで設定 セルの横位置
セルの縦位置
デザイン:表のセルの位置 115
例)セルの中のラベル「質問1:」を上付きにした場合
下図を参考にフォームのデザインを自由に変更してみましょう。
デザイン:演習問題(1) 116
幅 100ピクセル
高さ 70ピクセル幅 100パーセント
セルの幅 50ピクセル
セルの縦位置「上」
直接テキストを入力
表の幅 100パーセント
117
STEP 10.2ビューのデザインの調整
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定 表示形式:日付と時刻
日付スタイル:デフォルト
時刻スタイル:デフォルト
デザイン:列の設定(表示タイプ:日付/時刻) 118
注意:
列のプロパティを操作していると、「ビューの列のヘッダー」のラベルが勝手に変更される場合があります。変更された場合、手動で直して保存してください。
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定 表示形式:小数点
整数のみ:チェック
デザイン:列の設定(表示タイプ:数値(整数のみ)) 119
下図を参考にビューのデザインを自由に変更してみましょう。
デザイン:演習問題(2) 120
表示タイプ:日付/時刻
ビューパネル幅 100パーセント
表示タイプ:数値(整数のみ)
121
STEP 11オプション:ビューの追加
今までの作業を参考に以下の2つのビューを追加してみましょう。 回答1
回答2
オプション:演習問題(3-1) 122
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
カスタムコントロール
ccViewAns1 Domino ビュー 回答1 - q1 -
XPage xpViewAns1 - - ccLayoutccViewAns1
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
カスタムコントロール
ccViewAns2 Domino ビュー 回答2 - q2 -
XPage xpViewAns2 - - ccLayoutccViewAns2
今までの作業を参考にナビゲータへ2つのビューのリンクを追加してみましょう。
1. カスタムコントロール「ccLayout」を開く
2. コントロール「ナビゲータ」を選択
3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択
4. ボタン「項目の追加」から下記の項目を追加
オプション:演習問題(3-2) 123
種類 image label page
ページリンクノード /actn120.gif 回答1 /xpViewAns1
ページリンクノード /actn120.gif 回答2 /xpViewAns2
XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する アイコン
ナビゲータ
ビュー
オプション:プレビューで確認 124
ビュー切り替え
125
STEP 12オプション:テーマの変更
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「テーマのデフォルト」の「アプリケーションのテーマ」で「OunUI V3.0.2」を選択
6. メニューバーから「ファイル > 保存」をクリック
7. メニューバーから「ファイル > 閉じる」をクリック
テーマの変更 126
テーマの変更:プレビューで確認 127
OneUI V2.1
OneUI V2
OneUI V3.0.2
128
補足資料設計要素の構成および設定
設計要素の構成(Step 8 まで) 129
【XPage】xpFormTopic
【カスタムコントロール】ccFormTopic
【XPage】xpViewAll
【カスタムコントロール】ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」
設計要素の構成(Step 9 から)(1) 130
【XPage】xpFormTopic
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccFormTopic
【XPage】xpViewAll
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAll
フォーム「アンケート」 ビュー「すべてのアンケート」
設計要素の構成(Step 9 から)(2) 131
【XPage】xpViewAns1
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAns1
【XPage】xpViewAns2
【カスタムコントロール】アプリケーションレイアウト
ccLayout
【カスタムコントロール】ccViewAns2
ビュー「回答1」 ビュー「回答2」
設計要素の設定 132
設計要素 名前 データソース(タイプ)
データソース(名称)
貼り付けるカスタムコントロール
XPage xpFormTopic - - ccLayoutccFormTopic
カスタムコントロール
ccFormTopic Domino 文書 アンケート - Topic -
XPage xpViewAll - - ccLayoutccViewAll
カスタムコントロール
ccViewAll Domino ビュー すべてのアンケート - all -
XPage xpViewAns1 - - ccLayoutccViewAns1
カスタムコントロール
ccViewAns1 Domino ビュー 回答1 - q1 -
XPage xpViewAns2 - - ccLayoutccViewAns2
カスタムコントロール
ccViewAns2 Domino ビュー 回答2 - 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
Top Related