Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
今日から始める
XPages アプリケーション開発!
ノーツコンソーシアム オープンセミナー 2016 ハンズオン
XPagesDay 出張セッション
2016/11/09
株式会社ソルクシーズ 吉田 武司
Ver. 1.0.2
 本資料の掲載内容は、できる限り正確を期するよう に努めてはおりますが、
いかなる明示または暗黙の 保証も責任も負いかねます。
 掲載情報は不定期に変更されることもあります。他 のメディア等に無断で転
載する事はご遠慮下さい。
 当資料を...
3
STEP 1
はじめに
これから XPages を始める方への取っ掛かりになるようハンズオ
ンにしたいと思います。
限られた時間のため、極力プログラミング要素を除外した仕様と
なっています。
 標準機能を積極的に使用
 事前に用意したノーツアプリケーションを ...
バージョン
 Domino 9.0.1 FP3 (FP5でも確認済み)
 Notes 9.0.1 FP5
資料およびアプリケーション(NSF)は公開しています。
 テキスト
• http://www.slideshare.net/ch...
本来ならば、CSS を使用した方が良いのですが、最初からすべて
を覚えるのは大変です。
 Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カス
ケード・スタイル・シート)とは、HTML や XML ...
 XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな
技術であり、Domino Designer を使用して開発する。
 NSF ファイルに新たな設計要素として XMLで表現される XPage が追加...
 XPages は Notes アプリケーションにおける画面(GUI)を開発するための新たな
技術であり、Domino Designer を使用して開発する。
 NSF ファイルに新たな設計要素として XMLで表現される XPage が追加...
本資料では、基本的に以下のように表現しています。
 他の資料では違う場合があります。ご了承ください。
 XPages
• XPages 技術、アプリケーションなど全般的な意味
 XPage
• データベース(アプリケーション)の設計要素...
Domino Designer
 アプリケーションの開発
ブラウザまたはノーツクライアント(スタンダード版)
 アプリケーションの動作確認
Domino サーバー
 アプリケーションの実行
データベース(アプリケーション)
 本...
XPage を利用するには、2つの方法があります。
 ノーツクライアント(スタンダード版)
 ブラウザ
利用方法 11
ブラウザ
ドミノサーバー
ノーツクライアント ノーツクライアント
ローカルにレプリカ
サーバー文書
 セキュリティ-可能なプログラムの制限
• 制限なしで署名または実行
• 呼び出したユーザーとして実行するエージェントとまたは XPage を署名
開発者のユーザーまたはグループを設定
 ノーツクライアント(スタンダード版)...
 ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です。
 ACL に「Anonymous」を追加し、「作成者」以上の権限を付加します。
 Anonymous が設定されていない場合、プレビュー時に警告が表示され...
14
STEP 2
Domino Designer について
「アンケート」 DB を選択して右クリック、メニューから「Designer で
開く」を選択します。
Domino Designer の起動 15
Designer の各枠は、「Eclipse ビュー」呼びます。
 ノーツの設計要素であるビューと紛らわしいため、今回のハンズオンで
は、便宜的に「枠」と呼ぶことにします。(例:アプリケーション枠)
 枠の並びは自由に変更できます。
Do...
Domino Designer の説明:基本の流れ 17
② 部品を配置① 対象を選択
③ 対象を設定
枠の表示
 ウィンドウ > Eclipse ビューの表示 > [枠]
Domino Designer の説明:枠と閉じてしまった場合 18
19
STEP 3
XPages 化するアプリケーションについて
社員に対して IT 機器のアンケートを実施するためのノーツアプリ
ケーションです。
 フォームが1つ、ビューが3つあります。
• 回答フォームには、3つの質問があります。
• 回答の結果はビュー(3種類)で確認できます。
アプリケーションの...
ACL(アクセス制御リスト)
• 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回
は全データが閲覧できる仕様です。
• 変更は本人と管理者のみ可能です。
アプリケーションの ACL 21
ユーザー アクセス権 作成 削除 ...
1. フォーム:アンケート
 フィールド
1. 回答日:回答時の日時
2. 回答者:回答者のユーザー名
3. 回答1:数値(デフォルト値:0)
4. 回答2:チェックボックス(3択)
5. 回答3:テキスト
 ボタン
1. 閉じる
2. 保...
1. ビュー:すべてのアンケート
 回答日順に表示
2. ビュー:回答1
 回答1をカテゴリ別に表示
3. ビュー:回答2
 回答2をカテゴリ別に表示
 各ビューには、アンケート入力を新規作成するアクションボタンがあります。
アプリケー...
1. ビューのアクションボタンから新規に
アンケートを回答してみましょう。
2. Domino Designer を起動して設計を
確認してみましょう。
3. クラシック Web で表示してみましょう。
 フレームセット「メインフレームセット...
Step 4 ~ 6
1. ビューの表示
2. ビューから文書を開く
XPage の完成イメージ(前半) 25
Step 7 ~ 11
 文書の作成、編集、削除
 レイアウト
 複数のビューの切り替え
XPage の完成イメージ(後半) 26
27
STEP 4
データベースの設定
1. 画面左の枠「アプリケーション」の「アン
ケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「エラー処理」の「XPage 実行時エラー...
29
STEP 5
フォーム画面の作成
 XPages アプリケーション開発では以下の設計要素をよく使用します。
 設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレー
