ページビューの合計

2017年1月30日月曜日

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

皆様、こんにちは!!
フェイスブックで繋がっている方はご存知かと思いますが、週末に新舞子(姫路のもっと西)にある先輩のやっている旅館で、1泊2日の新年会に参加し、たらふく牡蠣等を頂き、栄養満点で週を明けました !!
今週から2月ということで、いろいろと仕事が積みあがりつつあるのですが、なんとか今日は記事公開に漕ぎ着けました(汗。

それでは続けさせて頂きます。

前回は単純なボタン配置のみのトップページを作成しました。
引き続き今回も実はボタン配置のみのページになります・・・。
単純なページですので、カスタムコントロールは使用せず、XPageのみで作成して参ります。


まず【新規XPage】ボタンをクリックます。

名前: m_XpWork

以上でOKします。


新規のXPageが開きますので、先頭にコンテナコントロールから【表】を配置します。

表のサイズ
 行数: 1
 列数: 1
表の幅
 幅に合わせる


できあがった表を選択し、

幅: 99.0 パーセント
背景: 自由に設定してください。前回のトップページの出社ボタンに合わせると、統一感が出ます。

とします。

表が選択されたか、表の行やセルが選択されたかわかりにくい場合は、左に表示されているアウトラインにて対象をクリックすると分かり易いかもしれません。


続いて表のセル内にコアコントロールより【ラベル】を配置します。

ベル: 出   社(間のスペースは自由です)
フォントサイズ: 28(こちらも自由)
色: 白(こちらも自由)


続いて部署のボタンを作成します。
以前に作成しました2部署分のボタンになります。

先の表に続いて、いくつか改行しておきます。
その下に【表】を配置します。

今回は2部署のみの作成ですので、

行数: 1
列数: 2
幅に合わせる

で作成します。
もちろん部署数に合わせて配分してください。
一般的な画面では、4列くらいまでが見やすいかと思います。

続いて作成された表の左側のセルにコアコントロールから【ボタン】を配置します。

ラベル: 営業1部
フォントサイズ: 24(自由)
文字揃え: 中央

同じく右側のセルにも【ボタン】を配置し、

ラベル: 営業2部
フォントサイズ: 24(自由)
文字揃え: 中央

とします。


続いてさらに表の下にいくつか改行し、
【ボタン】を配置します。

ラベル: 戻  る
フォントサイズ: 24(自由)
文字揃え: 中央
背景: 自由(私はグレーにしました)


このままでもいいのですが、戻るボタンを右寄せしてみます。
表の中に配置した場合、表のセルのオプションで【セルの横位置】が選択できるのですが、今回は表に入れていません。
直接ソースに書き加えてみましょう。

【戻る】ボタンを選択した状態で、【ソース】タブに切り替えてください。


選択した【戻る】ボタン部分のソースがハイライトされて、ソースが表示されます。

このハイライトされた1行の上に
<div align="right">

下に
</div>



と直接書き込みます。
※注意
ハイライトされた行の最終に</xp:view>というタグがありますので、このタグの手前にで<div>タグを閉じてください。


設計タブに戻って頂くと、


【戻る】ボタンが右寄せされました。

レイアウト等に関する部分ですので、お気に召さない場合は、表内に配置するなど、試してみてください。

それではブラウザでプリビューしてみましょう。


かなり間延びしたページになってしまいましたが、見た目は自由に変更ください。
今回はこのまま進めます。


このページはトップページの【出社】ボタンを押した際に表示されます。
つまり【戻る】ボタンが押された際には、トップページに戻る必要がありますので、ボタンにリンクを設定します。

【戻る】ボタンを選択し、下部より【イベント】タブを選択してください。


【アクションの追加】ボタンをクリックし、
 カテゴリ: 基本
 アクション: ページを開く
 開くページの名前: m_XpIndex


とし、OKします。


アクションが追加されました。

それでは一旦、m_XpWorkを保存して閉じます。

続いてこのm_XpWorkをコピーして、退社用のm_XpLeaveを作成します。


m_XpLeaveを開き、先頭の表を選択します。
背景をトップページの【退社】ボタンに合わせ、ラベルの文字列を「出社」から「退社」に変更します。


以上で退社用のページは準備できました。

最後にトップページから両ページへのリンクを作成します。

m_XpIndexを開いてください。

先ほどと同様にふたつのボタンにイベントを追加します。

出社ボタン
 カテゴリ: 基本
 アクション: ページを開く
 開くページの名前: m_XpWork

退社ボタン
 カテゴリ: 基本
 アクション: ページを開く
 開くページの名前: m_XpLeave

最後にブラウザで動きを確認しましょう。
ブラウザでプリビューしてください。

現時点のイメージは下記となります。




今回は出社・退社ページを作成し、それぞれトップページからのリンクまでを組んでみました。
意図的にソースそのものにも直接手を加えてみましたので、ご興味ある方はいろいろとお試しください。


次回は各部署のページを作成します。
ようやくカスタムコントロールを使用することになります !!




0 件のコメント:

コメントを投稿