Spring フレームワークのテンプレートエンジンとして人気の Thymeleaf の使用方法について、前回に引き続き解説をします。
今回の記事では、Thymeleaf のフォームバインディングについて解説していきます。
バインディングとは？
Thymeleaf におけるバインディングとは、入力項目と Java オブジェクトのプロパティを連結させることを指します。
フォーム・バインディングをすることで、サーバー側で設定した値をブラウザに表示したり、逆に、ユーザーがブラウザで入力した値をサーバー側に送信することが容易になります。
フォームのバインド
入力画面などの開発では、入力項目に対応するプロパティを持つフォームクラスを作成し、入力項目とフォームクラスのプロパティをマッピングさせる方法で開発します。
フォームクラスは、以下のように、シンプルな Plain Old Java Object (POJO) として作成し、ビジネスロジックなどの機能は持たせないようにします。
public class Todo {
private Integer taskId;
public Integer getTaskId() {
return this.taskId;
}
public Integer setTaskId(Integer taskId) {
return this.taskId = taskId;
}
...
}また、Thymeleaf のバインディングとは直接関係はしませんが、Lombok（ロンボック） のようなライブラリを使用することで、gettter、setter などを自動生成させて、冗長なコードを削減し、次のようなシンプルな形でフォームクラスを定義することも可能です。
@Data
public class Todo {
private Integer taskId;
//@Dataアノテーションにより、getter・setter は自動生成されるめ記述が不要
}タスクを登録する画面を作ってみよう
簡単なタスクを登録画面を作成し、Thymeleaf におけるフォーム・バインディングの方法について見ていきましょう。
フォームクラス
まずは、タスク入力画面に表示するフォームクラスの作成を行います。今回はタスク名と完了フラグ、期限の３つのプロパティを持つシンプルな構造とします。
public class TodoForm {
private String taskName; //タスク名
private Boolean completeed; //完了フラグ
private Date limit; //期限
//getter・setterの記載は省略
...
}ビュー（Thymeleaf テンプレート）
次にビューの部分となる Thymeleaf のテンプレート を作成します。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
</meta>
<title>タスクの登録</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body class="p-3">
<form method="post" th:action="@{/post}" th:object="${TaskForm}">
<div class="mb-3">
<label for="taskName" class="form-label">タスク</label>
<input type="text" class="form-control" th:field="*{taskName}" />
</div>
<div class="mb-3">
<label for="limit" class="form-label">期限</label>
<input type="date" class="form-control" th:field="*{limit}" />
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" th:field="*{completeed}">
<label class="form-check-label" for="completeed">
完了
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">登録</button>
</form>
</body>
</html>コントローラ
最後にコントローラを作成します。
画面の初期表示と、登録ボタンがクリックされ、POST が行われた時に呼ばれるメソッドの２つを作成します。
@Controller
public class TodoController {
@GetMapping(value = { "/", "" })
public String index(Model model) throws ParseException {
var form = new TodoForm();
form.setLimit(); //期限の初期値は本日＋５日にする
//画面を表示
model.addAttribute(form);
return "index";
}
@PostMapping
public void post(@ModelAttribute TodoForm todoForm) {
System.out.pringln(taskForm.getTaskName());
System.out.pringln(taskForm.getCompleteed());
System.out.pringln(taskForm.getLimit());
}
}今回は、Thymeleaf におけるフォーム・バインディングを解説する記事であるため、本来であれば、post メソッドで入力されたタスクをデータベースなどへ登録する処理が必要ですが、その部分の記載については省略しています。
まとめ
これで、Thymeleaf を使った簡単なフォーム・バインディングのサンプルコードは完成です。
デバッグで動かしてみて、フォームに入力した値が、コントロクラスの引数に設定されているか、確認してみましょう。
【関連記事】
▶Java のWEBアプリでセッションを利用する方法を解説
上で挙げたフォームクラスは、企業やプロジェクトの文化によって、モデルやビューモデルなどとも呼ばれたりしますが、入力項目に対応するプロパティを POJO クラスで持つという意味では、どれも同じです。