Top > 修正と拡張

* 修正と拡張 [#tb646614]
ここにはゴルフスコア管理の修正や拡張を記録していく。ゴルフスコア管理のページでもよかったが、変更点を明確に記録するためにページを独立。

#contents

** ゴルフスコア登録変更画面のコースのリストボックス化 [#v8da336a]
まず登録変更画面のコースがID入力のテキストボックスになっている(これではお話にならない)ので、これをコース名称を選択できるリストボックスに変更する。コース名称はコースマスタテーブルから取得して、コースID順に表示させる。エンドユーザーからすれば名称順のがよいと後で気づいたが、再コンパイルが面倒なのであとでやることにする。 (^^; 

*** CourseListクラスの作成 [#yae6b0cd]
まずCourseテーブルからデータを取得するためのクラスを作成する。ここには単純にマスタデータをロードして1件ずつレコードを読み込むメソッドを実装する。もちろんゲッターとクローズも実装。

#code(java,nooutline,ゴルフスコア管理/CourseList.java)

*** ScoreEdit.jpsの変更 [#uede1991]
次にJSPコードにJavaBeasnを実装する。

JSPの基本パターン部(←呼び方がわからない・・)に以下のコードを追加。具体的にはCourseListクラスを実装してデータベースをロードしている。
 <jsp:useBean class="produst.golf.CourseList" id="courselist" scope="session"/>
 // コースマスタLOAD
 courselist.loadCourses();


次にHTMLの表示部(←こちらも呼び方がわからず・・・・)のコースの表示部分をリストボックスに変更する。courseテーブルからデータを順に読み込んでリストボックスにセットしていく。スコアデータの変更の場合は、スコアデータに登録されたコースを初期表示してあげる。

-変更前
 <DIV CLASS="section">
 <B>コース</B>
 <INPUT TYPE="text" NAME="cid" VALUE="<%=score.getCid()%>">
 </DIV>

- 変更後
 <DIV CLASS="section">
 <B>コース</B>
 <SELECT NAME="course">
 	<%while(courselist.next()){%>
 		<OPTION VALUE="<%=courselist.getCid()%>" 
 			<%if(courselist.getCid()==score.getCid()){%>SELECTED<%}%>>
 			<%=courselist.getCourseName()%>
 	<%}%>
 	</OPTION>
 </SELECT>
 </DIV>

画面のイメージはこんな感じ
#ref(LISTBOX.PNG)

** ゴルフスコア登録変更画面の天候のラジオボタン化 [#w4bab509]
登録変更画面の天候についてもIDによる入力はありえないので、ラジオボタンに変更する。

*** WeatherListクラスの作成 [#ocf7a892]
Courseデータ同様、Weatherテーブルからデータを取得するためのクラスを作成する。単純にマスタデータをロードして1件ずつレコードを読み込むメソッドを実装する。

#code(java,nooutline,ゴルフスコア管理/WeatherList.java)

*** ScoreEdit.jpsの変更 [#a016eb94]
次にJSPコードにJavaBeasnを実装する。

-変更前
 <DIV CLASS="section">
 <B>天候</B>
 <INPUT TYPE="text" NAME="wid" size="1" maxlength="1" VALUE="<%=score.getWid()%>">
 </DIV>

-変更後
 <jsp:useBean class="produst.golf.WeatherList" id="weatherlist" scope="session"/>
 // 天候マスタLOAD
 weatherlist.loadWeathers();
&color(White){-ダミー};
 <DIV CLASS="section">
 <B>天候</B>
 <%while(weatherlist.next()){%>
 	<INPUT TYPE="radio" NAME="wid" VALUE="<%=weatherlist.getWid()%>"
 	 <%if(weatherlist.getWid()==score.getWid()){%>CHECKED<%}%> > 
 	 <%=weatherlist.getWeatherName()%>
 <%}%>
 </DIV>


画面のイメージはこんな感じ
#ref(RADIOBUTTON.PNG)


** ゴルフスコア一覧画面 [#id60291b]
あまりにも醜かった一覧画面を変更する。見栄えだけでなくスコア一覧がプレー日の降順に出力されるようにScoreList.javaのSQL文も修正。(ここでは省略)

*** スタイルシートの変更 [#qe4449d5]
テーブル出力用の定義を追加。TDとTHの列幅(クラス)をそれぞれで定義するやり方がなんとなく間違っている気がするけど、とりあえず今は結果オーライ。
#code(css,nooutline,style.css)

*** ScoreList.jspの変更 [#t901590d]
上で定義したスタイルシートを活用する。
#code(jsp,nooutline,ScoreList.jsp)

変更前よりはよくなったけど・・・決してセンスがいいとはいえません。 (^^; 
#ref(ScoreList2.PNG)

** ゴルフスコア登録変更画面の賞のチェックボックス化 [#j1ffa3de]
ドラコン賞やニアピン賞の指定を簡略化するためにチェックボックスに変えてみる。

*** ScoreEdit.jspの変更 [#oc1e8f21]
ScoreEdit.jspの賞の表示を以下のように変更する。このあたりの記述方法はいっこうに慣れない・・・
 <DIV CLASS="section">
 <INPUT TYPE="checkbox" NAME="award1" VALUE="<%=score.getAward1()%>" 
 <%if(score.getAward1().equals(strX)){%>CHECKED<%}%> ><B>ニアピン賞(OUT)</B><BR>
 <INPUT TYPE="checkbox" NAME="award2" VALUE="<%=score.getAward2()%>" 
 <%if(score.getAward2().equals(strX)){%>CHECKED<%}%> ><B>ニアピン賞(IN)</B><BR>
 <INPUT TYPE="checkbox" NAME="award3" VALUE="<%=score.getAward3()%>" 
 <%if(score.getAward3().equals(strX)){%>CHECKED<%}%> ><B>ドラコン賞(OUT)</B><BR>
 <INPUT TYPE="checkbox" NAME="award4" VALUE="<%=score.getAward4()%>" 
 <%if(score.getAward4().equals(strX)){%>CHECKED<%}%> ><B>ドラコン賞(IN)</B><BR>
 </DIV>

*** ScoreUpdate.jspの変更 [#n95ee8c7]
次にScoreUpdate.jspを変更する。
 String strAward1 = request.getParameter("award1");
 String strAward2 = request.getParameter("award2");
 String strAward3 = request.getParameter("award3");
 String strAward4 = request.getParameter("award4");
 
 if (strAward1!=null) {  
 	strAward1="X";
 } else {
 	strAward1="";
 }
 if (strAward2!=null) { 
 	strAward2="X";
 } else {
 	strAward2="";
 }
 if (strAward3!=null) { 
 	strAward3="X";
 } else {
 	strAward3="";
 }
 if (strAward4!=null) { 
 	strAward4="X";
 } else {
 	strAward4="";
 }

ついでに更新処理のセッターの記述漏れがあったので修正する。
 score.setId(intId);
 score.setId(intId);
 score.setUid(intUid);
 score.setCid(intCid);
 score.setPdate(strPdate);
 score.setOutScore(intOutScore);
 score.setInScore(intInScore);
 score.setScore(intScore);
 score.setAward1(strAward1);
 score.setAward2(strAward2);
 score.setAward3(strAward3);
 score.setAward4(strAward4);
 score.setWid(intWid);
 score.update();

*** 画面イメージ [#r0cfcbe9]
こんな感じ。
画面イメージはこんな感じ。
#ref(CHECKBOX.PNG)

    ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS