チェックボックスを配置した画面の処理をやります。
チェックボックスを一つだけつける場合と、いくつか並べて複数選択を可能にする場合の両方をやってみます。
STS3(3.9.6)+SpringBoot2.0+Tymeleaf3.0迄動作確認しています。
前提
なお、前回までの画面にこの2つを追加する形でやるので、コントローラクラスとかは同じものを使い、変更点だけを書いていきます。
例えば、実行ボタンを押したあとで呼ばれるコントローラクラスのメソッドなど、変更のないものについては書いていません。
そちらの解説も必要な方はこちらの記事も一緒に見てください。
Formクラス
チェックボックスも選択された値を受け取るのはString型です。
なので、複数受け取る可能性がある時は、Stringの配列になります。
単一選択の場合
@Pattern(regexp="checked") private String inputSingleCheck; public String getInputSingleCheck() { return inputSingleCheck; } public void setInputSingleCheck(String inputSingleCheck) { this.inputSingleCheck = inputSingleCheck; }
複数選択を受ける場合
private String[] inputMultiCheck; public String[] getInputMultiCheck() { return inputMultiCheck; } public void setInputMultiCheck(String[] inputMultiCheck) { this.inputMultiCheck = inputMultiCheck; }
注意点は単一選択の場合に、@Pattern(regexp="checked")というアノテーションをつけて受取文字列をチェックしている点です。
複数選択の場合は、選択肢として表示したキー文字列を返してくるのですが、単一選択の場合は選択された時にどの文字列を返すかを決めておく必要があります。
今回の場合は、チェックされたら"checked”という文字列を返すようにするということです。
コントローラクラス
単一選択しか使わない場合は、特に変更はいりません。
複数選択をする場合は、選択肢をおさめたMAPを生成して画面に渡してやる必要があります。
MAPを生成する部分です。
実際の処理だと、データベース等からデータを取得してセットするのですが、今回はサンプルなので決め打ちです。
private Map<String,String> getCheckBoxItems(){ Map<String, String> selectMap = new LinkedHashMap<String, String>(); selectMap.put("key_A", "チェックボックスの選択肢Aは、これですよ"); selectMap.put("key_B", "チェックボックスの選択肢Bは、これですよ"); selectMap.put("key_C", "チェックボックスの選択肢Cは、これですよ"); selectMap.put("key_D", "チェックボックスの選択肢Dは、これですよ"); selectMap.put("key_E", "チェックボックスの選択肢Eは、これですよ"); return selectMap; }
生成したMAPを画面に渡す部分です。
@RequestMapping(value = "/hello3", method = RequestMethod.GET)
public String index(Hello3Form form, Model model) {
model.addAttribute("checkboxItems",getCheckBoxItems());
return "hello3";
}
チェックボックスを表示する画面のHTML
単一のチェックボックスの場合
前にFormクラスで定義した受取文字列をvalue="checked"として設定しているのに注意してください。
これをしておかないと、チェックをつけても正しく認識されません。
<input type="checkbox" name="inputSingleCheck" value="checked" th:field="*{inputSingleCheck}" />
複数選択の場合
divタグでくくって、そこでコントローラクラスでMAPを渡すときに定義した名前(checkboxItems)をth:eachに渡して、選択肢を複数表示するループを回してます。
戻り値を受け取るFormの項目名は、th:field="*{inputMultiCheck}" で指定しています。
<div th:each="item : ${checkboxItems}"> <input type="checkbox" name="inputMultiCheck" th:value="${item.key}" th:text="${item.value}" th:field="*{inputMultiCheck}" /> </div>
表示したイメージ例です
動作確認だけが目的で、CSSとかちゃんとしてないのでチェックと選択肢が間延びしてますけど、わかるから良しとさせてください。
チェック結果を受け取る側のHTML
<div th:object="${hello3Form}">
<p class="msg" th:text="*{inputSingleCheck}"></p>
<p class="msg" th:each="checked : *{inputMultiCheck}" th:text="${checked}"></p>
</div>
上が単一選択の場合、下が複数選択の場合です。
複数選択の場合は、いくつ返ってくるかわからないので、th:eachで受けている点に注意してください。
thymeleafのチェックボックスは、チェックがついている項目の値(value または th:valueにセットした値)だけを返します。
なので。
上記で「単一選択分をチェックし、複数選択で、BとEをチェックしたものを受け取って画面に表示させる」と以下のようになります。
一応、動きとしてはOKです。
STS+Spring Boot+thymeleaf 関連記事
入力画面に関連する記事
参照画面・画面遷移に関連する記事
参照画面:テーブルを使い、行毎に色分けした一覧表を表示する。
入力チェックに関連する記事
入力チェック:@Patternと正規表現で独自チェックする。
入力チェック用アノテーション定義を自分で作る。(独自実装版)
データアクセス・その他に関連する記事
データアクセス:Jprepositoryを使って簡単にCRUDする。
SpringBootプロジェクトでJUNIT4を使った単体テストをする。