"BOKU"のITな日常

BOKUが勉強したり、考えたことを頭の整理を兼ねてまとめてます。

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

今回はtextareaを使った複数行のテキストの入力をやります。 

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

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

STS3(3.9.6)+SpringBoot2.0+Tymeleaf3.0迄動作確認しています。

f:id:arakan_no_boku:20190222012501j:plain

 

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の一部

 

最後に、実行してエラーがない場合に表示する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 を使う必要がるわけです。 

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

f:id:arakan_no_boku:20170316202752j:plain

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


 STS+Spring Boot +thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

f:id:arakan_no_boku:20170404203859j:plain