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

Transcription

1 今日から始める XPages アプリケーション開発! ノーツコンソーシアムオープンセミナー 2016 ハンズオン XPagesDay 出張セッション 2016/11/09 株式会社ソルクシーズ吉田武司 Ver

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

3 3 STEP 1 はじめに

4 告知 4 今年もやります!XPagesDay 2016 XPages のどっぷりつかれる 2 日間です 11 月 21 日 ( 月 ) 22 日 ( 火 ) Web セッションなのでネット環境があれば 参加できます 詳しくは ホームページをご覧ください 豪華賞品が当たる! かも?

5 告知 11 月 21 日 ( 月 ) のセッション 5 今日から始める XPages アプリケーション開発 XPages をまだ初めてない方 これから始めたい方を対象に 最初の取っ掛りになるようなセッションにしたいと思います 吉田武司 ( 株式会社ソルクシーズ ) XPages で検索してみよう 初心者 すべて XPages の場合の全文検索の実装方法について色々と解説してみます 御代政彦 ( 株式会社エフ ) XPages で Java 開発するぞ! 中上級 Domino/XPages 上で ManagedBean と MVC を使った本格 Java 開発の手法をご紹介します XPages の基盤技術である JavaEE/JSF にも触れ Xpages の理解を深めます 米原和之 / 田付和慶 ( ケートリック株式会社 )

6 告知 11 月 22 日 ( 火 ) のセッション 6 標準コントロールを使わない XPages 開発 Bootstrap と jquery を使い XPages 知識がなくても開発できる手法をご紹介します 西雄樹 ( リコー IT ソリューションズ株式会社 ) 私がハマった失敗例 私が XPages の開発でつまづいたケースをいくつかご紹介します 皆様は大けがされませんように 谷口望 ( 株式会社ライブネス ) 開発事例 XPages で作る動画閲覧サイト XPages であなたの tube を作って 現場での作業やルール 教育方法を統一 新入社員等の理解度の向上を図りませんか? 小野誠 ( エームサービス株式会社 ) 今年もやります! どこよりも早い XPages 最新情報! 中上級 すべて すべて すべて XPages on Bluemix から App Modernization としての提供が予定されている XPages の最新機能までをデモを交えて紹介します 佐藤淳 ( 日本 IBM 株式会社 )

7 開発経験は? 7 ノーツアプリケーション 1. 修正 開発したことがある? XPages アプリケーション 1. 今日が初めて? 2. 練習をしたことがある? 3. アプリケーションを開発したことがある? 4. 拡張ライブラリのアプリケーションレイアウトを使用したことがある?

8 本日の課題のレベル感 8 これから XPages を始める方への取っ掛かりになるようハンズオンにしたいと思います 90 分の限られた時間のため 極力プログラミング要素を除外した仕様となっています 標準機能を積極的に使用 事前に用意したノーツアプリケーションを XPages 化 XPages 開発に慣れてきたら プログラミングを含めた次のステップに挑戦してみてください

9 環境 9 バージョン Domino FP3 (FP5 でも確認済み ) Notes FP5 資料およびアプリケーション (NSF) は公開しています テキスト アプリケーション (NSF) または ( リンク先は同じです ) 署名 適切な ACL/ECL を設定してご利用ください 検索機能を使うには 事前に全文索引を作成しておく必要があります ファイル構成 demo.nsf (XPages 化する前のアプリケーション ) demo1.nsf (XPages 化途中のアプリケーション ) demo2.nsf (XPages 化後のアプリケーション ) demo3.nsf (XPages 化後 追加でカスタマイズしたアプリケーション )

10 前提 : デザイン 10 本来ならば CSS を使用した方が良いのですが 最初からすべてを覚えるのは大変です Cascading Style Sheets(CSS カスケーディング スタイル シート カスケード スタイル シート ) とは HTML や XML の要素をどのように修飾 ( 表示 ) するかを指示する W3C による仕様の一つ 文書の構造と体裁を分離させるという理念を実現する為に提唱されたスタイルシートの 具体的な仕様の一つ Wikipedia Cascading Style Sheets より要約最終更新 2016 年 10 月 6 日 ( 木 ) 18:15 よって 今回は直接的には CSS を使用しないで作成を行います 実際には 後述のテーマで間接的には利用しています その代わり 標準で用意されている テーマ と拡張ライブラリの アプリケーションレイアウト を使用します

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

