前回までで、HTMLとJavaを分けて構成しました。
その2つを繋ぐのがThymeleafといテンプレートエンジンです。
今回はタスクの追加機能と一覧機能の部分をThymeleafを使ってHTMLの箇所を作ります。
画面の構成は、下記を1ページ(1画面)にまとめたいと思います。
ファイル名「home.html」
・タスクを登録するための入力フォーム
・登録済みのタスクを一覧表示するテーブル
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>タスク管理アプリケーション</title>
</head>
<body>
<h1>タスク管理アプリケーション</h1>
<div class="task_form">
<h2>タスクの登録</h2>
<form action="/add">
<label>タスク</label>
<input name="task" type="text" />
<label>期限</label>
<input name="deadline" type="date" />
<input type="submit" value="登録" />
</form>
</div>
<div class="tasklist">
<h2>現在のタスクの一覧</h2>
<table border="1" style="border-collapse:collapse;">
<thead>
<tr><th class="hidden">ID</th><th>タスク</th><th>期限</th><th>状態</th></tr>
</thead>
<tbody>
<tr th:each="task :${taskList}">
<td class="hidden" th:text="${task.id}"></td>
<td th:text="${task.task}"></td>
<td width="100px" th:text="&{task.deadline}"></td>
<td width="50px" th:text="${task.done} ? '完了': '未完了'"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
ここから簡単に解説していきます。
■タスクを登録するための入力フォームについて
入力フォームの部分は通常のHTMLで、タスク名と期限を入力できるようになっています。
また、登録ボタンをクリックすると、サーバー側の/addのパスに対してGETメソッドで入力内容を送信をします。
div class="task_form"
⇒囲ったタグは一つのかたまりになります。
また、classで名前を指定することにより、他のdivとの区別ができるようになります。
form
⇒入力＆送信フォームを作成する際に使用する要素
form action=”リンク先”
⇒実行（サブミット）されたら指定されたリンク先に飛ぶ
label
⇒inputやtextareaなどの入力欄に対して説明をつけるために使います
主に「何を入力する欄なのか」が分かるように、テキストや画像を入れます
labelタグの使い方 - HTMLリファレンス
input name="task"
⇒name="task"により、そのinputタグの名前がtaskになります
サーバーへ送信したときに「task=掃除」のようにどの値が、どの入力欄に対応しているのか分かるようになります
input type="text"
⇒1行のテキスト入力欄を作るために使います
【HTML】inputタグの使い方・コンプリートガイド
input type="submit"
⇒フォームの実行ボタンを作成します
input value="登録"
⇒部品の初期値を設定(今回は登録というボタンが初期値になる)
■タスクを一覧表示するテーブルの部分について
プログラム内で生成したタスクに関する情報が、テンプレートエンジンによって挿入される箇所です。
そのため、2つの属性を使用しています。
th:each=”変数 : ${配列名}”
⇒今回の場合、${tasklist}の部分にプログラムからListオブジェクトが渡されると、
そのListに含まれている要素の数だけtrタグが生成されます(今回の要素の数は、タスク数になります)
Listそれぞれの要素のオブジェクトは、いったんtask変数に格納されます。Javaの拡張for文のような動きになります。
th:text
⇒この場合はtdタグの中身が属性値に指定された文字列に置き換わります。
属性値は${task.id}のような指定になっていますが、これはtaskオブジェクトのidフィールドの値を表します。
th:text="${task.done} ? '完了': '未完了'"
⇒Thymeleafでは、値の部分に条件式を書くことも可能です。Javaと同じ文法の3項演算子を使っています。
${task.done}がtrueであれば「:」の前の「完了」
${task.done}がfalseであれば「:」の後の「未完了」のいずれかの表示になります。
table border="1" style="border-collapse:collapse;"
⇒tableタグを使えば、表を作成することができます
⇒borderはテーブルに枠線を表示させることができます。
border属性に指定した数値が、テーブルの枠線の幅になります。
もし仮に、border属性を指定しなければ、枠線が消えます。
⇒border-collapse:collapseは枠線を１重線にしています。
特に何も指定しない限りは２重線になります。
thead
⇒ 表の中でヘッダー部分を表すタグです
theadタグとは？使い方やtbodyタグとtfootタグとの違いを解説 | ウェブカツBLOG
tbody
⇒テーブルの本体部分を表すタグです
HTMLのテーブルで使われるtbodyタグについて紹介 | ウェブカツBLOG
tr
⇒表の行を定義するための要素です
HTML tableタグを初心者向けに解説&便利な知識…｜Udemy メディア
td
⇒表のデータを入れるための要素です
HTML tableタグを初心者向けに解説&便利な知識…｜Udemy メディア