SE_BOKUのまとめノート的ブログ

SE_BOKUが知ってること・勉強したこと・考えたことetc

入力画面、チェックボックスを使う。STS3/Spring Boot/thymeleaf 

チェックボックスを配置した画面の処理をやります。 

チェックボックスを一つだけつける場合と、いくつか並べて複数選択を可能にする場合の両方をやってみます。

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

f:id:arakan_no_boku:20190222012501j:plain

 

前提

 

なお、前回までの画面にこの2つを追加する形でやるので、コントローラクラスとかは同じものを使い、変更点だけを書いていきます。 

例えば、実行ボタンを押したあとで呼ばれるコントローラクラスのメソッドなど、変更のないものについては書いていません。 

そちらの解説も必要な方はこちらの記事も一緒に見てください。

arakan-pgm-ai.hatenablog.com

  

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とかちゃんとしてないのでチェックと選択肢が間延びしてますけど、わかるから良しとさせてください。

f:id:arakan_no_boku:20170319203921j:plain

 

チェック結果を受け取る側の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をチェックしたものを受け取って画面に表示させる」と以下のようになります。

f:id:arakan_no_boku:20170319204838j:plain

一応、動きとしてはOKです。  

 


 STSSpring Boot+thymeleaf 関連記事

 

入力画面に関連する記事

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

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

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

 

f:id:arakan_no_boku:20170404203859j:plain