ページビューの合計

2017年2月13日月曜日

【第6回】タイムレコーダーアプリ作成~部署ページの作成 その3~

皆様、こんにちは!!
昨日はひさしぶりに神戸バレンタインラブランにて、たった3km走って筋肉痛と格闘中の筆者です。
少しずつ夜明けも早くなり、梅もほころびはじめ・・・。
春が待ち遠しい限りです~。

さて前回はカスタムコントロールを使用し、1部署のページを仕上げました。
今回は残りのカスタムコントロールを作り、XPageへの埋め込みを行います。

特に見ていただきたいのは、XPageの再利用によるカスタムコントロールの切り替え部分になります。

それでは早速ですが、前回作成したカスタムコントロール XcWork_1をコピーし、XcWork_2という名称に変更します。

XcWork_2をデザイナーで開き、まずはデータで関連付けられたフォームを変更します。

プロパティのデータタブを開いてください。



フォーム: のプルダウンを【出社_営業1部 - Work01】から【出社_営業2部 - Work02】に変更します。

続いて、先頭のラベルを【営業1部】から【営業2部】に変更します。

以降、各個人ボタンの設定は前回と同様です。

左のボタン
ラベル: 長○ 佑都
イベント1行目の値: 長○ 佑都
イベント3行目の確認テキスト: 長○ 佑都 様、おはようございます。

中央のボタン
3箇所の名前を内○ 篤人に変更

右のボタン
3箇所の名前を遠○ 保仁に変更

以上で完成です。


続いて退社のカスタムコントロールを作成します。

XcWork_1をコピーして、XcLeave_1と名称変更します。

そのままデザイナーで開いてください。

冒頭のラベルですが、現在は出社の色にあわせた青になっていますが、同じように退社にあわせた茶色にします(もちろん必須ではありません)。

続いて【戻る】ボタンのイベントが現在は出社ページに設定されていますので、退社ページに変更します。

開くページの名前: m_XpLeave

先と同様、カスタムコントロール(選択されていなければ、画面の背景部分もしくは左のアウトラインで選択)のデータタブにて、

フォーム: 退社_営業1部 - Leave01

に変更します。

各ボタンのイベントですが、それぞれ1ヶ所だけ変更します。

3行目 アクションの確認:○○ 様、お疲れさまでした。

以上で完成です。

同様にXcWork_2からXcLeave_2も作成してください。

以上で4つのカスタムコントロールが完成しました。


それでは本日のメインである、XPageの再利用について、説明致します。

m_XpWork_1をコピーし、新たにふたつのXPageを作成します。
それぞれ名称は

m_XpWork_2
m_XpLeave_1

とします。


まずはm_XpWork_2を開いてください。



中央のカスタムコントロール部分(もしくはアウトラインのXcWork_1)を選択し、ソースタブに移動します。

前回も見ていただきましたが、XPageのソースでは、カスタムコントロールの指定はたった1行、

<xc:XcWork_1></xc:XcWork_1>

で行われています。


すでに"ピン!"と来た方もいらっしゃると思いますが、このタグを

<xc:XcWork_2></xc:XcWork_2>

に変更し、設計タブに戻ってください。


カスタムコントロール部分が営業2部のXcWork_2に変更されていることがわかります。
(アウトライン部分も変更になっています)

以上で完了です。


続いて m_XpLeave_1です。
こちらは先頭の表内が「出社」となっており、背景も青になっていますので、「退社」・背景:茶色に変更します。

同じようにソースタブで<xc:XcWork_1></xc:XcWork_1>を

<xc:XcLeave_1></xc:XcLeave_1>

に変更します。



同様にm_XpLeave_1をコピーし、m_XpLeave_2を作成してください。

以上で各部署のカスタムコントロールとXPageが完成しました。

いかがですか?
簡単でしょ !

それでは最後に出社・退社のページからそれぞれの部署ページにリンクを作成します。

まずm_XpWorkを開いてください。

既に営業1部のボタンにはイベントが作成済ですので、営業2部のボタンにイベントを追加します。

カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpWork_2


続いてm_XpLeaveです。

営業1部ボタン
カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpLeave_1

営業2部ボタン
カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpLeave_2

それではすべて保存して閉じてください。

次に起動時の設定を行います。

左側のツリーから【アプリケーション構成】内、【アプリケーションのプロパティ】を開いてください。

2番目の起動タブに移動します。

右側にWeb ブラウザの起動という項目がありますので、

起動: 指定いたXPageを開く
XPage: m_XpIndex

とし、保存して閉じます。

これによりブラウザでnsfを直接指定した場合、m_XpIndexが開くようになりました。

それでは設計からプリビューせずに、ブラウザのアドレスを直接指定してみましょう。

作成された環境によってアドレスが異なりますが、私の環境ではDominoディレクトリ内のtestフォルダ内にtime-recorder.nsfという名称で作成しましたので、下記がURLになります。

http://ノーツサーバー名/test/time-recorder.nsf

こちらでトップページが開きます。

以降の動きは、下記をご覧ください。
最終にノーツビューへの表示確認まで行っております。



以上で大まかな部分が完成しました。

XPagesを使用すれば、意図的に少し直接タグを利用しましたが、プログラムレスでここまで表現できるんです。

次回はもう少し手を加えて完成させる予定です。

0 件のコメント:

コメントを投稿