12 XPages とは 12 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) スタンダード版クライアントのみです

13 XPages と XPage 13 本資料では 基本的に以下のように表現しています 他の資料では違う場合があります ご了承ください XPages XPages 技術 アプリケーションなど全般的な意味 XPage データベース ( アプリケーション ) の設計要素である XPage ブラウザで表示する Web ページもこの設計要素です

14 開発に必要なもの 14 Domino Designer アプリケーションの開発 ブラウザまたはノーツクライアント ( スタンダード版 ) アプリケーションの動作確認 Domino サーバー アプリケーションの実行 データベース ( アプリケーション ) 本日のお題 : アンケート DB の XPage 化

15 利用方法 15 XPage を利用するには 2 つの方法があります ノーツクライアント ( スタンダード版 ) ブラウザ ドミノサーバー ローカルにレプリカ ブラウザ ノーツクライアント ノーツクライアント

16 Domino サーバー上で利用するための設定 16 サーバー文書 セキュリティ - 可能なプログラムの制限 制限なしで署名または実行 呼び出したユーザーとして実行するエージェントとまたは XPage を署名 開発者のユーザーまたはグループを設定 ノーツクライアント ( スタンダード版 ) のみでもローカルで実行可能です XPages in Notes client (XPiNC)

17 ローカルでプレビューするための ACL 設定 17 ローカルノーツクライアントのみでも制限はありますが XPage は実行可能です ACL に Anonymous を追加し 作成者 以上の権限を付加します Anonymous が設定されていない場合 プレビュー時に警告が表示されます

18 18 STEP 2 Domino Designer について

19 Domino Designer の起動 19 アンケート DB を選択して右クリック メニューから Designer で開く を選択します

20 Domino Designer の説明 20 Designer の各枠は Eclipse ビュー 呼びます ノーツの設計要素であるビューと紛らわしいため 今回のハンズオンでは 便宜的に 枠 と呼ぶことにします ( 例 : アプリケーション枠 ) 枠の並びは自由に変更できます アプリケーション コントロールデータパレット アウトライン 設計ソース プロパティイベント問題 ( エラー等 )

21 Domino Designer の説明 : 基本の流れ 21 1 対象を選択 2 部品を配置 3 対象を設定

22 Domino Designer の説明 : 枠と閉じてしまった場合 22 枠の表示 ウィンドウ > Eclipse ビューの表示 > [ 枠 ]

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

24 アプリケーションの概要 24 社員に対して IT 機器のアンケートを実施するためのノーツアプリケーションです フォームが 1 つ ビューが 3 つあります 回答フォームには 3 つの質問があります 回答の結果はビュー (3 種類 ) で確認できます フォーム アンケート ビュー ビュー すべてのアンケート

25 アプリケーションの ACL 25 ACL( アクセス制御リスト ) ユーザー アクセス権 作成 削除 ロール 備考 管理者 サーバー 管理者 〇 〇 なし 一般 (-Default-) 作成者 〇 〇 なし Anonymous なし - - なし 本来のアンケートでは 自分以外の回答は非表示が望ましいですが 今回は全データが閲覧できる仕様です 変更は本人と管理者のみ可能です

26 アプリケーションの設計 : フォーム フォーム : アンケート フィールド 1. 回答日 : 回答時の日時 2. 回答者 : 回答者のユーザー名 3. 回答 1: 数値 ( デフォルト値 :0) 4. 回答 2: チェックボックス (3 択 ) 5. 回答 3: テキスト ボタン 1. 閉じる 2. 保存 3. 編集

27 アプリケーションの設計 : ビュー ビュー : すべてのアンケート 回答日順に表示 2. ビュー : 回答 1 回答 1 をカテゴリ別に表示 3. ビュー : 回答 2 回答 2 をカテゴリ別に表示 各ビューには アンケート入力を新規作成するアクションボタンがあります

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

29 XPage の完成イメージ ( 前半 ) 29 Step 4 ~ 6 1. ビューの表示 2. ビューから文書を開く

30 XPage の完成イメージ ( 後半 ) 30 Step 7 ~ 11 文書の作成 編集 削除 レイアウト 複数のビューの切り替え

31 31 STEP 4 データベースの設定

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

33 33 STEP 5 フォーム画面の作成

