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

レイアウト：構成 ⁹¹

XPage

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

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

/

ビュー

92

XPage

カスタム コントロール

STEP 9.1

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

の作成

1.

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

2.

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

3.

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

4.

「名前」で「

ccLayout

」を入力

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

1.

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

2.

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

3.

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

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

1.

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

2.

「

OK

」をクリック

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

項目 設定値

構成

OneUI

アプリケーション構成

バナー

[

チェックあり

]

タイトルバー

[

チェックあり

]

プレースバー

[

チェックあり

]

フッター

[

チェックあり

]

リーガル

[

チェックあり

]

アプリケーション

のテーマ

OneUI V2.1

1.

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

2.

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

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

1.

タブ「バナー」を選択

2.

ロゴの「イメージ」で「

xpagesday_logo_banner.png

」を選択

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

1.

タブ「バナー

>

アプリケーションリンク」を選択

2.

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

3.

画面右のプロパティ「

label

」で「ホーム」を入力

4.

画面右のプロパティ「

page

」で「

xpViewAll

」を選択

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

1.

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

2.

「タイトルテキスト」の右の◇マークをクリックし、

「値の計算

…

」を選択

3.

以下の

JavaScript

を入力 （

DB

タイトルを表示）

@DbTitle()

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



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

1.

タブ「タイトルバー

>

検索」を選択

2.

「検索コントロール（オプションドロップダウン、編集ボックス、検索アイコン）

を表示」をチェック

3.

「ページ名」で「

xpViewAll

」を設定

レイアウト：検索の設定 ¹⁰⁰

1.

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

2.

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

3.

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

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

プロパティ 設定値

image /actn089.gif

labal

アンケート入力

page /xpFormTopic.xsp

^{新規フォームボタン}

1.

タブ「フッター」を選択

2.

「リンク」の「コンテナノード

>

基本ノード」を選択

3.

画面右のプロパティ「

href

」「ラベル」を設定

 今回は時間の関係からデフォルトのまま使用します。

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

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

1.

タブ「リーガル」を選択

2.

リーガルの「イメージ」で「

xpagesday_logo_legal.png

」を選択

3.

「テキスト」で「

Copyright c XPagesDay All Rights Reserved.

」

を入力

レイアウト：リーガルの設定 ¹⁰³

1.

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

2.

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

3.

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

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

1.

タブ「ナビゲーション項目」を選択

 コントロール「ナビゲータ」にあります。

2.

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

3.

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

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

プロパティ 設定値

image /actn120.gif

labal

すべて

page /xpViewAll.xsp



カスタムコントロール「

ccLayout

」を保存して閉じます。

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

107

STEP 9.2

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

XPage

カスタム コントロール

1.

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

2.

「

XPage

」をダブルクリック

3.

「

xpViewAll

」をダブルクリック

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

1.

既に貼り付けてあるカスタムコントロール「

ccViewAll

」を削除



アウトラインから選択して右クリック、「削除」を選択

2.

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

3.

「

ccLayout

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

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

XPage

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

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

↓ この部分

1.

前頁で貼り付けた「

ccLayout

」の中央の列「●」にカスタムコントロール

「

ccViewAll

」をドラッグ＆ドロップ

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

XPage

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

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

↓ この部分

1.

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

2.

「

XPage

」をダブルクリック

3.

「

xpFormTopic

」をダブルクリック

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

1.

既に貼り付けてあるカスタムコントロール「

ccFormTopic

」を削除



アウトラインから選択して右クリック、「削除」を選択

2.

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

3.

「

ccLayout

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

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

XPage

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

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

↓ この部分

1.

前頁で貼り付けた「

ccLayout

」の中央の列「●」にカスタムコントロール

「

ccFormTopic

」をドラッグ＆ドロップ

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

XPage

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

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

↓ この部分

 XPage

「

xpViewAll

」をプレビューで開き、一通りの動きを確認する



バナー、アイコン



アプリケーション名



リンク、ボタン

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

バナー

検索

リンク リーガル

新規作成ボタン リンク

バナー

ビュー/フォーム画面 ビュー

切り替え

115

STEP 10

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

116

STEP 10.1

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

1.

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

2.

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



フォント



背景



余白



本来は

CSS

で設定する方が望ましいので、慣れてきたら

CSS

へ切り替えましょう。

デザイン：スタイル ¹¹⁷

1.

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

2.

枠「プロパティ」の

[

最上段のタブ

]

の「幅」 「単位」で設定



ピクセル



パーセント



自動

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

1.

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

2.

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



セルの横位置



セルの縦位置

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

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



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

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

幅100ピクセル

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

セルの縦位置「上」

直接テキストを入力 表の幅 100パーセント

121

STEP 10.2

ビューのデザインの調整

1.

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

2.

枠「プロパティ」のタブ「データ」の表示タイプで「日付

/

時刻」を設定



表示形式：日付と時刻



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



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

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

注意：

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

変更された場合、手動で直して保存してください。

1.

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

2.

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



表示形式：小数点



整数のみ：チェック

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



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

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

表示タイプ：日付/時刻

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

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

125

STEP 11

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



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

 回答１

 回答２

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

設計要素 名前 データソース

（タイプ）

データソース

（名称）

貼り付ける

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

コントロール

ccViewAns1 Domino ビュー 回答１ - q1 －

XPage xpViewAns1 － － ccLayout

ccViewAns1

設計要素 名前 データソース

（タイプ）

データソース

（名称）

貼り付ける

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

コントロール

ccViewAns2 Domino ビュー 回答２ - q2 －

XPage xpViewAns2 － － ccLayout

ccViewAns2



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

1.

カスタムコントロール「

ccLayout

」を開く

2.

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

3.

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

4.

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

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

種類 image label page

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

 XPage

「

xpViewAll

」をプレビューで開き、一通りの動きを確認する



アイコン



ナビゲータ



ビュー

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

ビュー 切り替え

129

STEP 12

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

1.

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

2.

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

3.

「

Xsp

プロパティ」をダブルクリック

4.

タブ「一般」をクリック

5.

「テーマのデフォルト」の「アプリケーショ ンのテーマ」で「

OunUI V3.0.2

」を選択

6.

メニューバーから「ファイル

>

保存」をク

リック

7.

メニューバーから「ファイル

>

閉じる」を クリック

テーマの変更 ¹³⁰

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

OneUI V2.1

OneUI V2

OneUI V3.0.2

132

補足資料

設計要素の構成および設定

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

【

XPage

】

xpFormTopic

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

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