ムセット、ページなどのことです。
 上記以外にもリソース(ファイル、スタイルシート、テ...
 XPages には、ノーツの文書およびビューに簡単にアクセスするための機能が
あります。
 アクセスするためには、「データソース」を定義します。
 Domino 文書
 Domino ビュー
 フォームのフィールドデータを XPag...
 後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロー
ル」で作成します。
 作成したカスタムコントロールを XPage に貼り付けます。
 「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケ...
33
STEP 5.1
フォーム「アンケート」を表示する「カスタムコントロール」の作成
XPage
カスタム
コントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規カスタムコントロー...
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino 文書」を選択
フォーム:データソースのバインド(1) 35...
1. ダイアログ「データソースの定義」で下記を設定
2. 「OK」をクリック
フォーム:データソースのバインド(2) 36
項目 設定値
フォーム アンケート - Topic
フォーム検証の実行 文書ロード時
POINT
「フォームの検証の実行...
 [コントロールの選択]ダイアログボックスが使用可能になっていることを確認
フォーム:[コントロールの選択]の確認 37
使用可能:
使用不可:
POINT
「使用可能」の場合、
フィールドを貼り付ける際に
コントロールを選択できます。
1. データパレットに表示されているフィールドの名前をすべて選択
 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
フォーム:フ...
1. ダイアログ「データバインドコントロールの選択」で下記を設定
2. 「OK」をクリック
フォーム:データバインドコントロールの選択 39
フィールド ラベル コントロール
CreatedDate 回答日 計算結果
フィールド
Author ...
1. 「Answer02」フィールドを選択
2. 画面下部の枠「プロパティ」のタブ「値」を選択
3. ボタン「項目の追加」から下記の選択肢を設定
フォーム:リストボックスの選択肢の設定 40
ラベル 値
iPhone iPhone
Androi...
1. メニューバーから「ファイル > 保存」をクリック
• タブ名の「*」 が表示されている場合、未保存状態
フォーム:カスタムコントロールの保存 41
42
STEP 5.2
フォーム「アンケート」を表示する「XPage」の作成
XPage
カスタム
コントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
フォーム:新規 XPage 43
項目 設定値
名...
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
項目 設定値
名前...
1. 画面右の枠「データパレット」をクリック
2. 「データソース」で「データソースの定義」を選択
3. ダイアログ「データソースの定義」が開く
4. 「データソース」で「Domino ビュー」を選択
5. 「ビュー」で「すべてのアンケート -...
1. データパレットに表示されている列の名前をすべて選択
 Ctrl を押しながらマウスでクリック
2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ
3. ダイアログ「データバインドコントロールの選択」が開く
4. 「OK」をクリ...
1. ビューパネルを選択
 枠「アウトライン」からだと簡単に選択できます。
2. 「プロパティ」のタブ「表示」を選択
3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定
ビュー:文書を開く時のフォーム(XPag...
1. ビューの列「viewColumn1」を選択(回答日)
2. 「プロパティ」のタブ「表示」を選択
3. 「列の値をリンクとして表示する」をチェック
4. 文書を開くモードは「読み取り専用」を選択
ビュー:列に文書を開くリンクを設定 54
1. メニューバーから「ファイル > 保存」をクリック
ビュー:カスタムコントロールの保存 55
56
STEP 6.2
ビュー「すべてのアンケート」を表示する「XPage」の作成
XPage
カスタム
コントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「新規 XPage」をクリック
4. 「名前」を入力
5. 「OK」をクリック
ビュー:新規 XPage 57
項目 設定値
名前...
1. 画面右の枠「コントロール」を選択
2. カスタムコントロールをクリックして展開
3. カスタムコントロール「ccViewAll」を「設計」にドラッグ&ドロップ
ビュー:カスタムコントロールの貼り付け 58
1. メニューバーから「ファイル > 保存」をクリック
ビュー:XPage の保存 59
1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を
クリック
2. 回答日のリンクをクリックすると文書が開くことを確認
ビュー:XPage のプレビュー 60
61
STEP 7
ボタンの作成
ボタン:仕様 62
名前 動作(アクション) ボタンの
種類
ボタンの
アイコン
可視 可視の条件
JavaScript
閉じる すべてのアンケー
トビューを開く
キャンセル actn027.gif 常時 - 設定なし -
編集 文書を編集モー...
1. カスタムコントロール「ccFormTopic」を開く
2. 枠「設計」の上端に改行を1つ入力
 矢印キーでカーソルを移動し、改行を入力します。
3. 枠「コントロール」の「コアコントロール」をクリックして展開
4. ボタンをドラッグ&ド...
1. ボタンを選択
2. 「イベント」を選択
3. タブ「イベント」で「マウス – onclick 」を選択
4. タブ「サーバー」で「シンプルアクション」をチェック
5. ボタン「アクションの追加…」をクリック
6. ダイアログ「シンプルアク...
1. ボタンを選択
2. 「プロパティ」のタブ「ボタン」を選択
3. 「可視」でコントロールの表示/非表示を制御
1. チェックあり:常に表示
2. チェックなし:常に非表示
3. 計算済み:条件で表示
 条件の設定方法
4. 「可視」の右の...
ボタン:可視(表示/非表示)の設定例 66
編集モード時のみ表示
document1.isEditable();
読み込みモード時のみ表示
!(document1.isEditable());
文書の
データソース
文書が編集モードかどうか...
67
STEP 7.1
ボタン「閉じる」の設定
1. ボタン「閉じる」に下記を設定
ボタン:閉じる:設定 68
項目 設定値
ラベル 閉じる
ボタンの種類 キャンセル
ボタンのイメージを選択 チェックあり
アイコン actn027.gif
可視 チェックあり
1. ダイアログ「シンプルアクションの追加」
で下記を設定
ボタン:閉じる:イベント 69
項目 設定値
カテゴリ 基本
アクション ページを開く
開くページの名前 xpViewAll
 メニューバーから「ファイル > 保存」をクリック
 一通りボタンの動きを確認する
 アイコン
 名前
 動作
ボタン:閉じる:プレビューで確認 70
71
STEP 7.2
ボタン「編集」の設定
1. ボタン「編集」に下記を設定
ボタン:編集:設定 72
項目 設定値
ラベル 編集
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn083.gif
可視 計算済み (◇値の計算…から設定)
JavaScript...
項目 設定値
カテゴリ 文書
アクション 文書モードの変更
文書モード 編集モード
データソース名 document1
1. ダイアログ「シンプルアクションの追加」
で下記を設定
ボタン:編集:イベント 73
74
STEP 7.3
ボタン「保存して閉じる」の設定
1. ボタン「保存して閉じる」に下記を設定
ボタン:保存して閉じる:設定 75
項目 設定値
ラベル 保存して閉じる
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn117.gif
可視 計算済み (◇値の計算…か...
 2つのアクションを設定します。
1. ダイアログ「シンプルアクションの追加」で下記を設定
2. ダイアログ「シンプルアクションの追加」で下記を設定
項目 設定値
カテゴリ 文書
アクション 文書の保存
データソース名 document1
ボ...
77
STEP 7.4
ボタン「削除」の設定
1. ボタン「削除」に下記を設定
ボタン:削除:設定 78
項目 設定値
ラベル 削除
ボタンの種類 ボタン
ボタンのイメージを選択 チェックあり
アイコン actn004.gif
可視 計算済み (◇値の計算…から設定)
JavaScript...
項目 設定値
カテゴリ 文書
アクション 文書の削除
次に開くページの名前 xpViewAll
確認テキスト 削除しますか?
データソース名 document1
1. ダイアログ「シンプルアクションの追加」で
下記を設定
ボタン:削除:イベント...
80
STEP 7.5
ボタンの動作確認
 メニューバーから「ファイル > 保存」をクリック
 一通りボタンの動きを確認する
 アイコン
 名前
 動作
 可視(表示/非表示)
ボタン:プレビューで確認 81
読み込みモード 編集モード
82
STEP 8
起動プロパティの設定
 Web ブラウザでアクセスした場合、指定した XPage で開く設定を行います。
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「アプリケーションのプロパティ」を...
 「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライア
ント(スタンダード版)からも「XPage」が利用できます。
 但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があり
ます。よって、...
85
STEP 9
オプション:アプリケーションレイアウト
 簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウ
ト」を使ってみましょう。
レイアウト:拡張ライブラリのアプリケーションレイアウト 86
バナー
タイトルバー
プレースバー
フッター
リーガル
コンテンツ領域(左)...
1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け
2. その上にフォームやビューのカスタムコントロールを貼り付け
レイアウト:構成 87
XPage
カスタムコントロール
アプリケーションレイアウト
カスタムコント...
88
XPage
カスタム
コントロール
STEP 9.1
「アプリケーションレイアウト」を使用した「カスタムコントロール」
の作成
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「カスタムコントロール」をダブルクリック
3. 「新規カスタムコントロール」をクリック
4. 「名前」で「ccLayout」を入力
レイアウト:新規カスタムコントロール...
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「アプリケーションレイアウト」を「設計」にドラッグ&ドロップ
レイアウト:アプリケーションレイアウトの貼り付け 90
1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定
2. 「OK」をクリック
レイアウト:パラメータの設定 91
項目 設定値
構成 OneUI アプリケーション構成
バナー [チェックあり]
タイトルバー [チェック...
1. タブ「アプリケーションレイアウト」を選択
2. コンテンツ領域の「中央の列」をチェック
レイアウト:コンテンツ領域の設定 92
1. タブ「バナー」を選択
2. ロゴの「イメージ」で「xpagesday_logo_banner.png」を選択
レイアウト:バナーの設定 93
1. タブ「バナー > アプリケーションリンク」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンク
ノード」を選択
3. 画面右のプロパティ「label」で「ホーム」を入力
4. 画面右のプロパティ「page」で「xpVi...
1. タブ「タイトルバー」を選択
2. 「タイトルテキスト」の右の◇マークをクリックし、
「値の計算…」を選択
3. 以下の JavaScript を入力 (DBタイトルを表示)
@DbTitle()
レイアウト:タイトルバーの設定 95
 検索機能を利用するためには、事前に全文索引の作成が必要です。
1. タブ「タイトルバー > 検索」を選択
2. 「検索コントロール(オプションドロップダウン、編集ボックス、検索アイコン)
を表示」をチェック
3. 「ページ名」で「xpVie...
1. タブ「プレースバー」を選択
2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択
3. 画面右のプロパティで下記を設定
レイアウト:プレースバーの設定 97
プロパティ 設定値
image /actn089.gi...
1. タブ「フッター」を選択
2. 「リンク」の「コンテナノード > 基本ノード」を選択
3. 画面右のプロパティ「href」「ラベル」を設定
 今回は時間の関係からデフォルトのまま使用します。
 余裕がある方は設定してみてください。
レイ...
1. タブ「リーガル」を選択
2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択
3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」
を入力
レイア...
1. 画面右の枠「コントロール」を選択
2. 拡張ライブラリをクリックして展開
3. 「ナビゲータ」を「設計」にドラッグ&ドロップ
レイアウト:ナビゲータの貼り付け 100
1. タブ「ナビゲーション項目」を選択
 コントロール「ナビゲータ」にあります。
2. ボタン「項目の追加」から「ページリンクノード」を追加
3. 画面右のプロパティで下記を設定
レイアウト:ナビゲータの設定 101
プロパティ 設定値
im...
 カスタムコントロール「ccLayout」を保存して閉じます。
レイアウト:カスタムコントロールの保存 102
103
STEP 9.2
「アプリケーションレイアウト」を使用した「XPage」の作成
XPage
カスタム
コントロール
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpViewAll」をダブルクリック
レイアウト:すべてのアンケートビュー用 XPage の修正 104
1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除
 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にドラッ...
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール
「ccViewAll」をドラッグ&ドロップ
レイアウト:すべてのアンケートビュー用 XPage の設定(2) 106
XPage
カスタムコントロール
アプリケー...
1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック
2. 「XPage」をダブルクリック
3. 「xpFormTopic」をダブルクリック
レイアウト:フォーム用 XPage の修正 107
1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除
 アウトラインから選択して右クリック、「削除」を選択
2. 枠「コントロール」の「カスタムコントロール」をクリックして展開
3. 「ccLayout」を「設計」にド...
1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール
「ccFormTopic」をドラッグ&ドロップ
レイアウト:フォーム用 XPage の設定(2) 109
XPage
カスタムコントロール
アプリケーションレイア...
 XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する
 バナー、アイコン
 アプリケーション名
 リンク、ボタン
レイアウト:プレビューで確認 110
バナー
検索
リンク
リーガル
新規作成ボタン
リンク
バナ...
111
STEP 10
オプション:デザインの調整
112
STEP 10.1
フォームのデザインの調整
1. 対象のコントロールを選択
2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定
 フォント
 背景
 余白
 本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。
デザイン...
1. 対象のコントロールを選択
2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定
 ピクセル
 パーセント
 自動
デザイン:コントロールの幅 114
1. 対象のコントロールを選択
2. 枠「プロパティ」のタブ「表のセル」のオプションで設定
 セルの横位置
 セルの縦位置
デザイン:表のセルの位置 115
例)セルの中のラベル「質問1:」を上付きにした場合
 下図を参考にフォームのデザインを自由に変更してみましょう。
デザイン:演習問題(1) 116
幅 100ピクセル
高さ 70ピクセル
幅 100パーセント
セルの幅 50ピクセル
セルの縦位置「上」
直接テキストを入力
表の幅 100パーセ...
117
STEP 10.2
ビューのデザインの調整
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定
 表示形式:日付と時刻
 日付スタイル:デフォルト
 時刻スタイル:デフォルト
デザイン:列の設定(表示タイプ:日付/時刻) 11...
1. 対象の「ビューの列」を選択
2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定
 表示形式:小数点
 整数のみ:チェック
デザイン:列の設定(表示タイプ:数値(整数のみ)) 119
 下図を参考にビューのデザインを自由に変更してみましょう。
デザイン:演習問題(2) 120
表示タイプ:日付/時刻
ビューパネル 幅 100パーセント
表示タイプ:数値(整数のみ)
121
STEP 11
オプション:ビューの追加
 今までの作業を参考に以下の2つのビューを追加してみましょう。
 回答1
 回答2
オプション:演習問題(3-1) 122
設計要素 名前 データソース
(タイプ)
データソース
(名称)
貼り付ける
カスタムコントロール
カスタム
コン...
 今までの作業を参考にナビゲータへ2つのビューのリンクを追加してみましょう。
1. カスタムコントロール「ccLayout」を開く
2. コントロール「ナビゲータ」を選択
3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択
4. ボタン...
 XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する
 アイコン
 ナビゲータ
 ビュー
オプション:プレビューで確認 124
ビュー
切り替え
125
STEP 12
オプション:テーマの変更
1. 画面左の枠「アプリケーション」の「アン
ケート」をダブルクリック
2. 「アプリケーション構成」をダブルクリック
3. 「Xsp プロパティ」をダブルクリック
4. タブ「一般」をクリック
5. 「テーマのデフォルト」の「アプリケーショ
...
テーマの変更:プレビューで確認 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】
xpViewA...
設計要素の構成(Step 9 から)(2) 131
【XPage】
xpViewAns1
【カスタムコントロール】
アプリケーションレイアウト
ccLayout
【カスタムコントロール】
ccViewAns1
【XPage】
xpViewAns...
設計要素の設定 132
設計要素 名前 データソース
(タイプ)
データソース
(名称)
貼り付ける
カスタムコントロール
XPage xpFormTopic - - ccLayout
ccFormTopic
カスタム
コントロール
ccFor...
フォームのボタンの設定 133
名前 動作(アクション) ボタンの
種類
ボタンの
アイコン
可視 可視の条件
JavaScript
閉じる すべてのアンケー
トビューを開く
キャンセル actn027.gif 常時 - 設定なし -
編集 文...
134
参考サイト
XPages.JP Project
 XPagesの普及のためさまざまな活動を行っています。
 http://xpages.jp/
 http://www.facebook.com/XPages.JP
XSnippets 日本版
 ...
Upcoming SlideShare
Loading in …5
×

今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)

10,447 views

Published on

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

Published in: Software
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F4cEJi ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

今日から始める XPages アプリケーション開発!(オープンセミナー 2016 ハンズオン XPagesDay 出張セッション)

  1. 1. 今日から始める XPages アプリケーション開発! ノーツコンソーシアム オープンセミナー 2016 ハンズオン XPagesDay 出張セッション 2016/11/09 株式会社ソルクシーズ 吉田 武司 Ver. 1.0.2
  2. 2.  本資料の掲載内容は、できる限り正確を期するよう に努めてはおりますが、 いかなる明示または暗黙の 保証も責任も負いかねます。  掲載情報は不定期に変更されることもあります。他 のメディア等に無断で転 載する事はご遠慮下さい。  当資料をコピー等で複製することは、執筆者の承諾 なしではできません。  当資料に掲載された製品名または会社名は それぞれの各社の商標または 登録商標です。 特記事項 2
  3. 3. 3 STEP 1 はじめに
  4. 4. これから XPages を始める方への取っ掛かりになるようハンズオ ンにしたいと思います。 限られた時間のため、極力プログラミング要素を除外した仕様と なっています。  標準機能を積極的に使用  事前に用意したノーツアプリケーションを XPages 化  レイアウト以降は、オプションにしています。復習の際、お試しください。 XPages 開発に慣れてきたら、プログラミングを含めた次のステッ プに挑戦してみてください。 本日の課題のレベル感 4
  5. 5. バージョン  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
  6. 6. 本来ならば、CSS を使用した方が良いのですが、最初からすべて を覚えるのは大変です。  Cascading Style Sheets(CSS、カスケーディング・スタイル・シート、カス ケード・スタイル・シート)とは、HTML や XML の要素をどのように修飾 (表示)するかを指示する、W3Cによる仕様の一つ。文書の構造と体裁を 分離させるという理念を実現する為に提唱されたスタイルシートの、具体 的な仕様の一つ。 Wikipedia 「Cascading Style Sheets」より要約 最終更新 2016年10月6日 (木) 18:15 よって、今回は直接的には CSS を使用しないで作成を行います。  実際には、後述のテーマで間接的には利用しています。 その代わり、標準で用意されている「テーマ」と拡張ライブラリの 「アプリケーションレイアウト」を使用します。 前提:デザイン 6
  7. 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 とは 7
  8. 8.  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)  スタンダード版クライアントのみです XPages とは 8 ① ② ③ ④
  9. 9. 本資料では、基本的に以下のように表現しています。  他の資料では違う場合があります。ご了承ください。  XPages • XPages 技術、アプリケーションなど全般的な意味  XPage • データベース(アプリケーション)の設計要素である「XPage」  ブラウザで表示する Web ページもこの設計要素です。 XPages と XPage 9
  10. 10. Domino Designer  アプリケーションの開発 ブラウザまたはノーツクライアント(スタンダード版)  アプリケーションの動作確認 Domino サーバー  アプリケーションの実行 データベース(アプリケーション)  本日のお題:アンケートDBの XPage 化 開発に必要なもの 10
  11. 11. XPage を利用するには、2つの方法があります。  ノーツクライアント(スタンダード版)  ブラウザ 利用方法 11 ブラウザ ドミノサーバー ノーツクライアント ノーツクライアント ローカルにレプリカ
  12. 12. サーバー文書  セキュリティ-可能なプログラムの制限 • 制限なしで署名または実行 • 呼び出したユーザーとして実行するエージェントとまたは XPage を署名 開発者のユーザーまたはグループを設定  ノーツクライアント(スタンダード版)のみでもローカルで実行可能です。 • XPages in Notes client (XPiNC) Domino サーバー上で利用するための設定 12
  13. 13.  ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です。  ACL に「Anonymous」を追加し、「作成者」以上の権限を付加します。  Anonymous が設定されていない場合、プレビュー時に警告が表示されます。 ローカルでプレビューするための ACL 設定 13
  14. 14. 14 STEP 2 Domino Designer について
  15. 15. 「アンケート」 DB を選択して右クリック、メニューから「Designer で 開く」を選択します。 Domino Designer の起動 15
  16. 16. Designer の各枠は、「Eclipse ビュー」呼びます。  ノーツの設計要素であるビューと紛らわしいため、今回のハンズオンで は、便宜的に「枠」と呼ぶことにします。(例:アプリケーション枠)  枠の並びは自由に変更できます。 Domino Designer の説明 16 コントロール データパレット アプリケーション アウトライン プロパティ イベント 問題(エラー等) 設計 ソース
  17. 17. Domino Designer の説明:基本の流れ 17 ② 部品を配置① 対象を選択 ③ 対象を設定
  18. 18. 枠の表示  ウィンドウ > Eclipse ビューの表示 > [枠] Domino Designer の説明:枠と閉じてしまった場合 18
  19. 19. 19 STEP 3 XPages 化するアプリケーションについて
  20. 20. 社員に対して IT 機器のアンケートを実施するためのノーツアプリ ケーションです。  フォームが1つ、ビューが3つあります。 • 回答フォームには、3つの質問があります。 • 回答の結果はビュー(3種類)で確認できます。 アプリケーションの概要 20 ビュー ビュー【ビュー】 すべてのアンケート 【フォーム】 アンケート
  21. 21. ACL(アクセス制御リスト) • 本来のアンケートでは、自分以外の回答は非表示が望ましいですが、今回 は全データが閲覧できる仕様です。 • 変更は本人と管理者のみ可能です。 アプリケーションの ACL 21 ユーザー アクセス権 作成 削除 ロール 備考 管理者・サーバー 管理者 〇 〇 なし 一般(-Default-) 作成者 〇 〇 なし Anonymous なし - - なし
  22. 22. 1. フォーム:アンケート  フィールド 1. 回答日:回答時の日時 2. 回答者:回答者のユーザー名 3. 回答1:数値(デフォルト値:0) 4. 回答2:チェックボックス(3択) 5. 回答3:テキスト  ボタン 1. 閉じる 2. 保存 3. 編集 アプリケーションの設計:フォーム 22
  23. 23. 1. ビュー:すべてのアンケート  回答日順に表示 2. ビュー:回答1  回答1をカテゴリ別に表示 3. ビュー:回答2  回答2をカテゴリ別に表示  各ビューには、アンケート入力を新規作成するアクションボタンがあります。 アプリケーションの設計:ビュー 23
  24. 24. 1. ビューのアクションボタンから新規に アンケートを回答してみましょう。 2. Domino Designer を起動して設計を 確認してみましょう。 3. クラシック Web で表示してみましょう。  フレームセット「メインフレームセット」を Web ブラウザプレビューする。 アプリケーションの確認 24
  25. 25. Step 4 ~ 6 1. ビューの表示 2. ビューから文書を開く XPage の完成イメージ(前半) 25
  26. 26. Step 7 ~ 11  文書の作成、編集、削除  レイアウト  複数のビューの切り替え XPage の完成イメージ(後半) 26
  27. 27. 27 STEP 4 データベースの設定
  28. 28. 1. 画面左の枠「アプリケーション」の「アン ケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「Xsp プロパティ」をダブルクリック 4. タブ「一般」をクリック 5. 「エラー処理」の「XPage 実行時エラー ページを表示」を有効にする 6. 「テーマのデフォルト」の「アプリケーショ ンのテーマ」で「OunUI V2.1」を選択 7. メニューバーから「ファイル > 保存」をク リック 8. メニューバーから「ファイル > 閉じる」を クリック エラー処理とテーマの設定 28
  29. 29. 29 STEP 5 フォーム画面の作成
  30. 30.  XPages アプリケーション開発では以下の設計要素をよく使用します。  設計要素とは、ノーツアプリケーション開発で使用するフォームやビュー、フレー ムセット、ページなどのことです。  上記以外にもリソース(ファイル、スタイルシート、テーマ)やスクリプトライブラ リなども必要に応じて使用します。 設計要素 XPages アプリケーション ノーツアプリケーションで例えると… XPage フォーム カスタムコントロール サブフォーム イメージ イメージ(同じ) 30
  31. 31.  XPages には、ノーツの文書およびビューに簡単にアクセスするための機能が あります。  アクセスするためには、「データソース」を定義します。  Domino 文書  Domino ビュー  フォームのフィールドデータを XPages のコントロールと関連付ける場合、デー タソースのフィールドをバインド先として指定します。  データの参照・作成・変更などが行えます。 データソース、バインド 31
  32. 32.  後々の作業を考え、今回はフォームおよびビュー部分を「カスタムコントロー ル」で作成します。  作成したカスタムコントロールを XPage に貼り付けます。  「カスタムコントロール」は、XPage の部品のようなものです。ノーツアプリケー ションの「サブフォーム」をイメージすればわかりやすいかと思います。 基本構成 32 XPage カスタム コントロール フォーム サブフォーム
  33. 33. 33 STEP 5.1 フォーム「アンケート」を表示する「カスタムコントロール」の作成 XPage カスタム コントロール
  34. 34. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「カスタムコントロール」をダブルクリック 3. 「新規カスタムコントロール」をクリック 4. 「名前」を入力 5. 「OK」をクリック フォーム:新規カスタムコントロール 34 項目 設定値 名前 ccFormTopic
  35. 35. 1. 画面右の枠「データパレット」をクリック 2. 「データソース」で「データソースの定義」を選択 3. ダイアログ「データソースの定義」が開く 4. 「データソース」で「Domino 文書」を選択 フォーム:データソースのバインド(1) 35 • 設定は次頁を参照 POINT 「データソース」を定義するこ とで文書のデータにアクセス できるようになります。
  36. 36. 1. ダイアログ「データソースの定義」で下記を設定 2. 「OK」をクリック フォーム:データソースのバインド(2) 36 項目 設定値 フォーム アンケート - Topic フォーム検証の実行 文書ロード時 POINT 「フォームの検証の実行」 指定したタイミングでフォーム のフィールドが計算されます。 • 文書のロード時 • 文書保存時 • 両方
  37. 37.  [コントロールの選択]ダイアログボックスが使用可能になっていることを確認 フォーム:[コントロールの選択]の確認 37 使用可能: 使用不可: POINT 「使用可能」の場合、 フィールドを貼り付ける際に コントロールを選択できます。
  38. 38. 1. データパレットに表示されているフィールドの名前をすべて選択  Ctrl を押しながらマウスでクリック 2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ 3. ダイアログ「データバインドコントロールの選択」が開く フォーム:フィールドの貼り付け 38
  39. 39. 1. ダイアログ「データバインドコントロールの選択」で下記を設定 2. 「OK」をクリック フォーム:データバインドコントロールの選択 39 フィールド ラベル コントロール CreatedDate 回答日 計算結果 フィールド Author 回答者 計算結果 フィールド Answer01 質問1 編集ボックス Answer02 質問2 リストボックス Answer03 質問3 テキスト領域
  40. 40. 1. 「Answer02」フィールドを選択 2. 画面下部の枠「プロパティ」のタブ「値」を選択 3. ボタン「項目の追加」から下記の選択肢を設定 フォーム:リストボックスの選択肢の設定 40 ラベル 値 iPhone iPhone Android Android その他 その他
  41. 41. 1. メニューバーから「ファイル > 保存」をクリック • タブ名の「*」 が表示されている場合、未保存状態 フォーム:カスタムコントロールの保存 41
  42. 42. 42 STEP 5.2 フォーム「アンケート」を表示する「XPage」の作成 XPage カスタム コントロール
  43. 43. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「新規 XPage」をクリック 4. 「名前」を入力 5. 「OK」をクリック フォーム:新規 XPage 43 項目 設定値 名前 xpFormTopic
  44. 44. 1. 画面右の枠「コントロール」を選択 2. カスタムコントロールをクリックして展開 3. カスタムコントロール「ccFormTopic」を「設計」にドラッグ&ドロップ フォーム:カスタムコントロールの貼り付け 44
  45. 45. 1. メニューバーから「ファイル > 保存」をクリック フォーム:XPage の保存 45
  46. 46.  保存時に、下図のダイアログが表示されることがあります。  メニューバーから「プロジェクト > 自動にビルド」を有効にしてください。 フォーム:補足:自動ビルドがオフになりました 46
  47. 47. 1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を クリック • ツールバーからもプレビュー可能 フォーム:XPage のプレビュー 47
  48. 48. 48 STEP 6 ビュー画面の作成
  49. 49. 49 XPage カスタム コントロール STEP 6.1 ビュー「すべてのアンケート」を表示する「カスタムコントロール」 の作成
  50. 50. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「カスタムコントロール」をダブルクリック 3. 「新規カスタムコントロール」をクリック 4. 「名前」を入力 ビュー:新規カスタムコントロール 50 項目 設定値 名前 ccViewAll
  51. 51. 1. 画面右の枠「データパレット」をクリック 2. 「データソース」で「データソースの定義」を選択 3. ダイアログ「データソースの定義」が開く 4. 「データソース」で「Domino ビュー」を選択 5. 「ビュー」で「すべてのアンケート - all」を選択 6. 「OK」をクリック ビュー:データソースのバインド 51
  52. 52. 1. データパレットに表示されている列の名前をすべて選択  Ctrl を押しながらマウスでクリック 2. 選択した状態で画面中央の枠「設計」にドラッグ&ドロップ 3. ダイアログ「データバインドコントロールの選択」が開く 4. 「OK」をクリック ビュー:ビューパネルの貼り付け 52
  53. 53. 1. ビューパネルを選択  枠「アウトライン」からだと簡単に選択できます。 2. 「プロパティ」のタブ「表示」を選択 3. 「実行時に、選択した文書を開くために使用」で「xpFormTopic」を設定 ビュー:文書を開く時のフォーム(XPage)の設定 53
  54. 54. 1. ビューの列「viewColumn1」を選択(回答日) 2. 「プロパティ」のタブ「表示」を選択 3. 「列の値をリンクとして表示する」をチェック 4. 文書を開くモードは「読み取り専用」を選択 ビュー:列に文書を開くリンクを設定 54
  55. 55. 1. メニューバーから「ファイル > 保存」をクリック ビュー:カスタムコントロールの保存 55
  56. 56. 56 STEP 6.2 ビュー「すべてのアンケート」を表示する「XPage」の作成 XPage カスタム コントロール
  57. 57. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「新規 XPage」をクリック 4. 「名前」を入力 5. 「OK」をクリック ビュー:新規 XPage 57 項目 設定値 名前 xpViewAll
  58. 58. 1. 画面右の枠「コントロール」を選択 2. カスタムコントロールをクリックして展開 3. カスタムコントロール「ccViewAll」を「設計」にドラッグ&ドロップ ビュー:カスタムコントロールの貼り付け 58
  59. 59. 1. メニューバーから「ファイル > 保存」をクリック ビュー:XPage の保存 59
  60. 60. 1. メニューバーから「設計 > Web ブラウザでプレビュー > Internet Explorer」を クリック 2. 回答日のリンクをクリックすると文書が開くことを確認 ビュー:XPage のプレビュー 60
  61. 61. 61 STEP 7 ボタンの作成
  62. 62. ボタン:仕様 62 名前 動作(アクション) ボタンの 種類 ボタンの アイコン 可視 可視の条件 JavaScript 閉じる すべてのアンケー トビューを開く キャンセル actn027.gif 常時 - 設定なし - 編集 文書を編集モード にする ボタン/送信 actn083.gif 読み込み !(document1.isEditable()); 保存し て閉じる 保存後、 すべてのアンケー トビューを開く ボタン/送信 actn117.gif 編集 document1.isEditable(); 削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());  今回使用するアイコンの画像は、あらかじめリソースにインポート済みです。
  63. 63. 1. カスタムコントロール「ccFormTopic」を開く 2. 枠「設計」の上端に改行を1つ入力  矢印キーでカーソルを移動し、改行を入力します。 3. 枠「コントロール」の「コアコントロール」をクリックして展開 4. ボタンをドラッグ&ドロップして上端に4つ並べて貼り付け ボタン:コントロールの貼り付け 63 POINT 開くのは カスタムコントロール の方です。
  64. 64. 1. ボタンを選択 2. 「イベント」を選択 3. タブ「イベント」で「マウス – onclick 」を選択 4. タブ「サーバー」で「シンプルアクション」をチェック 5. ボタン「アクションの追加…」をクリック 6. ダイアログ「シンプルアクションの追加」でアクションを選択 7. 「OK」をクリック  上記を基本とし、共通の操作でイベントを設定します。 ボタン:イベント(シンプルアクション)設定方法 64 POINT シンプルアクションを使用すると 基本動作を簡単に設定できます。
  65. 65. 1. ボタンを選択 2. 「プロパティ」のタブ「ボタン」を選択 3. 「可視」でコントロールの表示/非表示を制御 1. チェックあり:常に表示 2. チェックなし:常に非表示 3. 計算済み:条件で表示  条件の設定方法 4. 「可視」の右の◇マークをクリックし、「値の計算…」を選択 5. ダイアログ「スクリプトエディタ」で条件(JavaScript 等)を記述 6. 「OK」をクリック ボタン:可視(表示/非表示)の設定方法 65
  66. 66. ボタン:可視(表示/非表示)の設定例 66 編集モード時のみ表示 document1.isEditable(); 読み込みモード時のみ表示 !(document1.isEditable()); 文書の データソース 文書が編集モードかどうか? True : 編集モード False : 読み込みモード True / Flase を反転させる 文書が編集モードかどうか? True : 編集モード False : 読み込みモード POINT ノーツの非表示式とは 逆のため注意が必要です。
  67. 67. 67 STEP 7.1 ボタン「閉じる」の設定
  68. 68. 1. ボタン「閉じる」に下記を設定 ボタン:閉じる:設定 68 項目 設定値 ラベル 閉じる ボタンの種類 キャンセル ボタンのイメージを選択 チェックあり アイコン actn027.gif 可視 チェックあり
  69. 69. 1. ダイアログ「シンプルアクションの追加」 で下記を設定 ボタン:閉じる:イベント 69 項目 設定値 カテゴリ 基本 アクション ページを開く 開くページの名前 xpViewAll
  70. 70.  メニューバーから「ファイル > 保存」をクリック  一通りボタンの動きを確認する  アイコン  名前  動作 ボタン:閉じる:プレビューで確認 70
  71. 71. 71 STEP 7.2 ボタン「編集」の設定
  72. 72. 1. ボタン「編集」に下記を設定 ボタン:編集:設定 72 項目 設定値 ラベル 編集 ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn083.gif 可視 計算済み (◇値の計算…から設定) JavaScript !(document1.isEditable());
  73. 73. 項目 設定値 カテゴリ 文書 アクション 文書モードの変更 文書モード 編集モード データソース名 document1 1. ダイアログ「シンプルアクションの追加」 で下記を設定 ボタン:編集:イベント 73
  74. 74. 74 STEP 7.3 ボタン「保存して閉じる」の設定
  75. 75. 1. ボタン「保存して閉じる」に下記を設定 ボタン:保存して閉じる:設定 75 項目 設定値 ラベル 保存して閉じる ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn117.gif 可視 計算済み (◇値の計算…から設定) JavaScript document1.isEditable();
  76. 76.  2つのアクションを設定します。 1. ダイアログ「シンプルアクションの追加」で下記を設定 2. ダイアログ「シンプルアクションの追加」で下記を設定 項目 設定値 カテゴリ 文書 アクション 文書の保存 データソース名 document1 ボタン:保存して閉じる:イベント 76 項目 設定値 カテゴリ 基本 アクション ページを開く 開くページの名前 xpViewAll
  77. 77. 77 STEP 7.4 ボタン「削除」の設定
  78. 78. 1. ボタン「削除」に下記を設定 ボタン:削除:設定 78 項目 設定値 ラベル 削除 ボタンの種類 ボタン ボタンのイメージを選択 チェックあり アイコン actn004.gif 可視 計算済み (◇値の計算…から設定) JavaScript !(document1.isEditable());
  79. 79. 項目 設定値 カテゴリ 文書 アクション 文書の削除 次に開くページの名前 xpViewAll 確認テキスト 削除しますか? データソース名 document1 1. ダイアログ「シンプルアクションの追加」で 下記を設定 ボタン:削除:イベント 79
  80. 80. 80 STEP 7.5 ボタンの動作確認
  81. 81.  メニューバーから「ファイル > 保存」をクリック  一通りボタンの動きを確認する  アイコン  名前  動作  可視(表示/非表示) ボタン:プレビューで確認 81 読み込みモード 編集モード
  82. 82. 82 STEP 8 起動プロパティの設定
  83. 83.  Web ブラウザでアクセスした場合、指定した XPage で開く設定を行います。 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「アプリケーションのプロパティ」をダブルクリック 4. タブ「起動」をクリック 5. 「Web ブラウザの起動」の「起動」で「指定した XPage を開く」を選択 6. 「Web ブラウザの起動」の「XPage」で「xpViewAll」を選択 7. メニューバーから「ファイル > 保存」をクリック 8. メニューバーから「ファイル > 閉じる」をクリック 起動プロパティの設定 83
  84. 84.  「IBM Notes クライアントの起動」で「XPage」を指定することで、ノーツクライア ント(スタンダード版)からも「XPage」が利用できます。  但し、使用する内部ブラウザの関係から動作・デザインが異なる場合があり ます。よって、テストは別途必要です。 起動プロパティの設定(補足) 84
  85. 85. 85 STEP 9 オプション:アプリケーションレイアウト
  86. 86.  簡単にレイアウトを整えることができるコントロール「アプリケーションレイアウ ト」を使ってみましょう。 レイアウト:拡張ライブラリのアプリケーションレイアウト 86 バナー タイトルバー プレースバー フッター リーガル コンテンツ領域(左) コンテンツ領域(中央) ※ ここにカスタムコントロール貼り付け
  87. 87. 1. XPage にアプリケーションレイアウトのカスタムコントロールを貼り付け 2. その上にフォームやビューのカスタムコントロールを貼り付け レイアウト:構成 87 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー
  88. 88. 88 XPage カスタム コントロール STEP 9.1 「アプリケーションレイアウト」を使用した「カスタムコントロール」 の作成
  89. 89. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「カスタムコントロール」をダブルクリック 3. 「新規カスタムコントロール」をクリック 4. 「名前」で「ccLayout」を入力 レイアウト:新規カスタムコントロール 89
  90. 90. 1. 画面右の枠「コントロール」を選択 2. 拡張ライブラリをクリックして展開 3. 「アプリケーションレイアウト」を「設計」にドラッグ&ドロップ レイアウト:アプリケーションレイアウトの貼り付け 90
  91. 91. 1. ダイアログ「アプリケーションレイアウト用パラメータの設定」で下記を設定 2. 「OK」をクリック レイアウト:パラメータの設定 91 項目 設定値 構成 OneUI アプリケーション構成 バナー [チェックあり] タイトルバー [チェックあり] プレースバー [チェックあり] フッター [チェックあり] リーガル [チェックあり] アプリケーション のテーマ OneUI V2.1
  92. 92. 1. タブ「アプリケーションレイアウト」を選択 2. コンテンツ領域の「中央の列」をチェック レイアウト:コンテンツ領域の設定 92
  93. 93. 1. タブ「バナー」を選択 2. ロゴの「イメージ」で「xpagesday_logo_banner.png」を選択 レイアウト:バナーの設定 93
  94. 94. 1. タブ「バナー > アプリケーションリンク」を選択 2. ボタン「項目の追加」をクリック、メニューから「ページリンク ノード」を選択 3. 画面右のプロパティ「label」で「ホーム」を入力 4. 画面右のプロパティ「page」で「xpViewAll」を選択 レイアウト:バナーの設定(アプリケーションリンク) 94
  95. 95. 1. タブ「タイトルバー」を選択 2. 「タイトルテキスト」の右の◇マークをクリックし、 「値の計算…」を選択 3. 以下の JavaScript を入力 (DBタイトルを表示) @DbTitle() レイアウト:タイトルバーの設定 95
  96. 96.  検索機能を利用するためには、事前に全文索引の作成が必要です。 1. タブ「タイトルバー > 検索」を選択 2. 「検索コントロール(オプションドロップダウン、編集ボックス、検索アイコン) を表示」をチェック 3. 「ページ名」で「xpViewAll」を設定 レイアウト:検索の設定 96
  97. 97. 1. タブ「プレースバー」を選択 2. ボタン「項目の追加」をクリック、メニューから「ページリンクノード」を選択 3. 画面右のプロパティで下記を設定 レイアウト:プレースバーの設定 97 プロパティ 設定値 image /actn089.gif labal アンケート入力 page /xpFormTopic.xsp 新規フォームボタン
  98. 98. 1. タブ「フッター」を選択 2. 「リンク」の「コンテナノード > 基本ノード」を選択 3. 画面右のプロパティ「href」「ラベル」を設定  今回は時間の関係からデフォルトのまま使用します。  余裕がある方は設定してみてください。 レイアウト:フッターの設定 98
  99. 99. 1. タブ「リーガル」を選択 2. リーガルの「イメージ」で「xpagesday_logo_legal.png」を選択 3. 「テキスト」で「Copyright c XPagesDay All Rights Reserved.」 を入力 レイアウト:リーガルの設定 99
  100. 100. 1. 画面右の枠「コントロール」を選択 2. 拡張ライブラリをクリックして展開 3. 「ナビゲータ」を「設計」にドラッグ&ドロップ レイアウト:ナビゲータの貼り付け 100
  101. 101. 1. タブ「ナビゲーション項目」を選択  コントロール「ナビゲータ」にあります。 2. ボタン「項目の追加」から「ページリンクノード」を追加 3. 画面右のプロパティで下記を設定 レイアウト:ナビゲータの設定 101 プロパティ 設定値 image /actn120.gif labal すべて page /xpViewAll.xsp
  102. 102.  カスタムコントロール「ccLayout」を保存して閉じます。 レイアウト:カスタムコントロールの保存 102
  103. 103. 103 STEP 9.2 「アプリケーションレイアウト」を使用した「XPage」の作成 XPage カスタム コントロール
  104. 104. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「xpViewAll」をダブルクリック レイアウト:すべてのアンケートビュー用 XPage の修正 104
  105. 105. 1. 既に貼り付けてあるカスタムコントロール「ccViewAll」を削除  アウトラインから選択して右クリック、「削除」を選択 2. 枠「コントロール」の「カスタムコントロール」をクリックして展開 3. 「ccLayout」を「設計」にドラッグ&ドロップ レイアウト:すべてのアンケートビュー用 XPage の設定(1) 105 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分
  106. 106. 1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール 「ccViewAll」をドラッグ&ドロップ レイアウト:すべてのアンケートビュー用 XPage の設定(2) 106 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分
  107. 107. 1. 画面左の枠「アプリケーション」の「アンケート」をダブルクリック 2. 「XPage」をダブルクリック 3. 「xpFormTopic」をダブルクリック レイアウト:フォーム用 XPage の修正 107
  108. 108. 1. 既に貼り付けてあるカスタムコントロール「ccFormTopic」を削除  アウトラインから選択して右クリック、「削除」を選択 2. 枠「コントロール」の「カスタムコントロール」をクリックして展開 3. 「ccLayout」を「設計」にドラッグ&ドロップ レイアウト:フォーム用 XPage の設定(1) 108 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分
  109. 109. 1. 前頁で貼り付けた「ccLayout」の中央の列「●」にカスタムコントロール 「ccFormTopic」をドラッグ&ドロップ レイアウト:フォーム用 XPage の設定(2) 109 XPage カスタムコントロール アプリケーションレイアウト カスタムコントロール フォーム/ビュー ↓ この部分
  110. 110.  XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する  バナー、アイコン  アプリケーション名  リンク、ボタン レイアウト:プレビューで確認 110 バナー 検索 リンク リーガル 新規作成ボタン リンク バナー ビュー/フォーム画面 ビュー 切り替え
  111. 111. 111 STEP 10 オプション:デザインの調整
  112. 112. 112 STEP 10.1 フォームのデザインの調整
  113. 113. 1. 対象のコントロールを選択 2. 対象のコントロールを選択して、枠「プロパティ」のタブ「スタイル」で設定  フォント  背景  余白  本来は CSS で設定する方が望ましいので、慣れてきたら CSS へ切り替えましょう。 デザイン:スタイル 113
  114. 114. 1. 対象のコントロールを選択 2. 枠「プロパティ」の [最上段のタブ] の「幅」 「単位」で設定  ピクセル  パーセント  自動 デザイン:コントロールの幅 114
  115. 115. 1. 対象のコントロールを選択 2. 枠「プロパティ」のタブ「表のセル」のオプションで設定  セルの横位置  セルの縦位置 デザイン:表のセルの位置 115 例)セルの中のラベル「質問1:」を上付きにした場合
  116. 116.  下図を参考にフォームのデザインを自由に変更してみましょう。 デザイン:演習問題(1) 116 幅 100ピクセル 高さ 70ピクセル 幅 100パーセント セルの幅 50ピクセル セルの縦位置「上」 直接テキストを入力 表の幅 100パーセント
  117. 117. 117 STEP 10.2 ビューのデザインの調整
  118. 118. 1. 対象の「ビューの列」を選択 2. 枠「プロパティ」のタブ「データ」の表示タイプで「日付/時刻」を設定  表示形式:日付と時刻  日付スタイル:デフォルト  時刻スタイル:デフォルト デザイン:列の設定(表示タイプ:日付/時刻) 118 注意: 列のプロパティを操作していると、「ビューの列のヘッダー」のラ ベルが勝手に変更される場合があります。 変更された場合、手動で直して保存してください。
  119. 119. 1. 対象の「ビューの列」を選択 2. 枠「プロパティ」のタブ「データ」の表示タイプで「数値」を設定  表示形式:小数点  整数のみ:チェック デザイン:列の設定(表示タイプ:数値(整数のみ)) 119
  120. 120.  下図を参考にビューのデザインを自由に変更してみましょう。 デザイン:演習問題(2) 120 表示タイプ:日付/時刻 ビューパネル 幅 100パーセント 表示タイプ:数値(整数のみ)
  121. 121. 121 STEP 11 オプション:ビューの追加
  122. 122.  今までの作業を参考に以下の2つのビューを追加してみましょう。  回答1  回答2 オプション:演習問題(3-1) 122 設計要素 名前 データソース (タイプ) データソース (名称) 貼り付ける カスタムコントロール カスタム コントロール ccViewAns1 Domino ビュー 回答1 - q1 - XPage xpViewAns1 - - ccLayout ccViewAns1 設計要素 名前 データソース (タイプ) データソース (名称) 貼り付ける カスタムコントロール カスタム コントロール ccViewAns2 Domino ビュー 回答2 - q2 - XPage xpViewAns2 - - ccLayout ccViewAns2
  123. 123.  今までの作業を参考にナビゲータへ2つのビューのリンクを追加してみましょう。 1. カスタムコントロール「ccLayout」を開く 2. コントロール「ナビゲータ」を選択 3. 枠「プロパティ」のタブ「ナビゲーション項目」を選択 4. ボタン「項目の追加」から下記の項目を追加 オプション:演習問題(3-2) 123 種類 image label page ページリンクノード /actn120.gif 回答1 /xpViewAns1 ページリンクノード /actn120.gif 回答2 /xpViewAns2
  124. 124.  XPage「xpViewAll」をプレビューで開き、一通りの動きを確認する  アイコン  ナビゲータ  ビュー オプション:プレビューで確認 124 ビュー 切り替え
  125. 125. 125 STEP 12 オプション:テーマの変更
  126. 126. 1. 画面左の枠「アプリケーション」の「アン ケート」をダブルクリック 2. 「アプリケーション構成」をダブルクリック 3. 「Xsp プロパティ」をダブルクリック 4. タブ「一般」をクリック 5. 「テーマのデフォルト」の「アプリケーショ ンのテーマ」で「OunUI V3.0.2」を選択 6. メニューバーから「ファイル > 保存」をク リック 7. メニューバーから「ファイル > 閉じる」を クリック テーマの変更 126
  127. 127. テーマの変更:プレビューで確認 127 OneUI V2.1 OneUI V2 OneUI V3.0.2
  128. 128. 128 補足資料 設計要素の構成および設定
  129. 129. 設計要素の構成(Step 8 まで) 129 【XPage】 xpFormTopic 【カスタムコントロール】 ccFormTopic 【XPage】 xpViewAll 【カスタムコントロール】 ccViewAll フォーム「アンケート」 ビュー「すべてのアンケート」
  130. 130. 設計要素の構成(Step 9 から)(1) 130 【XPage】 xpFormTopic 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccFormTopic 【XPage】 xpViewAll 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAll フォーム「アンケート」 ビュー「すべてのアンケート」
  131. 131. 設計要素の構成(Step 9 から)(2) 131 【XPage】 xpViewAns1 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAns1 【XPage】 xpViewAns2 【カスタムコントロール】 アプリケーションレイアウト ccLayout 【カスタムコントロール】 ccViewAns2 ビュー「回答1」 ビュー「回答2」
  132. 132. 設計要素の設定 132 設計要素 名前 データソース (タイプ) データソース (名称) 貼り付ける カスタムコントロール XPage xpFormTopic - - ccLayout ccFormTopic カスタム コントロール ccFormTopic Domino 文書 アンケート - Topic - XPage xpViewAll - - ccLayout ccViewAll カスタム コントロール ccViewAll Domino ビュー すべてのアンケート - all - XPage xpViewAns1 - - ccLayout ccViewAns1 カスタム コントロール ccViewAns1 Domino ビュー 回答1 - q1 - XPage xpViewAns2 - - ccLayout ccViewAns2 カスタム コントロール ccViewAns2 Domino ビュー 回答2 - q2 - カスタム コントロール ccLayout - - -
  133. 133. フォームのボタンの設定 133 名前 動作(アクション) ボタンの 種類 ボタンの アイコン 可視 可視の条件 JavaScript 閉じる すべてのアンケー トビューを開く キャンセル actn027.gif 常時 - 設定なし - 編集 文書を編集モード にする ボタン/送信 actn083.gif 読み込み !(document1.isEditable()); 保存し て閉じる 保存後、 すべてのアンケー トビューを開く ボタン/送信 actn117.gif 編集 document1.isEditable(); 削除 文書を削除する ボタン/送信 actn004.gif 読み込み !(document1.isEditable());
  134. 134. 134 参考サイト
  135. 135. 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

×