Hibernate による O/R マッピング(その 4) - 似非プログラマの覚え書き

DAO 層までの構築が終わったので、View を作っていきますが、その前に準備として JSTL(JSP Standard Tag Library) をインストールします。JSTL は以下のサイトからダウンロードできます。
Standard Tag Libraries for JavaServer Pages ― Project Kenai

javax.servlet.jsp.jstl-api-1.2.1.jar
javax.servlet.jsp.jstl-1.2.1.jar

を WEB-INF/lib フォルダに入れてください。

WebContent 直下に customer, product, resources の三つのフォルダを作ります。resources の下には css, js の二つのフォルダを作り、css 直下に menu.css と customer, product の二つのフォルダを作り、各フォルダ内に search.css を作ります。js 直下には customer フォルダを作り、その中に search.js を作ります。
/index.jsp (ダミーページ)

<!doctype html>
<html>
<head>
  <title>Index Page</title>
</head>
<body>
  <% response.sendRedirect("menu.html"); %>
</body>
</html>

/menu.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="content-language" content="ja">
  <link rel="stylesheet" href="resources/css/menu.css" type="text/css">
  <title>Hibernate サンプルメニュー</title>
</head>
<body>
  <h1>Hibernate サンプル集</h1>
  <ul>
    <li><a href="customer/list">顧客マスタ一覧</a></li>
    <li><a href="customer/search">顧客マスタ参照</a></li>
    <li><a href="product/search">商品検索</a></li>
  </ul>
</body>
</html>

/customer/list.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ page import="java.util.List" %>
<%@ page import="jp.mydns.akanekodou.model.Customer" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
  <title>顧客マスタ一覧</title>
</head>
<body>
  <%
    @SuppressWarnings("unchecked")
    List<Customer> items = (List<Customer>)request.getAttribute("items");
  %>
  <h1>顧客マスタ一覧</h1>
  <table border>
    <thead>
      <tr><th>ID</th><th>顧客名</th><th>連絡先</th></tr>
    </thead>
    <tbody>
    <c:forEach var="item" items="${items}">
      <tr>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.phone}</td>
      </tr>
    </c:forEach>
    </tbody>
  </table>
</body>
</html>

JSTL の <c:forEach> タグと $ で始まる EL(Expression Language) 式を利用しています。

/customer/search.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!doctype html>
<html>
<head>
  <title>顧客マスタ参照</title>
  <link rel="stylesheet" href="../resources/css/customer/search.css" type="text/css">
  <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
</head>
<body>
  <h1>顧客マスタ参照</h1>
  <jsp:useBean id="item" class="jp.mydns.akanekodou.model.Customer" scope="request" />
  <form action="search" method="post">
    <table>
      <tr>
        <td>顧客ID</td>
        <td><input type="text" name="id" size="5" value="<jsp:getProperty name="item" property="id" />"></td>
      </tr>
      <tr>
        <td>顧客名</td>
        <td><input type="text" name="name" size="20" readonly value="<jsp:getProperty name="item" property="name" />"></td>
      </tr>
      <tr>
        <td>連絡先</td>
        <td><input type="text" name="phone" size="20" readonly value="<jsp:getProperty name="item" property="phone" />"></td>
      </tr>
    </table>
    <p>
      <input type="submit" value="検索">
    </p>
  </form>
  <script src="../resources/js/customer/search.js"></script>
</body>
</html>

<jsp:useBean> タグで永続化クラスを指定しています。永続化クラスは見た目は JavaBeans ですから問題ありません。<jsp:getProperty> タグで getter が呼び出されます。

/product/search.jsp

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ page import="java.util.List" %>
<%@ page import="jp.mydns.akanekodou.model.Product" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!doctype html>
<html>
<head>
  <title>商品検索</title>
  <link rel="stylesheet" href="../resources/css/product/search.css" type="text/css">
</head>
<body>
  <%
    @SuppressWarnings("unchecked")
    List<Product> items = (List<Product>)request.getAttribute("items");
  %>
  <form action="search" method="post">
    <p>
      <input type="text" name="keyword" size="30">
      <input type="submit" value="検索">
    </p>
  </form>
  <table border>
    <colgroup><col><col id="name"></colgroup>
    <thead>
      <tr><th>商品ID</th><th>商品名</th></tr>
    </thead>
    <tbody>
    <c:forEach var="item" items="${items}">
      <tr><td>${item.id}</td><td>${item.name}</td></tr>
    </c:forEach>
    </tbody>
  </table>
</body>
</html>

こちらも JSTL のタグと EL 式を利用しています。

/resources/css/menu.css

ul { list-style-type: none }

/resources/css/customer/search.css

body { background-color : silver }

h1 {
  font-size : x-large;
  text-align : center
}

table { margin : auto }

p { text-align : center }

/resources/css/product/search.css

#name { width : 15em }

/resources/js/customer/search.js

$('[name = "id"]').val(function (i, val) {
    return val == 0 ? "" : val;
});

〆にさりげなく jQuery を。これは /customer/search に最初にアクセスしたときと該当データが見つからなかったときに ID の入力欄が "0" になってしまうので、見栄えのためにその場合は何も表示させないようにしています。val メソッドは無名関数も引数に取ることができて、その際無名関数の第一引数は要素の index に、第二引数は要素の value 値になります。

以上で View に関する部分は終わりです。後は Controller を作ります。