34 設計要素 34 XPages アプリケーション開発では以下の設計要素をよく使用します 設計要素とは ノーツアプリケーション開発で使用するフォームやビュー フレームセット ページなどのことです XPages アプリケーション XPage カスタムコントロール ノーツアプリケーションで例えると フォーム サブフォーム イメージイメージ ( 同じ ) 上記以外にもリソース ( ファイル スタイルシート テーマ ) やスクリプトライブラリなども必要に応じて使用します

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

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

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

38 フォーム : 新規カスタムコントロール 画面左の枠 アプリケーション の アンケート をダブルクリック 2. カスタムコントロール をダブルクリック 3. 新規カスタムコントロール をクリック 4. 名前 を入力 5. OK をクリック 項目 名前 設定値 ccformtopic

39 フォーム : データソースのバインド (1) 画面右の枠 データパレット をクリック 2. データソース で データソースの定義 を選択 3. ダイアログ データソースの定義 が開く 4. データソース で Domino 文書 を選択 POINT データソース を定義することで文書のデータにアクセスできるようになります 設定は次頁を参照

40 フォーム : データソースのバインド (2) ダイアログ データソースの定義 で下記を設定 2. OK をクリック 項目 設定値 フォーム アンケート - Topic フォーム検証の実行 文書ロード時 POINT フォームの検証の実行 指定したタイミングでフォームのフィールドが計算されます 文書のロード時 文書保存時 両方

41 フォーム :[ コントロールの選択 ] の確認 41 [ コントロールの選択 ] ダイアログボックスが使用可能になっていることを確認 使用可能 : 使用不可 : POINT 使用可能 の場合 フィールドを貼り付ける際にコントロールを選択できます

42 フォーム : フィールドの貼り付け データパレットに表示されているフィールドの名前をすべて選択 Ctrl を押しながらマウスでクリック 2. 選択した状態で画面中央の枠 設計 にドラッグ & ドロップ 3. ダイアログ データバインドコントロールの選択 が開く

43 フォーム : データバインドコントロールの選択 ダイアログ データバインドコントロールの選択 で下記を設定 2. OK をクリック フィールドラベルコントロール CreatedDate 回答日 計算結果 フィールド Author 回答者 計算結果 フィールド Answer01 質問 1 編集ボックス Answer02 質問 2 リストボックス Answer03 質問 3 テキスト領域

44 フォーム : リストボックスの選択肢の設定 Answer02 フィールドを選択 2. 画面下部の枠 プロパティ のタブ 値 を選択 3. ボタン 項目の追加 から下記の選択肢を設定 ラベル iphone Android その他 値 iphone Android その他

45 フォーム : カスタムコントロールの保存 メニューバーから ファイル > 保存 をクリック タブ名の * が表示されている場合 未保存状態

46 46 XPage カスタムコントロール STEP 5.2 フォーム アンケート を表示する XPage の作成

47 フォーム : 新規 XPage 画面左の枠 アプリケーション の アンケート をダブルクリック 2. XPage をダブルクリック 3. 新規 XPage をクリック 4. 名前 を入力 5. OK をクリック 項目 名前 設定値 xpformtopic

48 フォーム : カスタムコントロールの貼り付け 画面右の枠 コントロール を選択 2. カスタムコントロールをクリックして展開 3. カスタムコントロール ccformtopic を 設計 にドラッグ& ドロップ

49 フォーム :XPage の保存 メニューバーから ファイル > 保存 をクリック

50 フォーム : 補足 : 自動ビルドがオフになりました 50 保存時に 下図のダイアログが表示されることがあります メニューバーから プロジェクト > 自動にビルド を有効にしてください

51 フォーム :XPage のプレビュー メニューバーから 設計 > Web ブラウザでプレビュー > Internet Explorer をクリック ツールバーからもプレビュー可能

52 52 STEP 6 ビュー画面の作成

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

54 ビュー : 新規カスタムコントロール 画面左の枠 アプリケーション の アンケート をダブルクリック 2. カスタムコントロール をダブルクリック 3. 新規カスタムコントロール をクリック 4. 名前 を入力 項目 名前 設定値 ccviewall

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

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

57 ビュー : 文書を開く時のフォーム (XPage) の設定 ビューパネルを選択 枠 アウトライン からだと簡単に選択できます 2. プロパティ のタブ 表示 を選択 3. 実行時に 選択した文書を開くために使用 で xpformtopic を設定

58 ビュー : 列に文書を開くリンクを設定 ビューの列 viewcolumn1 を選択( 回答日 ) 2. プロパティ のタブ 表示 を選択 3. 列の値をリンクとして表示する をチェック 4. 文書を開くモードは 読み取り専用 を選択

59 ビュー : カスタムコントロールの保存 メニューバーから ファイル > 保存 をクリック

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

61 ビュー : 新規 XPage 画面左の枠 アプリケーション の アンケート をダブルクリック 2. XPage をダブルクリック 3. 新規 XPage をクリック 4. 名前 を入力 5. OK をクリック 項目 名前 設定値 xpviewall

62 ビュー : カスタムコントロールの貼り付け 画面右の枠 コントロール を選択 2. カスタムコントロールをクリックして展開 3. カスタムコントロール ccviewall を 設計 にドラッグ& ドロップ

63 ビュー :XPage の保存 メニューバーから ファイル > 保存 をクリック

64 ビュー :XPage のプレビュー メニューバーから 設計 > Web ブラウザでプレビュー > Internet Explorer をクリック 2. 回答日のリンクをクリックすると文書が開くことを確認

65 65 STEP 7 ボタンの作成

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

67 ボタン : コントロールの貼り付け カスタムコントロール ccformtopic を開く 2. 枠 設計 の上端に改行を 1 つ入力 矢印キーでカーソルを移動し 改行を入力します POINT 開くのはカスタムコントロールの方です 3. 枠 コントロール の コアコントロール をクリックして展開 4. ボタンをドラッグ & ドロップして上端に 4 つ並べて貼り付け

68 ボタン : イベント ( シンプルアクション ) 設定方法 ボタンを選択 2. イベント を選択 3. タブ イベント で マウス onclick を選択 4. タブ サーバー で シンプルアクション をチェック 5. ボタン アクションの追加 をクリック 6. ダイアログ シンプルアクションの追加 でアクションを選択 7. OK をクリック POINT シンプルアクションを使用すると基本動作を簡単に設定できます 上記を基本とし 共通の操作でイベントを設定します

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

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

71 71 STEP 7.1 ボタン 閉じる の設定

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

73 ボタン : 閉じる : イベント ダイアログ シンプルアクションの追加 で下記を設定 項目カテゴリアクション開くページの名前 設定値基本ページを開く xpviewall

74 ボタン : 閉じる : プレビューで確認 74 メニューバーから ファイル > 保存 をクリック 一通りボタンの動きを確認する アイコン 名前 動作

75 75 STEP 7.2 ボタン 編集 の設定

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

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

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

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

80 ボタン : 保存して閉じる : イベント 80 2 つのアクションを設定します 1. ダイアログ シンプルアクションの追加 で下記を設定 項目カテゴリアクションデータソース名 設定値文書文書の保存 document1 2. ダイアログ シンプルアクションの追加 で下記を設定 項目カテゴリアクション開くページの名前 設定値基本ページを開く xpviewall

81 81 STEP 7.4 ボタン 削除 の設定

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

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

84 84 STEP 7.5 ボタンの動作確認

85 ボタン : プレビューで確認 85 メニューバーから ファイル > 保存 をクリック 一通りボタンの動きを確認する アイコン 名前 動作 可視 ( 表示 / 非表示 ) 読み込みモード 編集モード

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

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

88 起動プロパティの設定 ( 補足 ) 88 IBM Notes クライアントの起動 で XPage を指定することで ノーツクライアント ( スタンダード版 ) からも XPage が利用できます 但し 使用する内部ブラウザの関係から動作 デザインが異なる場合があります よって テストは別途必要です

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

90 レイアウト : 拡張ライブラリのアプリケーションレイアウト 90 簡単にレイアウトを整えることができるコントロール アプリケーションレイアウト を使ってみましょう バナータイトルバープレースバー フッターリーガル コンテンツ領域 ( 左 ) コンテンツ領域 ( 中央 ) ここにカスタムコントロール貼り付け

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

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

93 レイアウト : 新規カスタムコントロール 画面左の枠 アプリケーション の アンケート をダブルクリック 2. カスタムコントロール をダブルクリック 3. 新規カスタムコントロール をクリック 4. 名前 で cclayout を入力

94 レイアウト : アプリケーションレイアウトの貼り付け 画面右の枠 コントロール を選択 2. 拡張ライブラリをクリックして展開 3. アプリケーションレイアウト を 設計 にドラッグ& ドロップ

