前回(その3)で(その4)ではダイレクトにSQLを指定してデータを取得してみたりする。
とか言ってしまったけど、大人の事情により今回は「動的入力エリア」、「データのINSERT」をやることにしました。
まあでも順番的にはこのほうが良いと思ったりもする。
今回やること
- 現在のテーブルに入っているデータを表示する
- テーブルにインサートするための入力エリアを表示する
- ボタンクリックで入力エリアを増やす
- テーブルにデータをインサートする。
- インサート後のテーブル内容を表示する
こんな感じのを作る
対応する資源は以下のものになる。 【JSP】前回(その3で)作成したものに手を加えていく /SAStrutsMySQL/src/main/webapp/WEB-INF/view/index.jsp 【Action】前回(その3で)作成したものに手を加えていく /SAStrutsMySQL/src/main/java/brokendish/action/IndexAction.java 【Form】新規で作成 /SAStrutsMySQL/src/main/java/brokendish/form/TekitooForm.java
ソース全載せ(弄った物)
【JSP】
/SAStrutsMySQL/src/main/webapp/WEB-INF/view/index.jsp
————————————————————————-
<%@ page pageEncoding = "UTF-8" %> <%@ page contentType="text/html; charset=UTF-8" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Dolteng Auto Generated</title> </head> <body> <h1>Table INSERT</h1> <h>テーブルの内容を表示</h> <table border="10" cellspacing="1" cellpadding="2" bordercolor="#333333"> <tr> <th>id</th> <th>msg</th> <th>name</th> <th>tmp1</th> <th>tmp2</th> </tr> <c:forEach var="tekito" varStatus="s" items="${tekitooList}"> <tr> <td>${f:h(tekito.id)}</td> <td>${f:h(tekito.msg)}</td> <td>${f:h(tekito.name)}</td> <td>${f:h(tekito.tmp1)}</td> <td>${f:h(tekito.tmp2)}</td> </tr> </c:forEach> </table> <h1>動的入力エリア</h1> 「もっと入力するボタン」クリックで入力エリアを追加する(最大10個まで) <s:form > <table> <tr> <th>id</th> <th>msg</th> <th>name</th> <th>tmp1</th> <th>tmp2</th> </tr> <tr> <!-- 初期表示させる入力エリア --> <td><html:text property="tekitooForm.nyuryokuId[0]"/></td> <td><html:text property="tekitooForm.nyuryokuMsg[0]"/></td> <td><html:text property="tekitooForm.nyuryokuName[0]"/></td> <td><html:text property="tekitooForm.nyuryokuTmp1[0]"/></td> <td><html:text property="tekitooForm.nyuryokuTmp2[0]"/></td> </tr> <!-- 現在表示されている入力エリア+1を表示する --> <c:forEach var="i" begin="1" end="${tekitooForm.gCnt}" step="1" > <tr> <td><html:text property="tekitooForm.nyuryokuId[${i}]"/></td> <td><html:text property="tekitooForm.nyuryokuMsg[${i}]"/></td> <td><html:text property="tekitooForm.nyuryokuName[${i}]"/></td> <td><html:text property="tekitooForm.nyuryokuTmp1[${i}]"/></td> <td><html:text property="tekitooForm.nyuryokuTmp2[${i}]"/></td> </tr> </c:forEach> </table> <input type="submit" name="addInput" value="もっと入力する" /> <input type="submit" name="insert" value="インサート" /> <!-- 表示している入力エリアのカウントアップ ※10件まではカウントアップするけど、それ以上はしない--> <!-- 現在の入力エリアの数をフォームクラスに定義した変数で持ちまわる --> <c:if test="${tekitooForm.gCnt < 9}"> <html:hidden property="tekitooForm.gCnt" value="${tekitooForm.gCnt + 1}"/> </c:if> <!-- 10件表示されてたら、これ以上は表示させないので9で固定する --> <c:if test="${tekitooForm.gCnt == 9}"> もう入力エリアは増やせない!!最大は10件までだよ!! <html:hidden property="tekitooForm.gCnt" value="9"/> </c:if> </s:form> </body> </html> |
【Action】
/SAStrutsMySQL/src/main/java/brokendish/action/IndexAction.java
————————————————————————-
/* * Copyright 2004-2008 the Seasar Foundation and the Others. * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, * either express or implied. See the License for the specific language * governing permissions and limitations under the License. */ package brokendish.action; import org.seasar.extension.jdbc.JdbcManager; import org.seasar.struts.annotation.Execute; import brokendish.entity.Tekitoo; import brokendish.form.TekitooForm; public class IndexAction { public JdbcManager jdbcManager; public java.util.List<Tekitoo> tekitooList; public TekitooForm tekitooForm; @Execute(validator = false) public String index() { // テーブルからデータを取得する(全件) tekitooList = jdbcManager.from(Tekitoo.class).getResultList(); // 初期処理 return initProc(); } /** * 初期処理 * * @return index.jsp */ @Execute(validator = false) public String initProc(){ return "index.jsp"; } /** * 「もっと入力する」ボタンの処理 * @return */ // アノテーション「@Execute」を指定しておくとリクエストを処理する。 // JSPで定義している「<input type="submit" name="addInput" value="もっと入力する" />」 // ボタンクリックの時に行われる処理 @Execute(validator = false) public String addInput(){ // tekitooForm.nyuryokuId = new String[10]; tekitooForm.nyuryokuMsg = new String[10]; tekitooForm.nyuryokuName = new String[10]; tekitooForm.nyuryokuTmp1 = new String[10]; tekitooForm.nyuryokuTmp2 = new String[10]; // JSPで表示させる件数分初期値を入れとく for(int i=0;i < 9;i++){ tekitooForm.nyuryokuId[i]=""; tekitooForm.nyuryokuMsg[i]=""; tekitooForm.nyuryokuName[i]=""; tekitooForm.nyuryokuTmp1[i]=""; tekitooForm.nyuryokuTmp2[i]=""; } return "index"; } /** * 「インサート」ボタンの処理 * @return */ // アノテーション「@Execute」を指定しておくとリクエストを処理する。 // JSPで定義している「<input type="submit" name="insert" value="インサート" />」 // ボタンクリックの時に行われる処理 @Execute(validator = false) public String insert(){ // テーブル更新(INSERT) for(int i=0;i < tekitooForm.nyuryokuId.length;i++){ exeTekitooInsert(tekitooForm, i); } // テーブルからデータを取得する(全件) tekitooList = jdbcManager.from(Tekitoo.class).getResultList(); // JSP側の方で1加算した値を設定しているので、マイナス1しておかないとExceptionになる tekitooForm.gCnt = tekitooForm.gCnt -1; return "index.jsp"; } /** * Tekitooテーブルインサート * @param formDat * @param cnt * @return */ // @Executeを付けてないのでただの内部メソッド public int exeTekitooInsert(TekitooForm formDat, int cnt) { // エンティティークラスのインスタンス生成 Tekitoo entity = new Tekitoo(); // インサートするデータを設定 entity.id = formDat.nyuryokuId[cnt]; entity.msg = formDat.nyuryokuMsg[cnt]; entity.name = formDat.nyuryokuName[cnt]; entity.tmp1 = formDat.nyuryokuTmp1[cnt]; entity.tmp2 = formDat.nyuryokuTmp2[cnt]; // インサート実行 return jdbcManager.insert(entity).execute(); } } |
【Form】
/SAStrutsMySQL/src/main/java/brokendish/form/TekitooForm.java
————————————————————————-
package brokendish.form; import java.io.Serializable; public class TekitooForm implements Serializable{ private static final long serialVersionUID = 1L; public int gCnt; public String[] nyuryokuId; public String[] nyuryokuMsg; public String[] nyuryokuName; public String[] nyuryokuTmp1; public String[] nyuryokuTmp2; } |
これで準備が出来たので実行してみる
初期画面
入力
インサートボタンクリック後
テーブルの中身