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

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

あれこれ興味をもって考えたことを書いてます

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

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

 

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

 

 


 STS  3.8.3(Spring Boot 1.5.1)+thymeleaf 関連記事

 

入力画面に関連する記事

画像をSUBMITボタン代わりに使う

ラジオボタンとラジオボタングループを使う 

ラジオボタンとラジオボタングループを使う 

チェックボックスを使う。 

HTMLのタグの閉じ忘れで例外が発生する!

プルダウンリストとマルチセレクトボックスを使う。

今度はテキストエリアで複数行入力する。 

テキストボックスの入力と基本的なチェックを使う。

 

参照画面・画面遷移に関連する記事

参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。 

参照画面:条件に一致した時のみHTML要素を出力する。

セッションを使って画面間で情報を受け渡す 

画面遷移:GET時のリクエストパラメータを受け取る 

日本語しか使わなくても、i18N対応はする意味がある。

 

入力チェックに関連する記事

入力チェック:未入力時に空文字が渡される仕様を回避する。 

入力チェック:@Patternと正規表現で独自チェックする。

入力チェック:アノテーション定義を自分で作る。(再利用版)

入力チェック用アノテーション定義を自分で作る。(独自実装版)

入力チェック:複数項目の相関チェックアノテーションの作り方

 

データアクセス・その他に関連する記事

データアクセス:Jprepositoryを使って簡単にCRUDする。 

データアクセス:ネイティブなSQL文を実行する 

クラスパス内の静的ファイルにアクセスする 

SpringBootだとログの書き出しも楽ちんです。 

SpringBootプロジェクトでJUNIT4を使った単体テストをする。

 

f:id:arakan_no_boku:20170404203859j:plain