読者です 読者をやめる 読者になる 読者になる

アラカン"BOKU"のITな日常

人事評価と人工知能について考えたことがメインテーマです。

STS 3.8.3(Spring Boot 1.5.1)+thymeleaf 入力画面、今度はテキストエリアで複数行入力させる

Spring Boot入門 プログラミング

Spring Boot+thymeleafで、テキストボックスでの1行入力をやったので、今回はtextareaを使った複数行のテキストの入力をやります。

 

同じテキストなのですが、複数行=改行コードがはいるというだけで、単純にやるとうまくいきません。

 

今回は、その違う部分にしぼって書いていきます。

 

まず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>は、一番下のテキストエリア部分にあたります。

f:id:arakan_no_boku:20170316171524j:plain

 

コントローラクラスですが、こちらは前回とから変更はありません。そちらの解説が必要な方は、こちらも参照ください。 

arakan-pgm-ai.hatenablog.com

 

最後に、実行してエラーがない場合に表示するHTMLの一部です。

<div th:object="${hello3Form}">
    <p th:utext="*{text01}"></p>
</div>

 

th:object="${hello3Form}"で、Formクラスを指定して、text01の内容を表示しているのですが、<p th:utext="*{text01}"></p> の部分にポイントがあります。

 

th:utextとなっています。

 

テキストボックスの場合は、th:textでした。

 

実は、th:textで表示する時、<br/>のようなタグはエスケープされてしまって改行しません。

 

なので、エスケープしない th:utext を使う必要がるわけです。

 

これで実行すると、こんな感じです。

f:id:arakan_no_boku:20170316202752j:plain

 

改行が正しく処理されていますね。