【第九回】より複雑な選択画面を作る

Javaウェブアプリ開発

はじめに

DreamHanksの松下です。

前回は受け取ったリクエストパラメータがユーザ情報と一致しているか
を検証して、その結果によってWebページを動的にレスポンスする方法を解説しました。

今回は前回に作ったログイン画面よりも複雑な画面の作り方を解説します。

連載記事まとめ

 

勤務時間選択画面を作る

仕様としては下記の通りです。

JSPは下記のとおりです。

完成すると下記のような画面ができます。

この画面のやりたいこと

この画面は月の「勤務時間登録画面」で月間の表を出力するためにあります。

具体的には下記の2つの役割があります。
①先月か今月かを選び、選んだ月の一覧を表示したい。
②本日の出社時間/退社時間を、今月を選んだ場合に勤務時間登録画面で入力したい。

では、今回の「勤務時間選択画面」ついて、ひとつひとつ順番通りに解説していきます。

<title>タグについて

このタグ内に挟まれた文字列がブラウザのタブ名になります。

 

<h1>タグについて

このタグに囲まれた文字がこのページの題名となります。
今回は「勤務時間選択画面」です。

Webデザインとしてのルール
<h1>タグは題名に使われることが多いので、1ページにつき1つが好ましいです。
ここから下の見出しには<h2>タグからをお使いください。
<h2>タグからは複数作成しても問題ありません。

 

ユーザ名を表示する

 

前回サーバーから勤務時間選択画面に遷移する前に、サーバーでmodel.addAttribute(“member”, member);したものを、画面で表示します。

 

memberオブジェクトはメンバーテーブルのカラムのエンティティを持つので、下記のようにネストしてNameだけを取り出し、表示することができます。

${member.name}

先月or今月を判定するラジオボタンを作る

Spring MVCのJSPタグにラジオボタンを表示する<f:radiobutton>タグがあります。
今回はこちらを使いました。

 

先月を「0」、今月を「1」という文字列をvalue値に設定。

サーバーからアトリビュートされた「worktimeChoiceForm」に定義されている
monthというエンティティ名でサブミットボタンを押下されたらpathingします。

 

出社時間・退社時間の作り方

Spring MVCのJSPタグにセレクトボックスを表示する<f:select>タグがあります。
今回はこちらを使いました。

<f:select>タグには<f:option>タグと<f:options>タグを定義することができます。

 

<f:option>タグについて

このタグを使ってセレクトボックスのデフォルト値を設定しています。
デフォルト値とは何も選択していない状態で、何か値がセレクトボックスに設定されているということです。

デフォルト値はサーバーで生成されたものをEL式を使って設定しています。

EL式とは、サーバーでattributeして値を取得する式です。
${member.dfStartTime}

詳しくはこちらの記事をご覧ください。

 

今回はメンバーテーブルにある、df_Start_time, df_end_timeを使って
各メンバーの持つデフォルトの出勤時間/退社時間をデフォルト値に表示するようにしております。

 

<f:options>タグについて

こちらのタグでは実際にその日働いた時間を設定するための値を生成しています。

値の生成方法

items=”${worktimeList}”
こちらのitemsの中に設定されている、サーバー側でattributeされた値は
下記のロジックで生成しています。

 

最後に

ログイン画面と同じようにサブミットボタンを押下したときに、サーバー側に入力した値が送られます。サブミットボタンに関して、忘れてしまった方はこちらをご覧ください。

今回は「勤務時間選択画面」の説明を通して、複雑な画面表示について解説しました。

次回は「勤務時間登録画面」を表示するため、表の情報をサーバー側で生成する作業について解説していきます。

 

 

コメント