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²</td> </tr> <tr> <th>人口</th> <td>$number.format('#,###,###', $city.population) 人</td> </tr> </table> <p><a href="list">一覧に戻る</a></p> </body> </html>
<!doctype html> <html> <head> <title>Error Page</title> </head> <body> <h1>エラー</h1> <p>このページに直接アクセスすることはできません。</p> <p><a href="list">一覧に戻る</a></p> </body> </html>
<!doctype html> <html> <head> <title>Index Page</title> </head> <body> <% response.sendRedirect("list"); %> </body> </html>
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 }
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
<?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>
<?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