95 レイアウト : パラメータの設定 ダイアログ アプリケーションレイアウト用パラメータの設定 で下記を設定 2. OK をクリック 項目 構成 設定値 バナー [ チェックあり ] タイトルバー [ チェックあり ] プレースバー [ チェックあり ] フッター [ チェックあり ] リーガル [ チェックあり ] アプリケーションのテーマ OneUI アプリケーション構成 OneUI V2.1

96 レイアウト : コンテンツ領域の設定 タブ アプリケーションレイアウト を選択 2. コンテンツ領域の 中央の列 をチェック

97 レイアウト : バナーの設定 タブ バナー を選択 2. ロゴの イメージ で xpagesday_logo_banner.png を選択

98 レイアウト : バナーの設定 ( アプリケーションリンク ) タブ バナー > アプリケーションリンク を選択 2. ボタン 項目の追加 をクリック メニューから ページリンクノード を選択 3. 画面右のプロパティ label で ホーム を入力 4. 画面右のプロパティ page で xpviewall を選択

99 レイアウト : タイトルバーの設定 タブ タイトルバー を選択 2. タイトルテキスト の右の マークをクリックし 値の計算 を選択 3. 以下の JavaScript を入力 (DB タイトルを表示

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

101 レイアウト : プレースバーの設定 タブ プレースバー を選択 2. ボタン 項目の追加 をクリック メニューから ページリンクノード を選択 3. 画面右のプロパティで下記を設定 プロパティ image 設定値 /actn089.gif labal アンケート入力 page /xpformtopic.xsp 新規フォームボタン

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

103 レイアウト : リーガルの設定 タブ リーガル を選択 2. リーガルの イメージ で xpagesday_logo_legal.png を選択 3. テキスト で Copyright c XPagesDay All Rights Reserved. を入力

104 レイアウト : ナビゲータの貼り付け 画面右の枠 コントロール を選択 2. 拡張ライブラリをクリックして展開 3. ナビゲータ を 設計 にドラッグ& ドロップ

105 レイアウト : ナビゲータの設定 タブ ナビゲーション項目 を選択 コントロール ナビゲータ にあります 2. ボタン 項目の追加 から ページリンクノード を追加 3. 画面右のプロパティで下記を設定 プロパティ image labal page 設定値 /actn120.gif すべて /xpviewall.xsp

106 レイアウト : カスタムコントロールの保存 106 カスタムコントロール cclayout を保存して閉じます

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

108 レイアウト : すべてのアンケートビュー用 XPage の修正 画面左の枠 アプリケーション の アンケート をダブルクリック 2. XPage をダブルクリック 3. xpviewall をダブルクリック

109 レイアウト : すべてのアンケートビュー用 XPage の設定 (1) 既に貼り付けてあるカスタムコントロール ccviewall を削除 アウトラインから選択して右クリック 削除 を選択 XPage この部分 カスタムコントロールアプリケーションレイアウト カスタムコントロールフォーム / ビュー 2. 枠 コントロール の カスタムコントロール をクリックして展開 3. cclayout を 設計 にドラッグ & ドロップ

110 レイアウト : すべてのアンケートビュー用 XPage の設定 (2) 前頁で貼り付けた cclayout の中央の列 にカスタムコントロール ccviewall をドラッグ & ドロップ XPage この部分 カスタムコントロールアプリケーションレイアウト カスタムコントロールフォーム / ビュー

111 レイアウト : フォーム用 XPage の修正 画面左の枠 アプリケーション の アンケート をダブルクリック 2. XPage をダブルクリック 3. xpformtopic をダブルクリック

112 レイアウト : フォーム用 XPage の設定 (1) 既に貼り付けてあるカスタムコントロール ccformtopic を削除 アウトラインから選択して右クリック 削除 を選択 XPage この部分 カスタムコントロールアプリケーションレイアウト カスタムコントロールフォーム / ビュー 2. 枠 コントロール の カスタムコントロール をクリックして展開 3. cclayout を 設計 にドラッグ & ドロップ

113 レイアウト : フォーム用 XPage の設定 (2) 前頁で貼り付けた cclayout の中央の列 にカスタムコントロール ccformtopic をドラッグ & ドロップ XPage この部分 カスタムコントロールアプリケーションレイアウト カスタムコントロールフォーム / ビュー

114 レイアウト : プレビューで確認 114 XPage xpviewall をプレビューで開き 一通りの動きを確認する バナー アイコン アプリケーション名 リンク ボタン バナー リンク バナー ビュー切り替え 検索新規作成ボタン ビュー / フォーム画面 リンク リーガル

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

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

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

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

119 デザイン : 表のセルの位置 対象のコントロールを選択 2. 枠 プロパティ のタブ 表のセル のオプションで設定 セルの横位置 セルの縦位置 例 ) セルの中のラベル 質問 1: を上付きにした場合

