今回はtextareaを使った複数行のテキストの入力をやります。
同じテキストなのですが、複数行＝改行コードがはいるというだけで、単純にやるとうまくいきません。
今回は、その違う部分にしぼって書いていきます。
STS3(3.9.6）＋SpringBoot2.0＋Tymeleaf3.0迄動作確認しています。
Formクラス
名称は text01にしてます。今回はgetter、setterも書いてます。
private String text01;
public String getText01() {
if(text01 != null && !text01.isEmpty()){
return text01.replaceAll("\n", "<br/>");
}else{
return text01;
}
}public void setText01(String text01) {
this.text01 = text01;
}
ポイントは、getterで単純に項目を返せないところです。
改行コードを、<br/>に変換しておかないと、HTMLで正しく表示できません。
が、単純にreplaceAllをしかけると、初期表示時にNULL例外でエラーになってしまいます。
ということで、NULLチェックをして、NULLでない場合だけリプレースするようにしてます。
入力するHTML
<form>の th:object="${hello3Form}"で、Formクラスを指定して、<textarea>タグの中の th:field="*{text01}" >で、Formクラスの変数と紐付けてます。
<form role="form" action="/outpg01" th:action="@{/outpg01}" th:object="${hello3Form}" method="post">
<textarea th:field="*{text01}" ></textarea><br />
<span th:if="${#fields.hasErrors('text01')}" th:errors="*{text01}">error!</span><br />
<button type="submit">実行</button>
</form>
上記を含むHTMLの画面表示例です。
<textarea>は、一番下のテキストエリア部分にあたります。
コントローラクラス
こちらは前回とから変更はありません。
そちらの解説が必要な方は、こちらも参照ください。
エラーがない場合のHTMLの一部
最後に、実行してエラーがない場合に表示するHTMLの一部です。
<div th:object="${hello3Form}">
<p th:utext="*{text01}"></p>
</div>
th:object="${hello3Form}"で、Formクラスを指定して、text01の内容を表示しています。
ポイントはth:utext
<p th:utext="*{text01}"></p> の部分にポイントがあります。
th:utextとなっています。
テキストボックスの場合は、th:textでした。
実は、th:textで表示する時、<br/>のようなタグはエスケープされてしまって改行しません。
なので、エスケープしない th:utext を使う必要がるわけです。
これで実行すると、こんな感じです。
改行が正しく処理されていますね。
STS＋Spring Boot ＋thymeleaf 関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面：テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック：@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。（独自実装版）
データアクセス・その他に関連する記事
