SpringとThymeleafでの非表示の入力の使用
1. 序章
Thymeleaf は、Javaエコシステムで最も人気のあるテンプレートエンジンの1つです。 これにより、Javaアプリケーションのデータを簡単に使用してダイナミックHTMLページを作成できます。
このチュートリアルでは、SpringとThymeleafで非表示の入力を使用するいくつかの方法を見ていきます。
2. HTMLフォームを使用したThymeleaf
非表示フィールドの操作を検討する前に、一歩下がって、Thymeleafが一般的にHTMLフォームでどのように機能するかを見てみましょう。
最も一般的なユースケースは、アプリケーションでDTOに直接マップするHTMLフォームを使用することです。
たとえば、ブログアプリケーションを作成していて、単一のブログ投稿を表すDTOがあるとします。
class BlogDTO {
long id;
String title;
String body;
String category;
String author;
Date publishedDate;
}
HTMLフォームを使用して、ThymeleafとJavaを使用してこのDTOの新しいインスタンスを作成できます。
<form action="#" method="post" th:action="@{/blog}" th:object="${blog}">
<input type="text" th:field="*{title}">
<input type="text" th:field="*{category}">
<textarea th:field="*{body}"></textarea>
</form>
ブログ投稿DTOのフィールドは、HTMLフォームの単一の入力にマップされていることに注意してください。 これはほとんどの場合うまく機能しますが、編集できないフィールドはどれですか? これは、隠された入力が役立つ場合があります。
たとえば、各ブログ投稿には、ユーザーが編集できないようにする一意のIDフィールドがあります。 非表示の入力を使用して、IDフィールドを表示または編集せずにHTMLフォームに渡すことができます。
3. th:field属性の使用
非表示の入力に値を割り当てる最も簡単な方法は、 th:field属性を使用することです。
<input type="hidden" th:field="*{blogId}" id="blogId">
value属性を指定する必要がないため、これが最も簡単な方法ですが、古いバージョンのThymeleafではサポートされていない可能性があります。
4. th:attr属性の使用
Thymeleafで非表示の入力を使用できる次の方法は、組み込みの th:attr属性を使用することです。
<input type="hidden" th:value="${blog.id}" th:attr="name='blogId'"/>
この場合、blogオブジェクトを使用してidフィールドを参照する必要があります。
5. name属性の使用
もう1つのそれほど冗長でないアプローチは、標準のHTML name属性を使用することです。
<input type="hidden" th:value="${blog.id}" name="blogId" />
標準のHTML属性のみに依存しています。 この場合、blogオブジェクトを使用してidフィールドも参照する必要があります。
6. 結論
このチュートリアルでは、Thymeleafで非表示の入力を使用するいくつかの方法を確認しました。 これは、読み取り専用フィールドをDTOからHTMLフォームに渡すための便利な手法です。
いつものように、このチュートリアルで使用されているすべてのコード例は、Githubのにあります。