FrontPage > Spring Bootの覚書 > Spring Boot Thymeleaf
Thymeleaf formサンプル †
入力した値をそのまま返すだけのサンプル画面を作成してみる。
(formサンプル画面)
1. データクラスの作成 †
- 入出力するデータを保持するクラスを作成する。
(src/main/java/com/ziqoo/sbSample/web/form/TlSampleForm.java)
package com.ziqoo.sbSample.web.form;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Collections;
import java.util.List;
public class TlSampleForm {
private String message1;
private String message2;
private Calendar today;
private String name;
private List<String> ckColors;
private String rdColor;
private String lsColor;
private List<TlSampleRow> rowDatas;
public String getMessage1() {
return message1;
}
public void setMessage1(String message1) {
this.message1 = message1;
}
public String getMessage2() {
return message2;
}
public void setMessage2(String message2) {
this.message2 = message2;
}
public Calendar getToday() {
return today;
}
public void setToday(Calendar today) {
this.today = today;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<String> getCkColors() {
if (ckColors == null) {
ckColors = Collections.emptyList();
}
return ckColors;
}
public void setCkColors(List<String> ckColors) {
this.ckColors = ckColors;
}
public String getRdColor() {
return rdColor;
}
public void setRdColor(String rdColor) {
this.rdColor = rdColor;
}
public String getLsColor() {
return lsColor;
}
public void setLsColor(String lsColor) {
this.lsColor = lsColor;
}
public List<TlSampleRow> getRowDatas() {
if (rowDatas == null) {
rowDatas = new ArrayList<TlSampleRow>();
for (int i = 0; i < 3; i++) {
rowDatas.add(new TlSampleRow());
}
}
return rowDatas;
}
public void setRowDatas(List<TlSampleRow> rowDatas) {
this.rowDatas = rowDatas;
}
}
(src/main/java/com/ziqoo/sbSample/web/form/TlSampleRow.java)
package com.ziqoo.sbSample.web.form;
public class TlSampleRow {
private String col1;
private String col2;
private String col3;
public String getCol1() {
return col1;
}
public void setCol1(String col1) {
this.col1 = col1;
}
public String getCol2() {
return col2;
}
public void setCol2(String col2) {
this.col2 = col2;
}
public String getCol3() {
return col3;
}
public void setCol3(String col3) {
this.col3 = col3;
}
}
2. コントローラクラスの作成 †
- コントローラクラスを作成する。
受け取った値をログに出力するだけ。値はそのまま返される。
(src/main/java/com/ziqoo/sbSample/web/TlSampleController.java)
package com.ziqoo.sbSample.web;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import com.ziqoo.sbSample.web.form.TlSampleForm;
import com.ziqoo.sbSample.web.form.TlSampleRow;
@Controller
public class TlSampleController {
private static final Logger log = LoggerFactory
.getLogger(TlSampleController.class);
@ModelAttribute("colorOptions")
public List<String> ckBoxList() {
List<String> list = new ArrayList<String>();
list.add("red");
list.add("green");
list.add("blue");
return list;
}
@RequestMapping("/tlSample")
public String tlSample(@ModelAttribute("form") TlSampleForm form) {
form.setMessage1("<h1>Thymeleaf サンプル</h1>");
form.setMessage2("Thymeleafを使用したサンプルです。");
form.setToday(Calendar.getInstance());
log.info("#########");
log.info("入力された氏名は "+form.getName());
log.info("選択されたチェックボックスは ");
for(String color: form.getCkColors()) {
log.info("\t"+color);
}
log.info("選択されたラジオボタンは "+form.getRdColor());
log.info("選択されたリストは "+form.getLsColor());
log.info("入力されたテーブルデータは");
for (TlSampleRow row : form.getRowDatas()) {
log.info("\t"+row.getCol1()+", "+row.getCol2()+", "+row.getCol3());
}
log.info("#########");
return "tlSample";
}
}
3. 画面の作成 †
- 画面を作成する。
(src/main/resources/templates/tlSample.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link th:href="@{/resources/css/base.css}" rel="stylesheet"
type="text/css" />
<title>Thymeleaf Sample</title>
</head>
<body>
<a th:href="@{/}">Topページ</a>
<div th:utext="${form.message1}"></div>
<hr />
<div th:text="${form.message2}"></div>
<div
th:text="'今日は' + ${#calendars.format(form.today,'yyyy/MM/dd')} + 'です。'"></div>
<br/>
<form th:action="@{/tlSample}" th:object="${form}" method="post">
氏名：<input type="text" th:field="*{name}" />
<br/><br/>
チェックボックス：
<ul>
<li th:each="color : ${colorOptions}">
<label th:for="${#ids.next('ckColors')}" th:text="${color}"></label>
<input type="checkbox" th:field="*{ckColors}" th:value="${color}" />
</li>
</ul>
ラジオボタン：
<ul>
<li th:each="color : ${colorOptions}">
<label th:for="${#ids.next('rdColor')}" th:text="${color}"></label>
<input type="radio" th:field="*{rdColor}" th:value="${color}" />
</li>
</ul>
リスト：
<select th:field="*{lsColor}">
<option th:each="color : ${colorOptions}"
th:value="${color}"
th:text="${color}"></option>
</select>
<br/><br/>
テーブル：
<table>
<tr>
<th>No.</th>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr th:each="row,rowStat : *{rowDatas}">
<td th:text="${rowStat.count}"></td>
<td><input type="text"
th:field="*{rowDatas[__${rowStat.index}__].col1}" /></td>
<td><input type="text"
th:field="*{rowDatas[__${rowStat.index}__].col2}" /></td>
<td><input type="text"
th:field="*{rowDatas[__${rowStat.index}__].col3}" /></td>
</tr>
</table>
<br/>
<input type="submit" value="送信" />
</form>
</body>
</html>
4. 実行結果 †
- 適当に値を入力して送信ボタンを押す。
(実行結果)
(ログ)
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : #########
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 入力された氏名は 名無 権兵衛
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 選択されたチェックボックスは
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : red
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : green
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 選択されたラジオボタンは green
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 選択されたリストは blue
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 入力されたテーブルデータは
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : あいうえお, かきくけこ, さしすせそ
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : ABCDE, FGHIJ, KLMNO
2015-03-20 19:25:38.312 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : 赤色, 青色, 黄色
2015-03-20 19:25:38.313 INFO 3632 --- [bio-8080-exec-6] c.ziqoo.sbSample.web.TlSampleController : #########
![[PukiWiki]](image/note_logo2.png "[PukiWiki]"){kind=logo}
sbtl-page2.png
sbtl-page1.png
