FrontPage > Spring Bootの覚書 > Spring Boot Thymeleaf

Thymeleaf formサンプル

入力した値をそのまま返すだけのサンプル画面を作成してみる。

(formサンプル画面)

sbtl-page1.png

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. 実行結果

  • 適当に値を入力して送信ボタンを押す。

    (実行結果)
    sbtl-page2.png

    (ログ)
    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  : #########
    
  • ブラウザに出力されるhtmlのソースは以下のようになる。

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="/sbSample/resources/css/base.css" />
    <title>Thymeleaf Sample</title>
    </head>
    <body>
      <a href="/sbSample/">Topページ</a>
      <div><h1>Thymeleaf サンプル</h1></div>
      <hr />
      <div>Thymeleafを使用したサンプルです。</div>
      <div>今日は2015/03/20です。</div>
      <br />
      <form method="post" action="/sbSample/tlSample">
        氏名:<input type="text" id="name" name="name" value="名無 権兵衛" />
      <br /><br />
      チェックボックス:
        <ul>
          <li>
            <label for="ckColors1">red</label>
            <input type="checkbox" value="red" id="ckColors1" name="ckColors" checked="checked" />
            <input type="hidden" name="_ckColors" value="on" />
          </li>
          <li>
            <label for="ckColors2">green</label>
            <input type="checkbox" value="green" id="ckColors2" name="ckColors" checked="checked" />
            <input type="hidden" name="_ckColors" value="on" />
          </li>
          <li>
            <label for="ckColors3">blue</label>
            <input type="checkbox" value="blue" id="ckColors3" name="ckColors" />
            <input type="hidden" name="_ckColors" value="on" />
          </li>
        </ul>
      ラジオボタン:
        <ul>
          <li>
            <label for="rdColor1">red</label>
            <input type="radio" value="red" id="rdColor1" name="rdColor" />
          </li>
          <li>
            <label for="rdColor2">green</label>
            <input type="radio" value="green" id="rdColor2" name="rdColor" checked="checked" />
          </li>
          <li>
            <label for="rdColor3">blue</label>
            <input type="radio" value="blue" id="rdColor3" name="rdColor" />
          </li>
        </ul>
      リスト:
        <select id="lsColor" name="lsColor">
          <option value="red">red</option>
          <option value="green">green</option>
          <option value="blue" selected="selected">blue</option>
        </select>
      <br /><br />
      テーブル:
        <table>
          <tr>
            <th>No.</th>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
          </tr>
          <tr>
            <td>1</td>
            <td><input type="text" id="rowDatas0.col1" name="rowDatas[0].col1" value="あいうえお" /></td>
            <td><input type="text" id="rowDatas0.col2" name="rowDatas[0].col2" value="かきくけこ" /></td>
            <td><input type="text" id="rowDatas0.col3" name="rowDatas[0].col3" value="さしすせそ" /></td>
          </tr>
          <tr>
            <td>2</td>
            <td><input type="text" id="rowDatas1.col1" name="rowDatas[1].col1" value="ABCDE" /></td>
            <td><input type="text" id="rowDatas1.col2" name="rowDatas[1].col2" value="FGHIJ" /></td>
            <td><input type="text" id="rowDatas1.col3" name="rowDatas[1].col3" value="KLMNO" /></td>
          </tr>
          <tr>
            <td>3</td>
            <td><input type="text" id="rowDatas2.col1" name="rowDatas[2].col1" value="赤色" /></td>
            <td><input type="text" id="rowDatas2.col2" name="rowDatas[2].col2" value="青色" /></td>
            <td><input type="text" id="rowDatas2.col3" name="rowDatas[2].col3" value="黄色" /></td>
          </tr>
        </table>
        <br />
        <input type="submit" value="送信" />
    
      <input type="hidden" name="_csrf" value="0ff93581-72b6-49c1-97d7-bb07e675f45e" /></form>
    </body>
    </html>
    




添付ファイル: filesbtl-page2.png 820件 [詳細] filesbtl-page1.png 1350件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-03-20 (金) 19:45:03 (945d)