MyBatis + Guice でカンタン DAO 実装(その 4) - 似非プログラマのうんちく

View の作成

Velocity で作る。

list.vm

<!doctype html>
<html>
<head>
  <title>日本の政令指定都市一覧</title>
  <link rel="stylesheet" href="css/list.css" type="text/css">
</head>
<body>
  <table>
    <caption>日本の政令指定都市一覧</caption>
    <colgroup>
      <col id="no">
      <col id="pref">
      <col id="name">
      <col id="button">
    </colgroup>
    <thead>
      <tr>
        <th>No.</th>
        <th>都道府県</th>
        <th>都市名</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
    #foreach ($city in $citylist)
      #set ($i = $foreach.index % 2)
      <tr class="tr$i">
        <td>$city.id</td>
        <td>$city.pref</td>
        <td>$city.name</td>
        <td class="button">
          <form action="detail" method="post">
            <div>
              <input type="hidden" name="id" value="$city.id">
              <input type="submit" value="詳細">
            </div>
          </form>
        </td>
      </tr>
    #end
    </tbody>
  </table>
</body>
</html>

detail.vm

<!doctype html>
<html>
<head>
  <title>${city.name}の詳細</title>
  <link rel="stylesheet" href="css/detail.css" type="text/css">
</head>
<body>
  <table>
    <caption>${city.name}のデータ</caption>
    <tr>
      <th>指定日</th>
      <td>$date.format('yyyy 年 M 月 d 日', $city.designatedDay)</td>
    </tr>
    <tr>
      <th>地方</th>
      <td>$city.dstName</td>
    </tr>
    <tr>
      <th>都道府県</th>
      <td>$city.pref</td>
    </tr>
    <tr>
      <th>面積</th>
      <td>$number.format('#,###.##', $city.area)km&sup2;</td>
    </tr>
    <tr>
      <th>人口</th>
      <td>$number.format('#,###,###', $city.population) 人</td>
    </tr>
  </table>
  <p><a href="list">一覧に戻る</a></p>
</body>
</html>

error.html*1

<!doctype html>
<html>
<head>
  <title>Error Page</title>
</head>
<body>
  <h1>エラー</h1>
  <p>このページに直接アクセスすることはできません。</p>
  <p><a href="list">一覧に戻る</a></p>
</body>
</html>

index.jsp *2

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

CSS など
/css/list.css

table {
	margin : auto;
	border : 1px outset black
}

caption {
	font-size : 20pt;
	color : #008b8b
}

#no { width : 30px }
#pref { width : 100px }
#name { width : 120px }
#button { width : 80px }

thead {
	background-color : #008b8b;
	color : #e6e6fa;
	font-size : 14pt
}

th { border : 1px inset black }

tr.tr0 { background-color : #b0e0e6 }
tr.tr1 { background-color : #e6e6fa }

td {
	text-align : left;
	border : 1px inset black
}
td.button { text-align : center }

/css/detail.css

table { margin : auto }

caption {
	font-size : 20pt;
	color : #6a5acd
}

th, td { text-align : left }

th {
	background-color : #6a5acd;
	color : #e6e6fa;
	font-size : 14pt
}

td {
	background-color : #e6e6fa;
	color : #6a5acd;
	font-size : 14pt;
	width : 180px
}

p { text-align : center }

Velocity 用の設定と web.xml

/WEB-INF/velocity.properties

input.encoding = utf-8
output.encoding = utf-8

/WEB-INF/velocity-toolbox.xml

<?xml version="1.0"?>
<toolbox>
  <tool>
    <key>date</key>
    <scope>application</scope>
    <class>org.apache.velocity.tools.generic.DateTool</class>
  </tool>

  <tool>
    <key>number</key>
    <scope>application</scope>
    <class>org.apache.velocity.tools.generic.NumberTool</class>
  </tool>
</toolbox>

/WEB-INF/web.xml

<?xml version="1.0"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
    http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0">

  <display-name>MajorCity</display-name>

  <servlet>
    <servlet-name>velocity</servlet-name>
    <servlet-class>org.apache.velocity.tools.view.servlet.VelocityViewServlet</servlet-class>
    <init-param>
      <param-name>org.apache.velocity.toolbox</param-name>
      <param-value>/WEB-INF/velocity-toolbox.xml</param-value>
    </init-param>
    <init-param>
      <param-name>org.apache.velocity.properties</param-name>
      <param-value>/WEB-INF/velocity.properties</param-value>
    </init-param>
    <load-on-startup>10</load-on-startup>
  </servlet>

  <servlet-mapping>
    <servlet-name>velocity</servlet-name>
    <url-pattern>*.vm</url-pattern>
  </servlet-mapping>

  <filter>
    <filter-name>EncodingFilter</filter-name>
    <filter-class>jp.mydns.akanekodou.filter.EncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
    <init-param>
      <param-name>language</param-name>
      <param-value>ja</param-value>
    </init-param>
  </filter>

  <filter-mapping>
    <filter-name>EncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

</web-app>

主に Velocity に関する設定。filter には自分で作成したエンコーディングのための filter を使っています。filter についてはこちらを参照 → akaneko3/EncodingFilter · GitHub

*1:これは本当にただの HTML。

*2:URL にセッション ID を付けないためのダミー。