120 デザイン : 演習問題 (1) 120 下図を参考にフォームのデザインを自由に変更してみましょう セルの幅 50ピクセル表の幅 100パーセント直接テキストを入力 幅 100 ピクセル 高さ 70 ピクセル幅 100 パーセント セルの縦位置 上

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

122 デザイン : 列の設定 ( 表示タイプ : 日付 / 時刻 ) 対象の ビューの列 を選択 2. 枠 プロパティ のタブ データ の表示タイプで 日付 / 時刻 を設定 表示形式 : 日付と時刻 日付スタイル : デフォルト 時刻スタイル : デフォルト 注意 : 列のプロパティを操作していると ビューの列のヘッダー のラベルが勝手に変更される場合があります 変更された場合 手動で直して保存してください

123 デザイン : 列の設定 ( 表示タイプ : 数値 ( 整数のみ )) 対象の ビューの列 を選択 2. 枠 プロパティ のタブ データ の表示タイプで 数値 を設定 表示形式 : 小数点 整数のみ : チェック

124 デザイン : 演習問題 (2) 124 下図を参考にビューのデザインを自由に変更してみましょう ビューパネル幅 100 パーセント 表示タイプ : 日付 / 時刻 表示タイプ : 数値 ( 整数のみ )

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

126 オプション : 演習問題 (3-1) 126 今までの作業を参考に以下の 2 つのビューを追加してみましょう 回答 1 設計要素 名前 データソース ( タイプ ) カスタムコントロール データソース ( 名称 ) ccviewans1 Domino ビュー回答 1 - q1 - 貼り付けるカスタムコントロール XPage xpviewans1 - - cclayout ccviewans1 回答 2 設計要素 名前 データソース ( タイプ ) カスタムコントロール データソース ( 名称 ) ccviewans2 Domino ビュー回答 2 - q2 - 貼り付けるカスタムコントロール XPage xpviewans2 - - cclayout ccviewans2

127 オプション : 演習問題 (3-2) 127 今までの作業を参考にナビゲータへ2つのビューのリンクを追加してみましょう 1. カスタムコントロール cclayout を開く 2. コントロール ナビゲータ を選択 3. 枠 プロパティ のタブ ナビゲーション項目 を選択 4. ボタン 項目の追加 から下記の項目を追加 種類 image label page ページリンクノード /actn120.gif 回答 1 /xpviewans1 ページリンクノード /actn120.gif 回答 2 /xpviewans2

128 オプション : プレビューで確認 128 XPage xpviewall をプレビューで開き 一通りの動きを確認する アイコン ナビゲータ ビュー ビュー切り替え

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

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

131 テーマの変更 : プレビューで確認 131 OneUI V3.0.2 OneUI V2.1 OneUI V2

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

133 設計要素の構成 (Step 8 まで ) 133 フォーム アンケート XPage xpformtopic カスタムコントロール ccformtopic ビュー すべてのアンケート XPage xpviewall カスタムコントロール ccviewall

134 設計要素の構成 (Step 9 から )(1) 134 フォーム アンケート XPage xpformtopic カスタムコントロール アプリケーションレイアウト cclayout カスタムコントロール ccformtopic ビュー すべてのアンケート XPage xpviewall カスタムコントロール アプリケーションレイアウト cclayout カスタムコントロール ccviewall

135 設計要素の構成 (Step 9 から )(2) 135 ビュー 回答 1 ビュー 回答 2 XPage xpviewans1 カスタムコントロール アプリケーションレイアウト cclayout XPage xpviewans2 カスタムコントロール アプリケーションレイアウト cclayout カスタムコントロール ccviewans1 カスタムコントロール ccviewans2

136 設計要素の設定 136 設計要素 名前 データソース ( タイプ ) データソース ( 名称 ) 貼り付けるカスタムコントロール 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 - - -

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

138 参考サイト 138

139 参考資料 139 XPages.JP Project XPages の普及のためさまざまな活動を行っています XSnippets 日本版 XPages, LotusScript などサンプルソースの登録サイト qa9 for ICS(Lotus) Developers QA サイト