そのへんのちらしのうら

調べたこと、学んだこと、おもしろかったこと。

JSP+ServletでシンプルなWebアプリをつくる（４）ーヘッダ部レイアウト＋検索

JSP Java Servlet

３．開発

３．３．ヘッダ部をレイアウトする

ヘッダ部のレイアウトをしてみます。ここでは、色や細かい配置の調整などはいったん置いておき、機能実装のみ行います。

①jspにヘッダ部の内容を実装する。
■zaikochosei.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在庫調整画面</title>
</head>
<body>
    在庫調整画面
    <form action="/zaiko/ZaikoChoseiController" method="post">
        <input type="submit" name="SRH" value="検索">
        <input type="submit" name="UPD" value="更新">
        <br>ロケーション
        <input type="text" name="location" value="">
        <br>商品コード
        <input type="text" name="itemcd" value="">
    </form>
</body>
</html>

②リクエストして確認。
f:id:bubox2:20190309202710p:plain

３．４．検索のFormを返す

ヘッダ部に検索条件を入力し、検索ボタンを押すと、前回入力した値がテキストボックスに入った状態で表示される（＝サーブレットにパラメータが渡り、その値がレスポンスとして返る）ところまで確認します。

①画面フォームのJavaBeansクラスを作成する。
画面フォームと対応するプロパティを持つJavaBeansを作成します。
■ZaikoChoseiForm.java

package form;
import java.io.Serializable;

public class ZaikoChoseiForm implements Serializable {

    private String location;
    private String itemcd;

    public String getLocation() {
        return location;
    }
    public void setLocation(String location) {
        this.location = location;
    }
    public String getItemcd() {
        return itemcd;
    }
    public void setItemcd(String itemcd) {
        this.itemcd = itemcd;
    }

}


②getParameterとsetAttributeの実装
リクエストパラメータから値を取り出して画面のformクラスにセットする処理と、リクエストスコープに画面フォームのインスタンスを保存する処理を実装していきます。
リクエストパラメータのnameを指定してgetParameterするやり方もありますが、今後項目を増えた場合や、明細部で明細数が可変になることを考慮し、PropertyDescriptorを使って自動的にできるようにします。
参考にしたのはこちら。
npnl.hatenablog.jp
■ZaikoChoseiController.java

package controller;

import java.beans.IntrospectionException;
import java.beans.PropertyDescriptor;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;
import java.util.Map;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import form.ZaikoChoseiForm;

/**
 * Servlet implementation class ZaikoChoseiController
 */
@WebServlet("/ZaikoChoseiController")
public class ZaikoChoseiController extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public ZaikoChoseiController() {
        super();
    }

    /**
    * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //★Content-Typeヘッダを出力するデータに合わせて指定する
        response.setContentType("text/html; charset=UTF-8");

        RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/zaikochosei.jsp");
        dispatcher.forward(request, response);
    }

    /**
    * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        try {

            if (null != request.getParameter("SRH")) {
                //リクエストパラメータを画面フォームにセット
                ZaikoChoseiForm form = setForm(request);
                //SetAttributeする
                getForm(form, request, response);
                RequestDispatcher dispatcher = request.getRequestDispatcher("/WEB-INF/jsp/zaikochosei.jsp");
                dispatcher.forward(request, response);
            }

        } catch (Exception ex) {
            //TODO エラーページ
            response.getWriter().append("ERROR:"
                    + ex.getMessage()).append(request.getContextPath());
        }
    }

    /**
    * リクエストパラメータを画面フォームに設定するメソッド
    * @param request
    * @return
    * @throws IntrospectionException
    * @throws IllegalAccessException
    * @throws IllegalArgumentException
    * @throws InvocationTargetException
    */
    private ZaikoChoseiForm setForm(HttpServletRequest request)
            throws IntrospectionException, IllegalAccessException, IllegalArgumentException, InvocationTargetException {

        //画面Form生成
        ZaikoChoseiForm form = new ZaikoChoseiForm();

        //リクエストパラメータのnameとvalueを保持するマップ
        Map<String, String[]> paramMap = request.getParameterMap();

        //リクエストパラメータを順に取り出す
        for (String key : paramMap.keySet()) {

            if ("SRH".equals(key) || "UPD".equals(key)) {
                continue;
            }

            String[] val = paramMap.get(key);
            String _key;

            //リクエストパラメータのnameの設定
            _key = key;
            //プロパティディスクリプタの取得
            PropertyDescriptor prop = new PropertyDescriptor(_key, ZaikoChoseiForm.class);
            //setterの取得
            Method setter = prop.getWriteMethod();
            //プロパティにセット
            setter.invoke(form, val[0]);
        }

        return form;
    }

    /**
    * 画面フォームをsetAttributeするメソッド
    * @param form
    * @param request
    * @param response
    */
    private void getForm(ZaikoChoseiForm form, HttpServletRequest request, HttpServletResponse response) {
        request.setAttribute("form", form);
    }

}


③jsp側でgetAttributeする
EL式を使ってgetAttributeします。EL式は、スコープに保存されているJavaBeansインスタンスのプロパティの値を出力することができます。
■zaikochosei.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在庫調整画面</title>
</head>
<body>
    在庫調整画面
    <form action="/zaiko/ZaikoChoseiController" method="post">
        <input type="submit" name="SRH" value="検索">
        <input type="submit" name="UPD" value="更新">
        <br>ロケーション
        <input type="text" name="location" value="${form.location}">
        <br>商品コード
        <input type="text" name="itemcd" value="${form.itemcd}">
    </form>
</body>
</html>


④検索ボタン押下して確認
検索条件に値を入れて、検索ボタンを押下してレスポンスが返ってきた後も、値が保持されていることを確認します。
f:id:bubox2:20190309232732p:plain